aplikasi peta wisata digital kabupaten ngawi berbasis .../aplikasi... · on windows operating...

62
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS FLASH DAN XML. Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh: AREKA ANGGRATAMA M3109014 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2012

Upload: vannga

Post on 03-Mar-2019

226 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI

BERBASIS FLASH DAN XML.

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Disusun oleh:

AREKA ANGGRATAMA

M3109014

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

SURAKARTA

2012

Page 2: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iv

ABSTRACT

AREKA ANGGRATAMA, 2012. DIGITAL MAP APPLICATION

DISTRICT TOUR NGAWI BASED ON FLASH AND XML. The Diploma III

Program of Informatics Technique Department of Mathematics and Sciences

Faculty in Sebelas Maret Surakarta University.

Promotion and dissemination of tourism, arts and culture in Ngawi district

is one way for a variety of tours, art and culture held by the district Ngawi be

known by the public. Multimedia applications which is an amalgamation of

various components such as text, sound, graphics, and animation will make the

user be comfortable to enjoy the information presented. Dynamic data on the

application will be easier for publishers to update information for an ever-

changing information. The purpose of the project task is to give convenience to

publishers in a changing information and provide convenience to the public in

understanding the information presented.

Travel information map-making is done using Adobe Flash CS3 running

on Windows operating systems. Travel information map application is designed

and developed using the method of observation which compared with a travel map

application ever created. Literature study is done by finding references and

materials related to the research conducted.

The study produced a multimedia application that will provide travel

information Ngawi district-based flash and xml. The information will be given the

nature of information, shopping, culinary tours, recreational tourism, religious

tourism, historical tourism, and cultural and tourist map of the location in the

district of Ngawi

Kata kunci : Map,Travel Map, Flash, Ngawi

Page 3: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iv

ABSTRAK

AREKA ANGGRATAMA, 2012. APLIKASI PETA WISATA

DIGITAL DIGITAL KABUPATEN NGAWI BERBASIS FLASH DAN

XML. Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu

Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Promosi dan sosialisasi wisata, seni, dan budaya yang ada di kabupaten

Ngawi merupakan salah satu cara agar berbagai wisata, seni, dan budaya yang

dimiliki oleh kabupaten Ngawi dapat diketahui oleh masyarakat luas. Aplikasi

multimedia yang merupakan penggabungan dari berbagai komponen seperti teks,

suara, gambar, dan animasi akan membuat pengguna menjadi nyaman dalam

menikmati informasi yang disajikan. data pada aplikasi akan mempermudah

penerbit informasi untuk dapat mengupdate informasi yang selalu berubah.

Tujuan dari proyek tugas ini adalah untuk memberikan kemudahan kepada

penerbit dalam merubah informasi dan memberikan kenyamanan kepada

masyarakat dalam memahami informasi yang ditampilkan.

Pembuatan peta informasi wisata dilakukan menggunakan Adobe Flash

CS3 yang berjalan pada sistem operasi Windows. Aplikasi peta informasi wisata

dirancang dan dikembangkan menggunakan metode observasi yaitu

membandingkan dengan aplikasi peta wisata yang pernah dibuat. Studi pustaka

dilakukan dengan cara mencari referensi dan materi yang berhubungan dengan

penelitian yang dilakukan.

Penelitian ini menghasilkan aplikasi multimedia yang akan memberikan

informasi wisata kabupaten Ngawi berbasis flash dan xml. Informasi yang akan

diberikan adalah informasi wisata alam, wisata belanja, wisata kuliner, wisata

rekreasi, wisata religi, wisata sejarah , dan budaya serta peta lokasi wisata yang

ada di Kabupaten Ngawi.

Kata kunci : Peta, Peta wisata, Flash, Ngawi

Page 4: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ix

DAFTAR ISI

Halaman

HALAMAN JUDUL ............................................................................................. i

HALAMAN PERSETUJUAN .............................................................................. ii

HALAMAN PENGESAHAN ............................................................................... iii

ABSTRACT .......................................................................................................... iv

ABSTRAK ............................................................................................................ v

MOTTO………. ................................................................................................... vi

HALAMAN PERSEMBAHAN ........................................................................... vii

KATA PENGANTAR .......................................................................................... viii

DAFTAR ISI ......................................................................................................... ix

DAFTAR GAMBAR ............................................................................................ xiii

BAB I PENDAHULUAN .............................................................................. 1

1.1 Latar Belakang ................................................................................... 1

1.2 Perumusan Masalah ........................................................................... 3

1.3 Batasan Masalah ................................................................................ 3

1.4 Tujuan dan Manfaat ........................................................................... 3

1.5 Metodologi Penelitian ........................................................................ 4

1.5.1 Pengumpulan Data ................................................................... 4

1.5.2 Perancangan Sistem................................................................... 4

1.5.3 Pembuatan Aplikasi................................................................... 5

1.6 Sistematika Penulisan ......................................................................... 5

BAB II LANDASARAN TEORI.................................................................... 3

2.1 Peta ..................................................................................................... 6

2.2 Multimedia ......................................................................................... 7

2.2.1 Defini Multimedia .................................................................... 8

2.2.2 Objek Multimedia .................................................................... 8

2.3 Adobe flash CS3 ................................................................................ 10

2.4 XML ................................................................................................... 11

Page 5: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

x

2.5 Action Scripts ..................................................................................... 13

2.6 Scene .................................................................................................. 13

2.7 Struktur Navigasi ................................................................................ 14

2.2.3.1 Struktur Navigasi Linier ................................................ 14

2.2.3.2 Struktur Navigasi hirarki ............................................... 14

2.2.3.3 Struktur Navigasi Non Linier ........................................ 15

2.2.3.4 Struktur Navigasi Campuran ......................................... 16

BAB III DESAIN DAN PERANCANGAN .................................................... 17

3.1 Alat Penelitian .................................................................................... 17

3.1.1 Software .................................................................................... 17

3.1.2 Hardware .................................................................................. 17

3.2 Langkah Pengembangan Aplikasi ...................................................... 18

3.2.1 Perancangan Aplikasi ............................................................... 19

3.2.2 Membuat Aplikasi Peta ............................................................. 19

3.2.3 Pengujian .................................................................................. 19

3.2.4 Perbaikan ................................................................................... 19

3.2.5 Finishing ................................................................................... 19

3.3 Rancangan Aplikasi .......................................................................... 20

3.3.1 Perancangan Kebutuhan Scene Animasi .................................. 20

3.3.1.1 Scene Intro .................................................................... 20

3.3.1.2 Scene Wisata Alam,Belanja,Kuliner,Rekreasi .............. 20

3.3.1.3 Scene Lain ..................................................................... 21

3.3.2 Struktur Menu Aplikasi ............................................................. 21

3.3.3 Fitur Aplikasi Peta ..................................................................... 22

3.3.4 Rancangan Tampilan ................................................................. 23

3.3.4.1 Tampilan Awal .............................................................. 23

3.3.4.2 Tampilan Menu Utama.................................................. 23

Page 6: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xi

BAB IV IMPLEMENTASI DAN ANALISA .................................................. 25

4.1 Detail Aplikasi.................................................................................... 25

4.2 Implementasi Scene Aplikasi ............................................................. 25

4.2.1 Pembuatan Scene Aplikasi ...................................................... 25

4.2.2 Tampilan Scene Aplikasi ........................................................ 26

4.3 Implementasi Struktur Menu Aplikasi ............................................... 27

4.3.1 Menu Intro ............................................................................... 27

4.3.1.1 Pembuatan Intro Aplikasi ........................................... 27

4.3.1.2 Tampilan Intro Aplikasi ............................................. 28

4.3.2 Menu Wisata Alam, Belanja, Kuliner, Rekreasi, Religi ......... 29

4.3.2.1 Pembuatan Menu Wisata Alam, Belanja,Rekreasi ..... 29

4.3.2.2 Tampilan Intro Aplikasi ............................................. 30

4.3.3 Menu Lain ............................................................................... 31

4.3.3.1 Pembuatan Menu Lain ............................................... 31

4.3.3.2 Tampilan Menu Lain .................................................. 32

4.4 Implementasi Fitur Aplikasi Peta ....................................................... 32

4.4.1 Fitur Drag Aplikasi Peta .......................................................... 32

4.4.1.1 Pembuatan Fitur Drag ................................................ 32

4.4.1.2 Tampilan Drag............................................................. 33

4.4.2 Fitur Zoom In .......................................................................... 34

4.4.2.1 Pembuatan Fitur Zoom In .......................................... 34

4.4.2.2 Tampilan Fitur Zoom In ............................................. 35

4.4.3 Fitur Zoom Out ........................................................................ 36

4.4.3.1 Pembuatan Fitur Zoom Out ........................................ 36

4.4.3.2 Tampilan Fitur Zoom Out .......................................... 37

4.4.4 Fitur Ko’ordinat Aplikasi Peta ................................................ 37

4.4.4.1 Pembuatan Fitur Ko’ordinat ....................................... 37

4.4.4.2 Tampilan Ko’ordinat ................................................... 39

4.4.5 Fitur Detail Wisata Aplikasi Peta ............................................ 39

4.4.5.1 Pembuatan Fitur Detail Wisata .................................. 39

4.4.5.2 Tampilan Fitur Detail Wisata ..................................... 42

Page 7: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xii

4.4.6 Fitur Search Aplikasi Peta ....................................................... 43

4.4.6.1 Pembuatan Fitur Search ............................................. 43

4.4.6.2 Tampilan Search .......................................................... 45

4.4.7 Fitur Navigasi Aplikasi Peta ................................................... 46

4.4.7.1 Pembuatan Fitur Navigasi .......................................... 46

