30 Juni 2013

Peta Sederhana dengan XML

map zoomTUTORIAL APLIKASI MAP DENGAN XML + FUNGSI SEARCH
Requirement:
Flash CS4 dan Flash CS5, publish ke player 10
(Agar lebih aman, silakan convert ke Flash 8 dan CS3)
Actionscript 2
Basic File: map0.fla
DOWNLOAD DI SINI
File dasar tersebut sudah berisi aset-aset yang dibutuhkan.
virtual camera dan map
serta layer-layer actionscript.
Prinsip-prinsip dan batasan aplikasi ini:
- Metode zoom in/out memakai vcam (virtual camera, AS2 dari Sham Bangal yang dimodifikasi Bryan Heisey). Vcam akan mengambil alih stage dengan localtoglobal, jadi xy movie harus dilihat dari vcam. Karena itu semua aset yang tidak ingin ikut di-zoom atau drag harus dimasukkan dalam mc "kamera" di layer "vcam"
- Semua info akan diambil dari xml, termasuk nama dan koordinat lokasi dan peta.
- Fungsi-fungsi akan disederhanakan dengan memakai iterasi for loops, jadi biasakan melihat kode for (i = 1; i <= 3; i += 1) dst... i+=1 lebih cepat dibandingkan i++ (jika ada yang ingin tahu)
- Pada Flash CS5 (mungkin juga CS4?), dynamic text sebaikbya memakai device font, dalam hal ini "Sans", jika memakai jenis font lain, embed font-nya! Dalam file yg didownload, cek ulang apakah ada dynamic text yang terlewat tidak memakai font "SANS".
- Publish fullscreen melalui CS5 membuat input text disable (alasan Adobe: security. Damn). Hanya berfungsi fullscreen utk standalone
- Publish di player 9, AS2, melalui CS5 tidak akan membuat input text berfungsi

OPTIONAL
di layer "mouse", masukkan
map.onEnterFrame=function() {
Mouse.hide();
_root.kamera.koor.posX.text="map x= "+map._x;
_root.kamera.koor.posY.text="map y= "+map._y;
}

Jika fungsi ini tidak dipakai, jangan lupa dipindahkan Mouse.hide() ke layer "aszoom"
Ini optional karena fungsinya nanti untuk mengecek xy map sesuai letak area yang berisi info.

1. Membuat Pengganti Mouse dan Tool Zoom
Layer "vcam", mc "toolzom"
ada lima frame dengan stop():
1. custom cursor
2. zoom in cursor
3. zoom out cursor
4. drag cursor
5. empty cursor (ini bisa dibuang karena kita tidak akan memakainya, atau biarkan saja)

Di layer "mouse", tambahkan kode:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
_root.kamera.koor._visible = true;//optional
_root.kamera.garis._visible = true;//optional
_root.kamera.oksrc._visible=false;//menyembunyikan mc "search"
_root.kamera.navmenu._alpha = 25;// zoom transparant, jika diperlukan mengatur alpha navmenu
 
//ini kode inti
Mouse.hide();
kamera.onMouseMove = function()
{
//if(_root.zoomin || _root.zoomout || _root.dragme) {
 
this.toolzoom._x = this._xmouse;
this.toolzoom._y = this._ymouse;
updateAfterEvent();
//}
};
Kita membuat mouse menghilang dan menggantinya dengan custom cursor (toolzom frame 1).
kode: if(_root.zoomin || _root.zoomout || _root.dragme)
diperlukan jika (toolzom frame 1) adalah empty cursor.
Jadi karena di frame 1 adalah custom cursor, dengan sendirinya mouse sudah tergantikan

2. Membuat Fungsi Zoom In/Out dan Drag
Di layer "aszoom", masukkan kode:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
var klik = 0;
 
_root.zoomin = false;
_root.zoomout = false;
_root.dragme = false;
 
function zoom(mc, faktor, waktu)
{
type = mx.transitions.easing.Strong.easeOut;
 
besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, mc._xscale * faktor, waktu, true);
besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, mc._yscale * faktor, waktu, true);
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, _root._xmouse, waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, _root._ymouse, waktu, true);
}
 
