perpustakaan.uns.ac.id
digilib.uns.ac.id
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 commit to user
i
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
ii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
Ketua Program Diploma III Teknik Informatika FMIPA UNS
Ir. Ari Handono Ramelan, M.Sc (Hons), Ph.D NIP. 19610223 198601 1 001 commit to user
iii
Drs. YS. Palgunadi, M.Sc NIP. 19560407 198303 1 004
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
iv
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
v
perpustakaan.uns.ac.id
digilib.uns.ac.id
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…
commit to user
vi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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…
commit to user
vii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 commit to user
viii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 commit to user
ix
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
x
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 commit to Lantai user ......................................... 29 4.6. Gambar Pembuatan Desain Peta Tiap
xi
perpustakaan.uns.ac.id
digilib.uns.ac.id
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 commit to user
xii
perpustakaan.uns.ac.id
digilib.uns.ac.id
commit to user
xiii
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
1
2 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
3 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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
commit to user
4
perpustakaan.uns.ac.id
5 digilib.uns.ac.id
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 commitmerupakan to user teknologi untuk peta. Peta virtual bentuk penyajian peta yang
6 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to user
7 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
8 digilib.uns.ac.id
perpustakaan.uns.ac.id
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.1commit Struktur Linier to Navigasi user
9 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to user
10 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
11 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. Fiturfitur 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.
commit to user
12 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 komponenkomponen yang digunakan untuk membangun aplikasi.
Gambar 2.8 Library Panel 5) Action Panel Action Panel digunakan untuk menulis ActionScript dalam file Flash (.fla)
commit to user
13 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 informasicommit ke user.to user
perpustakaan.uns.ac.id
14 digilib.uns.ac.id
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, commit to user XML yang memiliki sifat ekstensibilitas menjadi dapat ditukar atau digabung
15 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
16 digilib.uns.ac.id
perpustakaan.uns.ac.id
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).
commit to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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. commit to user
17
18 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 : Perancangan Konsep Aplikasi
Pembuatan Aplikasi
Pengujian
Perbaikan
Finishing commit to user
19 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to user
20 digilib.uns.ac.id
perpustakaan.uns.ac.id
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
commit to user
21 digilib.uns.ac.id
perpustakaan.uns.ac.id
3.3.2. Rancangan Tampilan a. Tampilan Awal (Splash Screen)
Judul
Button
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
Judul FMIPA
Gdg A
Gdg B
Gdg C Atas Depan Samping
Exit
Profil
Gambar 3.4 Tampilan commit Menu to userUtama Aplikasi
22 digilib.uns.ac.id
perpustakaan.uns.ac.id
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
Judul FMIPA
Gdg A
Gdg B
Gdg C Lantai 1 Lantai 2 Lantai 3 Legend
Profil
Gambar 3.5 Tampilan Menu Gedung A Tampilan Menu Gedung B
Judul FMIPA
Gdg A
Gdg B
Gdg C Lantai 1 Lantai 2 Lantai 3 Lantai 4
Profil
Legend
Gambar 3.6 Tampilan Menu Gedung B commit to user
23 digilib.uns.ac.id
perpustakaan.uns.ac.id
Tampilan Menu Gedung C
Judul FMIPA
Gdg A
Gdg B
Gdg C Lantai 1 Lantai 2
Legend
Profil
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
Judul
Back
Legend
commit to user Gambar 3.8 Tampilan Peta Tiap Lantai
24 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 Home Judul Deskripsi 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.
commit to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
25
26 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 dimask agar efek warna dalam rectangle menjadi efek warna teks.
Gambar 4.2 Pembuatan Animasi Teks commit to user
27 digilib.uns.ac.id
perpustakaan.uns.ac.id
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.
commit to user
28 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 4.4 Pembuatan Objek Peta
Gambar 4.5 Penyusunan Peta
commit to user
29 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 4.6 Pembuatan Desain Peta Tiap Lantai Penggambaran ruangan berupa bentuk denah yang diberi iconicon 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.
commit to user
30 digilib.uns.ac.id
perpustakaan.uns.ac.id
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
commit to user
31 digilib.uns.ac.id
perpustakaan.uns.ac.id
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.
commit to user
32 digilib.uns.ac.id
perpustakaan.uns.ac.id
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. commit to user
33 digilib.uns.ac.id
perpustakaan.uns.ac.id
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
commit to user
34 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to userketerangan gambar peta. Selain
35 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to user
36 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 4.21 Tampilan Samping FMIPA 4.3.3. Halaman Menu Gedung
Gambar 4.22 Tampilan Gedung A
commit to user
37 digilib.uns.ac.id
perpustakaan.uns.ac.id
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 commit to user untuk membuka informasi singkat tiap gedung.
38 digilib.uns.ac.id
perpustakaan.uns.ac.id
4.3.4. Tampilan Peta Tiap Lantai
Gambar 4.25 Peta Gedung A Lantai 1
Gambar 2.26 Peta Gedung A Lantai 2
commit to user
39 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 2.27 Peta Gedung A Lantai 3
Gambar 2.28 Peta Gedung B Lantai 1
commit to user
40 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 2.29 Peta Gedung B Lantai 2
Gambar 2.30 Peta Gedung B Lantai 3
commit to user
41 digilib.uns.ac.id
perpustakaan.uns.ac.id
Gambar 2.31 Peta Gedung B Lantai 4
Gambar 2.32 Peta Gedung C Lantai 1
commit to user
42 digilib.uns.ac.id
perpustakaan.uns.ac.id
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
commit to user
43 digilib.uns.ac.id
perpustakaan.uns.ac.id
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.
commit to user
perpustakaan.uns.ac.id
digilib.uns.ac.id
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.
commit to user
44