4.4.7.2 Tampilan Navigasi ..................................................... 47

4.4.8 Fitur Legenda Aplikasi Peta .................................................... 48

4.4.8.1 Pembuatan Fitur Legenda ........................................... 48

4.4.8.2 Tampilan Legenda ...................................................... 49

4.4.9 Fitur Simbol Arah Aplikasi Peta ............................................. 49

4.4.9.1 Pembuatan Fitur Simbol Arah .................................... 49

4.4.9.2 Tampilan Simbol Arah ............................................... 50

4.4.10 Fitur Musik Aplikasi Peta ..................................................... 50

4.4.10.1 Pembuatan Fitur Musik ............................................ 50

4.4.10.2 Tampilan Musik Peta ............................................... 51

4.4.11 Fitur Referesh Aplikasi Peta ................................................. 52

4.4.11.1 Pembuatan Fitur Referesh ........................................ 52

4.4.11.2 Tampilan Musik Referesh ........................................ 52

BAB IV PENUTUP .......................................................................................... 53

4.1 Kesimpulan ........................................................................................ 53

4.2 Saran .................................................................................................. 53

DAFTAR PUSTAKA .......................................................................................... 54

Page 8: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiii

DAFTAR GAMBAR

Gambar 2.1 : XML Pada Adobe Flash .......................................................... 12

Gambar 2.2 : Struktur Navigasi Linear ......................................................... 14

Gambar 2.3 : Struktur Navigasi Hirarki ........................................................ 15

Gambar 2.4 : Struktur Navigasi Non Linear ................................................. 15

Gambar 2.5 : Struktur Navigasi Campuran ................................................... 16

Gambar 3.1 : Bagan langkah pengembangan aplikasi .................................. 18

Gambar 3.2 : Site Map Struktur Menu Aplikasi ........................................... 21

Gambar 3.3 : Fitur Aplikasi Peta ................................................................... 22

Gambar 3.4 : Tampilan Intro Aplikasi .......................................................... 23

Gambar 3.5 : Tampilan Menu Utama ............................................................ 25

Gambar 4.1 : Pembuatan scene Aplikasi ....................................................... 25

Gambar 4.2 : Action Script Scene ................................................................. 26

Gambar 4.3 : Tampilan Scene Aplikasi......................................................... 26

Gambar 4.4 : Pembuatan info Aplikasi ......................................................... 27

Gambar 4.5 : Tampilan intro Aplikasi........................................................... 28

Gambar 4.6 : Frame camera wisata Alam ..................................................... 29

Gambar 4.7 : Frame Peta Wisata Alam ......................................................... 29

Gambar 4.8 : Tampilan Menu Wisata Alam ................................................. 30

Gambar 4.9 : Pembuatan Menu Lain............................................................. 31

Gambar 4.10 : Menu Lain .............................................................................. 32

Gambar 4.11 : Pembuatan Fitur Drag ............................................................. 32

Gambar 4.12 : Tampilan Drag ......................................................................... 33

Gambar 4.13 : Pembuatan Fitur Zoom In........................................................ 34

Gambar 4.14 : Tampilan Button Zoom In ....................................................... 35

Gambar 4.15 : Pembuatan fitur Zoom Out ...................................................... 36

Gambar 4.16 : Tampilan Zoom Out ................................................................ 37

Gambar 4.17 : Pembuatan Fitur Ko’ordinat .................................................... 38

Page 9: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiv

Gambar 4.18 : Tampilan Ko’ordinat ............................................................... 39

Gambar 4.19 : Pembuatan Fitur Detail Wisata................................................ 40

Gambar 4.20 : Tampilan Detail Ruangan ........................................................ 42

Gambar 4.21 : Pembuatan Mesin Pencarian ................................................... 43

Gambar 4.22 : Pembuatan Lokasi Hasil Pencarian ......................................... 43

Gambar 4.23 : Tampilan Mesin Pencarian ...................................................... 45

Gambar 4.24 : Tampilan Lokasi Pembuatan ................................................... 46

Gambar 4.25 : Tampilan Navigasi Wisata ...................................................... 47

Gambar 4.26 : Pembuatan Fitur legenda ......................................................... 48

Gambar 4.27 : Tampilan Legenda ................................................................... 49

Gambar 4.28 : Pembuatan Fitur Simbol Arah ................................................. 49

Gambar 4.29 : Tampilan Simbol Arah ............................................................ 50

Gambar 4.30 : Pembuatan Musik .................................................................... 50

Gambar 4.31 : Tampilan Musik Peta............................................................... 51

Gambar 4.30 : Pembuatan Referesh ................................................................ 52

Gambar 4.31 : Tampilan Refereh .................................................................... 52

Page 10: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

1

BAB I

PENDAHULUAN

1.1. Latar Belakang

Dewasa ini tekhnologi informasi dan komunikasi mengalami

perkembangan yang sangat pesat, dan tidak dapat dipungkiri lagi manusia

modern pada saat ini mau tidak mau harus mengikuti perkembangan

tekhnologi tersebut. Perkembangan tekhnologi yang terus meningkat

membawa dampak yang luar biasa diberbagai macam aspek kehidupan.

Perkembangan teknologi informasi mempunyai peranan yang

sangat penting dalam meningkatkan kebutuhan manusia akan teknologi

infomasi. Sedangkan dalam bidang industri kepariwisataan, tekhnologi

informasi dapat dipergunakan sebagai media promosi wisata dan media

informasi agar dapat memajukan industri kepariwisataan dimana industry

kepariwisataan merupakan salah satu sektor penting dalam meningkatkan

Pendapatan Asli Daerah (PAD).

Kabupaten Ngawi merupakan salah satu wilayah yang mempunyai

potensi wisata yang cukup banyak misalkan Monumen Suryo,Museum

Trinil, Kebun Teh jamus dan lain-lain. Tetapi dalam hal mempromosikan

dan mensosialisasikan potensi wisata, kebanyakan masih menggunakan

brosur, buku panduan ataupun poster peta wisata. Informasi yang dibuat

saat ini akan menjadi sangat terbatas karena info yang disajikan akan

terpaut pada ukuran booklet ataupun poster peta wisata. Masyarakat luas

tidak bisa mendapatkan informasi tentang pariwisata dan budaya yang ada

di Kabupaten Ngawi secara maksimal. Agar potensi wisata di Kabupaten

Ngawi dapat dikenal masyarakat luas maka perlu adanya suatu terobosan

atau alternatif baru mengenai cara mensosialisasikan atau mempromosikan

potensi wisata di Kabupaten Ngawi misalkan dengan pembuatan Aplikasi

Peta Wisata Digital di Kabupaten Ngawi berbasis Flash dan Xml.

Page 11: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

2

Aplikasi Peta Wisata Digital diharapkan dapat menyelesaikan

permasalahan tersebut karena merupakan alternative solusi yang tepat

dalam memberikan informasi wisata bagi wisatawan. Melalui pembuatan

peta digital wisata Kabupaten Ngawi berbasis flash dan xml diharapkan

dapat mempermudah pengguna untuk mengetahui potensi wisata yang

berada di Kabupaten Ngawi.

Desain yang aplikatif dan interaktif akan membuat masyarakat

menjadi lebih nyaman dalam membaca dan melihat info wisata yang ada.

Peta berbasis flash dan xml yang interaktif didukung dengan gambar dan

suara akan lebih bisa diterima karena akan mempermudah masyarakat

dalam memahami isi dari peta informasi wisata. Integrasi antara gambar,

suara, animasi dan teks maka aplikasi peta berbasis flash dan xml akan

menjadi sebuah peta yang interaktif dan aplikatif.

Aplikasi ini dibuat dengan menggunakan Adobe Flash CS 3, selain

tersedia kontrol-kontrol yang mudah dan lengkap juga tampilan tidak

kalah menarik dengan software lainnya serta dilengkapi dengan

pengelolaan database dengan XML agar peta yang disajikan dapat diubah

sewaktu-waktu sesuai dengan perkembangan situasi. Aplikasi peta wisata

akan dikemas dalam bentuk cd ataupun diupload pada website sehingga

akan memudahkan masyarakat untuk mengakses peta wisata digital ini.

1.2. Perumusan Masalah

Berdasarkan uraian latar belakang di atas maka rumusan masalah

yang akan dibahas yaitu: “Bagaimana merancang dan membuat sebuah

aplikasi multimedia tentang peta digital wisata Kabupaten Ngawi sebagai

sarana informasi yang tampilan dan penyajian data yang dapat diterima

oleh masyarakat dengan informasi data yang dapat berubah tanpa

membuka file animasi.”

Page 12: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

3

1.3. Batasan Masalah

Dalam batasan masalah, penulis membatasi konsep pembuatan

animasi peta informasi wisata pada informasi wisata alam, wisata belanja,

wisata kuliner,,wisata sejarah, wisata religi dan rekreasi, serta terdapat

informasi fasilitas wisata lainnya seperti informasi Transportasi, hotel,

pusat oleh-oleh, rest area, informasi kesehatan, galeri video serta terdapat

navigasi pada peta berupa button search, zoom in, zoom Out, drag,

referesh, wisata, legenda, musik.

1.4. Tujuan dan Manfaat

Tujuan penelitian ini adalah membuat sebuah aplikasi multimedia

Peta Wisata Digital Kabupaten Ngawi Berbasis Flash dan Xml sebagai

sarana informasi di sektor industry pariwisata kepada wisatawan dengan

tampilan menarik,aplikatif,dan dinamis.

Manfaat pembuatan animasi peta informasi wisata Ngawi berbasis

multimedia akan mempermudah promosi dan sosialisasi berbagai

