penyusunanpetainteraktifdenganadobeflash

SW Blackjack http://Widyantara.web.id

PENYUSUNAN PETA INETRAKTIF DENGAN ADOBE FLASH

http://widyantara.web.id

1. Menyusun Desain Layout Peta pada Adobe Flash.

Pembuatan struktur desain dasar layout peta meliputi desain bentuk / form dan tata letak unsur-

unsur yang ada di dalam peta, misalnya letak judul peta, arah orientasi peta, legenda peta, letak

koordinat peta, ukuran jendela yang menampilkan peta, serta letak tombol navigasi. Kerangka

dasar layout peta yang saya rancang dan saya gunakan sebagai berikut :

Gambar 3.7. Visualisasi kerangka awal layout dan komponen peta

Keterangan :

1. Judul Peta.

2. Orientasi Peta

3. Tombol navigasi menuju obyek wisata.

4.Tombol untuk menuju ke tombol navigasi obyek wisata selanjutnya.

5.Tombol untuk menuju ke tombol navigasi obyek wisata sebelumnya.

6. Tombol Kategori obyek wisata.

7. Koordinat Peta

8. Tombol zoom in.

9. Tombol zoom Oout.

10. Tombol reset map.

11. Skala peta

12. Layar Peta

13. Tombol Informasi.

14. Tombol legenda.

12

13

3

6

7 11

2

9 1 8

4 5

14 15 16

1


15. Tombol about.

16. Tombol Keluar.

2. Membuat Layer dan Mengatur Frame

Pembuatan layer disesuaikan dengan komponen yang akan dibuat pada peta interaktif

tersebut. Langkah untuk membuat layer yaitu dengan cara klik instert timeline kemudian

memilih layer.

Gambar 1.1. Visualisasi langkah pembuatan layer dan frame

Pengaturan frame terdiri dari penentuan frame, keyframe ataupun blank keyframe.

Langkah untuk memasukkan frame yaitu dengan cara klik inserttimeline frame atau dapat

juga dengan menekan tombol F5, sedangkan untuk membuat keyframe dengan cara klik insert

timeline keyframe atau dapat juga menekan tombol F6 pada keyboard, dan untuk membuat

blank keyframe dengan cara klik insert timeline blank keyframe atau juga dengan menekan

tombol F7 pada keyboard.


Gambar 1.2 Visualisasi pembuatan layer dan frame pada peta

3. Menampilkan Peta Dasar

1. Memposisikan layer yang akan menampung peta yang diimpor pada layer peta.

Gambar 1.3. Visualisasi layer peta dasar

2. Mengimpor peta dasar dalam format *.ai. Klik file import import to stage. Peta yang

diimpor memiliki ukuran dengan lebar dan tinggi sebesar 1544,6 x 1207,9 pixel. Obyek

jalan, Kecamatan, sungai, dll pada peta yang diimpor masih bersifat terpisah dan sudah

dalam format Movie Clip.

3. Menuliskan instance name pada setiap obyek Movie Clip pada peta, misalnya jalan,

kecamatan, toponimi, dan lain sebagainya.

4. Melakukan konversi peta dalam format movie dengan cara klik maps cara convert to

symbol memilih movieclip. Memberikan nama pada instance name dengan nama

maps.

5. Mengubah setiap titik obyek wisata yang ada peta menjadi symbol. Klik double peta

klik kanan pada pada titik obyek wisata yang akan dikonversi, kemudian memilih


convert to symbol memilih tipe symbol kemudian klik OK. Tujuan dari konversi

titik obyek wisata dalam peta dari format shape/bentuk menjadi format simbol agar dapat

menjadi dihubungkan dengan jendela informasi ketika peta dieksekusi.

4. Membuat Animasi Target

Animasi target merupakan obyek animasi yang berfungsi sebagai tanda pembidik pada

obyek wisata yang dituju.Proses pembuatan dilakuakan dengan membuat obyek lingkaran di

tengah layar monitor peta menggunakan oval tool pada layer target yang telah dibuat

mengkonversi obyek ke dalam movieclip dengan cara klik kanan obyek kemudian memilih

convert to symbol memilih tipe movieclip, selanjutnya klik dua kali obyek yang telah

dikonversi ke dalam movieclip membuat ukuran yang besar pada frame 1 sampai 20,

kemudian mengubah ukuran menjadi lebih kecil pada frame 21 sampai 35, serta pada frame 36

dan 37 diisi sama dengan bentuk yang ada di frame 1 sampai 20 blok semua frame kemudian

klik kanan pilih create shape tween untuk membuat animasi dari bentuk yang telah dibuat.

Gambar 1.5. Visualisasi layer dan frame pembuatan animasi target

4. Membuat Drag Window

Drag window merupakan jendela yang dapat digunakan untuk menggeser peta sesuai dengan

arah yang dikehendaki. Proses pembuatan draw window dibuat membuat bentuk persegi sesuai

dengan ukuran jendela peta dengan menggunakan rectangle tool yang kemudian di konversi

dalam format movieclip, selanjutnya mengatur warna menjadi transparan dengan mengubah nilai

alpha pada color effect menjadi 0%, tujuannya agar drag window ini tidak menutupi atau

mengahalangi visualiasi peta dasar.

Gambar 1.6. Pengaturan obyek menjadi transparan


Menuliskan action script pada drag window dengan cara klik kanan pada obyek drag

window memilih action, selanjutnya mengisikan action script.

Gambar 1.7. Script pembuatan drag window

Action script tersebut menjelaskan bahwa proses drag akan bekerja ketika layar drag window

ditekan kemudian ditahan selanjutnya dapat digeser sesuai dengan keinginan yang ditandai

dengan script on(press) dengan target adalah peta yang ditandai dengan script _root.maps,

sedangkan proses pergeseran peta akan berhenti ketika mouse yang ditahan dilepaskan,proses ini

