peta virtual fmipa uns berbasis flash dan xml …eprints.uns.ac.id/8249/1/197821411201102511.pdf ·...

57
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML TUGAS AKHIR Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh : Nurmaidah NIM. M3108112 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2011

Upload: vandang

Post on 26-Jul-2019

245 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

i

PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Disusun oleh :

Nurmaidah

NIM. M3108112

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

2011

Page 2: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

ii

HALAMAN PERSETUJUAN

PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML

Disusun oleh :

Nurmaidah

NIM. M3108112

Tugas Akhir ini telah disetujui dan dipertahankan

Di hadapan dewan penguji

pada tanggal _______________

Pembimbing

Fendi Aji Purnomo, S.Si

NIDN. 0626098402

Page 3: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

iii

HALAMAN PENGESAHAN

PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML

Disusun Oleh :

Nurmaidah

NIM. M3108112

Dibimbing Oleh:

Fendi Aji Purnomo, S.Si

NIDN. 0626098402

Tugas Akhir ini telah diterima dan disahkan

oleh dewan penguji Tugas Akhir

Program Diploma III Teknik Informatika

pada hari __________ tanggal ______________

Dewan Penguji

1. Fendi Aji Purnomo, S.Si ( )

NIDN. 0626098402

2. Umi Salamah S.Si M.Kom ( )

NIP. 19700217 199702 001

3. Sri Arum Sumartini Z, S.Kom ( )

NIDN. 0610038202

Disahkan oleh

Dekan

FMIPA UNS

Ir. Ari Handono Ramelan, M.Sc (Hons), Ph.D

NIP. 19610223 198601 1 001

Ketua

Program Diploma III Teknik Informatika

FMIPA UNS

Drs. YS. Palgunadi, M.Sc

NIP. 19560407 198303 1 004

Page 4: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

iv

ABSTRACT

NURMAIDAH, 2011. VIRTUAL MAP APPLICATION OF

FMIPA UNS BASED ON FLASH AND XML. The Diploma III Program of

Informatics Technique Department of Mathematics and Sciences Faculty in

Universitas Sebelas Maret Surakarta.

Virtual map regions of Mathematics and Sciences Faculty is one

effective method to assist in the development and publication to the community.

Virtual map applications based on Flash and XML is the merging of multimedia

components such as picture, text, sound, video, and animation that makes an

application to be attractive and easy to use. Beside of the interesting applications

with multimedia, the data is presented dynamic so that information can be updated

in according to with changing conditions. The main purpose production of virtual

map is to provide of information for students and the general public who need

guidance on the Mathematics and Sciences Faculty.

The production virtual map application Mathematics and Scientists

Faculty UNS used some software such as Corel Draw X4, Adobe Photoshop CS3,

and Adobe Flash cs3. This application were made with the development methods

of observation to the objects as material mapping. Beside of observation methods,

literature study was also conducted to find references and materials related to the

application.

The results of this research development is an applications based on

multimedia and databases in the form of XML. This application consist of

information representation rooms of Mathematics and Sciences Faculty.

Keywords: Virtual maps, Mathematics and Sciences Faculty UNS, Flash, XML

Page 5: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

v

ABSTRAK

NURMAIDAH,2011. PETA VIRTUAL FMIPA UNS BERBASIS

FLASH DAN XML. Program Diploma III Teknik Informatika Fakultas

Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Peta virtual wilayah Fakultas MIPA merupakan salah satu cara yang

efektif untuk membantu dalam pengembangan dan publikasi kepada masyarakat

sekitar. Aplikasi peta virtual berbasis Flash dan XML merupakan penggabungan

dari komponen-komponen multimedia seperti gambar,, teks, suara, video, dan

animasi yang membuat aplikasi menjadi menarik dan mudah digunakan. Selain

aplikasi yang menarik dengan sentuhan multimedia data yang disajikan juga

dinamis agar informasi bisa diupdate sesuai dengan kondisi perubahan. Tujuan

utama dibuatnya peta virtual ini adalah untuk menyediakan sarana informasi bagi

mahasiswa dan masyarakat umum yang membutuhkan panduan tentang wilayah

Fakultas MIPA.

Pembuatan aplikasi peta virtual FMIPA UNS menggunakan beberapa

software seperti Corel Draw X4, Adobe Photoshop cs3, dan Adobe Flash cs3.

Aplikasi ini dibuat dengan pengembangan metode observasi terhadap objek-objek

sebagai bahan pemetaan. Selain metode observasi, studi literatur juga dilakukan

untuk mencari referensi dan materi yang berhubungan dengan aplikasi.

Hasil dari pengembangan penelitian ini dihasilkan suatu aplikasi

berbasis multimedia dan database berupa XML. Aplikasi ini berisi informasi peta

penggambaran ruang di Fakultas MIPA UNS yaitu gedung A, B, dan C.

Kata kunci : Peta virtual, FMIPA UNS, Flash, XML

Page 6: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

vi

MOTTO

Untuk mencapai kesuksesan, kita jangan hanya bertindak, tapi juga perlu bermimpi, jangan hanya berencana, tapi juga perlu untuk percaya…

(Anatole France)

