Peta dengan Zoom, Info, dan Search ( Flash )

map zoom Pada tutorial sebelumnya, kita telah membuat tombol zoom untuk memperbesar peta dan drag untuk menggeser peta. Sekarang saatnya menambahkan fitur lain yang tak kalah penting: keterangan area dan fungsi search.
Pada demo di atas, ada tambahan tiga fitur baru:
1. Objek dan keterangannya.
2. Search area.
3. Animasi penanda area hasil search.
Req: Flash 8

Tutorial sebelumnya tentang pemakaian virtual camera dan tombol zoom, serta file yang bisa didownload dapat dilihat di sini.

Membuat objek dan keterangan
Buat movieclip objek di dalam mc "map", tepat di atas areanya. Copy paste mc tersebut untuk posisi yang lain. Dalam demo di atas cuma ada 3 objek. Namakan "z1" .. "z3".
Buat mc keterangan, bentuknya bujur sangkar atau terserah sesuka Anda, dan letakkan di dalam mc "kamera", di atas layer "navmenu", di tengah stage. Namakan "info". Di dalamnya ada dynamic text "infot" untuk nama objek dan "infot2" untuk keterangan objek. Di antara dua dynamic text tersebut ada mc kosong bernama "gbr". Kita akan memuat gambar obyek di sana.

Buat layer actionscript di stage utama.
Masukkan kode untuk membuat mc "info" tidak kelihatan saat awal:
_root.kamera.info._visible=false;

Setelah itu, kita perlu membuat fungsi agar mouse kembali normal saat mouse rollover dan rollout di atas objek "z1"..."z3" seandainya kita sedang berada dalam mode zoom atau drag.
Kodenya sama dengan fungsi rollover dan rollout tombol navigasi.

Karena sama, kodenya kita sederhanakan menjadi fungsi tersendiri dengan nama "overmouse" dan "overout". Dengan begini, actionscriptnya adalah:

_root.map.z1.onRollOver=overmouse;
_root.map.z2.onRollOver=overmouse;
_root.map.z3.onRollOver=overmouse;
atau yg lebih singkat:

for (az=1; az<=3; az++) {
_root.map["z"+az].onRollOver=overmouse;
_root.map["z"+az].onRollOut=outmouse;
}
Saat mc "z1"..."z3" ditekan, mc "info" akan muncul kemudian keterangan obyek

function pressmouse() {
_root.kamera.info._visible=true;
_root.kamera.info.infot2.text="This house bla bla bla";
_root.zoomin=false;
_root.zoomout=false;
_root.dragme=false;
Mouse.show();
}
Jadi ketika area diklik akan muncul keterangannya, load fotonya:

_root.map.z1.onPress=function() {
pressmouse();
_root.kamera.info.infot.text="House#1";
_root.kamera.info.gbr.loadMovie("http://yourwebsite.com/flashfiles/image1.jpg");
}
Lakukan hal yang sama untuk button "z2" dan "z3" dengan informasi yang berbeda dan meload gambar berbeda.

Tentu kita perlu membuat pengunjung bisa menutup mc "info". Buat button "clos" di dalam mc "info". Dan tutup dengan actionscript ini:

_root.kamera.info.clos.onRelease=function() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.info._visible=false;
hilang();
Mouse.show();
}
Ada fungsi hilang() di dalam script di atas. Fungsi itu untuk menghilangkan penanda yang muncul setelah search.
Jangan lupa, buat mc "info" tidak kelihatan saat menekan tombol zoom dan drag. Tambahkan kode ini di script onrelease button navmenu.b1...b3:
_root.kamera.info._visible=false;

Preview.

Membuat searchNama area dan posisinya dalam stage kita masukkan ke dalam array.

area = new Array("block g", "block h", "block i");
posisix = new Array(500, 420, 180);
posisiy = new Array(150, 330, 170);

Untuk mengetahui posisi area di tengah swf, geser map lalu trace x, y mc tersebut. Jangan terkecoh dengan x, y pada properti mc. Dalam demo ini, posisi mc "map" di properti panel x=-92, y=-108. Ketika di trace x y "map" yang muncul adalah x=395, y=195.

Untuk mengetahui posisinya, buatlah 2 dynamic text dengan nama posX dan posY di root, lalu letakan script ini di root:
map.onEnterFrame=function() {
_root.posX.text="map x= "+map._x;
_root.posY.text="map y= "+map._y;
}
Pada demo di bawah ini, geser map sehingga posisi objek bertanda "X" merah ada di tengah stage dan lihat posisi x y map.