informasi wisata serta fasilitas wisata yang ada di kabupaten Ngawi.

Tampilan yang menarik, efesien, dan aplikatif akan memudahkan

wisatawan mendapatkan informasi dari sebuah peta wisata.

1.5. Metodologi Penelitian

1.5.1 Pengumpulan Data

Metode penelitian yang digunakan dalam proses pembuatan

animasi peta informasi wisata antara lain:

a. Observasi

Metode observasi adalah metode pengumpulan data dengan

cara melakukan pengamatan dan pencatatan data-data serta

berbagai hal yang akan dibutuhkan dalam proses penelitian.

Observasi yang dilakukan dalam penyusunan tugas akhir ini

dengan cara mencari contoh dan referensi mengenai peta digital

Page 13: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

4

yang pernah ada seperti Solo Digital Map 1.0, Peta-Yogya, Peta

Surabaya. Observasi juga dilakukan dengan mencari poster peta

Ngawi dan booklet yang diterbitkan permerintah kota Ngawi.

b. Studi Pustaka

Studi pustaka merupakan metode pencarian dan

pengumpulan data dengan cara mencari referensi, literatur, atau

bahan-bahan teori yang diperlukan dari berbagai sumber wacana

yang berkaitan dengan penyusunan tugas akhir yaitu dengan

teknik pengumpulan data melalui internet, mencari buku-buku

referensi yang berhubungan dengan masalah mengenai tema

dalam penyusunan tugas akhir ini dan buku-buku mengenai

flash.

1.5.2 Perancangan Sistem

Perancangan sistem meliputi proses pembuatan alur

aplikasi (sitemap), pembuatan sketsa tampilan aplikasi (wireframe),

dan pembuatan interface dari database ke aplikasi. Database dibuat

dengan bahasa pemrograman XML dan PHP.

1.5.3 Pembuatan Aplikasi

Pembuatan aplikasi terdiri dari proses pembuatan desain

dengan menggunakan Adobe Photoshop CS 2 dan dibuat

menggunakan Adobe Flash CS 3.. Setelah tahap pembuatan,

aplikasi kemudian diekspor dan selanjutnya dilakukan testing

apabila masih terdapat error atau aplikasi belum sesuai dengan

target yang diharapkan maka dilakukan testing kembali.

Page 14: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

5

1.6. Sistematika Penulisan

a. Bab I Pendahuluan

Uraian latar belakang, perumusan masalah, batasan masalah, tujuan

dan manfaat penelitian, serta metodologi penelitian.

b. Bab II Landasan Teori

Penjelasan landasan teori yang digunakan penulis untuk membuat

aplikasi Peta Wisata Digital Kabupaten Ngawi.

c. Bab III Desain dan Perancangan

Merupakan analisis rencana, data, dan rancangan yang akan

diterapkan pada pembuatan animasi peta informasi wisata, seni, dan

budaya.

d. Bab IV Implementasi dan Analisa

Menunjukkan hasil dari pembuatan animasi peta wisata, seni, dan

budaya kabupaten Ngawi dengan gambar serta pembahasan masalah

dari pembuatan animasi peta informasi wisata seni, dan budaya

Kabupaten Ngawi.

e. Bab V Penutup

Menguraikan kesimpulan dari tujuan dibuatnya aplikasi peta dan

saran yang ditujukan untuk pengembangan aplikasi yang lebih baik.

Page 15: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

6

BAB II

LANDASAN TEORI

2.1. Peta

Menurut Riyanto,dkk (2009:3) peta merupakan penyajian grafis

dari permukaan bumi dalam skala tertentu dan digambarkan pada bidang

datar melalui sistem proyeksi peta dengan menggunakan simbol-simbol

tertentu sebagai perwakilan dari objek-objek spasial di permukaan bumi.

Peta memiliki syarat-syarat sebagai berikut :

a. Peta tidak boleh membingungkan. Dalam hal ini peta perlu

dilengkapi :

1) Keterangan atau legenda

2) Skala peta

3) Judul peta

b. Peta harus dengan mudah dapat dimengerti dan ditangkap

maknanya, untuk itu digunakan :

4) Tata warna

5) Simbol

6) Sistem proyeksi dan sistem koordinat

c. Peta harus memberikan gambaran yang sebenarnya.

Komponen dasar peta terdiri dari :

a. Isi

Isi (data frame) peta menunjukkan isi dari makna ide

penyusun peta yang akan disampaikan kepada pengguna peta. Isi

peta merupakan bagian dari peta yang akan menampilkan

lapisan-lapisan data layer. Bagian ini adalah bagian terpenting

dan merupakan titik pusat dari sebuah dokumen peta.

Page 16: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

7

b. Skala

Skala peta menjelaskan hubungan dari data frame yang ada

di peta dengan dunia nyata dengan rasio perbandingan. Skala

sangat penting dicantumkan untuk melihat tingkat ketelitian dan

kedetailan objek yang dipetakan.

c. Legenda

Sebuah legenda bertugas untuk menjelaskan seluruh

simbol-simbol yang digunakan dalam sebuah peta pada setiap

lapisan datanya. Legenda peta menggambarkan secara detail

berbagai gambar skema, simbol, dan kategori yang terdapat dalam

peta tersebut.

d. Simbol arah

Simbol arah dicantumkan dengan tujuan untuk orientasi

peta. Arah utara lazimnya mengarah pada bagian atas peta. Lebih

dari itu, arah juga penting sehingga pemakai dapat dengan mudah

mencocokkan objek di peta dengan objek sebenarnya di lapangan.

e. Sumber / keterangan riwayat

Bertujuan agar pembaca peta dapat mengetahui sumber data

atau peta yang digunakan kapan peta dibuat dan sebagainya.jika

diperlukan pengguna peta dapat melacak keakuratan informasi dan

interprestasidari pembuat peta.

Adapun fungsi dan tujuan pembuatan peta adalah sebagai berikut :

a. Menunjukkan posisi atau lokasi relatif.

b. Memperlihatkan ukuran permukaan bumi.

c. Mengumpulkan dan meyeleksi data dari suatu daerah.

d. Sebagai alat komunikasi ruang.

e. Membantu dalam suatu desain.

f. Untuk analisis data spasial.

Page 17: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

8

2.2. Multimedia

2.2.1 Definisi Multimedia

Multimedia memiliki beberapa definisi dari beberapa sudut

pandang yang berbeda, antara lain sebagai berikut :

a. Multimedia adalah kombinasi dari komputer dan video. (Rosch,

1996)

b. Multimedia secara umum merupakan kombinasi tiga elemen,

yaitu suara, gambar dan teks. (McCormick, 1996)

c. Multimedia adalah kombinasi dari paling sedikit dua media input

atau output dari data, media ini dapat audio (suara, musik),

animasi, video, teks, grafik dan gambar. (Turban dkk, 2002)

d. Multimedia merupakan alat yang dapat menciptakan presentasi

yang dinamis dan interaktif yang mengkombinasikan teks, grafik,

animasi, suara dan gambar video. (Robin dan Linda, 2001)

e. Multimedia adalah pemanfaatan komputer untuk membuat dan

menggabungkan teks, grafik, suara, gambar bergerak (video dan

animasi) dengan menggabungkan link dan tool yang

memungkinkan pemakai melakukan navigasi, berinteraksi,

berkreasi dan berkomunikasi. Hofstetter (2001)

2.2.2 Objek Multimedia

objek multimedia terbagi menjadi(2007:Juhaeri):

a. Teks

Teks merupakan dasar dari pengolahan kata dan informasi

berbasis multimedia. Dalam kenyataannya multimedia menyajikan

informasi kepada pengguna dengan cepat, karena tidak diperlukan

membaca secara rinci dan teliti.

Page 18: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

9

Multimedia dirancang dengan menggunakan teks karena

teks merupakan sarana yang efektif untuk mengemukakan ide-ide

dan menyediakan instruksi-instruksi kepada pengguna.

b. Gambar

Secara umum gambar atau grafik berarti still image seperti

foto dan gambar. Manusia sangat berorientasi pada visual dan

gambar merupakan sarana yang sangat baik untuk menyajikan

informasi.

c. Animasi

Animasi adalah pembentukan gerakan dari berbagai media

atau objek yang divariasikan dengan gerakan transisi, efek-efek,

juga suara yang selaras dengan gerakan animasi tersebut atau

animasi merupakan penayangan frame-frame gambar secara cepat

untuk menghasilkan kesan gerakan.

d. Suara

Penyajian suara merupakan cara lain untuk lebih

memperjelas pengertian suatu informasi. Contohnya, narasi

merupakan kelengkapan dari penjelasan yang dilihat melalui video.

Suara dapat lebih menjelaskan karakteristik suatu gambar, misalnya

musik dan suara sound effect.

e. Video

Video merupakan elemen multimedia paling kompleks

karena penyampaian informasi yang lebih komunikatif

dibandingkan gambar biasa. Walaupun terdiri dari elemen-elemen

yang sama seperti grafik, suara dan teks, namun bentuk video

berbeda dengan animasi.

Page 19: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

10

Perbedaan terletak pada penyajiannya. Dalam video,

informasi disajikan dalam kesatuan utuh dari objek yang

dimodifikasi sehingga terlihat saling mendukung penggambaran

yang seakan terlihat hidup.

f. Interactive Link

Sebagian dari multimedia adalah interaktif, dimana

pengguna dapat menekan mouse atau objek pada screen seperti

button atau teks dan menyebabkan program melakukan perintah

tertentu. Interactive link dengan informasi yang dihubungkannya

sering kali dihubungkan secara keseluruhan sebagai hypermedia.