Cara memulai sesuatu adalah dengan berhenti berbicara dan mulai melakukan…

(Walt Disney)

Do all the goods you can…All the best you can…In all times you can…In all places you can…For all the creatures you can…

Page 7: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

vii

PERSEMBAHAN

Karya ini saya persembahan untuk :

Almarhum Bapak yang menjadi semangat hidupku…

Ibu tercinta yang selalu mendoakan perjuanganku…

Keluarga besar yang terus mendukungku…

Sahabat terbaik yang setia mendampingiku…

Sahabat “K_B” dan TIB seperjuangan…

Terima kasih atas semuanya…

Page 8: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

viii

KATA PENGANTAR

Assalamu Alaikum Wr. Wb.

Syukur Alhamdulillah penulis panjatkan ke hadirat Allah SWT atas

segala rahmat, karunia, dan kebesaranNya laporan Tugas Akhir dengan judul

“Peta Virtual FMIPA UNS Berbasis Flash dan XML” dapat terselesaikan.

Laporan ini disusun sebagai salah satu syarat memperoleh kelulusan

Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan

Alam Universitas Sebelas Maret Surakarta

Penyusunan laporan Tugas Akhir ini tidak lepas dari bimbingan dan

bantuan dari banyak pihak. Dalam kesempatan ini penulis mengucapkan terima

kasih kepada :

1. Bapak Y.S Palgunadi M.Sc, selaku Ketua Program Studi Diploma III

Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam

Universitas Sebelas Maret Surakarta.

2. Bapak Fendi Aji Purnomo, S.Si selaku dosen pembimbing yang selalu

memberikan arahan dan bimbingan dalam pembuatan tugas akhir ini.

Harapan penulis semoga laporan ini dapat bermanfaat bagi pembaca.

Wassalamu Alaikum Wr. Wb.

Surakarta, Juni 2011

Penulis

Page 9: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

ix

DAFTAR ISI

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 ....................................................................................... xi

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

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

1.2. Perumusan Masalah ............................................................................ 2

1.3. Batasan Masalah ................................................................................. 2

1.4. Tujuan dan Manfaat ............................................................................ 2

1.5. Metodologi Penelitian ......................................................................... 2

1.6. Sistematika Penulisan ......................................................................... 3

BAB II LANDASAN TEORI .......................................................................... 4

2.1. Peta ...................................................................................................... 4

2.2. Multimedia .......................................................................................... 6

2.3. Struktur Navigasi ................................................................................ 8

2.4. Adobe Flash cs 3 ................................................................................. 10

2.5. XML .................................................................................................... 14

Page 10: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

x

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

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

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

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

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

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

4.2. Pembuatan Aplikasi ............................................................................ 25

4.3. Hasil Pengujian Aplikasi..................................................................... 34

4.4. Evaluasi Aplikasi ................................................................................ 43

BAB V PENUTUP ........................................................................................... 44

5.1. Kesimpulan ......................................................................................... 44

5.2. Saran .................................................................................................. 44

DAFTAR PUSTAKA ...................................................................................... 45

Page 11: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

xi

DAFTAR GAMBAR

Nomor Halaman

2.1. Gambar Struktur Navigasi Linier ........................................................... 8

2.2. Gambar Struktur Navigasi Hirarki.......................................................... 9

2.3. Gambar Struktur Navigasi Non Linier ................................................... 9

2.4. Gambar Struktur Navigasi Campuran .................................................... 10

2.5. Gambar Tools Panel ............................................................................... 11

2.6. Gambar Properties Panel ........................................................................ 12

2.7. Gambar Timeline .................................................................................... 12

2.8. Gambar Library Panel............................................................................. 12

2.9. Gambar Action Panel .............................................................................. 13

2.10. Gambar Toolbar Action Panel ................................................................ 13

2.11. Gambar XML pada Adobe Flash ............................................................ 15

3.1. Gambar Bagan Langkah Pengembangan Aplikasi ................................. 18

3.2. Gambar Sitemap Struktur Menu Aplikasi............................................... 20

3.3. Gambar Tampilan Intro Aplikasi ............................................................ 21

3.4. Gambar Tampilan Menu Utama Aplikasi ............................................... 21

3.5. Gambar Tampilan Menu Gedung A ....................................................... 22

3.6. Gambar Tampilan Menu Gedung B ........................................................ 22

3.7. Gambar Tampilan Menu Gedung C ........................................................ 23

3.8. Gambar Tampilan Peta Tiap Lantai ........................................................ 23

3.9. Gambar Tampilan Halaman Profil .......................................................... 24

4.1. Gambar Pembuatan Desain Background ................................................ 26

4.2. Gambar Pembuatan Animasi Teks .......................................................... 26

4.3. Gambar Pembuatan Tombol Navigasi .................................................... 27

4.4. Gambar Pembuatan Objek Peta .............................................................. 28

4.5. Gambar Penyusunan Peta ....................................................................... 28

4.6. Gambar Pembuatan Desain Peta Tiap Lantai ......................................... 29

Page 12: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

xii

Nomor Halaman

4.7. Gambar Pengeditan Sound Effect ........................................................... 30

4.8. Gambar Pengeditan Video ...................................................................... 30

