Membuat Peta Digital dengan Flash MX

Sesuai dengan permintaan tentang cara membuat peta digital dengan flash di komentar posting tentang peta surabaya, akhirnya jadilah program darurat ini. Bagi yang pernah mempelajari GIS (Geoghraphical Information System), pasti punya pandangan lain seputar "peta digital". Sedangkan program ini cuma untuk memberikan gambaran dan pencerahan betapa mudahnya membuat sebuah peta digital dengan menggunakan flash. Ngga sampe sejam kok. Tutorial ini menggunakan Macromedia Flash MX, bukan Flash 5 yang terlalu sederhana, dan juga bukan Flash 2004 keatas yang begitu rumit. Fungsi utama yang sudah ada disini berupa navigasi, zooming, dragging, dan jump to location. Tentang penjelasan langkah pembuatan, dengan begitu begitu banyaknya langkah yang harus dilakukan dan peletakkan action script, yang entah dimana saja ada, Tentu tidak bisa dijelaskan dengan cara konvensional, "klik sana dan open sini dan selanjutnya gini gitu" TM. Yang penting adalah langkah dasar yang harus dilakukan, mempelajari script dalam file FLA secara langsung, setelah itu tinggal dikembangkan sendiri secara langsung. Tentu dengan asumsi dasar sudah bisa caranya membuka file FLA. Gunakan kolom komentar untuk pertanyaan lanjutan.

Langkah dasar:
- Siapkan semua bahan: gambar peta, library tombol, suara, dan multimedia item lainnya yang akan dipakai.
- Buat Dokumen flash sesuaikan dengan ukuran gambar peta. Untuk contoh ini punya ukuran 1000x600 px dengan satu scene, dua layer, dan satu frameset.
- Tambahkan peta ke layer satu dan komponen lainnya ke layer 2.
- Buat semua komponen movie clip dan button yang dibutuhkan: Peta, Tombol Navigasi, Tombol Zoom, Text keterangan.
- Pastikan untuk memberi nama semua komponen dengan nama yang unik. Nama inilah yang akan dipanggil melalui action script.
- Tambahkan action script yang dibutuhkan di frame. Script ini berjalan secara global. Skrip ini untuk dragging mouse.
- Tambahkan script untuk setiap komponen tombol yang dibutuhkan. setiap komponen mempunyai script sesuai dengan event yang dijalankan.
- Untuk membuat jump to location, Buat daftar tempatnya, masukkan dalam listbox. Tandai semua lokasi sesuai dengan list dengan sebuah symbol, jangan lupa beri nama. Kemudian Tempatkan script-nya di frame 1. Ubah warna symbol penanda lokasi dengan warna background / putih agar tidak kelihatan.
- Untuk Dragging, tempatkan scriptnya di object peta.
- Gunakan Window, Movie Explorer untuk melihat semua komponen beserta semua script yang sudah ada.
- Coba jalankan, Gunakan perintah publish untuk membuat hasil berupa swf dan exe projector.

Gampang Khan?
Pikiran Anda pasti terlalu kreatif untuk bisa puas dengan cuma hasil segini. Jadi, kembangkan saja sesuai imajinasi dan berbagilah.


Script:

Scene 1
actions for frame 1
_global.w = 401;
_global.h = 301;
_root.L.setChangeHandler("myHandler");
function myHandler(component) { // Untuk Jump to Location
MAPS._width =800;
MAPS._height = 600;
if (_root.L.getSelectedIndex() == 0) {
_root.MAPS._x = _root.MAPS._width-_root.facebook._x;
_root.MAPS._y = _root.MAPS._height-_root.facebook._y;
} else if (_root.L.getSelectedIndex() == 1) {
_root.MAPS._x = _root.MAPS._width-_root.friendster._x;
_root.MAPS._y = _root.MAPS._height-_root.friendster._y;
} else if (_root.L.getSelectedIndex() == 2) {
_root.MAPS._x = _root.MAPS._width-_root.youtube._x;
_root.MAPS._y = _root.MAPS._height-_root.youtube._y;
} else if (_root.L.getSelectedIndex() == 3) {
_root.MAPS._x = _root.MAPS._width-_root.WINDOWS._x;
_root.MAPS._y = _root.MAPS._height-_root.WINDOWS._y;
} else if (_root.L.getSelectedIndex() == 4) {
_root.MAPS._x = _root.MAPS._width-_root.yahoo._x;
_root.MAPS._y = _root.MAPS._height-_root.yahoo._y;
} else if (_root.L.getSelectedIndex() == 5) {
_root.MAPS._x = _root.MAPS._width-_root.blog._x;
_root.MAPS._y = _root.MAPS._height-_root.blog._y;
} else if (_root.L.getSelectedIndex() == 6) {
_root.MAPS._x = _root.MAPS._width-_root.irc._x;
_root.MAPS._y = _root.MAPS._height-_root.irc._y;
} else if (_root.L.getSelectedIndex() == 7) {
_root.MAPS._x = _root.MAPS._width-_root.wikipedia._x;
_root.MAPS._y = _root.MAPS._height-_root.wikipedia._y;
} else if (_root.L.getSelectedIndex() == 8) {
_root.MAPS._x = _root.MAPS._width-_root.myspace._x;
_root.MAPS._y = _root.MAPS._height-_root.myspace._y;
}
}
actions for Zoom Out
on (release) {
MAPS._width += 15;;
MAPS._height += 15;;
}
actions for Zoom In
on (release) {
MAPS._width -= 15;;
MAPS._height -= 15;;
}
actions for Center
on (release) {
MAPS._x = MAPS.center._x + _global.w;
MAPS._y = MAPS.center._y + _global.h;
}
actions for Right
on (release) {
MAPS._x += 15;
}
actions for Left
on (release) {
MAPS._x -= 15;
}
actions for Left
on (release) {
MAPS._y -= 15;
}
actions for Right
on (release) {
MAPS._y += 15;
}
actions for Reset Zoom
on (release) {
MAPS._width =800;
MAPS._height = 600;
}
actions for maps
onClipEvent (load) { Untuk Dragging
_root.MAPS.onMouseDown = function() {
startDrag(_root.MAPS);
};
_root.MAPS.onMouseUp = function() {
stopDrag();
};
}



{Satu hutang selesai! masih ada hutang ajax, ireport, java, C, .NET + Pikiran liar sendiri. Kok ngga abis-abis yah?}
{Info tambahan, apabila melakukan google image search dengan keyword "peta surabaya", blog ini selalu ada di halaman pertama, malah kadang paling atas.}

Download om4gus' Online Map v1 + FLA Source ( Without Jump to Location )
Download om4gus' Online Map v2 + FLA Source ( Full Version )