ditandai dengan script on(release) {stopDrag () ;}. Ketika proses drag dijalankan terjadi proses

disembunyikannya obyek movieclip target yang merupakan obyek animasi yang menjadi tanda

untuk membidik obyek wisata yang dicari.

5. Membuat Menu Kategori Obyek Wisata

Menu kategori merupakan menu untuk membedakan obyek wisata berdasar kategori yang

dibuat yang terdiri dari kategori wisata edukasi, wisata budaya dan sejarah, wisata kuliner, wisata

belanja dan kategori lain. Penggunaan menu kategori obyek wisata ini apabila di lakukan klik

pada salah satu tombol kategori maka akan langsung menampilkan tombol navigasi yang

merupakan kategori yang telah dipilih tersebut. Langkah langkah dalam pembuatan menu

kategori adalah :

1. Membuat layer folder dengan cara klik instert timeline pilih layer folder, kemudian

mngubah nama layer folder menjadi kategori wisata.

2. Menambahkan layer di dalam layer folder yang terdiri dari layer untuk judul nama

kategori, layer script, layer kategori wisata edukasi, wisata budaya dan sejarah, wisata

belanja, wisata kuliner, dan untuk kategori lain.

3. Menuliskan script stop(); pada layer script untuk menghentikan pergerakan setiap frame

pada timeline.


4. Mengatur keyframe pada setiap layer agar tidak terjadi tumpang tindih antar tombol

navigasi pad setiap layer.

Gambar 1.8. Visualisasi susunan layer pada folder layer kategori wisata

5. Membuat tombol kategori dengan menggunakan oval tool yang dikonversi ke dalam

tombol dengan cara klik obyek kemudian klik F8, selanjutnya mengubah tipe menjadi

button, sedangkan untuk member label nama kategori menggunakan text tool dengan tipe

static text.

6. Membuat Tombol Navigasi Obyek Wisata

Tombol navigasi obyek wisata ini merupakan jalan pintas / shortcut untuk menuju titik obyek

wisata. Tombol navigasi ini disesuaikan dengan masing-masing nama obyek wisata yang ada.

Peran dari tombol navigasi obyek wisata ini ketika dilakukan klik pada tombol ini, maka secara

otomatis akan menampilkan titik obyek wisata yang dicari, obyek wisata ini akan diperbesar

dengan skala 1 : 6400 dan terlihat berada di dalam animasi target. Langkah-langkah

pembuatan tombol navigasi obyek wisata ini sebagai berikut :

1. Membuat desain tombol obyek wisata dengan menggunakan oval tool dan rectangle,

untuk memberikan warna yang lebih pemberian warna dilakukan secara gradasi tipe

radial,kemudian mengatur pola gradasi menggunakan tool gradient transform.

2. Melakukan duplikasi terhadap desain simbol yang masih dalam format shape,tujuannya

agar tombol navigasi setiap obyek wisata tetap sama dan juga tidak menghemat waktu

karena tidak perlu membuat baru untuk setiap obyek wisata.

3. Menambah nama obyek wisata di atas tombol sesuai dengan hasil klasifikasi jenis

kategori obyek wisata.


4. Blok desain tombol dan nama obyek klik kanan dan pilih convert to symbol

memilih tipe berupa button klik OK. Proses konversi dari graphic ke dalam tipe

button/tombol ini dilakukan satu persatu pada setiap tombol dan nama obyek wisata.

5. Mengisikan action script pada tombol navigasi setiap obyek wisata dengan cara klik pada

tombol /button yang akan dimasukkan actionscript klik kanan pilih action.

Gambar 1.9. Script pada tombol navigasi obyek wisata

Actionscript di atas sebagai contoh script yang dituliskan pada tombol untuk menuju ke

obyek wisata Taman Pintar dan tepat berada di tengah animate target. Ketika mouse yang

ditekan dilepaskan maka proses akan berjalan, yaitu proses peta akan bergeser 2955 pixel ke kiri

dan bergeser sejauh 3540 pixel ke atas yang nilai pergeseran tersebut diketahui dengan bantuan

hasil pembuatan koordinat titik bantu tombol navigasi, selain itu juga terjadi proses perbesaran

sebesar 530,078125 pixel pada x, dan y peta. Nilai perbesaran sebesar 530,078125 pixel

diperoleh dari perhitungan dengan rumus : = + = + = . Keterangan :

np = Nilai Penambah skala peta sebesar 3750 hasil dari pencarian dan perkiraan

angka sebab peta dari ArcGis ketika di buka dalam adobe flash skalanya

lebih kecil ketika dieksekusi.

Skala A = Skala peta yang diekspor dari ArcGis menjadi format *.ai, yaitu pada skala 1:

25000.

Skala B = Skala peta yang akan ditentukan dalam adobe flash, yaitu skala 1 : 6400


P = merupakan nilai pixel di mana 1 cm = 118 pixel

Nilai piksel 118 diperoleh dari membuat frame dengan ukuran panjang dan lebar

1 cmx2cm pada corel draw, kemudian mengubah units dari cm ke pixel sehingga

keterangan panjang dan lebar berubah menjadi 118x236 pixel.

Gambar 1.10. Perbandingan ukuran obyek pada corel draw dalam unit centimeter dan pixel.

Rumus di atas hanya bersifat membuat perkiraan besarnya perbesaran saja,

sebab untuk pengujian hasil masih harus dibandingkan ukuran skala peta dalam ArcGis.

Variabel P atau nilai piksel dalam rumus tersebut juga hanya menjadi nilai acuan kasar

atau hanya gambaran secara umum ,sebab nilai piksel bersifat relatif berubah ubah.

Sebagai contoh dilakukan pembuatan kota pada Corel draw dengan ukuran 1x2 meter,

kemudian mengubah units dari meter ke pixel dan diperoleh keterangan panjang dan lebar