4.9. Gambar Script Tampilan Aplikasi .......................................................... 31

4.10. Gambar Script Button Navigasi .............................................................. 31

4.11. Gambar Script Button Exit ..................................................................... 31

4.12. Gambar Script Music Background ......................................................... 32

4.13. Gambar Script Load XML ...................................................................... 32

4.14. Gambar Script Set Pointer ...................................................................... 32

4.15. Gambar Script Grid................................................................................. 33

4.16. Gambar Script Zoom .............................................................................. 33

4.17. Gambar Script Mouse Drag .................................................................... 33

4.18. Gambar Halaman Intro ........................................................................... 34

4.19. Gambar Tampilan Atas FMIPA.............................................................. 35

4.20. Gambar Tampilan Depan FMIPA .......................................................... 35

4.21. Gambar Tampilan Samping FMIPA ....................................................... 36

4.22. Gambar Tampilan Gedung A.................................................................. 36

4.23. Gambar Tampilan Gedung B .................................................................. 37

4.24. Gambar Tampilan Gedung C .................................................................. 37

4.25. Gambar Peta Gedung A Lantai 1 ............................................................ 38

4.26. Gambar Peta Gedung A Lantai 2 ............................................................ 38

4.27. Gambar Peta Gedung A Lantai 3 ............................................................ 39

4.28. Gambar Peta Gedung B Lantai 1 ............................................................ 39

4.29. Gambar Peta Gedung B Lantai 2 ............................................................ 40

4.30. Gambar Peta Gedung B Lantai 3 ............................................................ 40

4.31. Gambar Peta Gedung B Lantai 4 ............................................................ 41

4.32. Gambar Peta Gedung C Lantai 1 ............................................................ 41

4.33. Gambar Peta Gedung C Lantai 2 ............................................................ 42

4.34. Gambar Halaman Profil .......................................................................... 42

Page 13: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

xiii

Page 14: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

1

BAB I

PENDAHULUAN

1.1. Latar Belakang

Kebutuhan masyarakat akan sebuah informasi semakin beragam.

Begitu pula dengan kebutuhan informasi terhadap suatu letak dan lokasi suatu

wilayah atau tempat tertentu. Peta menjadi salah satu sarana yang representatif

dan dapat digunakan untuk memberikan informasi tentang suatu wilayah

sekaligus sebagai dasar perencanaan pembangunan dan pengambilan

keputusan. Seiring dalam perkembangan teknologi informasi dan

telekomunikasi, peta dapat diolah dan disajikan secara dinamis baik dalam

bentuk desktop, web, maupun mobile.

Peta virtual sebagai contohnya. Dalam peta virtual, informasi yang

diperoleh bukan hanya letak suatu daerah tetapi juga informasi secara detail

dari daerah itu sendiri. Jadi masyarakat pun bisa mendapatkan gambaran dari

daerah maupun lokasi yang dicari. Selain karena informasi yang diberikan

lebih jelas pemaparannya, peta virtual merupakan sistem mapping yang praktis

dan efisien karena penggunaan dan aksesnya mudah dengan tampilan yang

menarik menggunakan Adobe Flash serta dilengkapi dengan pengelolaan

database dengan XML agar peta yang disajikan dapat diubah sewaktu-waktu

sesuai dengan perkembangan situasi.

Peta Virtual FMIPA UNS tersebut dinilai sangat dibutuhkan

dengan penggambaran secara detail dari ruangan-ruangan yang ada di Gedung

A, B dan C di fakultas ini. Tujuannya untuk menjawab kebutuhan informasi

tentang Fakultas MIPA secara detail. Peta ini dapat dijadikan panduan bagi

masyarakat di luar FMIPA atau diluar UNS yang membutuhkan informasi

tentang lokasi Fakultas MIPA.

Page 15: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

2

1.2. Perumusan Masalah

Rumusan masalah dalam hal ini adalah “Bagaimana membuat peta

virtual Fakultas MIPA UNS dengan tampilan dan penyajian yang menarik

dengan informasi data yang bersifat dinamis”.

1.3. Batasan Masalah

Batasan masalah dalam pembuatan konsep peta wilayah FMIPA

UNS yaitu lokasi yang digambarkan adalah lokasi Fakultas MIPA secara

umum dan penggambaran ruangan beserta informasinya di dalam Gedung A,

B, dan C Fakultas MIPA yang berbasis 2D.

1.4. Tujuan dan Manfaat

Tujuan dari Tugas Akhir dengan judul “Peta Virtual FMIPA UNS

Berbasis Flash dan XML” adalah membuat aplikasi peta virtual wilayah

FMIPA UNS dengan tampilan menarik,aplikatif,dan dinamis.

Manfaat pembuatan aplikasi peta informasi ini adalah sebagai

berikut :

a. Sumber informasi lokasi dan denah FMIPA UNS.

b. Panduan dan wawasan bagi masyarakat umum bila ingin

berkunjung ke Fakultas MIPA.

c. Memenuhi kebutuhan informasi suatu lokasi yang menarik dan

dinamis.

1.5. Metodologi Penelitian

a. Pengumpulan Data

Pengumpulan data dilakukan dengan melakukan observasi