Secara spesifik, dalam hal ini termasuk hypertext (hotword),

hypergraphics dan hypersound

Menjelaskan jenis informasi yang dihubungkan interactive

link diperlukan bila pengguna menunjuk pada suatu objek atau

button agar dapat mengakses program tertentu. Interactive link

diperlukan untuk menggabungkan beberapa elemen multimedia

sehingga menjadi informasi yang terpadu.

2.3 Adobe Flash CS 3

Adobe Flash menurut Andi Sunyoto (2010:1) adalah perangkat

lunak multimedia yang digunakan untuk membuat animasi, hiburan, dan

berbagai komponen website. Adobe Flash merupakan sebuah program

yang didesain khusus oleh Adobe dan program aplikasi standar authoring

tool professional yang digunakan untuk membuat animasi dan bitmap

yang sangat menarik untuk keperluan pembangunan situs web yang

interaktif dan dinamis.

Flash didesain dengan kemampuan untuk membuat animasi 2

dimensi yang handal dan ringan sehingga flash banyak digunakan untuk

membangun dan memberikan efek animasi pada website, CD interaktif

dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk

Page 20: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

11

membuat animasi logo, film, game, pembuatan navigasi pada situs web,

tombol animasi, banner, menu interaktif, interaktif form isian, e-card,

screen saver dan pembuatan aplikasi-aplikasi web lainnya.

Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas

action script, filter, custom easing dan dapat memasukkan video lengkap

dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini

adalah ia mampu diberikan sedikit code pemograman baik yang berjalan

sendiri untuk mengatur animasi yang ada didalamnya atau digunakan

untuk berkomunikasi dengan program lain seperti HTML, PHP, dan

database dengan pendekatan XML, dapat dikolaborasikan dengan web,

karena mempunyai keunggulan antara lain kecil dalam ukuran file

outputnya.

Aplikasi Flash merupakan sebuah standar aplikasi industri

perancangan animasi web dengan peningkatan pengaturan dan perluasan

kemampuan integrasi yang lebih baik. Banyak fiture-fiture baru dalam

Flash yang dapat meningkatkan kreativitas dalam pembuatan isi media

yang kaya dengan memanfaatkan kemampuan aplikasi tersebut secara

maksimal. Fitur-fitur baru ini membantu kita lebih memusatkan perhatian

pada desain yang dibuat secara cepat, bukannya memusatkan pada cara

kerja dan penggunaan aplikasi tersebut.

2.4 XML

Menurut Robertus Setiawan Aji Nugroho (2005) XML merupakan

bahasa markup yang digunakan untuk menyimpan data (tidak ada

program) dan tidak tergantung dengan tools tertentu. Markup yaitu bahasa

yang berisikan kode-kode berupa tanda-tanda tertentu dengan aturan

tertentu untuk memformat dokumen teks dengan tag sendiri agar dapat

dimengerti.

XML dapat mengubah sebuah aplikasi multimedia seperti peta

dengan Adobe Flash menjadi dinamis, yang berarti informasi yang

Page 21: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

12

disampaikan dapat diupdate tanpa harus mengganti file induknya. Selain

itu, XML yang memiliki sifat ekstensibilitas menjadi dapat ditukar atau

digabung dengan dokumen XML lain. Dengan teknologi seperti ini maka

informasi dari sebuah peta yang disajikan dapat diubah sewaktu-waktu

sesuai dengan perkembangan situasi.

Gambar 2.1 XML pada Adobe Flash

Dokumen XML dapat digunakan untuk berbagai macam tujuan,

seperti:

a. Sebagai penyimpan data (database) yang mudah dibaca oleh user

karena disimpan dalam bentuk teks.

b. Standar transfer data, dapat digunakan untuk pengiriman data transaksi

antar perusahaan, atau mentransfer data dari DBMS yang berbeda

(misal: Oracle ke SQL Server).

c. Sebagai acuan membuat bahasa baru, seperti WML (Wireless Markup

Language) yang digunakan pada mobile device dengan protokol WAP,

atau Sebagai file konfigurasi, di Java dokumen-dokumen XML sering

kita jumpai seperti file server.xml dan web.xml yang digunakan

Tomcat, atau perintah-perintah query yang disimpan dalam file XML

yang dipakai pada framework iBatis atau Hibernate.

Page 22: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

13

XML menjadi dasar dari beberapa bahasa markup yang telah

sedang berkembang sampai saat ini, seperti: XHTML (perbaikan dari

HTML), VoiceXML (bahasa untuk aplikasi suara, telepon), XForms (form

pada web yang dapat digunakan pada berbagai macam jenis browser,

seperti: desktop, PDA , handphone, kertas), XPath, XPointer, XSL dan

XSLT (transformasi dan presentasi XML).

2.5 Action Script

Action Script adalah bahasa pemrograman action pada flash, Jenis

script yang dipakai serupa dengan Bahasa Pemograman Java, oleh karena

itu kebanyakan orang yang telah ahli java atau setidaknya kenal tidak akan

kesulitan mengintegrasikan pada Flash, untuk terciptanya sebuah animasi

dengan Action yang sangat bermanfaat dalam Internet Communication,

yang lebih atraktif dan lebih efisien (2006:Sanjaya)..

Action Script memadukan Animasi Keyframing dengan Bahasa

Pemrograman yang hasil dari perpaduan keduanya, diantaranya dapat:

1. Menghemat Ukuran file

2. Kolaborasi dengan Database

a. MsAccess

b. MySql

c. ADO

d. XML

2.6 Scene

Menurut Didik Wijaya (2002) Scene merupakan halaman atau

bagian dari animasi yang digunakan sebagai temapat pengolahan animasi.

Tujuan penggunaan scene adalah agar memudahkan proses pembuatan

animasi karena setiap animai memiliki kebutuhan yang berbeda. Scene ini

dapat digunakan untuk membagi cerita yang panjang menjadi bagian-

bagian yang lebih kecil agar mudah melakukan perubahan – perubahan

yang diperlukan. Pemunculan movie pada scene yang lain atau yang

Page 23: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

14

diperlukan dapat diatur dengan menggunakan interface dengan

menggunakan button.

2.7 Struktur Navigasi

Struktur navigasi adalah struktur atau alur dari suatu program. Ada

empat macam bentuk dasar dari struktur navigasi yang biasa dilakukan

dalam proses pembuatan aplikasi multimedia.(2003:Sutopo )

a. Struktur Navigasi Linier

Struktur navigasi linier banyak digunakan oleh sebagian besar

multimedia linier. Informasi diberikan secara sekuensial dimulai dari

satu halaman. Beberapa desainer menggunakan satu halaman untuk

masuk atau keluar dari aplikasi. Linear navigation model banyak

digunakan dan berhasil dengan baik pada beberapa macam aplikasi

seperti:· presentasi dan· aplikasi computer based – training serta·

aplikasi yang memerlukan informasi berurutan

Gambar 2.2 Struktur Navigasi Linier

b. Struktur Navigasi Hirarki

Struktur navigasi hirarki diadaptasi dari top – down design.

Konsep navigasi ini dimulai dari satu node yan menjadi halaman utama

atau halamanawal. Dari halaman tersebut dapat dibuat beberapa cabang

ke halaman – halaman level 1. halaman tersebut adalah isi atau halaman

penunjang dari sebuah halaman utama, dari tiap halaman level 1 dapat

10 juga dikembangkan menjadi beberapa cabang lagi. Hal ini seperti

struktur organisasi dalam perusahaan . Hierarchical model baik bagi

Page 24: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

15

aplikasi untuk menemukan lokasi halaman dengan mudah. Untuk

menggambarkan model tersebut dapat digunakan ilustrasi dengan tree.

Gambar 2.3 Struktur Navigasi Hirarki

c. Struktur Navigasi Non Linier

Struktur navigasi non linier (tidak terurut) merupakan

pengembangan dari struktur navigasi linier, hanya saja pada struktur ini

diperkenankan untuk membuat percabangan. Pada struktur ini

kedudukan semua page sama, sehingga tidak dikenal adanya master

atau slave page.

Gambar 2.4 Struktur Navigasi Non Linier

Page 25: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

16

d. Struktur Navigasi Campuran

Struktur navigasi campuran (composite) merupakan gabungan dari

struktur sebelumnya dan disebut juga struktur navigasi bebas,

maksudnya adalah jika suatu tampilan membutuhkan percabangan

maka dibuat percabangan. Struktur ini paling banyak digunakan dalam

pembuatan aplikasi multimedia.

Gambar 2.5 Struktur Navigasi Campuran

Page 26: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17

BAB III

DESAIN DAN PERANCANGAN

3.1. Alat Penelitian

Dalam pembuatan aplikasi dan penyusunan tugas akhir ini

dibutuhkan alat baik hardware maupun software. Adapun alat-alat yang

digunakan tersebut adalah sebagai berikut :

3.1.1. Software

Software atau perangkat lunak yang digunakan untuk

membangun aplikasi tugas akhir ini antara lain:

1. Adobe Flash CS3

Software digunakan untuk menyusun gambar, teks, suara,

dan pembuatan animasi.

2. Adobe Photoshop

Software digunakan untuk membuat dan memanipulasi

gambar dan object bahan animasi.

3. Xml Marker

Software digunakan untuk membuat file .xml sebagai tempat

database aplikasi itu disimpan.

4. Xampp

Software digunakan untuk server localhost.

5. Notepad++

Software digunakan untuk membuat file .php yang

digunakan untuk membuat halamam admin.

3.1.2. Hardware

Hardware adalah perangkat keras yang dibutuhkan untuk

