Flowchart Desain dan Produksi

85 dan jika tidak makan pengguna bisa memilih menu lainnya atau keluar dari program. Gambar 4.3 Flowchart Menu Materi Gambar 4.3 flowchart ini menjelaskan bahwa dalam menu materi terdapat 5 proses, yakni materi tengkorak, materi rusuk, materi tulang belakang, materi ekstremitas atas dan materi ekstremitas bawah. Jika pengguna memilih salah satu Keterangan B: Halaman menu materi C: Halaman sub menu materi tengkorak D: Halaman sub menu materi rusuk E: Halaman sub menu materi Tulang belakang F: Halaman sub menu materi Ekstremitas atas G: Halaman sub menu materi Ekstremitas bawah 86 proses tersebut maka akan terhubung ke menu yang diinginkan dan jika “tidak” maka pengguna bisa memilih menu lainnya atau keluar dari program. Gambar 4.4 Flowchart Sub Menu Materi Tengkorak Gambar 4.4 flowchart ini menjelaskan bahwa dalam sub menu materi tengkorak berisi 3 proses, yakni sub menu penjelasan tengkorak, sub menu gambar tengkorak, dan sub menu video tengkorak. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau keluar dari program. Keterangan C: Halaman sub menu materi tengkorak 87 D Pilih Penjelasan Pilih Gambar Pilih Video Tampilkan Penjelasan Rusuk Tampilkan Gambar Rusuk Tampilkan Video Rusuk Ya Tidak Ya Tidak Ya Tampilkan Layar Rusuk Keluar Tidak Gambar 4.5 Flowchart Sub Menu Materi Rusuk Gambar 4.5 flowchart ini menjelaskan bahwa dalam sub menu materi rusuk berisi 3 proses, yakni sub menu penjelasan rusuk, sub menu gambar rusuk, dan sub menu video rusuk. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau keluar dari program. Keterangan D: Halaman sub menu materi rusuk 88 Gambar 4.6 Flowchart Sub Menu Materi Tulang Belakang Gambar 4.6 flowchart ini menjelaskan bahwa dalam sub menu materi tulang belakang berisi 3 proses, yakni sub menu penjelasan tulang belakang, sub menu gambar tulang belakang, dan sub menu video tulang belakang. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau atau keluar dari program. Keterangan E: Halaman sub menu materi Tulang belakang 89 Gambar 4.7 Flowchart Sub Menu Materi Ektremitas Atas Gambar 4.7 flowchart ini menjelaskan bahwa dalam sub menu materi ektremitas atas berisi 3 proses, yakni sub menu Penjelasan ektremitas atas, sub menu gambar ektremitas atas, dan sub menu ektremitas atas. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau keluar dari program. Keterangan F: Halaman sub menu materi Ekstremitas atas 90 Gambar 4.8 Flowchart Sub Menu Materi Ektremitas Bawah Gambar 4.8 flowchart ini menjelaskan bahwa dalam sub menu materi ektremitas bawah berisi 3 proses, yakni sub menu penjelasan ektremitas bawah, sub menu gambar ektremitas bawah, dan sub menu ektremitas bawah. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau keluar dari program. Dari rancangan flowchart di atas penulis menyimpulkan bahwa dalam tampilan menu utama sebagai pembuka dan pilihan menu ditampilkan sekaligus untuk efisiensi dan kemudahan akses dari menu utama ke sub menu. Keterangan G: Halaman sub menu materi Ekstremitas bawah 91

4.2.3 Perancangan Struktur Navigasi

Struktur navigasi yang digunakan adalah hierarkis model karena lebih mudah digunakan oleh pengguna. Pada model ini dapat dilihat penggunaan setiap scene yang dihubungkan dengan scene lainnya. Untuk lebih jelasnya dapat dilihat pada Gambar 4.9. Gambar 4.9 Rancangan Struktur Navigasi 92

4.2.4 Perancangan State Diagram Transition STD

1. Rancangan Struktur Intro Intro Klik “Mulai” Tampilkan halaman menu utama Menu Utama Gambar 4.10 Rancangan STD Intro 2. Rancangan Struktur Menu Utama Menu Utama HOME Bantuan Profil Materi Visualisasi 3D Klik “Home” Tampilkan halaman menu utama Klik “Materi” Tampilkan halaman Materi Klik “Visualisasi 3D” Tampilkan halaman Visualisasi 3D Klik “Home” Tampilkan halaman menu utama Klik “Bantuan” Tampilkan halaman Bantuan Klik “Home” Tampilkan halaman menu utama Klik “Profil” Tampilkan halaman Profil Klik “Home” Tampilkan halaman menu utama Gambar 4.11 Rancangan STD Menu Utama 93 3. Rancangan menu visualisasi 3D Gambar 4.12 Rancangan Menu Visualisasi 3D 4. Rancangan menu materi Gambar 4.13 Rancangan STD Menu Materi