langsung untuk memperoleh data berupa informasi, gambar denah lokasi,

dan foto. Pengumpulan data juga dilakukan dengan study literatur untuk

mencari materi penunjang dari buku-buku referensi dan informasi dari

internet.

Page 16: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

3

b. 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.

c. Pembuatan Aplikasi

Pembuatan aplikasi terdiri dari proses pembuatan desain

dengan menggunakan Adobe Photoshop dan Corel Draw dan script yang

merupakan hasil implementasi dari alur aplikasi, sketsa tampilan, dan

interface aplikasi. 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.

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 multimedia.

c. Bab III Desain dan Perancangan

Berisi penjabaran aplikasi meliputi desain dan rancangan

aplikasi peta yang dibuat.

d. Bab IV Implementasi dan Analisa

Pemaparan hasil dari pembuatan aplikasi peta FMIPA UNS

berupa gambar dan pembahasan masalah dari isi aplikasi.

e. Bab V Penutup

Menguraikan kesimpulan dari tujuan dibuatnya aplikasi

peta dan saran yang ditujukan untuk pengembangan aplikasi yang lebih

baik.

Page 17: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

4

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 :

- Keterangan atau legenda

- Skala peta

- Judul peta

b. Peta harus dengan mudah dapat dimengerti dan ditangkap maknanya, untuk

itu digunakan :

- Tata warna

- Simbol

- 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.

b. Skala

Page 18: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

5

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.

Era digital sekarang ini juga berpengaruh pada perkembangan

teknologi untuk peta. Peta virtual merupakan bentuk penyajian peta yang

Page 19: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

6

digambarkan secara nyata dan dibentuk melalui teknologi. Teknologi

multimedia menjadi sarana yang efektif dalam pembuatan peta virtual. Selain

dapat menyajikan tampilan yang menarik, peta virtual juga menjadi aplikasi

yang kaya akan informasi.

2.2. Multimedia

a. Definisi Multimedia

Multimedia memiliki beberapa definisi dari beberapa sudut pandang

yang berbeda, antara lain sebagai berikut :

1) Multimedia adalah kombinasi dari komputer dan video. (Rosch, 1996)

2) Multimedia secara umum merupakan kombinasi tiga elemen, yaitu

suara, gambar dan teks. (McCormick, 1996)

3) 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)

4) Multimedia merupakan alat yang dapat menciptakan presentasi yang

dinamis dan interaktif yang mengkombinasikan teks, grafik, animasi,

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

5) 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)

b. Objek Multimedia

Menurut Sutopo (2003 : 8), objek multimedia terbagi menjadi :

1) Teks

Teks merupakan dasar dari pengolahan kata dan informasi berbasis

multimedia. Dalam kenyataannya multimedia menyajikan informasi kepada

Page 20: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

7

pengguna dengan cepat, karena tidak diperlukan membaca secara rinci dan

teliti.

Multimedia dirancang dengan menggunakan teks karena teks

merupakan sarana yang efektif untuk mengemukakan ide-ide dan

menyediakan instruksi-instruksi kepada pengguna.

2) 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.

3) 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.

4) 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.

5) 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 21: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

8

Perbedaan terletak pada penyajiannya. Dalam video, informasi

disajikan dalam kesatuan utuh dari objek yang dimodifikasi sehingga

terlihat saling mendukung penggambaran yang seakan terlihat hidup.

6) 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. Struktur Navigasi

Struktur navigasi adalah alur yang digunakan dalam sebuah aplikasi

mutimedia. Bentuk dasar dari struktur navigasi yang biasa digunakan dalam

proses pembuatan aplikasi multimedia ada empat macam, yaitu struktur

navigasi linier, hirarki, non linier dan campuran.

a. Struktur Navigasi Linier

Struktur navigasi linier merupakan struktur yang mempunyai satu

rangkaian cerita berurutan. Struktur ini menampilkan satu demi satu

tampilan layer secara berurutan menurut aturannya.

Gambar 2.1 Struktur Navigasi Linier

Page 22: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

9

b. Struktur Navigasi Hirarki

Struktur navigasi hirarki sering disebut struktur navigasi bercabang,

yaitu merupakan suatu struktur yang mengandalkan percabangan untuk

menampilkan data atau gambar pada layer dengan kriteria tertentu.

Tampilan pada menu utama disebut master page (halaman utama satu),

halaman tersebut mempunyai halaman percabangan yang disebut slave

page (halaman pendukung) dan jika dipilih akan menjadi halaman

kedua, begitu seterusnya.

Gambar 2.2 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.3 Struktur Navigasi Non Linier

Page 23: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

10

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.4 Struktur Navigasi Campuran

2.4. 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 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.

Page 24: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

11

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.

Komponen-komponen yang ada di dalam Adobe Flash :

1) Tools Panel

Tools Panel berfungsi untuk menggambar objek yang berbentuk

vektor.

Page 25: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

12

Gambar 2.5 Tools Panel

2) Properties Panel

Properties Panel menyediakan bentuk opsi dari item yang terseleksi

di Stage.

Gambar 2.6 Properties Panel

3) Timeline

Timeline dalam Flash merupakan navigasi utama yang mampu