map.indo.onRelease = function()
{
if (!dragme)
{
if (_root.zoomin && klik < 5)
{
zoom(kamera,0.5,1);
klik++;
}
if (_root.zoomout && klik > 0)
{
zoom(kamera,2,1);
klik--;
}
}
this.stopDrag();
 
};
 
map.indo.onPress = function()
{
if (dragme)
{
map.startDrag();
}
};
kode pada layer "zoom button":
 
 
for (i = 1; i <= 3; i += 1)
{
buttonmenu = _root.kamera.navmenu["b" + i];
buttonmenu.id = i;
 
buttonmenu.onRelease = function()
{
_root.kamera.papan._visible = false;// menhilangkan papan keterangan
_root.kamera.papan.gotoAndStop("fungsi");// mengfungsikan kembali button
_root.cursorMovieClip = true;
_root.kamera.oksrc._visible = false;// menghilangkan form search
_root.kamera.bsearch0._visible = true;// Memunculkan button search
_root.map["tanda" + i]._visible = false;//menghilangkan marker
if (this.id == 1)
{
_root.kamera.toolzoom.gotoAndStop(2);
_root.zoomin = true;
_root.zoomout = false;
_root.dragme = false;
}
if (this.id == 2)
{
_root.kamera.toolzoom.gotoAndStop(3);
_root.zoomout = true;
_root.zoomin = false;
_root.dragme = false;
}
if (this.id == 3)
{
_root.kamera.toolzoom.gotoAndStop(4);
_root.dragme = true;
_root.zoomin = false;
_root.zoomout = false;
}
updateAfterEvent();
};
 
buttonmenu.onRollOver = function()
{
_root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.navmenu._alpha = 100;// zoom transparant 100%
_root.cursorMovieClip = true;
};
 
buttonmenu.onRollOut = function()
{
_root.kamera.navmenu._alpha = 25;// zoom transparant 25%
tugelmode();
};
}
 
function tugelmode()
{
if (_root.zoomin)
{
_root.kamera.toolzoom.gotoAndStop(2);
}
else if (_root.zoomout)
{
_root.kamera.toolzoom.gotoAndStop(3);
}
else if (_root.dragme)
{
_root.kamera.toolzoom.gotoAndStop(4);
}
else if (_root.cursorMovieClip)
{
_root.kamera.toolzoom.gotoAndStop(1);
}
}


Kita memakai map.indo sebagai mc yang memicu fungsi zoom() saat di-press ketika tidak dalam dragmode.
Juga untuk drag, namun yang kita drag adalah mc "map" bukan "map.indo".
Fungsi iterasi di atas dan tugelmode() adalah penyederhanaan event release, rollover, dan rollout, untuk _root.kamera.navmenu.b1, _root.kamera.navmenu.b2, _root.kamera.navmenu.b3. Ini menggantikan 6 fungsi pada tutorial sebelumnya.
Hasilnya
http://nayzuko.com/flashfiles/map1.swf
3. Menggunakan XML untuk Info dan Marker
Di movie, layer "vcam" kita mempunyai mc "papan" yang akan menampung judul area di dynamic text "infot",
Gambar area di mc kosong "gbr" dan keterangan area di dynamic text "infot2". Ada mc "papanpt" dg dynamic text "nmpt" yg berfungsi sama seperti "infot". Ini optional.
Di file "map1.fla", kita juga mempunyai 5 area di map, yakni "z0", "z1"... "Z4". Jika menamainya mulai dari "z1" bukan "z0" maka nanti harus ada penyesuaian. Kita memulai dari angka 0 agar lebih mudah dan menyesuaikan dengan cara Flash menghitung.
Sekarang kita buat file xml yang berisi info 5 area, namakan "dataku.xml":
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?xml version="1.0" encoding= "UTF-8" ?>
 
<datagw>
 
<infogw
 
id="0"
judul="block g"
gambar="images/gbr0.jpg"
mapx="371"
mapy="220"
posx="-99"
posy="-21">Inilah rumah pertama</infogw>
 
<infogw
 
id="1"
judul="block h"
gambar="images/gbr1.jpg"
mapx="40"
mapy="-145"
posx="228"
posy="338">Inilah rumah Kedua </infogw>
 