membangun aplikasi tugas akhir ini. Adapun hardware yang digunakan

antara lain :

Page 27: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

18

1. Seperangkat laptop dengan spesifikasi minimal :

Processor : Core to duo

Memory : 1 GB

VGA : 1 GB

Harddisk : 320 GB

Resolusi : 1024 x 768 px

2. Headset

3.2. Langkah pengembangan aplikasi

Dalam pengembangan sebuah aplikasi dilakukan beberapa proses

bertahap dari perencanaan hingga aplikasi siap digunakan. Berikut adalah

bagan dari langkah-langkah pengembangan aplikasi peta wisata :

Gambar 3.1 Bagan Langkah Pengembangan Aplikasi

Pembuatan

Aplikasi

Perancangan

Aplikasi

Finishing

Perbaikan

Pengujian

Page 28: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

19

3.2.1. Perancangan Aplikasi

Perancangan aplikasi bertujuan agar pembuatan aplikasi

dapat sesuai dengan kebutuhan dan tujuan yang diinginkan.

Perancangan juga akan memudahkan proses pembuatan aplikasi

peta wisata. Sehingga tidak tejadi kebingungan dalam menentukan

kebutuhan aplikasi.

3.2.2. Membuat aplikasi peta

Pembuatan aplikasi merupakan proses utama dalam

pembuatan peta wisata digital berbasis flash dan xml ini.

Pembuatan aplikasi dilakukan menggunakan software Adobe Flash

CS 3, Adobe Photoshop CS2, XML Marker, Xampp dan

Notepad++ serta sistem Operasi yang digunakan adalah Windows

7 Ultimate.

3.2.3. Pengujian

Aplikasi yang dibuat harus melalui proses evaluasi sebelum

digunakan oleh pengguna. Testing dilakukan oleh pembimbing dan

dewan penguji tugas akhir yang telah ditentukan oleh panitia tugas

akhir. Testing juga dilakukan oleh masyarakat yang menjadi objek

dari pembuatan aplikasi peta digital berbasis multimedia ini.

3.2.4. Perbaikan

Tahap pengujian yang sudah dilakukan akan menjadi dasar

dalam tahap selanjutnya yaitu tahap perbaikan. Dalam tahap

perbaikan, aplikasi diperbaiki sesuai dengan koreksi dari tahap

pengujian yang selanjutnya juga diuji kembali.

3.2.5. Finishing

Tahap terakhir dalam pembuatan aplikasi adalah tahap

finishing. Produk yang sudah melewati tahap pengujian dan

perbaikan dikemas dalam bentuk CD aplikasi multimedia yang

interaktif untuk disajikan kepada masyarakat.

Page 29: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

20

3.3. Rancangan Aplikasi

3.3.1. Perancangan Kebutuhan Scene Animasi

Scene merupakan halaman atau bagian dari animasi yang

digunakan sebagai temapat pengolahan animasi. Tujuan

penggunaan scene adalah agar memudahkan proses pembuatan

animasi karena setiap animai memiliki kebutuhan yang berbeda.

3.3.1.1. Scene Intro

Scene intro berisi frame tentang animasi pada saat

peta dijalankan. Disini berisi frame- frame yang terdapat

teks dan gambar serta button skip, button music,dan button

enter.

3.3.1.2. Scene Wisata Alam, Wisata Belanja, Wisata Kuliner,

Wisata Rekreasi, Wisata Religi dan Wisata Sejarah.

Scene ini merupakan tempat untuk melakukan

pengolahan info wisata yang terdiri dari wisata alam,

wisata belanja, wisata kuliner, wisata rekreasi, wisata religi,

wisata sejarah. Scene Wisata ini berisi tombol navigasi

untuk menuju ke halaman detail dari berbagai info wisata

seperti wisata kuliner, wisata alam,wisata belanja, wisata

sejarah, wisata religi, dan wisata rekreasi. Scene ini juga

terdapat animasi peta wisata berupa gambar peta kabupaten

ngawi animasi tool dan animasi legenda. Scene ini juga

merupakan tempat pengolahan animasi halaman detail

informasi wisata yang ada didaerah kab.ngawi dan

sekitarnya.

Pada symbol detail memiliki 2 komponen utama

yaitu gambar dari objek atau fasilitas wisata, serta

keterangan dari objek atau fasilitas wisata. Kedua utama

tersebut bergantung pada data XML yang ada di luar file

Page 30: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

21

flash. Data yang berbentuk XML ini digunakan sebagai

tempat pengolahan data informasi dan fasilitas wisata. Pada

aplikasi peta wisata digital kabupaten Ngawi berbasis flash

dan xml ini memiliki 6 scene yang bergantung pada file

XML yaitu:

1) Scene Wisata Alam

2) Scene Wisata Belanja

3) Scene Wisata Kuliner

4) Scene Wisata Rekreasi

5) Scene Wisata Religi

6) Scene Wisata Sejarah

3.3.1.3. Scane Lain

Berisi Informasi tentang info-info lainnya yang ada

di kabupaten Ngawi seperti Hotel, rest Area, Rumah

makan, transportasi dan lain sebagainya scene ini juga

terdapat animasi-animasi untuk memperindah tampilan

pada aplikasi peta digital kabupaten ngawi ini. Untuk scane

lain data yang digunakan yaitu data yang bersifat statis. Jadi

tidak terhubung dengan file .xml.

3.3.2. Struktur Navigasi Menu Aplikasi

Struktur Navigasi Menu Aplikasi pada aplikasi peta wisata

digital kabupaten Ngawi menggunakan Struktur navigasi

campuran. Strukturnya sebagai berikut :

INTRO

Wisata

Sejarah

Wisata

Religi

Wisata

Kuliner

Wisata

Belanja

Wisata

AlamLain

Wisata

Rekreas

i

Gambar 3.2 Site Map Struktur Menu Aplikasi

Page 31: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

22

Gambar 3.2 Aplikasi peta wisata kabupaten Ngawi terdiri

dari beberapa menu. Ketika aplikasi ini dijalankan akan ada

tampilan intro,kemudian ada tombol enter yang digunakan untuk

masuk kedalam aplikasi. Selanjutnya terdapat tampilan Wisata

Alam,Wisata Belanja,Wisata Kuliner, Wisata Religi,Wisata

Sejarah,Lain

3.3.3. Struktur Navigasi Fitur Aplikasi Peta

Strukture Navigasi Fitur aplikasi peta wisata ini

menggunakan structure navigasi hirarki. Struktur navigasi fitur ini

memiliki beberapa fitur antara lain tertera seperti pada gambar di

bawah ini:

Drag

Zoom In

Zoom Out

Ko’ordinat

Wisata Alam

Simbol Arah

Detail

WisataSearch

Navigasi

Musik

Legenda

Drag

Zoom In

Zoom Out

Ko’ordinat

Wisata

Belanja

Simbol Arah

Detail

WisataSearch

Navigasi

Musik

Legenda

Drag

Zoom In

Zoom Out

Ko’ordinat

Wisata

Kuliner

Simbol Arah

Detail

WisataSearch

Navigasi

Musik

Legenda

Drag

Zoom In

Zoom Out

Ko’ordinat

Wisata

Religi

Simbol Arah

Detail

WisataSearch

Navigasi

Musik

Legenda

Drag

Zoom In

Zoom Out

Ko’ordinat

Wisata

Sejarah

Simbol Arah

Detail

WisataSearch

Navigasi

Musik

Legenda

RefereshRefereshRefereshRefereshReferesh

Gambar 3.3 Struktur Navigasi Fitur Aplikasi

Gambar 3.3 sAplikasi peta wisata digital kabupaten ngawi

memiliki beberapa fitur yang digunakan untuk mempermudah

wisatawan. Fitur-fitur itu antara lain fitur Drag, Zoom In, Zoom

Out,Ko’ordinat,Detail Wisata,Search,Navigasi,Legenda, Simbol

Arah,Musik. Fitur-fitur tersebut terltak pada tiap- tiap tempat

wisata yang ada di kabupaten Ngawi.

Page 32: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

23

3.3.4. Rancangan Tampilan

3.3.4.1. Tampilan Awal

Gambar 3.4 Tampilan Intro Aplikasi

Tampilan intro ini menjadi tampilan pembuka aplikasi.

Terdiri dari judul, button utama untuk masuk ke menu aplikasi peta

dan button pengaturan sound effect agar para pengguna lebih

nyaman dalam menggunakan aplikasi ini.

3.3.4.2. Tampilan Menu Utama

Gambar 3.5 Rancangan Tampilan Menu

Gambar 3.5 Tampilan Menu Utama

Animasi

Button Button

2

PETA Kordinat

Info

wisata

legenda

Music,search,wisata,legenda,referesh,Zoom In, Zoom Out,Drag

Judul

Page 33: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

24

Tampilan menu utama aplikasi adalah tampilan lanjutan

setelah halaman intro. Tampilan menu ini memiliki beberapa fitur-

fitur untuk mendukung aplikasi peta digital yaitu terdapat buton

search yang digunakan untuk mencari nama ruangan dari peta,

button zoom in untuk memperbesar tampilan pada peta, button

zoom out untuk memperkecil tampilan pada peta serta button drag

untuk menggeser peta sesuai dengan yang diinginkan. Disini juga

terdapat button Wisata alam, wisata belanja,wisata kuliner,wisata

rekreasi, wisata religi, wisata sejarah untuk berganti menuju

tempat wisata yang diinginkan.

Page 34: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

25

BAB IV

IMPLEMENTASI DAN ANALISA

4.1. Detail Aplikasi

Peta Digital Wisata Kabupaten Ngawi ini merupakan aplikasi