menambahkan isi dan mengubah dalam bentuk visual.

Gambar 2.7 Timeline

4) Library Panel

Library Panel digunakan untuk mengorganisasikan komponen-

komponen yang digunakan untuk membangun aplikasi.

Gambar 2.8 Library Panel

5) Action Panel

Action Panel digunakan untuk menulis ActionScript dalam file

Flash (.fla)

Page 26: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

13

Gambar 2.9 Action Panel

6) Toolbar Action Panel

Toolbar Action Panel berfungsi untuk membantu mengelola

ActionScript.

Gambar 2.10 Toolbar Action Panel

Fungsi-fungsi dasar yang dapat dilakukan oleh ActionScript adalah

sebagai berikut :

7) Animasi

Script dapat membantu dalam pembuatan animasi yang kompleks.

8) Navigasi

Secara default navigasi bergerak satu demi satu frame, tetapi dengan

ActionScript dapat dibuat navigasi yang bisa mengakses ke sembarang

frame sesuai keinginan user.

9) User Input

ActionScript dapat digunakan untuk membangun aplikasi web misalnya

sebagai media untuk memasukkan informasi.

10) Memperoleh data

ActionScript dapat berinteraksi dengan server sehingga kita dapat

meng-update informasi ke user.

Page 27: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

14

11) Kalkulasi

ActionScript dapat melakukan kalkulasi, misalnya pada aplikasi

shopping card.

12) Grafik

ActionScript dapat menguah ukuran sebuah grafik, sudut rotasi, warna

movie clip, dan dapat menduplikasi dan menghapus item di dalam

screen.

13) Environment

ActionScript dapat mengambil nilai waktu dari sistem yang digunakan

untuk user.

14) Musik

ActionScript dapat mengontrol balance dan volume.

Flash juga dapat digunakan untuk mengembangkan secara cepat

aplikasi-aplikasi web yang kaya dengan pembuatan script tingkat lanjut. Di

dalam aplikasinya juga tersedia sebuah alat untuk men-debug script. Dengan

menggunakan code hint untuk mempermudah dan mempercepat pembuatan

dan pengembangan isi ActionScript secara otomatis. Dengan Adobe Flash ini

pula peta digambarkan dengan tampilan yang detail dalam setiap komponen

yang ada di dalamnya seperti simbol dan objek gambar.

2.5. 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

disampaikan dapat diupdate tanpa harus mengganti file induknya. Selain itu,

XML yang memiliki sifat ekstensibilitas menjadi dapat ditukar atau digabung

Page 28: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

15

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.11 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 VoiceXML yang digunakan sebagai bahasa markup untuk

pengenalan suara, dialog, aplikasi interaksi respon suara maupun

DTMF (seperti aplikasi pengisian pulsa atau call center), dan

sebagainya.

d. 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 29: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

16

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).

Page 30: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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. Hardware

Hardware adalah perangkat keras yang dibutuhkan untuk

membangun aplikasi tugas akhir ini. Adapun hardware yang digunakan

antara lain :

a. Seperangkat laptop dengan spesifikasi minimal :

Processor : Intel Atom

Memory : 1 GB

VGA : 1 GB

Harddisk : 160 GB

Resolusi : 1024 x 768 px

b. Headset

3.1.2. Software

Software adalah perangkat lunak yang digunakan untuk

membangun aplikasi tugas akhir ini. Adapun software yang digunakan

antara lain:

a. Adobe Flash CS3

Software digunakan untuk menyusun gambar, teks, suara, dan

pembuatan animasi.

b. Adobe Photoshop CS2

Software digunakan untuk membuat dan memanipulasi gambar

dan object bahan animasi.

Page 31: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

18

c. Corel Draw X4

Software digunakan untuk membuat background tampilan dan

icon-icon dalam peta yang bersifat vektor.

d. Sony Sound Forge 9.0

Software digunakan untuk mengedit music yang dijadikan

sebagai sound background aplikasi dan merekam suara untuk

dubbing video.

e. Adobe Premier Pro 2.0

Software digunakan untuk mengedit dan menggabungkan video

dan audio serta mengubah file video dengan format .flv sebagai

tampilan dalam aplikasi.

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 virtual :

Pembuatan

Aplikasi

Perancangan

Konsep Aplikasi

Finishing

Perbaikan

Pengujian

Page 32: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

19

Gambar 3.1 Bagan Langkah Pengembangan Aplikasi

3.2.1. Merancang konsep aplikasi

Perancangan konsep aplikasi dilakukan untuk mempermudah

pembuatan aplikasi. Perancangan ini meliputi proses pembuatan

sitemap, wireframe dan alur animasi peta virtual ini.

3.2.2. Membuat aplikasi peta

Dalam proses pembuatan sitemap, wireframe, desain dan

object-objectnya menggunakan Corel Draw X4 dan Adobe Photoshop

CS2, sedangkan untuk animasi pada aplikasi digunakan Adobe Flash

CS3. Tahap pembuatan aplikasi ini meliputi proses pemasukan script

dan penyusunan animasi.

3.2.3. Pengujian

Setiap pembuatan suatu aplikasi akan melewati tahap

