Perenca Desain
ANALISA DAN PEMBAHASAN
4.2 Desain dan Produks
Dalam tahap ini penulis melakukan pembuatan storyboard, struktur navigasi, mendesain interface (antarmuka), pengumpulan dan pencarian isi, dan produksi.
4.2.1 Storyboard
Storyboard merupakan deskripsi tiap scene (tampilan), dengan mencantumkan semua objek multimedia dan link ke scene lain (Suyanto, 2003:
No Kegiatan Bulan Ke- 1 Bulan Ke- 2 Bulan Ke- 3 Bulan Ke- 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 Membuat peta navigasi 2 Storyboard 3 merancang Antarmuka (interface) 4 pencarian dan pengumpulan isi 5 3D modeling 6 mendigitalkan Audio dan video 7 merevisi desain 8 membuat grafis 9 membuat animasi 10 asemmbly (pemrograman) 11 produksi 12 pengujian 13 memperbaiki bug 14 distribusi
375). Secara umum rancangan rangka pada manusia.
Scene 1
Form Name Link Keterangan
umum rancangan storyboard dalam visualisasi 3 dimensi
Tabel 4.3Storyboard
Visual
: Intro : Scene2
: Menampilkan halaman pembuka
ensi struktur Sound Sound1. mp3 drivin dat funky daisy.m p3
2
Form Name Link Keterangan : 3
Form Name : Visuali Link :
Keterangan : Menampilkan visuali : Home
: Scene3,4,5,6
gan :Menampilkan Penjelasan secara umum tentang sistem rangka manusia
: Visualisasi 3D : Scene2,4,5,6
: Menampilkan visualisasi 3 dimensi struktur rangka manusia dan pengguna bisa merotasi dan membesar dan mengecilkan objek 3 dimensi
ChuckB rown_N ovember .mp3 Sound1. mp3 rotasi dan ChuckB rown_N ovember .mp3 Sound1. mp3 Pling.m p3
4
Form Name : Link :
Keterangan : Menampilkan mat
5
Form Name : Bantuan Link :
Keterangan : Menampilkan b : Materi
: Scene2,3,5,6,7,8,9,10,11
: Menampilkan materi tentang struktur rangka dan bagian-bagiannya
Tampilan menu rangka diwakili dengan kotak- kotak.
: Bantuan : Scene2,3,4,6
: Menampilkan bantuan dari tombol navigasi yang ada pada visualisasi 3 dimensi ini.
ChuckB rown_N ovember .mp3 Sound1. mp3 Pling.m p3 ChuckB rown_N ovember .mp3 Sound1. mp3
6
Form Name : Profil
Link : Scene2,3,4,5
Keterangan : Menampilkan profil dari penulis sekaligus pembuat visualisasi 3D struktur rangka ini.
ChuckB rown_N ovember .mp3 Sound1. mp3 7
Form Name : Materi Tengkorak Link : Scene2,3,4,5,6,11,12,13
Keterangan : Menampilkan materi tengkorak secara khusus yang dilengkapi dengan teks, gambar, dan video 3D ChuckB rown_N ovember .mp3 Sound1. mp3
8
Form Name : Materi Rusuk
Link : Scene2,3,4,5,6,14,15,16
Keterangan : Menampilkan materi tengkorak secara khusus yang dilengkapi dengan teks, gambar, dan video 3D ChuckB rown_N ovember .mp3 Sound1. mp3 9
Form Name : Materi Tulang Belakang Link : Scene2,3,4,5,6,17,18,19
Keterangan : Menampilkan materi tengkorak secara khusus yang dilengkapi dengan teks, gambar, dan video 3D ChuckB rown_N ovember .mp3 Sound1. mp3
10
Form Name : Materi Ektremitas Atas Link : Scene2,3,4,5,6,20,21,22
Keterangan : Menampilkan materi tengkorak secara khusus yang dilengkapi dengan teks, gambar, dan video 3D ChuckB rown_N ovember .mp3 Sound1. mp3 11
Form Name : Materi Ekstremitas Bawah Link : Scene2,3,4,5,6,23,24,25
Keterangan : Menampilkan materi tengkorak secara khusus yang dilengkapi dengan teks, gambar, dan video 3D ChuckB rown_N ovember .mp3 Sound1. mp3
4.2.2 Flowchart
Perancangan flowchartmenggambarkan tahapan proses dari suatu sistem, termasuk sistem multimedia. (Suyanto,2003:364)
Gambar 4.1Rancangan Flowchart Intro
Gambar 4.1 menjelaskan halaman awal dari aplikasi. Jika pengguna memilih masuk maka akan menuju halaman menu utama. Jika pengguna memilih keluar maka aplikasi akan tertutup.
Keterangan
Gambar 4.2Rancangan FlowchartMenu Utama
Gambar 4.2 flowchartini menjelaskan bahwa halaman menu utama berisi 5 proses, yakni untuk menuju menu utama, visualisasi 3 dimensi, materi, bantuan
Keterangan
A: Halaman menu utama B: Halaman materi
dan jika tidak makan pengguna bisa memilih menu lainnya atau keluar dari program.
Gambar 4.3FlowchartMenu Materi
Gambar 4.3flowchartini 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
proses tersebut maka akan terhubung ke menu yang diinginkan dan jika “tidak” maka pengguna bisa memilih menu lainnya atau keluar dari program.
Gambar 4.4FlowchartSub 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
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.5FlowchartSub 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
Gambar 4.6FlowchartSub 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
Gambar 4.7FlowchartSub 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
Gambar 4.8FlowchartSub 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
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 sceneyang dihubungkan dengan scenelainnya. Untuk lebih jelasnya dapat dilihat pada Gambar 4.9.
4.2.4 Perancangan State Diagram Transition (STD)
1. Rancangan Struktur Intro
Intro Klik “Mulai”
Tampilkan halaman menu utama Menu Utama
Gambar 4.10Rancangan STD Intro
2. Rancangan Struktur Menu Utama