Struktur Navigasi Perancangan Layar

2. Persiapan File Audio

Pada tahapan ini file audio yang telah di-download dipersiapkan sesuai keperluan aplikasi. Hal yang dilakukan antara lain penyesuaian durasi dari file audio dengan keperluan aplikasi.

3. Perancangan Kontrol Navigasi

Kontrol Navigasi merupakan kontrol yang terdiri atas button hypermedia, hyperpicture dan hypertext yang menghubungkan dari satu lokasi content ke content yang lainnya berkaitan dengan navigasi content. Tabel 4.2 Kontrol Navigasi Visual Keterangan Tombol pada tampilan intro menuju tampilan menu utama. Tombol pada tampilan jenis tanaman obat, penyebaran tanaman, bantuan, tentang saya menuju tampilan menu utama. Tombol pada beberapa tampilan yang menuju tampilan yang telah muncul sebelumnya. Tombol pada tampilan menu utama menuju tampilan jenis katalog Tombol pada tampilan menu utama menuju tampilan tentang saya. Tombol pada tampilan menu utama menuju tampilan bantuan. Tombol pada tampilan 3D tanaman menuju deskripsi tanaman Tombol pada tampilan 3D tanaman menuju video pengolahan tanaman Tombol pada tampilan menu jenis katalog menuju peta Tombol pada tampilan menu jenis katalog menuju katalog tanaman Button Lain yang digunakan dalam aplikasi, yaitu: Tabel 4.3 Button Lain Visual Keterangan Untuk membuat gambar berputar ke atas Untuk membuat gambar berputar ke bawah Untuk membuat gambar berputar ke bawah Untuk membuat gambar berputar ke bawah Untuk memperbesar gambar Untuk memperkecil gambar Untuk memainkan video Untuk menjeda video Untuk memberhentikan video

4.2.5 Perancangan Layar

Perancangan layar yang digunakan dalam membuat aplikasi ini ada dua belas rancangan yang terdiri atas perancangan layar intro, perancangan layar menu utama, perancangan layar tanaman obat, perancangan layar bantuan, perancangan layar tentang saya, perancangan layar jenis katalog, perancangan layar katalog tanaman, perancangan layar peta, perancangan layar 3D tanaman, perancangan layar deskripsi tanaman dan perancangan layar video tanaman. Gambar 4.2 Perancangan Layar Intro Pada Gambar 4.2 merupakan perancangan layar Intro. Tombol masuk untuk menuju ke halaman menu utama. ANIMASI MASUK Gambar 4.3 Perancangan Layar Menu Utama Pada Gambar 4.3 merupakan perancangan layar menu utama yang mempunyai 4 tombol. Tombol tanaman obat langka berfungsi sebagai tombol untuk menuju katalog tanaman dan peta yang di dalamnya terdapat 20 jenis tanaman obat langka. Tombol bantuan berfungsi sebagai tombol untuk menuju halaman bantuan. Tombol tentang saya berfungsi sebagai tombol untuk menuju halaman profil peneliti. Tombol keluar berfungsi sebagai tombol untuk keluar dari aplikasi. Gambar 4.4 Perancangan Layar Jenis Katalog JUDUL TEKS Tanaman Obat Keluar Tentang Saya Bantuan JUDUL Katalog tanaman MENU Peta Pada Gambar 4.4 merupakan perancangan layar jenis katalog terdapat menu katalog tanaman dan menu peta dimana di dalamnya terdapat penjelasan mengenai 20 tanaman obat langka. Terdapat tombol menu untuk menuju menu utama. Gambar 4.5 Perancangan Layar Katalog Tanaman Pada Gambar 4.5 merupakan perancangan layar katalog tanaman dimana di dalamnya terdapat 20 gambar tanaman obat langka yang dapat di-link menuju penjelasan tanaman obat langka tersebut. Terdapat tombol menu untuk menuju menu utama. Gambar 4.6 Perancangan Layar Peta JUDUL PETA INDONESIA MENU JUDUL MENU Pada Gambar 4.6 merupakan perancangan layar peta dimana di dalamnya terdapat gambar peta Indonesia. Terdapat tombol yang apabila di arahkan akan muncul nama tanaman dan dapat di-link menuju penjelasan tanaman obat langka tersebut. Tombol menu berfungsi sebagai tombol menuju menu utama dari aplikasi. Gambar 4.7 Perancangan Layar 3D Tanaman Pada Gambar 4.7 merupakan perancangan layar 3D tanaman dimana di dalamnya terdapat gambar asli tanaman dan gambar 3D tanaman. Selain itu terdapat pula shockwave 3D, tombol zoom in, tombol zoom out, tombol deskripsi dan tombol video. Terdapat tombol menu untuk menuju menu utama dan tombol kembali untuk kembali ke menu jenis katalog. Nama tanaman Gambar Objek 3D MENU KEMBALI Zoom in Zoom out Deskripsi Tanaman Video Pengolahan Gambar 4.8 Perancangan Layar Deskripsi Tanaman Pada Gambar 4.8 merupakan perancangan layar deskripsi tanaman dimana di dalamnya terdapat penjelasan tentang nama latin, famili, deskripsi, ekologi, manfaat dan cara pengolahan tanaman. Selain itu terdapat tombol panah untuk munuju layar 3D tanaman. Gambar 4.9 Perancangan Layar Video Tanaman Pada Gambar 4.9 merupakan perancangan layar video tanaman dimana di dalamnya terdapat video mengenai cara pengolahan tanaman. Selain itu terdapat tombol panah untuk munuju layer 3D tanaman. Video Tanaman Deskripsi Tanaman Gambar 4.10 Perancangan Layar Bantuan Pada Gambar 4.11 merupakan perancangan layar bantuan dimana di dalamnya terdapat penjelasan shockwave 3D. Selain itu terdapat tombol menu untuk menuju menu utama dan tombol keluar untuk keluar dari aplikasi. Gambar 4.11 Perancangan Layar Tentang Saya Pada Gambar 4.11 merupakan perancangan layar tentang saya dimana di dalamnya terdapat foto peneliti dan identitas dari peneliti. Selain itu terdapat tombol menu untuk menuju menu utama dan tombol keluar untuk keluar dari aplikasi. JUDUL FOTO Identitas MENU KELUAR JUDUL Penjelasan shockwave 3D MENU KELUAR