informasi tentang wisata- wisata yang ada di daerah kabupaten Ngawi.

Aplikasi dibuat berbasis Flash dengan penggabungan animasi gambar,

teks, dan suara yang akan menjadikan aplikasi menarik dengan

pengelolaan database menggunakan XML supaya data yang disajikan bisa

diubah dan bisa diedit sesuai dengan perubahan informasi dan kondisi

pada objek tanpa membuka file aplikasi peta wisata tersebut.

Peta wisata ini menjadi pemaparan informasi yang menarik bagi

para pengguna yang membutuhkan informasi tentang wisata-wisata apa

saja yang ada di daerah Kabupaten Ngawi beserta letaknya. Dengan

penggambaran visualisasi 2 dimensi, diharapkan pengguna dapat

menangkap informasinya secara lebih menyeluruh dengan tingkat

informasi yang jelas dan lengkap.

4.2. Implementasi Scene Aplikasi

4.2.1. Pembuatan Scene Aplikasi

Pembuatan Scene Aplikasi Peta Wisata Digital Kabupaten

Ngawi meliputi proses pemberian nama pada tiap scene dengan nama

yang berbeda.

Gambar 4.1 Pembuatan Scene Aplikasi

Page 35: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

26

Gambar 4.1 merupakan scene aplikasi Peta wisata digital

kabupaten Ngawi yang terdiri dari Scene Intro, Scene Wisata Alam,

Scene Wisata belanja, Scene Wisata Kuliner, Scene Wisata Religi,

Scene Wisata Sejarah.

Pemberian Action Script scene Aplikasi Peta Wisata Digital

Kabupaten Ngawi terletak di stage utama tiap scene wisata.

Gambar 4.2 ActionScript Scene

Gambar 4.2 merupakan Contoh Action Script Yang berada

pada stage utama scene Wisata Kuliner yang terdiri dari action

script pada frame stop, as full script, mouse, asmusic, munculnya

info, search,zoom, zoom button, wisata.

4.2.2. Tampilan Scene Aplikasi

Tampilan Scene Aplikasi Peta Wisata Digital Kabupaten Ngawi

Gambar 4.3 Tampilan Scene Aplikasi

Page 36: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

27

Gambar 4.3 merupakan scene aplikasi peta wisata yang

belum diberi fitur apapun. Scene hanya berupa gambar peta

kabupaten Ngawi dengan skala perbandingannya 1:500.000.

4.3. Implementasi Struktur Menu Aplikasi

4.3.1. Menu Intro

4.3.1.1. Pembuatan Intro Aplikasi

Pembuatan intro aplikasi meliputi beberapa proses

pembuatan komponen seperti teks judul, dan gambar

animasi.

Gambar 4.4 Pembuatan Intro Aplikasi

Penggunaan teknik masking pada gambar 4.4

menjadi teknik dominan dalam pembuatan animasi teks dan

gambar agar lebih menarik dan dinamis di dalam aplikasi.

Proses teknik masking ini terdiri dari pembuatan objek

rectangle yang diberi warna gradasi kemudian diberikan

efek motion tween dan gambar di-mask agar efek dalam

rectangle menjadi efek pada gambar.

Page 37: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

28

Pemberian Action Script Intro Aplikasi dimulai

dengan pembuatan Button enter dilalukakan dengan

mengambil contoh button di commond library. Lalu kita

isikan action script

on (release) {

gotoAndStop("WisataAlam", 1);

}

Penjelasan script diatas adalah ketika kursor mouse

berada diatas tombol dan mouse sedang ditekan maka

langsung menampilkan Scene WisataAlam.

4.3.1.2. Tampilan Intro Aplikasi

Gambar 4.5 Tampilan Intro Aplikasi

Gambar 4. 5 merupakan tampilan Intro dari Apikasi

Peta Wisata Digital Kabupaten Ngawi. Disini terdapat 2

button yaitu button skip dan button music.button skip

digunakan untuk langsung menuju ke file aplikasi peta

wisata tanpa harus melihat animasi intro Aplikasi Peta

Wisata Digital tersebut. Sedangkan button musik digunakan

untuk memutar atau mematikan music tersebut.

Page 38: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

29

4.3.2. Menu Wisata Alam, Belanja,Kuliner,Rekreasi,Religi,Sejarah.

4.3.2.1. Pembuatan Menu Wisata Alam Belanja, Kuliner,

Rekreasi, Religi, Sejarah.

Sebagai contoh dalam pembuatan Menu Peta Wisata

Alam. Gambar peta yang ada merupakan gambar yang

diperoleh dari dinas pariwisata kabupaten Ngawi.

Pada menu wisata alam terdapat 2 komponen utama

yaitu frame peta dengan frame camera

Gambar 4.6 Frame Camera Wisata Alam

Gambar 4.6 adalah frame camera yang didalamnya

terdapat fitur-fitur seperti Search, Zoom In, Zoom Out,

Drag, Musik, Navigasi, Ko’ordinat dll. Semua fitur- fitur

tersebut dimasukkan ke frame camera supaya apabila pada

saat di Zoom In atau Zoom Out ukurannya tidak berubah.

Gambar 4.7 Frame Peta Wisata Alam

Page 39: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

30

Gambar 4.7 adalah frame peta. Frame peta

merupakan frame yang terdapat gambar peta kabupaten

ngawi.

Pemberian script pada wisata alam maupun wisata

lainnya dilalkukan Stage utama Scene Wisata . Untuk

membuat gambar peta wisata bisa membesar sesuai dengan

layar monitor kita. Kita masukkan actionscript berikut.

fscommand("fullscreen","true");

fscommand("showmenu","false");

fscommand("allowscale","True");

Penjelasan script diatas adalah ketika aplikasi ini

dijalankan maka fullscreen bernilai true.

4.3.2.2. Tampilan Menu Wisata Alam

Gambar 4.8 Tampilan Menu Wisata Alam

Gambar 4.8 merupakan tampilan Aplikasi Peta

Wisata Digital Kabupaten Ngawi pada menu wisata alam

setelah di publish. Untuk Peta Wisata belanja, kuliner,

rekreasi, religi dan sejarah sama seperti peta wisata alam.

Page 40: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

31

4.3.3. Menu Lain

4.3.3.1. Pembuatan Menu Lain.

Gambar 4.9 Pembuatan Menu lain

Gambar 4.9 merupakan Pembuatan Menu lain.

Menu lain terdiri dari beberapa informai antara lain

transportasi, hotel, pusat oleh-oleh,rest area, informasi

kesehatan, video galeri, about us.

ActionScrip diberikan di frame background dan

button menu. Untuk frame background dengan Script

fscommand("allowscale", "false");

fscommand("showmenu", "false");

getURL("FSCommand:Fullscreen",true);

Penjelasasn Script diatas adalah pada saat Movie

clip menu lain dijalankan maka fullscreen akan bernilai true

atau dengan kata lain tampilan mnu lain akan sesuai dengan

monitor kita. Untuk Button menu Dengan Script

on (release) {

gotoAndStop("WisataAlam", 1);

}

Penjelasan Script diatas adalah ketika Button Menu

Lain di klik maka akan menampilkan Scene WisataAlam.

Page 41: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

32

4.3.3.2. Tampilan Menu Lain.

Gambar 4.10 Menu Lain

Gambar 4.10 merupakan tampilan Menu Lain yang

sudah di publish.

4.4. Implementasi Fitur Aplikasi Peta

4.4.1. Fitur Drag Aplikasi Peta

4.4.1.1. Pembuatan fitur Drag

Gambar 4.11 Pembuatan Fitur Drag

Gambar 4.11 merupakan pembuata fitur drag

dengan 1 buah movie clip. Movie clip tersebut berisi 1 buah

gambar tangan yang properties instance namenya “b3”

instance name ini yang digunakan sebagai penanda yang

nantinya akan dipanggil oleh actionscript.

Page 42: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

33

Pemberian ActionScript fitur Drag layer stage

utama kita berikan actionscript

//………………………………………..

this.toolzoom.gotoAndStop(3);