<infogw
 
id="2"
judul="pt. lg"
gambar="images/gbr2.jpg"
mapx="396"
mapy="180"
posx="-121"
posy="17.5">Inilah rumah Ketiga</infogw>
 
<infogw
 
id="3"
judul="block i"
gambar="images/gbr3.jpg"
mapx="450"
mapy="167"
posx="-175"
posy="32">Inilah rumah Keempat</infogw>
 
<infogw
 
id="4"
judul="pt. anu"
gambar="images/gbr2.jpg"
mapx="464"
mapy="197"
posx="-190"
posy="4">Inilah rumah Kelima</infogw>
 
 
</datagw>
Nodes "id" optional. Siapa tahu nanti berguna. Sediakan folder "images" di tempat yg sama dengan "map1.swf", isinya 5 gambar sesuai isi xml.
Mapx, mapy adalah koordinat xy map saat area berada di tengah stage. Cek dengan menggunakan drag cursor. geser map sehingga area di tengah dan catat xy-nya.
Inilah gunanya kode "OPTIONAL" sebelumnya. Buang kode ini dan mc "koor", mc "garis" jika aplikasinya sudah final.

Posx, posy adalah koordinat xy area (z0...z5), cek langsung di flash, di property x y.

Node text berisi keterangan area, misalnya "iniah rumah pertama bla bla bla". Jangan lupa dynamic text memakai device font atau embed font-nya.

4. LOAD DAN KONTROL ISI XML
Di layer "munculnya info" isi kode ini:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
posisix=[];
posisiy=[];
areamap=[];
 
var myXML:XML = new XML();
myXML.ignoreWhite=true;
myXML.load("dataku.xml");
myXML.onLoad = function(success) {
if (success) {
 
var mydata = myXML.firstChild.childNodes;
 
for(i=0; i<mydata.length; i+=1){
 
showInfo(mydata[i]);
posisix[i]=mydata[i].attributes.mapx;
posisiy[i]=mydata[i].attributes.mapy;
areamap[i]=mydata[i].attributes.judul; 
}
 
} else {
pesan.text="gagal";
}
};
 
 
_root.kamera.papan._visible=false;
 
function showInfo(dataxml) {
 
var judul=dataxml.attributes.judul;
var isi=dataxml.firstChild.nodeValue;
var gambar=dataxml.attributes.gambar;
var posx=dataxml.attributes.posx;
var posy=dataxml.attributes.posy;
var no=i;
var area=_root.map["z"+no];
 
map.attachMovie("tanda", "tanda"+no, 500+i);
var marker=_root.map["tanda"+no];
 
marker._x=posx;
marker._y=posy;
marker.infopt.text=judul;
marker._visible=false;
 
area.onPress=function(){
trace(this);
_root.kamera.papan.gotoAndStop("tkfungsi");
_root.kamera.papan.infot.text=judul;
_root.kamera.papan.infot2.text=isi;
_root.kamera.papan.gbr.loadMovie(gambar);
_root.kamera.papan._visible=true;
_root.zoomin=false;
_root.zoomout=false;
_root.dragme=false;
_root.kamera.toolzoom.gotoAndStop(1);
_root.map["tanda"+i]._visible=false;
}
// roll over button balik semula
area.onRollOver=function() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.papanpt.nmpt.text=judul;
}
area.onRollOut=function() {
_root.kamera.papanpt.nmpt.text=""; // teks kosong
tugelmode();   
 
}
//end for
 
};
_root.kamera.papan.clos.onRelease=function() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.kamera.papan._visible=false;
_root.kamera.papan.gotoAndStop("fungsi");
}

Pertama kita membuat array untuk menampung posisi map, yakni posisix=[]; dan posisiy=[]; serta nama area di areamap=[];
Pada file lama, array ini namanya "area". dijadikan "areamap" agar tidak bingung atau berpotensi konflik dengan area sebagai wakil mc lokasi (_root.map["z"+no]).

Objek XML kita adalah myXML. Sedangkan "var mydata = myXML.firstChild.childNodes;" adalah variabel array yang mewakili setiap nodes secara berurutan dalam dataku.xml.
Jadi node pertama atau "mydata[0]" adalah