4.2.6 Perancangan STD State Transition Diagram

Perancangan State Transition Diagram STD aplikasi dilakukan untuk mengetahui transisi keadaan yang terjadi pada aplikasi saat digunakan. Intro Menu Utama Klik “Masuk” Tampilkan Halaman Menu Utama Gambar 4.12 STD Halaman Intro Pada halaman intro terdapat sebuah navigasi yaitu menu utama. Menu Utama Tentang Saya Bantuan Jenis Katalog Klik “Tanaman Obat” Tampilkan Halaman Jenis Katalog Tampilkan Halaman Menu Utama Klik “Menu” Klik “Menu” Tampilkan Halaman Menu Utama Klik “Bantuan” Tampilkan Halaman Bantuan Klik “Tentang Saya” Tampilkan Halaman Tentang Saya Gambar 4.13 STD Halaman Menu Utama Pada halaman menu utama terdapat tiga navigasi yaitu tanaman obat, bantuan dan tentang saya. Jenis Katalog Katalog Tanaman Klik “Katalog Tanaman” Tampilkan Halaman Katalog Tanaman Menu Utama Tampilkan Halaman Menu Utama Peta Klik “Peta” Tampilkan Halaman Peta Klik “Tanaman Obat” Tampilkan Halaman Jenis Katalog Gambar 4.14 STD Halaman Jenis Katalog Pada halaman pilihan model katalog terdapat tiga navigasi yaitu menu utama, katalog tanaman dan peta. Katalog Tanaman Menu Utama Klik “Menu” Tampilkan Halaman Menu Utama 3D Tanaman Klik “Gambar Tanaman” Tampilkan Halaman 3D Tanaman Gambar 4.15 STD Halaman Katalog Tanaman Pada halaman katalog tanaman terdapat dua navigasi yaitu menu utama dan 3D Tanaman. Peta Menu Utama Klik “Menu” Tampilkan Halaman Menu Utama 3D Tanaman Klik “Tombol Lingkaran” Tampilkan Halaman 3D Tanaman Gambar 4.16 STD Halaman Peta Pada halaman peta terdapat dua navigasi yaitu menu utama dan 3D Tanaman. Deskripsi Ttanaman 3D Tanaman Klik “Panah” Tampilkan Halaman 3D Tanaman Klik “Deskripsi Tanaman” Tampilkan Halaman Deskripsi Tanaman Gambar 4.17 STD Halaman 3D Tanaman Pada halaman deskripsi tanaman terdapat sebuah navigasi yaitu 3D tanaman.