map.indo.onRelease=function() {

if (!dragme) {if (_root.zoomin && klik <5)

//…………………………………………..

this.stopDrag();

trace(klik);}

map.indo.onPress=function() {

if (dragme) {

map.startDrag();

trace(this);}}

//………………………………………

Penjelasan Script Diatas adalah pada saat map atau

peta di klik maka akan menjalankan function dragme.

Function dragme yang membuat peta wisata bisa bergeser.

4.4.1.2. Tampilan Drag

Gambar 4.12 Tampilan Drag

Page 43: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

34

Gambar 4.12 merupakan Tampilan drag dengan

tampilan telapak tangan yang apabila di klik maka kursor

mouse kita akan berubah menjadi gambar telapak tangan

yang siap digunakan untuk menggeser-geser peta sesuai

yang diinginkan.

4.4.2. Fitur Zoom In

4.4.2.1. Pembuatan fitur Zoom In

Gambar 4.13 Pembuatan Fitur Zoom In

Gambar 4.13 merupakan pembuatan fitur Zoom In

dengan 1 buah movie clip. Movie clip tersebut terdiri dari 1

buah gambar kaca pembesar yang properties instance

namenya “b1” instance name ini yang digunakan sebagai

penanda yang nantinya akan dipanggil oleh actionscript.

Pemberian Script pada Button Zoom In dengan

instance namenya “b1” dengan Action Script sebagai

berikut

kamera.navmenu.b1.onRelease=function()

{_root.kamera.info._visible=false;Mouse.hide();_ro

ot.kamera.toolzoom.gotoAndStop(2);

//…………………………………………………..

Page 44: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

35

if (_root.zoomin && klik < 5)

{zoom(kamera,0.5,1);

klik++;}

//………………………………………………………

Penjelasan script diatas adalah telah dibuatkan

function dengan event on release pada button Zoom in

dengan instance namanya “b1” yang apabila mouse diklik

akan menjalankan perintah movie clip dengan instance

namenya info,zoomout,dragme tidak ditampilkan karena

bernilai false. Hanya movie clip dengan instance namenya

bsearch0 dan mode zoom in saja yang aktif.

kamera.navmenu.b1.onRollOver=function() {

Mouse.show();

_root.kamera.toolzoom.gotoAndStop(1);

}

Penjelasan script diatas ketika mouse keluar dari

area tombol maka kaca pembesar tidak ditampilkan dan

yang ditampilkan hanya mouse.

4.4.2.2. Tampilan Zoom In

Gambar 4.14 Tampilan Button Zoom In

Page 45: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

36

Gambar 4.14 merupakan button Zoom In dengan

tampilan kaca pembesar dengan tanda “+” ditengahnya

yang apabila di klik maka kursor mouse kita akan berubah

menjadi gambar kaca pembesar tersebut. Button Zoom In

digunakan untuk memperbesar tampilan peta sesuai yang

diinginkan.

4.4.3. Fitur Zoom Out Aplikasi Peta

4.4.3.1. Pembuatan fitur Zoom Out

Gambar 4.15 Pembuatan fitur Zoom Out

Gambar 4.15 merupakan pembuatan fitur Zoom Out

dengan 1 buah movie clip. Movie clip tersebut berisi 1 buah

gambar kaca pembesar yang properties instance namenya

“b2” instance name ini yang digunakan sebagai penanda

yang nantinya akan dipanggil oleh actionscript.

Pemberian ActionScript fitur Zoom Out pada bagian

on(release) sama seperti pada button Zoom in keculai pada

script

_root.zoomout=true;

this.toolzoom.gotoAndStop(3);

Page 46: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

37

Script berikutnya sama seperti pada bagian Zoom

In.Penjelasan Script diatas adalah pada saat mouse berada

diatas tombol dibuatkan function yang mengarahkan ke

mode toolzoom dengan posisi kursor mouse

disembunyikan.

4.4.3.2. Tampilan Zoom Out

Gambar 4.16 Button Zoom Out

Gambar 4.16 merupakan button Zoom Out dengan

tampilan kaca pembesar dengan tanda “-” ditengahnya

yang apabila di klik maka kursor mouse kita akan berubah

menjadi gambar kaca pembesar tersebut. Button Zoom Out

digunakan untuk memperkecil tampilan peta sesuai yang

diinginkan.

4.4.4. Fitur Koordinat Aplikasi Peta

4.4.4.1. Pembuatan Fitur Koordinat

Pembuatan fitur Koordinat terdiri dari 3 buah layer.

pada layer teks yang didalamnya terdapat 2 buah Dynamic

teks dengan Instance namenya “PY” dan ”PX” yang

digunakan untuk menampilkan ko’ordinat mouse.

Sedangkan layer 3 terdapat 2 buah static teks dengan nama

Page 47: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

38

“pX”dan ”pY”. Serta layar merupakan shape gambar

persegi seperti tertera pada gambar 4.17.

Gambar 4.17 Pembuatan Fitur Koordinat

Pemberian Script pada stage utama peta kita isikan

ActionScript

//-------------------------------------------------------

map.onEnterFrame=function() {

Mouse.hide();

_root.kamera.koor.posX.text="map x= "+map._x;

_root.kamera.koor.posY.text="map y= "+map._y;

}

//------------------------------------------------------------

Penjelasan script diatas adalah posisi mouse kita

baik posisi “x”dan”y” akan ditampilkan di movie clip

dengan instance namenya koor untuk posisi x berada di

dynamic teks dengan instance namenya posX sedangkan

untuk posisi y berada di dynamic teks dengan instance

namenya posY .

Page 48: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

39

4.4.4.2. Tampilan Koordinat

Gambar 4.18 Tampilan Koordinat

Pada Gambar 4.18 merupakan tampilan ko’ordinat

posisi mouse berada. Posisi mouse berada pada ko’ordinat

X=-241.5 dan Y=-42.5

4.4.5. Fitur Detail Wisata Aplikasi Peta

4.4.5.1. Pembuatan fitur Detail Wisata

Pembuatannya terdapat movie clip objek dengan

instance name wisata alam. Lalu terdapat movie clip

keterangan, yang berada di dalam mc "kamera", di atas

layer "navmenu", di tengah stage. Dengan instance

name"info". Di dalamnya ada dynamic text dengan

instance namenya "inforuang" untuk nama ruang dan

"inforuangket" untuk keterangan ruangan. Dua dynamic

teks ini yang akan menampilkan teks yang diambil dari file

xml. Di antara dua dynamic text tersebut terdapat movie

clip kosong dengan instance namenya "gbr" yang gambar

tersebut di load dari folder seperti tertera pada gambar 4.19

dibawah ini.

Page 49: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

40

Gambar 4.19 Pembuatan Fitur Detail Wisata

Pemberian ActionScript fitur Detail Wisata pada

layer actionscript di stage utama dengan script

var feedMovie;

//load the XML data

mein_xml1 = new XML();

mein_xml1.ignoreWhite = true;

mein_xml1.load("WisataAlam/WisataAlam.xml");

mein_xml1.onLoad = function(status) {

if (status) {

content_xml1 =

mein_xml1.firstChild.childNodes;

initMenu1();

}

};

//-----------------------------------------------------------

Script diatas digunakan untuk meload file xml yang

berada di luar peta yaitu berupa data wisataalam.xml

Page 50: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

41

//-------------------------------------------------------------

if (daten1.attributes.PartID == "Image") {

var judul1=daten1.attributes.Judul;

var isi1=daten1.firstChild.firstChild.nodeValue

var gambar1= daten1.attributes.photo;

_root.kamera.papan.infot.text=judul1;

_root.kamera.papan.infot2.text=isi1;

_root.kamera.papan.gbr.loadMovie(gambar2);

//--------------------------------------------------

Penjelasan Script diatas adalah ketika id pada xml di

pilih maka akan membaca file xml yang berada di luar

animasi dengan attribute judul dibaca dengan var=judul1,

attribute isi1 dengan var isi1 dst. Lalu pada movie clip

papan info ditampilkan data pada dynamicteks dengan

instance namenya infot dengan var=judul1. Lalu pada

dynamicteks dengan instance namenya infot2 dengan

var=isi1. Lalu terdapat script berikut

//------------------------------------------------------------

_root.zoomin=false;

_root.zoomout=false;

_root.dragme=false;

Mouse.show();

this.gotoAndStop(1);}

//-----------------------------------------------------------

Penjelasan script diatas apabila movie clip dengan

instane name di klik maka tool Zoomin, Zoomout, Dragme

akan bernilai false atau tidak ditampilkan. Dibawah ini

merupakan script untuk menutup movieclip keterangan

dengan instance namenya “info”

Page 51: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

42

_root.kamera.info.clos.onRelease=function() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.info._visible=false;

Mouse.show();

Penjelasan script diatas adalah dibuatkan function

dengan event on release pada movie clip dengan instance

name clos yang apabila mouse ditekan dan dilepaskan maka

tampilan movie clip dengan instance namenya info akan

tidak kelihatan karena bernilai false.

4.4.5.2. Tampilan Detail Wisata

Gambar 4.20 Tampilan Detail Ruangan

Gambar 4.20 ini merupakan Tampilan detail

ruangan berupa keterangan yang dilengkapi dengan

gambar. Keterangan tersebut menjelaskan secara terperinci

apa saja pesona-pesona wisata tersebut. Sedangkan gambar

menampilkan gambaran lokasi wisata tersebut. Pada menu

ini juga terdapat button close untuk menutup menu

keterangan dan gambar, apabila button close di klik maka

detail ruangan tersebut akan menutup.

Page 52: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

43

4.4.6. Fitur Search Aplikasi Peta

4.4.6.1. Pembuatan fitur Search

Pembuatan Fitur Search meliputi proses pembuatan

mesin pencarian dan lokasi hasil penanda.

Gambar 4.21 Pembuatan Mesin Pencarian

Pada gambar 4.21 Pembuatan fitur mesin pencarian

dengan menggunakan 1 buah dynamic text dan 1 buah

static teks . Dynamic teks digunakan untuk mengisikan

nama wisata yang dicari dengan cara menekan button

search atau menekan enter maka mesin pencarian akan

mencari objek wisata sesuai dengan judul wisata yang kita

ketikan dan akan keluar sebuah movieclip yang

menunjukan lokasi yang dicari.

Gambar 4.22 Pembuatan Lokasi Hasil Pencarian

Page 53: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

44

Gambar 4.22 merupakan gambar pembuatan lokasi

hasil pencarian. Pembuatan movie clip lokasi penanda

terdiri dari 3 buah layer dengan 1 buah shape dan 1 buah

dynamic teks. Tanda panah sebagai petunjuk untuk

menunjukan ruangan tersebut berada. Apabila kita klik

tanda panah tersebut maka akan muncul tampilan detail

ruangan yang dicari berupa file gambar beserta keterangan

wisata tersbut.

Pemberian ActionScript menu search, terlebih

dahulu nama area dan posisinya dalam stage kita masukkan

ke dalam array seperti tertera di script dibawah ini.

function cari() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.map["tanda"+i]._visible=false;

_root.kamera.oksrc.warn._visible=false;

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

}

Penjelasan script diatas adalah dibuatkan function

cari yang apabila mouse ditekan maka akan menuju animasi

penanda dengan instance nama “tanda”. Lalu pemberian

Action Script pada lokasi hasil penanda pada layer search di

scene utama kita masukan script berikut

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

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

trace(marker[i]);

if(area[i]==kamera.oksrc.input_txt.text.toLowerCa

se()) {

Page 54: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

45

kamera.my_txt.text="Hasilpencarian"+kamera.oksr

c.input_txt.text;

_root.map["tandaA"+i].gotoAndStop(2);

gesermap(map, 1);

break;

} else {

Diberikan fungsi if yang apabila kita memasukan

input text yang sama dengan array area yang telah

dideklarasikan di awal maka function gesermap akan

mengarahkan ke area yang ditentukan.

kamera.my_txt.text = "Data tidak ditemukan";

}

}

} else {

kamera.my_txt.text = "Silakan cari";

}

};