pengujian. Tahap pengujian ini dilakukan sebagai bahan evaluasi

terhadap aplikasi dari segala kekurangan. Pengujian dilakukan secara

langsung terhadap hasil aplikasi.

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

Page 33: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

20

dikemas dalam bentuk CD aplikasi multimedia yang interaktif untuk

disajikan kepada masyarakat.

3.3. Rancangan Aplikasi

3.3.1. Struktur Menu Aplikasi

Struktur menu pada aplikasi peta virtual dengan metode kombinasi

ini adalah sebagai berikut :

Gambar 3.2 Site Map Struktur Menu Aplikasi

Page 34: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

21

3.3.2. Rancangan Tampilan

a. Tampilan Awal (Splash Screen)

Gambar 3.3 Tampilan Intro Aplikasi

Tampilan intro ini menjadi tampilan pembuka aplikasi. Terdiri

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

pengaturan sound effect agar para pengguna lebih nyaman dalam

menggunakan aplikasi ini.

b. Tampilan Menu Utama FMIPA

Gambar 3.4 Tampilan Menu Utama Aplikasi

Judul

Button

Judul

FMIPA Gdg A Gdg B Gdg C

Atas

Depan

Samping

Profil Exit

Page 35: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

22

Tampilan menu utama aplikasi adalah tampilan lanjutan setelah

halaman intro. Tampilan menu ini berisi tampilan peta FMIPA dari tiga

perspektif yaitu perspektif atas, depan, dan samping. Dalam menu ini juga

dapat diperoleh profil dari FMIPA.

c. Tampilan Menu Gedung A

Gambar 3.5 Tampilan Menu Gedung A

Tampilan Menu Gedung B

Gambar 3.6 Tampilan Menu Gedung B

Judul

FMIPA Gdg A Gdg B Gdg C

Lantai 1

Lantai 2

Lantai 3

Profil

Legend

Judul

FMIPA Gdg A Gdg B Gdg C

Lantai 1

Lantai 2

Lantai 3

Profil Legend

Lantai 4

Page 36: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

23

Tampilan Menu Gedung C

Gambar 3.7 Tampilan Menu Gedung C

Tampilan menu tiap gedung hampir sama dengan tampilan menu

utama. Dalam tampilan ini pengguna dapat memilih tampilan peta dari

gedung A, B, dan C sampai dengan informasi per ruangan pada tiap

lantainya. Di dalam menu ini juga terdapat legend dan button profil

melengkapi informasi tiap gedung.

d. Tampilan Peta Tiap Lantai

Gambar 3.8 Tampilan Peta Tiap Lantai

Judul

Back Legend

Judul

FMIPA Gdg A Gdg B Gdg C

Lantai 1

Lantai 2

Profil

Legend

Page 37: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

24

Tampilan peta tiap lantai menjadi informasi utama aplikasi.

Terdiri dari pemetaan ruang di masing-masing gedung yang berisi informasi

ruang yang ada beserta fotonya. Dalam menu ini pengguna dapat

menggunakan button zoom in, zoom out, dan legend sebagai tools yang

membantu dalam pendeskripsian peta.

e. Tampilan Halaman Profil

Gambar 3.9 Tampilan Halaman Profil

Halaman profil merupakan halaman deskripsi dan informasi

yang secara umum mulai dari deskripsi FMIPA dan deskripsi tiap gedung.

Judul

Deskripsi Profil

Home

Page 38: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

25

BAB IV

IMPLEMENTASI DAN ANALISA

4.1. Detail Aplikasi

Peta virtual berbasis multimedia ini merupakan aplikasi

informasi peta virtual dari Fakultas MIPA UNS yang berisi pemetaan

wilayah dan ruangan di seluruh lingkungan Fakultas MIPA. Aplikasi dibuat

berbasis Flash dengan penggabungan animasi gambar, teks, video, dan suara

yang akan menjadikan aplikasi menarik dengan pengelolaan database

menggunakan XML agar data yang disajikan bersifat dinamis dan bisa

diedit sesuai dengan perubahan informasi dan kondisi pada objek.

Peta virtual ini menjadi pemaparan informasi yang menarik pagi

para pengguna yang membutuhkan informasi tentang letak ruang atau lokasi

di lingkungan FMIPA UNS. Dengan penggambaran visualisasi 2 dimensi,

diharapkan pengguna dapat menangkap informasinya secara lebih

menyeluruh dengan tingkat informasi yang jelas dan lengkap.

4.2. Pembuatan Aplikasi

4.2.1. Pembuatan Template

Pembuatan template aplikasi meliputi beberapa proses

pembuatan komponen seperti background, teks judul, dan navigasi

aplikasi. Pembuatan background pada aplikasi peta virtual ini dibuat

dengan pemanfaatan tools pada Adobe Photoshop cs 2.

Berbentuk dasar persegi panjang dengan ukuran 1024x768 px

menggunakan tools rectangle yang diberi objek yang di-duplicate layer.

Selanjutnya dilakukan pewarnaan menggunakan gradient overlay untuk

memberikan efek gradasi warna.

Page 39: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

26

Gambar 4.1 Pembuatan Desain Background

Pembuatan komponen teks dilakukan dengan tools di Adobe

