BAB IV ANALISA DAN PERANCANGAN
4.3. Perancangan Aplikasi (Design)
Pada tahap ini penulis melakukan perancangan aplikasi berupa perancangan storyboard, perancangan flowchart, desain stuktur navigasi, rancangan diagram transisi atau STD (State Transition Diagram), dan perancangan antarmuka pengguna (user interface). 4.3.1. Perancangan Storyboard
Storyboard merupakan serangkaian sketsa (gambaran kartun) dibuat berbentuk persegi panjang yang menggambarkan suatu urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi multimedia (Suyanto : 2003). Secara umum, rancangan
storyboard yang dibuat oleh penulis terdiri dari beberapa level, yang nantinya akan dimuat kedalam main movie pada tampilan utama aplikasi. Rancangan storyboard dari aplikasi ini terdiri dari tiga bagian, yaitu intro, main dan ending. Rancangan
4.3.2. Perancangan Flowchart
Flowchart yang dibuat di dalam aplikasi ini terdiri dari
flowchart main movie, flowchart menu Home, flowchart menu matahari, flowchart menu planet, flowchart menu gallery.
1. FlowchartMain Movie
2. Flowchart Menu Home
1 Tampilkan Content Menu Home
Matahari Gallery Planet 2 3 4 Tidak Tidak Tidak Exit Tidak Tidak Ya Ya Ya
3. Flowchart Menu Matahari Menu Home 1 Tampilan Content Menu Matahari Menu Planet Menu Gallery 2 4 Exit Ya Ya Ya Ya Tidak 2 tidak tidak tidak tidak tidak
4. Flowchart Menu Planet 3 Merkurius Venus Bumi Mars Jupiter Saturnus Uranus Neptunus Merkurius Mars Venus Bumi Jupiter Saturnus Uranus Neptunus Exit Ya Ya Ya Ya Ya Ya Ya Ya Tidak tidak tidak tidak tidak tidak tidak tidak tidak tidak
5. Flowchart Menu Gallery
4.3.3. Perancangan Struktur Navigasi
1. Keseluruhan Struktur Navigasi Pada Aplikasi
Gambar 4.6. Keseluruhan Struktur Navigasi Pada Aplikasi
2. Struktur Navigasi Menu Home
3. Struktur Navigasi Menu Matahari
Gambar 4.8. Struktur Navigasi Menu Matahari
4. Struktur Navigasi Menu Planet
Main
Home Matahari Planet Gallery Exit
Planet
Merkurius Planet Venus Planet Bumi Planet Mars Planet Jupiter
Planet Saturnus
Planet Neptunus Planet Uranus
5. Struktur Navigasi Menu Gallery
Gambar 4.10. Struktur Navigasi Menu Gallery
6. Struktur Navigasi Menu Exit
4.3.4. Perancangan State Transition Diagram
STD didalam aplikasi Visualisasi bimasakti ini terdiri dari STD menu Home, STD menu Matahari, STD menu
Planet, dan STD Menu Gallery.
1. STD Menu Home
Gambar 4.12. State Transition Diagram Home
Tombol Home terdapat di halaman utama dari aplikasi. Selain tombol Home, halaman utama memiliki beberapa tombol lain yaitu Matahari, Planet, Gallery, dan Exit. Apabila memilih tombol “Home” maka akan tampil halaman mengenai video tentang tatasuryaatau bimasakti dan mengenai sekolah beserta alamatnya.
2. STD Menu Matahari
Gambar 4.13. State Transition Diagram Matahari
Tombol Matahari terdapat di halaman utama dari aplikasi. Selain tombol Matahari, halaman utama memiliki beberapa tombol lain yaitu Home, Planet, Gallery, dan Exit. Apabila memilih tombol “Matahari” maka akan tampil halaman yang terdapat materi tentang matahari dan video mengenai matahari dalam tatasurya.
3. STD Menu Planet
Intro Main Planet Exit
Home Matahari Gallery Klik “Enter”
Tampilkan Main
Klik “Planet”
Tampilkan Planet Keluar dari AplikasiKlik “Exit”
Klik “Planet” Tampilkan Planet Klik “Home” Tampilkan Home Klik “Gallery” Tampilkan Gallery Klik “Mataharit” Tampilkan Matahari Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Planet Merkurius Planet Venus Planet Bumi Planet Mars Planet Jupiter Planet
Saturnus UranusPlanet
Planet Neptunus Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet Klik “Planet Merkurius”
Tampilkan Planet Merkurius
Klik “Planet Venus” Tampilkan Planet Venus
Klik “Planet Bumi” Tampilkan Planet Bumi
Klik “Planet Mars” Tampilkan Planet Mars Klik “Planet Jupiter”
Tampilkan Planet Jupiter
Klik “Planet Saturnus” Tampilkan Planet Saturnus
Klik “Planet Uranus” Tampilkan Planet Uranus
Klik “Planet Neptunus” Tampilkan Planet Neptunus Klik “Planet” Tampilkan Planet Klik “Planet” Tampilkan Planet
Gambar 4.14. StateTransition Diagram Menu Planet
Tombol Planet terdapat di halaman utama dari aplikasi. Selain tombol Planet, halaman utama memiliki beberapa tombol lain yaitu Home, Matahari, Gallery, dan Exit.
Didalam tombol Planet terdapat 8 tombol (button) yaitu tombol Planet Merkurius, Planet Venus, Planet Bumi, Planet Mars, Planet Jupiter, Planet Saturnus, Planet Uranus, Dan Planet Neptunus. Bila memilih tombol “Planet Merkurius” maka akan muncul halaman Planet Merkurius , bila memilih tombol (button) “Planet Venus” maka akan muncul halaman Planet Venus, bila memilih tombol (button) “Planet Bumi” maka akan muncul halaman Planet Bumi, bila memilih tombol (button) “Planet Mars” maka akan muncul halaman Planet Mars, bila memilih tombol
(button) “Planet Jupiter” maka akan muncul halaman Planet Jupiter, bila memilih tombol (button) “Planet Saturnus” maka akan muncul halaman Planet Saturnus, bila memilih tombol (button) “Planet Uranus” maka akan muncul halaman Planet Uranus, dan bila memilih tombol (button) “Planet Neptunus ” maka akan muncul halaman Planet Neptunus.
4. STD Menu Gallery
Intro Main Gallery Exit
Home Matahari Planet
Klik “Enter” Tampilkan Main
Klik “Gallery”
Tampilkan Gallery Keluar dari AplikasiKlik “Exit”
Klik “Home” Tampilkan Home Klik “Gallery” Tampilkan Gallery Klik “Planet” Tampilkan Planet Klik “Matahari” Tampilkan Matahari Klik “Gallery” Tampilkan Gallery Klik “Gallery” Tampilkan Gallery Gambar 1,2,3,4,5 Klik “Gallery” Tampilkan Gallery Klik “Gambar 1,2,3,4,5” Tampilkan Gambar 1,2,3,4,5 Dan Video 1,2,3,4,5
Gambar 4.15. StateTransition Diagram Menu Gallery
Tombol Gallery terdapat di halaman utama dari aplikasi. Selain tombol Gallery, halaman utama memiliki beberapa tombol lain yaitu Home, Matahari, Planet, dan
Exit. Apabila memilih tombol “Gallery” maka akan tampil halaman yang terdapat gambar-gambar tentang planet- planet dalam tatasurya.
4.3.5. Perancangan Interface
Perancangan antarmuka pemakai (user interface) yang akan ditampilkan pada aplikasi multimedia ini akan disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan. Pada aplikasi ini terdapat beberapa rancangan layar, yaitu:
1. Rancangan Intro
Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan utama aplikasi. Pada tampilan intro ini, hanya terdapat animasi jam berputar disebelah kiri terdapat judul aplikasi, dibawahnya terdapat tombol “Next”. Tombol inilah pengguna akan memasuki tampilan utama aplikasi. 2. Rancangan Tampilan Utama
Rancangan ini merupakan rancangan yang digunakan sebagai tampilan utama dari aplikasi yang dibuat. Didalam tampilan utama, user bisa mendapatkan informasi mengenai Tatasurya. Disebelah kiri bawah terdapat foto sekolah MTs Miftahussalam sebelahnya terdapat penjelasan mengenai profil sekolah dan alamatnya. Diatasnya terdapat movie
tentang tatasurya atau bimasakti. Informasi akan tampil apabila user menekan beberapa button (tombol) yang telah disediakan di tampilan utama bagian atas. Beberapa button
(tombol) yang di tampilkan adalah:
− Home, berfungsi untuk menampilkan informasi mengenai sekilas tentang informasi instansi Planetarium dan Observatorium Jakarta beserta alamatnya.
− Matahari, berfungsi untuk menampilkan informasi mengenai matahari yang merupakan pusat dalam tatasurya.
− Planet, berfungsi untuk menampilkan informasi mengenai matahari beserta planet-planet yang terdapat dalam tatasurya.
− Gallery, berfungsi untuk menampilkan informasi mengenai gambar-gambar tentang tatasurya dan keadaan di luar angkasa.
− Exit, berfungsi untuk keluar dari aplikasi. 3. Rancangan Menu Home
− Rancangan menu Home ini digunakan untuk menampilkan movie tentang tatasurya dan instansi Planetarium dan Observatorium Jakarta beserta alamatnya.
4. Rancangan Menu Matahari
− Rancangan menu Matahari ini digunakan untuk menampilkan movie tentang matahari dalam tatasurya dan penjelasan tentang matahari.
5. Rancangan Menu Planet
Rancangan menu Planet ini digunakan untuk menampilkan visualisasi dari prosesnya pergerakan planet- planet terhadap matahari dalam tatasurya. Beberapa button
(tombol) yang terdapat didalam menu Planet adalah:
− Planet Merkurius, berfungsi untuk menampilkan visualisasi pergerakan planet merkurius terhadap matahari dalam tatasurya dan penjelasan tentang planet merkurius.
− Planet Venus, berfungsi untuk menampilkan visualisasi pergerakan planet venus terhadap matahari dalam tatasurya dan penjelasan tentang planet venus.
− Planet Bumi, berfungsi untuk menampilkan visualisasi pergerakan planet bumi terhadap matahari dalam tatasurya dan penjelasan tentang planet bumi.
− Planet Mars, berfungsi untuk menampilkan visualisasi pergerakan planet mars terhadap matahari dalam tatasurya dan penjelasan tentang planet mars.
− Planet Jupiter, berfungsi untuk menampilkan visualisasi pergerakan planet jupiter terhadap matahari dalam tatasurya dan penjelasan tentang planet jupiter.
− Planet Saturnus, berfungsi untuk menampilkan visualisasi pergerakan planet saturnus terhadap matahari dalam tatasurya dan penjelasan tentang planet saturnus.
− Planet Uranus, berfungsi untuk menampilkan visualisasi pergerakan planet uranus terhadap matahari dalam tatasurya.
− Planet Neptunus, berfungsi untuk menampilkan visualisasi pergerakan planet neptunus terhadap matahari dalam tatasurya dan penjelasan tentang planet neptunus. 6. Rancangan Menu Gallery
− Rancangan menu Gallery ini digunakan untuk menampilkan gambar-gambar mengenai pergerakan planet dalam tatasurya.
Setelah membuat rancangan-rancangan menu dan tampilan-tampilan yang akan digunakan, maka hasil tampilan dari aplikasi sepenuhnya adalah sebagai berikut:
Gambar 4.16. Rancangan Tampilan Aplikasi Keseluruhan