Penjelasan Script diatas apabila teks yang kita isikan

tidak terdaftar di array yang telah ditentukan sebelumnya

maka akan muncul keterangan “data tidak ditemukan ” di

dynamic text dengan instance name my_txt dan apabila

tidak diisikan maka secara default tulisan yang keluar

adalah “silahkan cari”.

4.4.6.2. Tampilan Search

Gambar 4.23 Tampilan Mesin Pencari

Page 55: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

46

Gambar 4.23 merupakan proses mesin pencarian

yang Cara kerja nya ketika kita sudah mengetik lokasi

wisata yang dicari . Lalu kita klik button Search/ tekan

Enter maka otomatis penanda hasil pencarian akan muncul

dan menampilkan data yang diinputkan beserta lokasi yang

diinginkan seperti pada gambar 4.23.

Gambar 4.24 Tampilan Lokasi Pembuatan

4.4.7. Fitur Navigasi Aplikasi Peta

4.4.7.1. Pembuatan fitur Navigasi

Pembuatan fitur navigasi terdiri dari 3 frame. Frame

tempat background, frame tulisan serta frame button. Untuk

action script pada masing-masing Button seperti dibawah

ini.

//-----------------------------------------------------

_root.kamera.wisata.btnkuliner.onPress=function(){

gotoAndStop("WisataKuliner", 1);}

_root.kamera.wisata.btnreligi.onPress=function(){

gotoAndStop("WisataReligi", 1);}

_root.kamera.wisata.btnrekreasi.onPress=function(){

//-------------------------------------------------------------

Page 56: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

47

Penjelasan script diatas adalah ketika kursor mouse

berada diatas button WisataAlam dan mouse sedang ditekan

maka langsung menampilkan Scene WisataAlam . Sama

dengan button WisataAlam pada Button Wisata

Kuliner,Religi,Rekreasi akan menampilkan Scene Wisata

Kuliner,Religi,Rekreasi sesuai dengan nama pada button.

4.4.7.2. Tampilan Navigasi

Gambar 4.25 Tampilan Navigasi Wisata

Gambar 4.25 terdiri dari 8 buah button yaitu button

Wisata Alam,Wisata Belanja, Wisata Kuliner, Wisata

Religi, Wisata Rekreasi, Wisata Sejarah,lain dan Button

Keluar. Button WisataAlam terdapat Action Script yang

memanggil file Scene Wisata Alam begitu juga dengan

Button WisataBelanja yang memanggil file scene

WisataBelanja dan seterusnya sampai Button Lain yang

memanggil file Scene Lain. Button Keluar terdapat Action

Script yang digunakan untuk menutup Aplikasi Peta Wisata

Digital kabupaten Ngawi tersebut.

Page 57: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

48

4.4.8. Fitur Legenda Aplikasi Peta

4.4.8.1. Pembuatan fitur Legenda

Gambar 4.26 Pembuatan Fitur Legenda

Pada gambar 4.26 merupakan proses pembuatan

fitur legenda. Di fitur legenda ini terdapat 3 buah frame

yaitu frame tempat meletakkan button dengan instanc

namenya “tutup”,frame dengan keterangan symbol serta

frame dengan bingkai animasi.

Pemberian script pada fitur legenda terletak di dua

buah button yaitu button untuk membuka fitur legenda dan

button untuk menutup fitur legenda. Pada button alagenda

kita berikan script

//---------------------------------------------------------

root.kamera.alegenda.onPress=function(){

_root.kamera.legenda._visible=true;}

Sedangkan pada button tutup kita berikan script

_root.kamera.legenda.legenda.tutup.onPress=func

tion(){

_root.kamera.legenda._visible=false;

//-----------------------------------------------------

Page 58: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

49

Penjelasan script diatas adalah ketika button

alegenda ditekan akan menjalankan function yang

mengakibatkan movieclip dengan instance namenya

legenda akan bernilai true/ akan ditampilkan.

4.4.8.2. Tampilan Legenda

Gambar 4.27 Tampilan Legenda

Gambar 4.27 Ini merupakan tampilan fitur Legenda.

Fitur ini menjelaskan tentang symbol-simbol apa saja yang

ada di Aplikasi Peta Wisata Digital Kabupaten Ngawi.

Seperti symbol wisata alam,wisata belanja,wisata kuliner,

batas kota,batas kecamatan dan lain-lain.

4.4.9. Fitur Simbol Arah Aplikasi Peta

4.4.9.1. Pembuatan fitur Simbol Arah

Gambar 4.28 Pembuatan Fitur Simbol Arah

Gambar 4.28 merupakan pembuatan fitur symbol

arah. Symbol arah terdiri dari 2 frame yaitu frame tempat

animasi serta frame mata angin itu sendiri.

Page 59: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

50

4.4.9.2. Tampilan Simbol Arah

Gambar 4.29 Tampilan Simbol Arah

Gambar 4.29 merupakan gambar fitur symbol arah

yang sudah jadi. Symbol arah disini tidak ada

actionscriptnya karena semuanya menggunakan animasi.

Symbol arah dengan keterangan N untuk North,E untuk

east, W untuk west dan S untuk south.

4.4.10. Fitur Musik Aplikasi Peta

4.4.10.1. Pembuatan fitur Musik

Gambar 4.30 Pembuatan Fitur Musik

Gambar 4.30 pembuatan fitur music terdapat 5 buah

button. 4 buah butoon merupakan tombol music sedangkan

1 buah button tombol stop. Pemberian Script Musik terletak

di stage utama Aplikasi Peta Wisata Digital Kabupaten

Ngawi. Scriptnya sebagai berikut:

my_sound = new Sound();

my_sound.attachSound("music1");

my_sound.start(0.50);

Page 60: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

51

Penjelasan script diatas adalah dibuatkan variable

my_sound. Variable my_sound yang mengimport suara

dengan instance namenya “music1” yang ada di library.

_root.kamera.music.m1.onRelease = function() {

my_sound.stop();

my_sound.attachSound("music1");

my_sound.start(0.50);

stop();

};

Penjelasan Script diatas adalah ketika button music

dengan instance namenya “m1” di tekan maka akan

menjalankan file music. Begitu pula dengan button dengan

instance namenya ”m2”dan”m3”.

//--------------------------------------------------//

_root.kamera.music.stp.onRelease = function() {

my_sound.stop();

};

Penjelasan Script diatas adalah ketika button dengan

instance namenya “stp” ditekan maka suara akan berhenti.

4.4.10.2. Tampilan Musik Peta

Gambar 4.31 Tampilan Musik Peta

Gambar 4.31 merupakan tampilan musik aplikasi

peta wisata digital apabilas sudah di publish.

Page 61: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

52

4.4.11. Fitur Referesh Aplikasi Peta

4.4.11.1. Pembuatan fitur Referesh

Gambar 4.32 pembuatan fitur referesh

Gambar 32 merupakan gambar pembuatan fitur referesh.

Fitur referesh memiliki 1 buah button dengan instance namenya

referesh.

Pemberian script pada stage utama fitur referesh

_root.kamera.referesh.onRelease=function(){

_root.dragme = false;

_root.zoomin = false;

_root.zoomout = false;

zoom2(kamera, 1);

klik=0;

Penjelasan Script diatas adalah pada saat button ditekan

maka akan menjalankan function zoom2. Serta fitur zoom in,

zoom out, serta drag bernilai false.

4.4.11.2. Tampilan Referesh

Gambar 4.33 Tampilan fitur referesh

Gambar 4.33s merupakan tampilan referesh aplikasi

peta wisata digital apabilas sudah di publish.

Page 62: APLIKASI PETA WISATA DIGITAL KABUPATEN NGAWI BERBASIS .../Aplikasi... · on Windows operating systems. ... Aplikasi multimedia yang ... suara, gambar, dan animasi akan membuat pengguna

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

53

BAB V

PENUTUP

5.1. Kesimpulan

Kesimpulan yang dapat diperoleh dari pembuatan aplikasi multimedia

ini adalah sudah dapat dibuatnya aplikasi peta wisata digital berbasis flash dan

xml sebagai media sosialisasi dan promosi wisata, seni dan budaya yang ada di

Kabupaten Ngawi dan sekitarnya. Aplikasi ini memberikan informasi wisata,

berupa wisata alam, wisata belanja, wisata kuliner, wisata religi, wisata rekreasi

dan wisata sejarah yang ada di Kabupaten Ngawi. Perubahan data informasi

wisata yang tersimpan pada xml yang berada diluar file animasi diharapkan

memberikan kemudahan dan kenyamanan dalam melakukan perubahan data

informasi wisata tanpa harus membuka file animasi itu sendiri.

5.2. Saran

Aplikasi Peta Wisata Digital ini belum memiliki fitur skala ketika sedang

dalam posisi Zoom In atau Zoom Out.