<infogw

id="0"
judul="block g"
gambar="images/gbr0.jpg"
mapx="371"
mapy="220"
posx="-99"
posy="-21">Inilah rumah pertama</infogw>

Begitu seterusnya.

Artinya, jika kita ingin mengakses judul dan posx dalam nodes urutan 3 (atau mydata[2]):
mydata[2].attributes.judul;
mydata[2].attributes.posx;

Untuk memudahkan pengkodean, kita membuat fungsi showInfo() yang menampung setiap isi array mydata.

Kita cukup mendefinisikan variabelnya sekali:

var judul=dataxml.attributes.judul;
var isi=dataxml.firstChild.nodeValue;
var gambar=dataxml.attributes.gambar;
var posx=dataxml.attributes.posx;

Dengan showInfo(mydata[i]), kita meminta Flash melakukan berulang kali sebanyak isi array. Jika kita tidak memakai atribut, maka path xml-nya adalah:
var isi=dataxml.firstChild.nodeValue;
Sedikit tentang struktur xml dalam "dataku.xml":

<datagw>
<infogw attibut="">teks
</infogw>
<infogw attibut="">teks
</infogw>
...
<infogw attibut="">teks
</infogw>
</datagw>

Untuk mengakses node teksnya:
myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue
...
myXML.childNodes[0].childNodes[4].childNodes[0].nodeValue

Jika tidak ingin memakai atribut (attribute wajib pakai tanda kutip) dan mengubah strukturnya menjadi begini:

<datagw>

<judul>Inilah rumah pertama</judul>

<gbr>images/gbr0.jpg </gbr>

<infogw>Bla bla 1</infogw>

</datagw>

<datagw>

<judul>Inilah rumah kedua</judul>

<gbr>images/gbr1.jpg</gbr>

<infogw>Bla bla 2</infogw>

</datagw>

Maka untuk mengakses "judul" dan "gbr" (images/gbr0.jpg):

myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue; // ini judul
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue; // ini gambar
myXML.childNodes[0].childNodes[2].childNodes[0].nodeValue; // ini infogw
{/code}
Nodevalue "judul" di node yang kedua (rumah kedua):
{code}myXML.childNodes[1].childNodes[0].childNodes[0].nodeValue; // output "Inilah rumah kedua"
...
myXML.childNodes[4].childNodes[0].childNodes[0].nodeValue; // utk node ke-5

Damn, jalan melingkar. LoadVars jauh lebih mudah dan efektif.

Selanjutnya...

Ada kode:

var no=i;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+no, 500+i);
var marker=_root.map["tanda"+no];

"no" di sini sama dengan "i" karena semua nama mc kita sudah mulai dengan "0"
karena "mydata" adalah array yang dimulai dengan "0"

Seandainya sudah kebablasan memulai nama areanya tidak dengan angka 0, misalnya map.z1, map.z2...map.z114
buat "no=i+1"

var no=i+1;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+i, 500+i);
var marker=_root.map["tanda"+i];

Dengan begitu, kita tetap bisa mengontorl map.z1 dst sementara "tanda" adalah linkage id bagi mc "petunjuk lokasi" yang ada di library, tidak ada di stage.
jadi, untuk "tanda" kita memakai iterasinya tetap dengan "i", bukan "no".

Oke, done utk XML.
Tidak perlu preview swf dan download .fla karena movienya pasti jalan.
***
5. FUNGSI SEARCH DAN PENANDA (MARKER)
Berbeda dari fungsi search sebelumnya, di sini kita akan membuat fungsinya terpisah dari fungsi onRelease button.
Karena kita akan menambahkan search dengan menekan "Enter" selain menekan tombol. Sebelum itu, kita harus membuat map kembali ke skala dan posisi awal dengan fungsi zoom2(). Skala awal ditentukan oleh skala vcam 100% dengan xy 275, 200. Posisi awal map, seperti bisa dicatat, xy-nya 271.85 dan 126.7.
Tambahkan kode ini di layer "aszoom":
?
1
2
3
4
5
6
7
8
9
10
function zoom2(mc, waktu)
{
type = mx.transitions.easing.Elastic.easeOut;
besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, 100, waktu, true);
besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, 100, waktu, true);
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, 275, waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, 200, waktu, true);
gesermapx = new mx.transitions.Tween(_root.map, "_x", type, _root.map._x, 271.85, waktu, true);
gesermapy = new mx.transitions.Tween(_root.map, "_y", type, _root.map._y, 126.7, waktu, true);
}
Pemicu zoom2 ada di mc "kamera.bsearch0". Ini dummy button, tujuan utk membuat skala kembali ke awal dengan zoom2(); lalu memunculkan input_text dan button search sungguhan.
Kodenya letakkan di "as search":
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
kamera.oksrc._visible=false;//ini mc search yang asli yang disembunyikan dulu
 