Flash cs 3. Penggunaan teknik masking menjadi teknik dominan dalam

pembuatan animasi teks 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 teks di-

mask agar efek warna dalam rectangle menjadi efek warna teks.

Gambar 4.2 Pembuatan Animasi Teks

Page 40: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

27

Pembuatan tombol navigasi dilakukan dengan Adobe

Photoshop cs 2. Menggunakan rounded rectangle tools untuk membuat

objek elips untuk sebuah botton. Navigasi ini dibuat dengan penambahan

efek pewarnaan gradient overlay, bevel and emboss untuk pemberian

kesan efek 3D, dan satin untuk lebih mempertegas warna efek 3D. Setelah

menjadi objek navigasi dengan format .png maka diimport ke dalam

Adobe Flash cs 3 untuk dibuat symbol button yang pada frame Up dan

Over yang dapat dimodifikasi secara berbeda.

Gambar 4.3 Pembuatan Tombol Navigasi

4.2.2. Pembuatan Objek Peta

Pembuatan objek-objek peta memanfaatkan tools pada Corel

Draw X4. Dengan gabungan tools rectangle, bezier, dan shape maka

dibuat objek peta seperti gedung, kantin, lapangan parkir, lapangan basket

dan lain-lain. Penyusunan objek dilakukan di Adobe Photoshop cs2

dengan penambahan atribut lain agar peta tampak menarik.

Page 41: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

28

Gambar 4.4 Pembuatan Objek Peta

Gambar 4.5 Penyusunan Peta

Page 42: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

29

Gambar 4.6 Pembuatan Desain Peta Tiap Lantai

Penggambaran ruangan berupa bentuk denah yang diberi icon-

icon sebagai identitas ruang itu sendiri. Dalam aplikasi icon ruang ini yang

akan jadi sumber informasi dan data dari ruangan. Icon akan diberi link

database dengan XML yang jika disorot akan menampilkan foto dan

informasi singkat tentang ruang tersebut.

4.2.3. Pengeditan Suara

Pengeditan suara untuk sound effect dilakukan dengan

software Sony Sound Forge 9.0. Tools yang digunakan adalah edit sound

dan crop untuk memotong sound. Sound effect decompile menjadi format

.wav. Tujuan dibuatnya sound effect ini adalah sebagai sound background

aplikasi.

Page 43: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

30

Gambar 4.7 Pengeditan Sound Effect

4.2.4. Pengeditan Video

Proses pengeditan video dilakukan dengan pemanfaatan

software Adobe Premier Pro 2.0. Proses ini meliputi pemotongan video

dan penggabungan audio dengan gambar. File video tersebut dieksport

menjadi bentuk file .flv agar bisa diimport ke Adobe Flash.

Gambar 4.8 Pengeditan video

Page 44: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

31

4.2.5. Pembuatan ActionScript

a. Script untuk menampilkan halaman aplikasi

Gambar 4.9 Script Tampilan Aplikasi

Script ini digunakan untuk memuat tampilan aplikasi menjadi

fullscreen dengan mengubah allowscale dan showmenu bernilai false.

b. Script untuk membuka halaman menu lain

Gambar 4.10 Script Button Navigasi

Script ini digunakan untuk membuka halaman lain. Script ini

menggunakan event on realease yang artinya jika button di klik maka

aplikasi akan menuju ke “Hal_Gdg A” yang ada pada frame 1.

c. Script untuk keluar dari aplikasi

Gambar 4.11 Script Button Exit

Script ini digunakan untuk keluar dari aplikasi. Maksud dari

script ini adalah jika button exit di klik maka nilai “quit” akan bernilai

true.

Page 45: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

32

d. Script untuk memasukkan suara

Gambar 4.12 Script music background

Script diatas digunakan untuk attaching file .mp3 dengan

identifier “sound” ke dalam frame. Dalam script ini juga dilakukan

setting volume dan setting volume start pada aplikasi.

e. Script untuk load data .xml

Ganbar 4.13 Script Load XML

Script diatas digunakan untuk load data dari file .xml agar

database dapat ditampilkan dalam tampilan peta.

f. Script untuk menampilkan posisi pointer data

Gambar 4.14 Script Set Pointer

Script diatas digunakan untuk memanggil pointer untuk load

data xml. Pengaturan posisi pointer diatur dalam koordinat x dan y.

Page 46: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

33

g. Script untuk menentukan posisi pointer

Gambar 4.15 Script Grid

Script diatas digunakan untuk menentukan koordinat x dan y

dari peletakan pointer dalam tampilan peta.

h. Script zoom dan mouse drag

Gambar 4.16 Script Zoom

Gambar 4.17 Script Mouse Drag

Page 47: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

34

Script zoom digunakan untuk mengatur besar dan kecilnya tools

zoom pada aplikasi, sedangkan script mouse drag digunakan untuk

mengaktifkan moude untuk proses dragging peta.

4.3. Hasil Pengujian Aplikasi

4.3.1. Halaman Intro

Gambar 4.18 Halaman Intro

Pada halaman intro ini terdapat beberapa komponen yaitu

teks yang berupa judul yang diberi animasi teks dengan teknik masking