menjadi 11811 x 23622 pixel.

Gambar 1.11. Perbandingan ukuran obyek pada coreldraw dengan satuan meter (kiri) dan pixel (kanan).

7. Membuat Koordinat Peta

Konsep dasar dari koordinat peta pada peta wisata Kota Yogyakarta berbasis flash ini ketika

mouse digerakkan maka nilai koordinat akan berubah-ubah sesuai dengan lokasi titik pointer


pada mouse yang digerakkan.Sistem koordinat yang diaplikasikan dalam peta berbasis flash ini

menggunakan sistem koordinat UTM, proyeksi WGS 84 dengan zona 49S sesuai dengan zona di

Kota Yogyakarta. Langkah-langkah dalam mebuat koordinat peta sebagai berikut :

1. Membuat 2 buah dynamic text pada layer koordinat memberi nama variabel pada

masing-masing dynamic text dengan nama variabel koorx dan koory.

Gambar 1.12. Variabel pada dynamic text koordinat x dan koordinat y

2. Melakukan konversi ke tipe movieclip pada masing masing dynamic text dengan

variabel koorx dan koory dengan cara klik kanan pilih convert to symbol mengganti

tipe menjadi movieclip kemudian menuliskan instance name pada masing-masing

dynamic text. Pada dynamic text koorx dituliskan instance name dengan nama

koordinatx, sedangkan pada dynamic text koory dituliskan instance name dengan nama

koordinat y. Tujuan dari konversi ke format movie ini agar pemberian script dan proses

eksekusi dapat secara langsung pada movieclip tersebut.

3. Menuliskan actionscrip pada Movieclip koordinat X dan korodinat Y.

Script awal yang digunakan pada masing-masing movieclip koordinatx dan

koordinaty adalah onClipEvent(mouseMove) yang menyatakan bahwa proses kinerja

perhitungan koordinat akan berjalan ketika mouse digerakkan.

a. Actionscript Koordinat X : onClipEvent (mouseMove){

_root.koordinatx.koorx="X="+Math.floor((_root.maps._xmouse*(8.8152551367533)+ 424707.381)

) +" "+ "MT"; }

Rumus dari perhitungan Koordinat X tyaitu :

X = a+ math.floor [{b.c*(-(d/e))+f}] + g

Keterangan :


X : _root.koordinaty.koory (merupakan variabel dari movieclip koordinatx dan

dynamic text koory)

a : X= yang merupakan teks judul berisi informasi yang menjelaskan nama

koordinat berupa X=.

math.floor : actionscript yang melakukan eksekusi pembulatan dalam perhitungan.

b : instance name pada peta dengan nama maps.

c : _xmouse.

d : Selisih nilai koordinat x2 dan x1 , x2 berada di pojok kanan atas peta,

sedangkan x1 berada di pojok kiri atas. Perhitungan selisih nilai koordinat

tersebut dihitung dengan menentukan titik x2 dan x1 mengacu pada lembar

peta dalam ArcGis.

e : Lebar peta dalam lembar kerja adobe flash dalam satuan pixel.

f : Koordinat awal koordiant X yang diambil dari X1 / terletak di pojok kiri

atas.

g : Satuan koordinat dalam MT dengan format teks berupa static text.

b. Actionscript Koordinat Y : onClipEvent (mouseMove){

_root.koordinaty.koory="Y="+Math.floor((_root.maps._ymouse*(8.816496398708502)+ 9143976.648) )+" "+"MU";

} Rumus dari perhitungan koordinat y tersebut yaitu :

Y = a+ math.floor [{b.c*(-(d/e))+f}] + g

Keterangan :

Y : _root.koordinaty.koory (merupakan variabel dari movieclip koordinatx dan

dynamic text koory)

a : Y= yang merupakan teks judul berisi informasi yang menjelaskan nama

koordinat berupa Y=.

math.floor :actionscript yang melakukan eksekusi pembulatan dalam perhitungan.

b : instance name pada peta dengan nama maps.

c : _ymouse.


d : Selisih nilai koordinat y2 dan y1 , y2 berada di pojok kiri bawah peta, sedangkan y1

berada di pojok kiri atas. Perhitungan selisih nilai koordinat tersebut dihitung dengan

menentukan titik y2 dan y1 mengacu pada lembar peta dalam ArcGis.

e : Tinggi peta dalam lembar kerja adobe flash dalam satuan pixel.

f : Koordinat awal koordiant Y yang diambil dari Y1 / terletak di pojok kiri atas.

g : Teks satuan koordinat dalam MU.

Nilai hasil perhitungan (d/e) selalu negatif, sebab hal ini dikarenakan nilai dari Y1 menuju y2

mengalami penurunan angka, sehingga dalam perhitungan perlu dituliskan tanda negatif pada

hasil (d/e), sehingga perhitungan koordinat akan lebih akurat.

8. Membuat Koordinat Bantu untuk Tombol navigasi

Koordinat bantu untuk tombol navigasi merupakan koordinat untuk mencari nilai x, dan y

pada titik obyek wisata peta agar tepat berada di tengah obyek animasi target. Langkah-langkah

dalam membuat koordinat titik bantu sebagai berikut :

1. Mencari secara manual nilai pergeseran x dan y pada dua titik obyek wisata yang

berdekatan dengan cara perkiraan, sebagai contoh hasil pencarian pada titik museum

biologi dengan nilai x = -3988, y = -3950, serta museum Jenderal Sudirman dengan nilai

x = -3466, y = -3620.

Gambar 1.13. Visualisasi letak museum biologi dan museum Jenderal Sudirman pada peta.

2. Membuat titik bantu dalam titik museum biologi pada peta dengan cara klik dua kali

peta membuat layer baru dengan cara klik insert, memilih timeline, kemudian klik

layer membuat titik sesuai dengan ukuran simbol titik obyek wisata museum biologi

