ALBADR EBOOK

CEPAT dan PRAKTIS MEMBUAT PETA DIGITAL, BERBASIS FLASH DAN XML DATABASE
BY : ALBADR

Salam hangat, bagaimana kabar anda, sehat? Semoga saja anda sehat dan bersemangat. Okey . . . pada kesempatan kali ini kita akan membahas tentang TUTORIAL praktis pembuatan peta digital berbasis flash dan xml. Tutorial ini sangat mudah dan praktis. Siapapun anda bisa membuatnya. Anda tidak perlu memahami program Flash. Yang harus anda lakukan adalah mencoba, mencoba dan mencoba . . . oke? Langsung saja deh . . . agar tidak kelamaan, judulnya saja CEPAT dan PRAKTIS MEMBUAT PETA DIGITAL wuiiiiiih . . . . Berikut adalah screen shoot contoh peta digital yang akan kita buat:

A. Okey . . . tahap pertama dalam pembuatan peta digital ini yang harus anda persiapkan adalah bahanbahan di bawah ini : 1. File /modul peta digital yang dapat download di blog ini juga (hukumnya wajib punya) Isi dari file tersebut setelah di ekstrak tampak seperti gambar di bawah :

ALBADR EBOOK

2. Software pendukung antara lain: - Flash player atau software lain yang support untuk membuka format swf - Software editor text misal notepad - Software editor gambar untuk merisize gambar. Bisa paint, acdsee, photoshop dll yang penting bisa buat resize gambar 3. Bahan peta : - Gambar peta lokasi yang akan dibuat (format *.jpg), misal peta kota solo sperti gambar di bawah ini, ada bisa mecari gambar peta melalui om GOOGLE . . .

Gambar detil informasi. Misal anda membuat peta digital lokasi taman jurug di SOLO seperti gambar di bawah ini :

ALBADR EBOOK

Gambar & detail informasi

Gambar detil informasi ini diperlukan untuk memudahkan user meriview lokasi yang dicari. Jadi, jika anda ingin membuat beberapa peta lokasi tempat, misal kantor kecamatan yang berjumlah 5, maka setidaknya anda mempunyai 5 gambar kantor kecamatan tersebut. Semakin banyak lokasi, semakin banyak gambar dan informasi yang anda butuhkan. Okey selagi anda menyiapkan bahan bahan di atas, sebaiknya saya ngopi dulu . . . sambil menunggu anda menyiapkan . . . Sluuurrppt . . achh . . . sluuurppt . . . B. Baik mari kita lanjutkan . . . asumsi saya, bahwa anda telah menyiapkan bahan-bahan yang telah saya sebutkan di atas. Kita langsung ke langkah pembuatan yuuuuk . . . .

1. Langkah pertama adalah me resize gambar-gambar. Pertama yang akan kita resize adalah gambar peta kota solo. Kali ini kita akan gunakan software bawaan windows, yaitu paint. Anda bias memakai software yang lain. Mungkin anda perlu untuk mengedit gambar sekalian . . . Kita buka program paint, dan kita buka file gambar peta berformat *.jpg, dalam hal ini saya ambil contoh file solo2.jpg.

ALBADR EBOOK

Ukuran yang direkomendasikan adalah 800 x 600 pixel maksimal.

ALBADR EBOOK Kemudian letakkan image hasil resize/edit dalam folder image

2. Selanjutnya kita edit script pada file data.xml. buka dengan menggunakan notepad

Edit nama file gambar peta dengan file gambar yang telah kita resize tadi

Ganti file pada image/001.jpg dengan image/solo2.jpg

ALBADR EBOOK

4. Langkah selanjutnya, kita buka file Grid.swf dengan menggunakan flash player atau dengan program lain yang support file swf. Dan gembar peta yang telah kita resize tadi ternyata sudah ada lho . . .

5. Naahh, selanjutnya pada tampilan Grid.swf kita akan melihat titik koordinat x dan y secara otomatis saat kursor kita gerakkan di pojok atas kiri.

6. Nah sekarang kita tinggal cari deh titik-titik area/lokasi yang akan kita jadikan objek peta. Misal taman jurug saja yaaaa . . .

ALBADR EBOOK

Letakkan kursor tepat di titik tengah lokasi taman jurug, lalu catat titik koordinat x dan y (misal x = 595 dan y = 326). jangan lupa kasih inisial taman jurug biar tidak bingung dengan lokasi yang lainnya. Selanjutnya lakukan hal yang sama untuk titik-titik lokasi objek lainnya yang akan di buat peta, jangan lupa catat koordinat dan nama inisial untuk memudahkan pengerjaan. 7. Selanjutnya, setelah kita menge-list semua titik lokasi yang akan kita jadikan objek peta, sekarang saatnya kita mengedit detil informasi. Untuk langkah awal, kita resize semua gambar objek untuk detil informasi dengan ukuran 198 x 160 pixel. Misal kita akan resize objek gambar taman jurug dengan nama file zoo2.jpg.

Hasil resize dengan program paint seperti langkah 1. Simpan semua gambar objek yang telah diresize dalam folder image bersama dengan gambar peta.

ALBADR EBOOK

Folder image tempat meletakkan semua gambar. 8. Selanjutnya kita akan mengedit kembali script pada file data.xml. buka dengan program notepad. Naaaah . . . kemudian kita edit scriptnya. misal kita akan mengedit objek taman jurug beserta deskripsinya, maka ubah nama file image, dan ubah deskripsinya seperti contoh dibawah ini . . .

Kita ubah koordinatnya seperti yang kita catat dan nama file gambar seperti dibawah ini <Item PartID="Image" PX="595" PY="326" photo="image/zoo2.jpg"> Selanjutnya kita buat deskripsi tentang objek yang kita buat misal seperti di bawah ini, (yang perlu kita edit script yang di garis bawah) <details> <![CDATA[<font color="#0080C0"><b>Taman Jurug SOLO</b></5><br>Tempat binatang buas di kota Solo Raya. Lokasi : jalan Ir Sutami no sekian . . . telepon 09898765. taman jurug adalah salah satu taman binatang di kota solo raya, yang memiliki koleksi biantang dari yang buas sampai yang jinak. Banyak para pengunjung

ALBADR EBOOK tidak hanya dari kota solo, tapi juga dari luar kota solo. Anda tertarik untuk mengunjungi ?<a href="http://www.jurug.com" target="_blank"> <font color="#0080C0">more...</font></a>]]></details> </Item> Setelah selesai kita edit, jangan lupa di save. Sekarang kita lihat hasilnya . . . kita buka file XML_Map_Detail.swf (nama file bisa anda ganti sesuai dengan project anda). objek peta lokasi tamn jurug sudah jadi.

Nah tugas anda selanjutnya, lakukan hal sama untuk mengedit titik objek lokasi yang akan dibuat peta. Jika objek anda banyak, tinggal copy paste scriptnya di bawahnya. Anda bisa mengcopy mulai dari script pembuka <Item PartID . . . . Sampai script . . . </Item>. dan lakukan pengeditan yang sama dengan langkah 8 untuk mengedit titik koordinat dan deskripsi object. Selamat yaaaaah . . . peta digital anda sudah jadi . . .