sehingga teks tampak bergerak, komponen button untuk masuk pada

menu utama aplikasi, dan pengaturan sound untuk user yang ingin

mengatur volume dan sound effect akan diaktifkan atau tidak dengan

tombol play yang sudah tersedia.

4.3.2. Halaman Menu FMIPA

Pada halaman menu utama FMIPA terdapat tombol navigasi

untuk menuju pada pilihan peta. Dalam halaman ini pengguna dapat

memilih tampilan peta FMIPA secara umum dengan 3 perspektif yaitu

atas, depan dan samping. Di halaman ini dilengkapi dengan legend untuk

lebih melengkapi dan memperjelas keterangan gambar peta. Selain

Page 48: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

35

tampilan peta yang bisa diakses oleh pengguna, dalam halaman ini juga

ditambahkan informasi dari FMIPA secara umum dengan button Profil.

Gambar 4.19 Tampilan Atas FMIPA

Gambar 4.20 Tampilan Depan FMIPA

Page 49: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

36

Gambar 4.21 Tampilan Samping FMIPA

4.3.3. Halaman Menu Gedung

Gambar 4.22 Tampilan Gedung A

Page 50: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

37

Gambar 4.23 Tampilan Gedung B

Gambar 4.24 Tampilan Gedung C

Halaman menu gedung berisi navigasi untuk mengakses peta

dari gedung A, B, dan C tiap lantainya. Terdapat tiga navigasi untuk masuk

pada tampilan peta tiap lantai yaitu dengan memilih Lantai 1, Lantai 2, atau

Lantai 3 dan sebagainya. Dalam halaman ini juga terdapat button Profil

untuk membuka informasi singkat tiap gedung.

Page 51: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

38

4.3.4. Tampilan Peta Tiap Lantai

Gambar 4.25 Peta Gedung A Lantai 1

Gambar 2.26 Peta Gedung A Lantai 2

Page 52: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

39

Gambar 2.27 Peta Gedung A Lantai 3

Gambar 2.28 Peta Gedung B Lantai 1

Page 53: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

40

Gambar 2.29 Peta Gedung B Lantai 2

Gambar 2.30 Peta Gedung B Lantai 3

Page 54: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

41

Gambar 2.31 Peta Gedung B Lantai 4

Gambar 2.32 Peta Gedung C Lantai 1

Page 55: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

42

Gambar 2.33 Peta Gedung C Lantai 2

Halaman ini merupakan tampilan utama tiap lantai mulai dari

gedung A, B, dan C. Dalam halaman peta ini terdapat tools zoom in dan

zoom out untuk melengkapi tampilan ukuran peta sesuai dengan kebutuhan

pengguna. Selain tools tersebut, tampilan peta ini dilengkapi dengan button

Legend untuk semakin memperjelas informasi dalam peta.

4.3.5. Halaman Profil

Page 56: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

43

Gambar 3.34 Halaman Profil

Pada halaman ini terdapat komponen teks yang berupa uraian

singkat secara umum FMIPA dan profil tiap gedung yang menjadi halaman

informasi tambahan dari aplikasi peta.

4.4. Evaluasi Aplikasi

a. Kelebihan Aplikasi

Kelebihan dari aplikasi peta virtual FMIPA UNS ini adalah:

1. Pendefinisian ruang peta yang diwakili dengan icon-icon yang

memudahkan pengguna untuk membaca peta.

2. Tampilan aplikatif dengan multimedia membuat aplikasi lebih

menarik.

b. Kelemahan Aplikasi

Kelemahan dari peta virtual FMIPA UNS ini adalah:

1. Penggambaran peta ruangan per lantai yang masih terlalu sederhana

tanpa penggambaran interior per ruangan.

2. Skalaritas ruangan yang kurang akurat.

Page 57: PETA VIRTUAL FMIPA UNS BERBASIS FLASH DAN XML …eprints.uns.ac.id/8249/1/197821411201102511.pdf · Aplikasi peta virtual berbasis Flash dan XML merupakan ... teks, suara, video,

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

commit to user

44

BAB V

PENUTUP

5.1. Kesimpulan

Kesimpulan yang dapat diperoleh dari pembuatan aplikasi peta

virtual ini adalah sudah dibuatnya aplikasi peta virtual FMIPA UNS yang

berbasis Flash dan XML. Peta virtual FMIPA berisi informasi lokasi di

gedung A, B, dan C serta lokasi di sekitarnya. Aplikasi dapat digunakan

menjadi media informasi bagi Fakultas MIPA untuk masyarakat dan sarana

pengenalan terhadap masyarakat secara umum karena dalam aplikasi ini

terdapat informasi secara rinci penggambaran wilayah Fakultas MIPA yang

datanya dinamis dan informatif.

5.2. Saran

Dalam pembuatan aplikasi tidak lepas dari kekurangan yang

ada. Dapat disarankan aplikasi ini dapat dikembangkan menjadi aplikasi

peta virtual berbasis 3D pada penggambaran objek tiap ruangannya agar

pengguna dapat melihat penggambaran yang lebih nyata. Aplikasi ini

diharapkan menjadi aplikasi yang dapat dipublikasikan lewat website.