Jika angkanya desimal, bulatkan saja. Tidak usah terlalu perfeksionis. Nah sekarang Anda sudah punya koordinat x y map untuk masing-masing objek ketika berada di tengah. Masukkan ke dalam array "posisix" dan "posisiy". Kita membutuhkan fungsi untuk menggeser map ke posisi x y yang ada di array.

function gesermap(mc, waktu)
{
type = mx.transitions.easing.Strong.easeOut;
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, posisix[i], waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, posisiy[i], waktu, true);
}
Idenya, ketika nama area ditemukan, maka map akan bergeser posisinya sehingga area tersebut ada di tengah swf. Untuk itu kita perlu input text untuk mengisi nama area dan button search. Lalu kita buat fungsi untuk membandingkan teks di input text dengan elemen dalam array.
Buat mc "oksrc" berisi input text dan button "bsearch". Masukkan dalam mc "kamera" di atas layer "info". Berikut ini fungsi search, dari neilmmm, forum actionscript.org:

kamera.oksrc.bsearch.onRelease = function() {

_root.map["tanda"+i].gotoAndStop(1);

if (kamera.oksrc.input_txt.text != "") {

for (i=0; i<area.length; i++) {

trace(marker[i]);
if (area[i] == kamera.oksrc.input_txt.text.toLowerCase()) {
kamera.myinfo.text = "Found "+kamera.oksrc.input_txt.text;
_root.map["tanda"+i].gotoAndStop(2);
gesermap(map, 1);
break;
} else {
kamera.myinfo.text = "No data";
}
}
} else {
kamera.myinfo.text = "Please type something";
}
};

Dalam kode di atas ada script _root.map["tanda"+i].gotoAndStop(2); untuk mengontrol timeline animasi penanda yang akan dijelaskan kemudian, bersama fungsi hilang() sebelumnya.

Catatan tambahan, kita perlu membuat map kembali ke ukuran semula agar search dilakukan saat skala "map" 100%. Ini cara yang lebih mudah agar kita tidak perlu membuat script localtoglobal untuk mengarahkan x y map yang sedang dalam mode zoom. Caranya? Buat fungsi zoom2 dengan meng-copy paste fungsi zoom yang ada. Bedanya mc._xcale dan mc._yscale akhirnya diubah menjadi 100 atau 91. Dan letakkan fungsi zoom2() itu di dalam button search "dummy".
Idenya, ketika button search "dummy" ditekan, map akan berskala normal, mode zoom dan drag adalah false, klik direset menjadi 0 lagi, dan barulah input text dan button search muncul.
Scriptnya sederrhana:
kamera.oksrc._visible=true;
kamera.bsearch0._visible=false; // ini dummy search button
Membuat animasi penanda hasil search.Tidak perlu berkerut kening untuk meletakkan animasi penanda pada posisi area yang dicari. Ini mungkin cara yang remeh tapi membuat aplikasi peta Anda tampak keren.

Buat animasi tanda panah berkedap-kedip dengan gaya tradisional: frame 1 isi, frame 2 kosong. Masukkan animasi ini dalam mc yang diberi nama "tanda1" pada frame ke-2. Frame 1 biarkan kosong. kasih stop() di setiap frame. Copy paste "tanda1" dan namakan menjadi "tanda2" dan "tanda3". Letakkan di dekat objek area dalam peta.

Idenya sederhana: ketika area ditemukan, maka penanda akan ke frame 2 sehingga animasi tanda panah kedap-kedip muncul. Ketika tombol "bsearch" kembali ditekan untuk pencarian berikutnya, mc penanda akan ke fram 1 sehingga animasi lenyap. Itulah gunanya script:
_root.map["tanda"+i].gotoAndStop(1); dan _root.map["tanda"+i].gotoAndStop(2);pada kode search di atas.

Terakhir, kita juga perlu menghilangkan animasi penanda ketika tombol zoom dan drag ditekan. Buat fungsinya:

function hilang() {
kamera.myinfo.text = "";
for (sz=0; sz<=3; sz++) {
_root.map["tanda"+sz].gotoAndStop(1);
}
}
Lalu tambahkan fungsi itu pada script button "clos" dan button "b1"..."b3" di "navmenu" dan juga kembalikan dummy button. Jadinya akan seperti ini:

kamera.navmenu.b3.onRelease=function() {
...
kamera.oksrc._visible=false;
kamera.bsearch0._visible=true;hilang();}

Catatan:
Peta ini dibuat untuk menjawab pertanyaan seorang user di sebuah forum, jadi masih ada bagian yang perlu diperbaiki agar lebih sempurna.