kamera.bsearch0.onRelease = function() {
kamera.oksrc._visible=true;//mc seacrh asli muncul
kamera.oksrc.warn._visible=true;//teks petunjuk
kamera.bsearch0._visible=false;//mc dummy lenyap
_root.zoomin=false;
_root.zoomout=false;
_root.dragme=false;
zoom2(kamera, 1);//kembalikan ke skala dan klik awal
klik=0;
_root.kamera.toolzoom.gotoAndStop(1);
}
 
kamera.bsearch0.onRollOver=function() {
_root.kamera.toolzoom.gotoAndStop(1);
}
kamera.bsearch0.onRollOut=function() {
tugelmode();
}

Ketika mc "kamera.bsearch0" rollOver, custom mouse muncul utk menghilangkan ikon zoomin/out atau drag
saat rollout, tugelmode() utk mengembalikan mode yg aktif.
Setelah diklik akan muncul button search asli yakni "kamera.oksrc.bsrc". Jalankan fungsi cari(); saat diklik.
Ini pemisahan fungsi yang ada sebelumnya (jika kamu punya file yang lama).

kamera.oksrc.bsrc.onRelease = function() {
cari();
};

Berikut fungsi cari(); di layer "as search" juga:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function cari() {
_root.kamera.toolzoom.gotoAndStop(1);
_root.map["tanda"+i]._visible=false;//sembunyikan marker untuk pencarian berikutnya
_root.kamera.oksrc.warn._visible=false;
if (kamera.oksrc.input_txt.text != "") {
 
for (i=0; i<areamap.length; i++) {
 
if (areamap[i] == kamera.oksrc.input_txt.text.toLowerCase()) {
kamera.myinfo.text = "Found "+kamera.oksrc.input_txt.text;
_root.map["tanda"+i]._visible=true;
gesermap(map, 1);
kamera.oksrc.input_txt.text="";
_root.kamera.garis._visible = false;
break;
} else {
kamera.myinfo.text = "No data";
}
} //end for
} else {
kamera.myinfo.text = "Please type something";
} //end if else result
} //end cari

Fungsi cari() akan mengecek apakah input text berisi, jika berisi apakah isinya sama dengan salah satu elemen di "areamap". Jika iya, geser mapnya menuju lokasi di elemen urutan yang sama di array posisix dan posisiy dengan geserpmap(); Lalu munculkan marker (tanda) yang posisinya sudah kita atur melalui xml, kosongkan isi input text dan hilangkan mc "garis" optional. break. (artinya kalau sudah ketemu, loop dihentikan).

Ini fungsi gesermap() di layer yang sama.

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);
}
Done.
Jika ingin membuat fungsi cari(); juga dijalankan dengan menekan tombol Enter, masukkan kode ini di layer yang sama:

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if(Key.isDown(Key.ENTER)) {
cari();
}
}
Key.addListener(keyListener);


Download Final FLA

0 komentar:

Poskan Komentar

Silahkan TInggalkan Komentar Anda di Blog Saya..
No SPAM and No PORN...
Terimakasih Telah meninggalkan Jejak Anda

Related Posts Plugin for WordPress, Blogger...
Award Pertama
Photobucket
Langganan Artikel Si Boersan :

Enter your email address:

Delivered by FeedBurner

Monggo Di Copy Linknya :
Text Link

Banner Link

Komunitas Blogger Indonesia Komunitas Blogwalking