dengan menggunakan rectangle tool yang diletakkan di tengah-tengah titik obyek wisata


museum biologi, kemudian mengkonversi ke dalam tipe MovieClip memberi nama

titikbantu pada instance name titik yang dibuat tersebut.

Gambar 1.14. Visualisasi obyek titik bantu yang berada di museum Biologi

3. Membuat dua buah dynamic text dengan nama variable titikx dan titiky, kemudian

masing-masing dikonversi ke dalam movie Clip, kemudian menuliskan titikbantux dan

titikbantuy pada instance name kedua movie Clip tersebut.

4. Menentukan jarak x dan y dengan satuan pixel antara titik museum Biologi dan museum

jenderal Sudirman pada peta dengan menggunakan script :

Koordinat X : onClipEvent (mouseMove){ _root.titikbantux.titikx="X=" + Math.abs((_root.maps.titikbantu._xmouse)+" " + " Sumbu X"; }

Koordinat Y :

onClipEvent (mouseMove){ _root.titikbantux.titikx="Y=" + Math.abs((_root.maps.titikbantu._ymouse)+" " + " Sumbu Y"; }

Math.abs merupakan rumus perhitungan/operasi bilangan yang menghasilkan

perhitungan tanpa pembulatan, sehingga hasil yang diperoleh juga akan lebih detil bila

dibandingkan dengan pembulatan.

Cara mengetahui jarak yaitu melakukan pengetesan movie dengan menekan

tombol Ctrl+enter pada keyboard, kemudian mengarahkan mouse ke titik Museum

Jenderal Sudirman pada peta karena titik pusat berada pada titik Museum Biologi. Hasil

eksekusi diperoleh jarak x dan y antara Museum Biologi dan Museum Jenderal Sudirman

dengan jarak x = 12.75 pixel, dan y = 5.5pixel.


Gambar 1.15. Koordinat jarak Museum Jenderal Sudirman dari Museum Biologi

5. Menghitung selisih pergeseran koordinat x dan y antara titik Museum biologi dan

Museum Jenderal Sudirman pada tombol navigasi , diperoleh hasil selisih koordinat x

sebesar 68 pixel, sedangkan selisih koordinat y sebesar 30 pixel.

6. Membuat koordinat titik bantu tombol navigasi dengan cara klik movie Clip dengan

instance name titikbantux dan titikbantuy, kemudian menuliskan script pada masing-

masing Movie Clip.

Koordinat bantu X :

onClipEvent (mouseMove){

_root.titikbantux.titikx="X= " + Math.floor((_root.maps.titikbantu._xmouse*(-(68/12))- 3398) )+" "+ " Sumbu X"; } Koordinat bantu Y : onClipEvent (mouseMove){

_root.titikbantuy.titikx="Y= " + Math.floor((_root.maps.titikbantu._ymouse*(-(30/5))- 3590) )+" "+ " Sumbu Y"; }

7. Melakukan eksekusi peta interaktif dengan cara menekan Ctrl+enter pada keyboard

kemudian mengarahkan dan mencatat nilai koordinat bantu pada setiap titik obyek

wisata, apabila semua nilai untuk pergeseran x dan y sudah tercatat dan dimasukkan

pada tombol navigasi, maka selanjutnya menghapus koordinat bantu tersebut karena

sudah tidak dipergunakan kembali.

9. Membuat Legenda Peta

Legenda peta dibuat dengan model animasi, legenda akan muncul ketika dilakukan eksekusi

terhadap tombol legenda yang ada dalam menu. Pembuatan legenda secara animasi ini bertujuan

untuk mengehamat ruang pada peta, sehingga layar peta dapat lebih lebar dan sederhana.

Langkah-langkah pembuatan layar legenda ini sebagai berikut :


1. Mengubah tombol legenda menjadi format movieclip dengan cara klik kanan tombol

legenda convert to symbol memilih tipe movieclip, selanjutnya memberikan nama

pada instance name berupa legenda, tombol legenda tersebut secara otomatis akan

masuk kedalam movieclip tersebut.

2. Menambahkan layer pada movieclip legenda berupa background, script, dan menu

legenda, sedangkan tombol legenda yang dikonversi ke dalam format movieclip sudah

secara otomatis masuk ke dalam layer tersebut. Layer menu legenda berisi layar dan isi

dari legenda peta, layer legenda ini dibuat animasi pergerakan dari bawah dan ke atas

dengan melakukan pembuatan frame label yaitu frame label masuk dan frame label

keluar.

Gambar 1.16. Visualisasi layer dan frame animasi pada legenda.

3. Menambahkan layer background yang berisi obyek yang menutupi tampilan layar

legenda dan letaknya berada di bawah lembar halaman peta, sehingga ketika tombol

legenda diklik, maka pergerakan menu legenda pada bagian bawah tidak akan terlihan

karena tertutup oleh background tersebut. Warna pada pembuatan background juga harus

disesuaikan dengan warna background halaman luar peta yaitu berwarna abu-abu (lihat

gambar 3.23).

Gambar 1.17. Visualisasi perbandingan layar legenda yang jika ditutupi layer background (kiri) dan layar

legenda yang ditutupi oleh layer background (kanan).


4. Membuat tombol keluar pada layer tombol keluar. Tombol keluar diletakkan pada frame

nomor 25 atau tepat berada di tengah-tengah frame terakhir pada frame dengan label

masuk.

Gambar 1.18. Pengaturan frame pada layer tombol keluar dalam legenda

5. Menambahkan layer dengan nama script, layer script ini berisi action script stop();,

actionscript stop(); ini akan mengatur titik pemberhentian setiap frame yang berjalan.

6. Memasukkan actionscript pada tombol legenda dengan cara klik tombol legenda

klik kanan pilih action, kemudian menuliskan script sebagai berikut :

on(release){

gotoAndPlay("masuk");

}

Script di atas menunjukkan bahwa ketika tombol legenda diklik, maka akan menuju ke

frame label masuk. Proses menuju frame label masuk terjadi ketika mouse yang

ditekan/diklik dilepaskan.

7. Frame nomor 1 pada semua layer kecuali layer tombol dan background di movieclip

legenda ini dikosongkan agar legenda tidak muncul pada saat peta flash dijalankan,

sedangkan frame nomor 1 pada layer tombol dan background tidak dikosongkan sebab

tombol legenda akan tetap muncul pada saat peta dijalankan.

Gambar 1.19. Visualisasi pengaturan layer dan frame untuk legenda peta

10. Membuat Skala Teks Peta

Skala peta merupakan komponen peta yang harus ada untuk dapat membandingkan

ukuran jarak dalam peta dengan kondisi sebenarnya, sehingga perkiraan waktu tempuh juga

dapat dipredisksikan. Proses pembuatan skala dalam adobe flash adalah sebagai berikut :


1. Membuat teks area dengan menggunakan text tool, kemudian mengubah tipe teks berupa

dynamic text, serta member nama variable dengan nama skala.

Gambar 1.20. Gambar variabel skala pada jendela properties.

2. Menambahkan keterangan nama judul skala dengan format teks berupa static text.

Gambar 1.21.Tampilan layout skala pada peta interaktif

3. Klik frame pertama pada layer skala, kemudian menuliskan script sebagai berikut :

onLoad = function(){ maps._xscale = +339.25; maps._yscale = +339.25; maps._x = -1925; maps._y = -1450; skala = 10000; _root.target._visible = false; if(skala>10000){ _root.maps.jalan._visible=false; _root.maps.toponimi._visible=false; } if(skala


dengan menggunakan rumus sebagai berikut : = + = + = . Keterangan :

np = Nilai Penambah skala peta sebesar 3750 hasil dari pencarian dan perkiraan

angka sebab peta dari ArcGis ketika di buka dalam adobe flash skalanya

lebih kecil ketika dieksekusi.

Skala A = Skala peta yang diekspor dari ArcGis menjadi format *.ai, yaitu pada skala 1:

25000.

Skala B = Skala peta yang akan ditentukan dalam adobe flash, yaitu skala 1 : 6400

P = merupakan nilai pixel di mana 1 cm = 118 pixel

11. Membuat tombol Zoom In , Zoom Out dan Reset Map

Tombol zoom in digunakan untuk melakukan perbesaran obyek peta, sedangkan tombol

zoom out digunakan untuk memperkecil ukuran peta. Script yang digunakan untuk membuat

zoom in sebagai berikut :

on(release){ skala = Math.abs(skala/1.25); _root.maps._xscale=_root.maps._xscale * 1.25; _root.maps._yscale=_root.maps._yscale * 1.25; // membuat titik fokus di tengah _root.maps._x = (_root.maps._x ) * 1.29 + _x; _root.maps._y = (_root.maps._y ) * 1.29 + _y; _root.target._visible = false; if(skala


_root.maps._xscale=_root.maps._xscale / 1.25; _root.maps._yscale=_root.maps._yscale / 1.25; // membuat titk fokus di tengah _root.maps._x = (_root.maps._x) / 1.29 + _x; _root.maps._y = (_root.maps._y) / 1.29 + _y; _root.target._visible = false; if(skala>10000){ _root.maps.jalan._visible=false; _root.maps.toponimi._visible=false; } }

Nilai 1,25 merupakan pembagi skala dan nilai perbesaran peta sebesar 1,25 kali dari skala

yang telah diatur sebagai skala dasar ketika peta pertama kali dibuka yaitu pada skala 1 :10000,

sehingga nilai skala nanti ketika peta diperbesar akan menjadi 1 : 8000, 1:6400, 1:5120, dan

seterusnya, begitu juga dengan ketika peta diperkecil maka skala akan berubah menjadi 1:12500,

1:15625, dan seterusnya.

Untuk menguji tingkat kedetailan perubahan skala peta setelah dilakukan eksekusi

terhadap tombol zoom in maupun zoom out, maka dapat dibandingkan antara skala pada

ArcGis dan skala pada peta animasi flash tersebut, apabila masih belum sama maka dapat

mencoba mengubah angka hingga ditemukan kesamaan skala pada perbesaran dalam ArcGis

maupun dalam Peta animasi dalam adobe flash ini.

Nilai 1,29 pada pembuatan titik fokus di tengah ketika peta diperbesar merupakan nilai

yang telah diubah dari nilai standar perbesaran yang telah ditentukan sebesar 1,25 diubah

menjadi 1,29 karena pada angka 1,25 titik fokus tidak tepat ditengah, sehingga perlu dilakukan

modifikasi angka.

Pembuatan tombol reset map memiliki kinerja ketika tombol tersebut ketika ditekan maka

akan mengembalikan posisi dan skala peta kembali seperti semula ketika peta pertama kali

dibuka. Pembuatan tombol reset map menggunakan scipt berupa :

on(release){ maps._xscale = +339.25; maps._yscale = +339.25; maps._x = -1925; maps._y = -1450; skala = 10000; _root.target._visible = false; if(skala>10000){


_root.maps.jalan._visible=false; _root.maps.toponimi._visible=false; } if(skala


6. Membuat layar identify pada setiap kategori yang telah dibuat berdasarkan layer, selain

itu juga member nama pada frame label sesuai dengan nama obyek. Pengisian masing-

masing layer dimulai pada frame kedua atau frame pertama harus dikosongkan supaya

pada layer utama akan terlihat transparan.

Gambar 1.22. Struktur layer dan frame dalam pembuatan identify obyek

Tahap selanjutnya setelah pembuatan layar identify yaitu menghubungkan layar identify

dengan titik obyek wisata yang ada pada peta dengan menuliskan script pada titik obyek wisata

maupun POI(Point Of Interest) lainnya. Script yang dituliskan pada titik obyek yaitu:

on(rollOver){ _root.identify.gotoAndStop("tamansari"); } on(rollOut){ _root.identify.gotoAndStop(1); }

RollOver menunjukkan bahwa ketika titik obyek pada peta disentuh mouse, maka layar

identify akan muncul, sedangkan RollOut menunjukkan ketika mouse digeser dan tidak

menyentuh titik maka layar akan menghilang atau menuju ke frame satu yang telah dikosongkan

pada movieClip identify.

13. Membuat Layar Informasi Obyek Wisata

Layar informasi obyek wisata berisi tentang informasi obyek wisata yang terdiri dari format

gambar/foto, deskripsi obyek wisata, maupun video mengenai obyek tersebut. Tahapan dalam

menampilkan layar informasi obyek wisata terdiri dari tahap desain interface layar informasi

pada setiap kategori obyek wisata dan tahap proses menghubungkan antara titik obyek wisata

pada peta dengan layar informasi obyek wisata dengan menggunakan script. Tahapan dalam

membuat komponen untuk layar informasi obyek wisata terdiri dari :


1. Membuat layer informasi membuat desain layar informasi mengkonversi ke dalam

format movieclip (klik obyek tekan F8 pada keyboard Pilih tipe Movie Clip)

kemudian member nama instance name berupa informasi.

2. Masuk ke layer yang ada dalam movie clip informasi dengan cara klik dua kali pada

Movie Clip informasi, kemudian membuat berbagai layer background layar informasi,

layer judul obyek wisata, layer tombol, layer setiap kategori obyek wisata untuk mengisi

frame label, dan layer script.

3. Menghapus Semua obyek yang ada pada frame pertama (semua layer pada frame pertama

harus kosong) supaya tidak menutupi tampilan peta pada layer utama seperti pada gambar

3.29.

Gambar 1.23. visualisasi struktur layer dan frame pada pembuatan layar informasi obyek wisata

4. Mengatur dan memberi nama frame pada layer masing-masing kategori wisata melalui

jendela properties, sebagai contoh klik frame kedua pada layer wisata edukasi, kemudian

masuk ke properties kemudian menulis pada label dengan nama museumperjuangan.

Pemberian nama label ini dilakukan pada semua obyek wisata, oleh karena itu perlu ada

pengaturan frame pada semua layer kategori wisata supaya tidak ada frame label kategori

obyek wisata yang saling bertumpang tindih antara layer kategori satu dengan layer

kategori lainnya.


Gambar 1.24. Visualisasi pemberian frame label pada setiap obyek wisata

5. Membuat background layar informasi obyek wisata dengan menggunakan rectangle tool

atau menekan tombol R pada keyboard. Setiap kategori obyek wisata dibuat dengan

background yang berbeda agar lebih bervariasi dan dapat membedakan antar kategori

obyek wisata.

Gambar 1.25. Visualisasi pengaturan layar informasi obyek wisata

6. Mengisi layer nama obyek wisata pada setiap frame sesuai dengan kategori obyek wisata

dan frame label obyek wisata yang akan menjadi judul layar informasi.

7. Membuat frame foto pada layer frame foto dengan menggunakan rectangle tool. Ukuran

dan posisi frame foto akan berbeda pada setiap kategori obyek wisata karena disesuaikan

dengan tampilan layar pada masing-masing kategori obyek wisata tersebut.

8. Memasukkan foto ke dalam layar informasi sesuai dengan frame label dengan cara klik

frame pada layer fotoklik fileimport import to stage klik foto yang akan

diimporklik open.


9. Mengkonversi foto yang telah diimpor ke dalam tipe Movie Clip dengan cara klik foto

kemudian tekan F8 pada keyboard atau dengan cara klik kanan klik convert to symbol,

kemudian mengubah tipe menjadi Movie Clip.

10. Melakukan klik dua kali pada Movieclip foto tersebut, sehingga akan muncul jendela

layer dan frame di dalam MovieClip foto tersebut, kemudian menambahkan layer berupa

layer tombol dan layer script di dalam MovieClip foto tersebut.

11. Menambahkan foto pada frame kedua dan seterusnya di dalam Movie Clip foto tersebut.

Frame kedua dan selanjutnya diubah ke dalam keyframe terlebih dahalu dengan cara klik

frame kedua kemudian tekan F6 pada keyboard. Tujuannya supaya memisahkan antara

frame satu dengan frame yang lainnya.

Gambar 1.26. Visualisasi struktur layer dan frame di dalam movieclip layar informasi obyek

wisata

12. Menuliskan script untuk menghentikan gerak dari frame satu ke frame selanjutnya

dengan cara klik frame pertama pada layer script klik kanan kemudian memilih

action menuliskan script berupa stop(); menambahkan frame sesuai dengan

banyaknya keyframe yang memuat foto yaitu dengan cara klik keyframe foto terakhir

kemudian tekan F5 pada keyboard (lihat gambar 3.33).

Gambar 1.27 Visualisasi pengaturan frame layer stop dalam Movieclip layer informasi obyek

wisata

13. Membuat tombol next dan tombol previous yang diletakkan di layer tombol untuk

menuju ke foto selanjutnya atau menuju ke foto sebelumnya dengan menggunakan oval

tool konversi ke dalam tipe button dengan cara klik obyek yang dibuat tombol,


kemudian tekan F8 pada keyboard, selanjutnya pilih tipe button masukkan script pada

kedua tombol sebagai berikut :

Script untuk tombol menuju ke foto selanjutnya :

on(release){ nextFrame(); } Script untuk menuju ke foto sebelumnya :

on(release){ prevFrame(); }

Gambar 1.28. Pembuatan desain tombol next dan previouse

14. Kembali ke layer Movie Clip Informasi dengan cara klik symbol MovieClip informasi.

Gambar 1.29. Visualisasi struktur movieclip informasi dalam satu scene

15. Menambakan tombol navigasi berupa tombol foto beserta deskripsi dan video yang

berada pada layer tombol dan diletakkan di atas frame foto, selain itu juga menambah

tombol keluar untuk keluar dari layar informasi.

16. Menuliskan script berupa stop(); pada frame yang ada pada layer script. Tujuannya untuk

menghentikan jalannya timeline dari frame satu ke frame selanjutnya ketika dieksekusi.

17. Menambahkan deskripsi obyek wisata pada layer deskripsi pada setiap obyek

wisata.Penulisan deskripsi dilakukan dengan dua cara yaitu menggunakan text tool

dengan tipe static text , serta dengan menggunaka text area yang ada pada component

tool. Penggunaan text area pada component tool digunakan pada deskripsi yang memiliki

kalimat dengan karakter huruf yang sangat banyak.

Gambar 1.30. Penggunaan text area yang ada pada component tool


Beberapa layar informasi seperti layar informasi kategori wisata edukasi dibuat deskripsi dan

video pada layer utama yang berbeda atau layer informasi dan layer deskripsi video dibuat secara

terpisah , tujuannya untuk membuat variasi layar informasi, serta menjadikan layer menjadi lebih

rapi dan teratur. Proses pembuatan layar deskripsi dan video yaitu :

1. Membuat desain layar deksripsi dan video menggunakan rectangle tool.

2. Melakukan konversi ke dalam format Movie Clip dengan cara klik obyek layar tekan

F8 pada keyboard memilih tipe movie Clip memberi nama deskripsi pada instance

name.

3. Klik dua kali Movie Clip deskripsi, sehingga akan muncul layer baru, selanjutnya

menambahkan layer baru sesuai yang dibutuhkan untuk membat komponen layar

deskripsi dan video (lihat gambar 3.37).

Gambar 1.31. Visualiasai struktur layer dan frame pada layar informasi deskripsi dan video

4. Menambahkan video pada layer video dengan cara klik file import import video

pada file path klik browse, kemudian memilih video yang akan diimpor dalam layar

pada radio button memilih Load external video with playback componentklik next

terus menerus klik finish.

5. Mengatur ukuran video dengan cara klik video kemudian pada jendela properties

mengubah nilai W(width) sebesar 320 pixel, dan nilai H(height) sebesar 240 pixel untuk

informasi video wisata edukasi dan belanja, sedangkan untuk kategori wisata budaya dan

sejarah ukuran video pada W(width) sebesar 251 pixel dan pada H(height) sebesar 188,3

pixel..


Gambar 1.32. Pengaturan ukuran video pada jendela properties

6. Menonaktifkan autoplay pada video dengan cara klik inspector component panel yang

ada pada layar properties. Kemudian mengubah autoplay menjadi false pada inspector

component (lihat gambar 3.39)..

Gambar 1.33. Visualisasi pengaturan video pada component inspector

7. Membuat layar deskripsi beserta menuliskan deskripsi obyek wisata menggunakan text

tool dengan tipe teks berupa static text.

Gambar 1.34. Visualisasi layar deskripsi pada obyek wisata edukasi

8. Menambahkan tombol foto , deskripsi dan video, beserta tombol keluar.


Tahapan dalam membuat desain layar informasi apabila sudah selesai, selanjutnya

merupakan tahap untuk menghubungkan antara titik obyek wisata dalam peta dengan layar

informasi, serta mengaktifkan tombol tombol yang dibuat sesuai fungsinya yang semuanya

dilakukan dengan menuliskan script yang terdiri dari :

1. Menuliskan script pada titik obyek wisata dalam peta untuk menghubungkan dengan layar

informasi wisata yang berupa :

on(release){ _root.informasi.gotoAndStop("tamansari"); _root.drag._visible=false; _root.target._visible=false; }

Script di atas memiliki arti proses akan berjalan ketika titik obyek wisata pada peta yang

ditekan mouse dilepaskan.Proses akan menuju ke frame label Tamansari yang ada pada

movie Clip informasi, proses lainnya ketika layar informasi muncul, maka obyek drag dan

target akan tidak terlihat.

2. Menghubungkan antara tombol deskripsi dan video pada Movie Clip

Informasi dengan layar yang ada pada layer Deksripsi dengan menggunakan script :

on(release){ _root.deskripsi.gotoAndStop("museumperjuangan"); gotoAndStop(1); _root.deskripsi._visible=true; }

3. Memberi fungsi pada tombol keluar( , ) dengan menggunakan script :

on(release){ _root.drag._visible=true; gotoAndStop(1); }

4. Menghubungkan antara tombol foto ( ) yang berada di dalam Movie Clip dengan

instance name deskripsi dengan Movie Clip dengan instance name informasi. Fungsi

tombol foto dapat melakukan proses dengan menuliskan script pada tombol tersebut

dengan contoh sebagai berikut :

on(release){ _root.informasi.gotoAndStop("museumperjuangan"); _root.informasi._visible=true; _root.video._visible=false;


_root.deskripsi._visible=false; gotoAndStop(1); }

14. Membuat Kotak Pencarian

Kotak pencarian berfungsi untuk mencari obyek wisata berdasar kata kunci, sebagai contoh

ketika mengetik kata malioboro kemudian menekan tombol search, maka secara langsung akan

menuju ke titik lokasi malioboro pada peta. Langkah untuk membuat kotak pencarian sebagai

berikut :

1. Membuat text area menggunakan Text tool dengan tipe input text memberi nama

variable pada properties dengan nama cari.

Gambar 1.35. pembuatan variabel cari pada pembuatan kotak pencarian

2. Membuat tombol search dengan menggunakan rectangle tool yang kemudian

dikonversi ke dalam tipe button.

3. Mengisikan script pada tombol dengan contoh pencarian obyek kantor pos sebagai

berikut :

on(press){ // Kategori Wisata Edukasi if(cari == "Kantor Pos"){ skala = 6400; setProperty("maps",_x,"-2773"); setProperty("maps",_y,"-3582"); setProperty("maps",_xscale,"530.078125"); setProperty("maps",_yscale,"530.078125");


_root.target._visible = true; _root.maps.toponimi._visible=true; _root.maps.jalan._visible=true; } Script di atas menunjukkan jika pada teks area dengan variable cari diisi dengan kata kantor

pos dan kemudian di lakukan klik pada tombol search, maka akan menuju ke titik kantor pos

pada peta , animasi target, nama jalan, dan nama POI (Point Of Interest) lainnya juga akan

terlihat.

15. Membuat Fungsi Pan Map (Menggeser Peta) Menggunakan Keyboard

Penggunaan keyboard untuk menggeser peta ke kanan, kiri, atas maupun bawah

dilakukan dengan langkah klik pada peta memilih action, kemudian menuliskan script sebagai

berikut :

onClipEvent (keyDown) { if (Key.isDown(Key.RIGHT)) { setProperty ("", _x, _x-30); } if(Key.isDown(Key.LEFT)){ setProperty ("",_x,_x+30); } if(Key.isDown(Key.UP)){ setProperty ("",_y,_y+30); } if(Key.isDown(Key.DOWN)){ setProperty ("",_y,_y-30); } _root.target._visible = false; } 16. Membuat Layar Informasi Transportasi

Proses kerja dari pembuatan layar informasi ini ketika tombol transportasi ditekan makan

akan layar yang berisi pilihan transportasi dan ketika diklik pada salah satu obyek transportasi

yang dipilih maka akan muncul informasi mengenai informasi tersebut.Langkah dalam

pembuatan Layar informasi transportasi sebagai berikut :

1. Membuat tombol transportasi dengan cara klik membuat bentuk persegi dengan rectangle tool

Tekan F8 pada keyboard kemudian pilih tipe simbol.


2. Mengkonversi simbol ke dalam Movie Clip dengan cara klik tombol tekan F8 pada

keyboard memilih tipe Movie Clip.

3. Klik dua kali pada Movie Clip sehingga muncul jendela layer baru, kemudian layar pilihan alat

transportasi yang berisi foto dan nama transportasi ,kemudian masing-masing alat transportasi

dikonversi ke dalam tombol dengan cara klik obyek tekan F8 pilih button.

Gambar 1.36. Visualisasi pembuatan tombol informasi transportasi lokal

4. Mengubah tombol alat transportasi ke dalam MovieClip dengan cara klik tombol tekan

F8 pilih movieClip.

5. Klik dua kali pada salah satu movieClip, misalnya pada MovieClip alat transportasi transjogja,

kemudian di dalam movieClip transjogja menambahkan layer dan frame sesuai dengan

informasi yang akan disajikan. Proses ini juga dilakukan pada MovieClip alat transportasi

yang lain.

Gambar 1.37 Visualisasi struktur layer dan frame pada informasi transportasi lokal

17. Membuat Layar About

Layar about memuat tentang informasi link alamat email ataupun website untuk kritik

dan saran, tahun pembuatan peta maupun nama pembuat peta. Layar about dibuat dengan cara :

1. Membuat tombol about dengan cara klik membuat bentuk persegi dengan rectangle tool

Tekan F8 pada keyboard kemudian pilih tipe simbol.


2. Mengkonversi simbol ke dalam Movie Clip dengan cara klik tombol tekan F8 pada

keyboard memilih tipe Movie Clip.

3. Klik dua kali pada Movie Clip sehingga muncul jendela layer baru, kemudian membuat layer

about serta membuat layar about pada frame kedua dalam layer tersebut, sedangkan semua

frame pertama dikosongkan kecuali pada layer tombol.

Gambar 1.38. Visualisasi struktur layer dan frame dalam pembuatan layar about

18. Menambahkan Backsound Peta Interaktif

Penambahan Backsound atau latar belakang suara pada peta interaktif obyek wisata di

Kota Yogyakarta dilakukan dengan cara :

1. Klik File import Import to Library pada Adobe Flash .

Gambar 1.39. Visualisasi import to library

2. Muncul Layar import to library , kemudian memilih lagu yang akan dijadikan latar

belakang suara dengan cara klik lagu tersebut, kemudian klik open.

3. Klik frame pada layer backsound pada lembar kerja peta interaktif.

4. Klik name pada menu sound di dalam tool properties kemudian memilih lagu,

selajutnya menentukan jumlah pengulangan lagu yang diputar serta efek suara yang akan

diputar.


Gambar 1.40. Visualisasi pengaturan suara pada tool properties

5. Secara otomatis akan muncul grafik suara pada frame backsound.

Gambar 1.41. Visualisasi frame yang telah terisi efek latar belakang suara

19. Menghilangkan Menubar dan Membuat Fungsi Fullscreen

Menubar yang dihilangkan merupakan menubar yang muncul saat peta telah dipublikasi ke

dalam output swf, exe, html atau format lainnya. Proses untuk menghilangkan menubar dan

membuat layar menjadi fullscreen yaitu dengan cara menuliskan script pada frame pertama di

layer script yag telah dibuat, script yang digunakan sebagai berikut :

fscommand("showmenu",false);

fscommand("fullscreen",true);

20. Mempublikasikan Peta

Publikasi Peta Interaktif berupa proses melakukan konversi dari adobe flash menjadi format

*.swf maupun *.exe dengan cara klik file export memilih format swf, atau juga

serta melakukan penyimpanan ke format *.exe dengan cara klik filePublish Memberi

tanda centang / checklist pada bagian exe serta menentukan direktori penyimpanan

klik publish.

penyusunanpetainteraktifdenganadobeflash

Documents