Pemodelan Sistem Data Flow Diagram DFD Flowchart Storyboard

BAB III PERANCANGAN SISTEM

3.1 Pemodelan Sistem

Persiapan yang harus dibuat sebelum menuangkan ide dalam mendesain sebuah perangkat lunak, yaitu membuat diagram pohon dan sketsa tampilan perangkat lunak. Fungsi dari diagram pohon yaitu sebagai gambaran hierarki isi pada perangkat lunak. Adapun diagram pohon pada perancangan Metode Pengajaran Berbasis Multimedia untuk Proses Meletusnya Gunungapi dapat dilihat pada Gambar 3.1. Gambar 3.1 Diagram Pohon Perancangan Sistem Metode Pengajaran Berbasis Multimedia untuk Proses Meletusnya GunungApi Metode Pengajaran Berbasis Multimedia untuk Proses Meletusnya GunungApi Menu Utama Bumi GunungApi Latiha Universitas Sumatera Utara

3.2 Data Flow Diagram DFD

Data Flow Diagram DFD merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep menggambarkan dari mana asal data dan kemana tujuan data yang keluar dari sistem, di mana data tersebut disimpan, proses apa yang menghasilkan data tersebut dan interaksi antara data yang tersimpan dan proses yang dikenakan pada data tersebut. Secara sederhana DFD dalam membangun aplikasi ini dapat dilihat pada gambar di bawah ini: USER USER INPUT OUTPUT Metode pengajaran berbasis multimedia untuk proses meletusnya gunungapi Metode pengajaran berbasis multimedia untuk proses meletusnya gunungapi Gambar 3.2 DFD Level 0 Metode Pengajaran berbasis Multimedia untuk Proses Meletusnya Gunungapi USER MENU Pilihan Menu Hasil Pilihan Bumi Gunungapi Latihan Pilihan Menu Pilihan Menu Pilihan Menu Hasil Pilihan Hasil Pilihan Gambar 3.3 DFD Level 1 Metode Pengajaran berbasis Multimedia untuk Proses Meletusnya Gunungapi Universitas Sumatera Utara

3.3 Flowchart

Secara sederhana flowchart dalam membangun aplikasi ini dapat dilihat pada gambar di bawah ini: Mulai Halaman Pembuka Gunungapi Bumi Menu Soal-soal Proses meletusnya gunungapi Literatur Bumi Input nama Pembahasan Exit 1 1 2 2 No Yes Latihan Gambar 3.4 Flowchart Universitas Sumatera Utara

3.4 Storyboard

Adapun storyboard dari rancangan aplikasi PBK untuk pokok bahasan metode pengajaran berbasis multimedia untuk proses meletusnya gunungapi yang akan dibangun, setiap halaman akan disajikan pada tabel 3.3 sebagai berikut. No. Kategori Visual Audio 1. Tampilan Pembuka JUDUL TAMPILAN AWALPEMBUKA NEXT Keterangan: Untuk lebih jelasnya lihat gambar 3.3 a. Judul TEKS METODE PENGAJARAN BERBASIS MULTIMEDIA UNTUK PROSES MELETUSNYA GUNUNGAPI 1 Warna : Biru 2 Jenis Font : Comic Sans MS b. Teks Welcome to the Geography Lesson 1 Warna : Biru 2 Jenis Font : Comic Sans MS a. Background : Mount Fujiyama GAMBAR b. Bingkai Kombinasi warna merah-hitam dengan stroke height 5 dan stroke style solid. c. Button Next Button Next terletak di kanan bawah. Universitas Sumatera Utara Button ini berfungsi untuk menampilkan layer selanjutnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah dalam dengan stroke solid. 1 Warna : Biru 2 Jenis Font : Comic Sans MS Menurut waktunya, animasi yang paling awal hingga yang paling akhir muncul adalah: ANIMASI a. Teks Judul Loading, bergerak dari kiri ke kanan dengan kombinasi warna merah- hitam. b. Button Next • Saat kursor tidak diarahkan ke button, seluruh button next berwarna biru. • Saat kursor berada diatas button next, warna panah bagian dalam berubah menjadi kombinasi warna merah-hitam. • Saat button di klik, panah dalam akan memenuhi seluruh daerah panah dan warna button next berubah menjadi kombinasi warna merah-hitam dan akan muncul kata “Next” berwarna putih. Universitas Sumatera Utara c. Teks Welcome • Berawal dari ukuran kecil dengan alpha 0 hingga berukuran yang tampak pada gambar dengan alpha 100. • Loading, bergerak dari kanan ke kiri dengan kombinasi warna kuning-hijau. • Bayangan dengan warna biru dimana bayangan tersebut memiliki alpha awal 100 dan alpha akhir 0. Semakin menurun nilai alpha, semakin besar dan pudar pula bayangannya. d. Teks To Teks To bergerak dari kanan ke kiri. e. Teks The Teks ini bergerak dari kiri ke kanan. f. Teks Geography • Teks Geography bergerak dari kanan dengan alpha 0 ke kiri dengan alpha 100. • Loading bergerak dari kanan ke kiri dengan kombinasi warna kuning-hijau. • Bayangan dengan warna biru dimana bayangan tersebut memiliki alpha awal 100 dan Universitas Sumatera Utara alpha akhir 0. Semakin menurun nilai alpha, semakin besar dan pudar pula bayangannya. g. Teks Lesson • Teks Lesson bergerak dari kiri dengan alpha 0 menuju ke kanan dengan alpha 100. • Loading bergerak dari kiri ke kanan dengan kombinasi warna kuning-hijau. • Bayangan dengan warna biru dimana bayangan tersebut memiliki alpha awal 100 dan alpha akhir 0. Semakin menurun nilai alpha, semakin besar dan pudar pula bayangannya. 2. Halaman Menu JUDUL NEXT BACK STANDAR KOMPETENSI MENU Keterangan: Untuk lebih jelasnya lihat gambar 3.4 a. Judul TEKS METODE PENGAJARAN BERBASIS MULTIMEDIA UNTUK PROSES MELETUSNYA GUNUNGAPI 1 Warna : Biru 2 Jenis Font : Comic sans ms b. Standar Kompetensi 1 Warna : Biru 2 Jenis Font : Comic sans ms Universitas Sumatera Utara c. Button Menu 1 Warna : Biru 2 Jenis Font : Comic Sans MS a. Background : Gunung Bromo GAMBAR b. Bingkai Kombinasi warna merah-hitam dengan stroke height 5 dan stroke style solid. c. Elips pada Standar Kompetensi 1 Warna : kombinasi hitam-merah d. Elips pada Button Menu 1 Warna : kombinasi hitam-merah e. Button Next Button Next terletak di kanan bawah. Button ini berfungsi untuk menampilkan layer selanjutnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah bagian dalam dengan stroke solid. 1 Warna : Biru 2 Jenis Font : Comic Sans MS f. Button Back Button Back terletak di kiri bawah. Button ini berfungsi untuk menampilkan layer sebelumnya. Universitas Sumatera Utara Button ini terdiri dari dua bagian yaitu bingkai panah dan panah dalam dengan stroke solid. 1 Warna : Biru 2 Jenis Font : Comic sans ms Menurut waktunya, animasi yang paling awal hingga yang paling akhir muncul adalah: ANIMASI a. Teks Judul Loading, bergerak dari kiri ke kanan dengan kombinasi warna merah- hitam. b. Teks Standar Kompetensi Loading, bergerak dari tengah teks yang berbentuk elips dan kombinasi warna kuning-hijau. c. Teks Menu Loading, bergerak dari tengah teks yang berbentuk elips dan kombinasi warna kuning-hijau. d. Button Standar Kompetensi Pada saat di klik maka layer akan berpindah ke layer standar. e. Button Menu Pada saat di klik maka layer akan berpindah ke layer menu utama. Universitas Sumatera Utara f. Button Next • Saat kursor tidak diarahkan ke button, button next berwarna biru. • Saat kursor berada diatas button next, warna panah bagian dalam berubah menjadi kombinasi warna merah-hitam. • Saat button di klik, panah dalam akan memenuhi seluruh daerah panah dan warna button next berubah menjadi kombinasi warna merah-hitam dan akan muncul kata “Next” berwarna putih. g. Button Back • Saat kursor tidak diarahkan ke button, button back berwarna biru. • Saat kursor berada diatas button back, warna panah bagian dalam berubah menjadi kombinasi warna merah-hitam. • Saat button di klik, panah dalam akan memenuhi seluruh daerah panah dan warna button back berubah menjadi kombinasi warna merah-hitam dan akan muncul kata “Back” berwarna putih. Universitas Sumatera Utara 3. Halaman Standar Kompetensi STANDAR KOMPETENSI NEXT BACK KOMPETENSI DASAR a. Standar Kompetensi TEKS • Memahami ciri-ciri gunungapi meletus. 1 Warna : Biru 2 Jenis Font : Comic sans ms b. Kompetensi Dasar • Bagaimana gunungapi meletus. 1 Warna : Biru 2 Jenis Font : Comic Sans MS • Latihan 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Background : Gunung Mayon GAMBAR b. Bingkai Kombinasi warna merah-hitam dengan stroke height 5 dan stroke style solid. c. Button Next Button Next terletak di kanan bawah. Button ini berfungsi untuk menampilkan layer selanjutnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah bagian dalam dengan stroke solid. Universitas Sumatera Utara 1 Warna : Biru 2 Jenis Font : Comic sans ms 3 Button Back Button Back terletak di kiri bawah. Button ini berfungsi untuk menampilkan layer sebelumnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah dalam dengan stroke solid. 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Teks Standar Kompetensi ANIMASI • Berawal dari ukuran kecil dengan alpha 0 hingga berukuran yang tampak pada gambar dengan alpha 100. • Bayangan dengan warna biru dimana bayangan tersebut memiliki alpha awal 100 dan alpha akhir 0. Semakin menurun nilai alpha, semakin besar dan pudar pula bayangannya. b. Teks Memahami ciri-ciri gunungapi meletus Teks ini bergerak dari atas stage dengan alpha 0 dan berhenti di bawah teks standar kompetensi Universitas Sumatera Utara dengan alpha 100. c. Teks Kompetensi Dasar Animasi teks kompetensi dasar sama dengan animasi teks standar kompetensi. d. Teks Bagaimana gunungapi meletus Teks ini bergerak dari bawah stage dengan alpha 0 dan berhenti di bawah teks kompetensi dasar dengan alpha 100. e. Teks Latihan Teks ini bergerak dari bawah stage dengan alpha 0 dan berhenti di bawah teks bagaimana gunungapi meletus dengan alpha 100. f. Button Next • Saat kursor tidak diarahkan ke button, button next berwarna biru. • Saat kursor berada diatas button next, warna panah bagian dalam berubah menjadi kombinasi warna merah-hitam. • Saat button di klik, panah dalam akan memenuhi seluruh daerah panah dan warna button next berubah menjadi kombinasi Universitas Sumatera Utara warna merah-hitam dan akan muncul kata “Next” berwarna putih. g. Button Back • Saat kursor tidak diarahkan ke button, button back berwarna biru. • Saat kursor berada diatas button back, warna panah bagian dalam berubah menjadi kombinasi warna merah-hitam. • Saat button di klik, panah dalam akan memenuhi seluruh daerah panah dan warna button back berubah menjadi kombinasi warna merah-hitam dan akan muncul kata ”Back” berwarna putih. 4. Halaman Menu Utama MENU NEXT BACK Bumi Earth Gunungapi Volcano Latihan a. Menu TEKS 1 Warna : Biru 2 Jenis Font : Comic Sans MS b. Bumi Earth 1 Warna : Biru 2 Jenis Font : Comic Sans MS c. Gunungapi Vulcano 1 Warna : Biru 2 Jenis Font : Comic Sans MS Universitas Sumatera Utara d. Latihan 1 Warna : Biru 2 Jenis Font : Comic Sans MS a. Background : Gunung Sinabung GAMBAR b. Bingkai Kombinasi warna merah-hitam dengan stroke height 5 dan stroke style solid. c. Titik-titik Menyatakan loading menu. 1 Warna : Biru d. Button bulat dengan segitiga dalam mengarah ke kanan. Di dalam Button ini terletak di samping teks bumi earth, gunungapivulcano dan latihan. 1 Warna button bulat : Hitam 2 Warna segitiga : kombinasi merah-hitam e. Button Next Button Next terletak di kanan bawah. Button ini berfungsi untuk menampilkan layer selanjutnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah bagian dalam dengan stroke solid. Universitas Sumatera Utara 1 Warna : Biru 2 Jenis Font : Comic sans ms 3 Button Back Button Back terletak di kiri bawah. Button ini berfungsi untuk menampilkan layer sebelumnya. Button ini terdiri dari dua bagian yaitu bingkai panah dan panah dalam dengan stroke solid. 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Teks Menu ANIMASI Teks menu bergerak dari atas stage alpha 0 ke bawah alpha 100. b. Titik-titik Menyatakan loading pada menu. Titik-titik ini muncul satu persatu sebanyak 3 tiga kali. c. Teks Bumi Earth, Gunungapi Vulcano, dan Latihan Teks ini muncul setelah animasi titik-titik selesai. d. Button Bumi Earth • Saat kursor tidak diarahkan pada button bumi earth, button berwarna hitam dan segitiga dalam berwarna kombinasi Universitas Sumatera Utara merah-hitam dan teks bumi berukuran normal. • Jika kursor berada tepat diatas button bumi earth maka, - warna button berubah menjadi kombinasi warna putih-hitam. - teks bumi akan membesar dan disertai munculnya gambar bumi. • Pada saat button bumi earth di klik, warna button dan ukuran teks sama sepeti saat kursor diatas button tapi akan berpindah ke layer bumi. e. Gunungapi Vulcano • Jika kursor tidak diarahkan pada button gunungapi vulcano maka button berwarna hitam dan segitiga dalam berwarna kombinasi merah-hitam dan teks gunungapi berukuran normal. Vulcanno • Jika kursor berada tepat diatas button gunungapi vulcano maka, - warna button berubah menjadi kombinasi warna putih-hitam. - teks gungungapi vulcano akan membesar dan disertai munculnya gambar gunung. Universitas Sumatera Utara • Pada saat button gunungapi vulcano di klik, warna button dan ukuran teks sama sepeti saat kursor diatas button tapi akan berpindah ke layer gungungapi vulcano. f. Latihan • Saat kursor tidak diarahkan pada button latihan, button berwarna hitam dan segitiga dalam berwarna kombinasi merah- hitam dan teks latihan berukuran normal. • Jika kursor berada tepat diatas button latihan maka, - warna button berubah menjadi kombinasi warna putih-hitam. - teks latihan akan membesar. • Pada saat button latihan di klik, warna button dan ukuran teks sama sepeti saat kursor diatas button tapi akan berpindah ke layer latihan. 5. Proses Magma terdorong ke pemukaan bumi a. Vulcano Teks 1 Warna : Putih 2 Jenis Font : Comic sans ms b. Restart 1 Warna : Biru Universitas Sumatera Utara NEXT BACK Gambar Teks RESTART VULCANO 2 Jenis Font : Comic sans ms c. Sebuah letusan terjadi akibat endapan magma di dalam perut bumi yang terhambat sehingga gas mendorong magma dengan kuat. 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Gunungaapi dengan magma dan gas yang bergerak untuk mencoba menembus permukaan bumi. Gambar ini terdiri dari lapisan pada gunung, pipa magma, magma, gas- gas, dan dapaur magma. Gambar b. Button Next Button Next terletak di kanan bawah. Button ini berfungsi untuk menampilkan layer selanjutnya. Button ini terdapat di dalam sebuah kotak dengan warna aqua stroke solid. 1 Warna : Biru 2 Jenis Font : Comic sans ms c. Button Back Button Back terletak di kiri bawah. Button ini berfungsi untuk menampilkan layer sebelumnya. Button ini terdapat di dalam sebuah Universitas Sumatera Utara kotak dengan warna aqua stroke solid. 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Magma dan gas Animasi Magma dan gas bergerak dari bawah menuju ke atas secara bersamaan. b. Tombol Next • Pada saat kursor berada diatas tombol, maka kata Next akan membesar diikuti munculnya underline dengan warna kombinasi merah-hitam dan segitiga yang mengarah ke kanan juga membesar dengan warna kombinasi merah-hitam. • Pada saat diklik, underline akan menghilang. Ditengah segitiga akan muncul kombinasi warna putih-hitam. c. Tombol Back • Pada saat kursor berada diatas tombol, maka kata Back akan membesar diikuti munculnya underline dengan warna kombinasi merah-hitam dan segitiga yang mengarah ke kanan juga membesar dengan warna Universitas Sumatera Utara kombinasi merah-hitam. • Pada saat diklik, underline akan menghilang. Ditengah segitiga akan muncul kombinasi warna putih-hitam. 6. Proses Meletusnya Gunungapi NEXT BACK Gambar Gunungapi meletus RESTART VULCANO a. Vulcano Teks 1 Warna : Putih 2 Jenis Font : Comic sans ms b. Restart 1 Warna : Biru 2 Jenis Font : Comic sans ms a. Gunungapi meletus Gambar Gambar ini terdiri dari gunungapi yang sedang meletus disertai awan dan juga bom vulkanik. a. Gunungapi Animasi Magma dan gas muncul ke permukaan bumi yang diikuti oleh hujan abu, awan panas, dan juga bom vulkanik. b. Tombol Next • Pada saat kursor berada diatas tombol, maka kata Next akan membesar diikuti munculnya Universitas Sumatera Utara underline dengan warna kombinasi merah-hitam dan segitiga yang mengarah ke kanan juga membesar dengan warna kombinasi merah-hitam. • Pada saat diklik, underline akan menghilang. Ditengah segitiga akan muncul kombinasi warna putih-hitam. c. Tombol Back • Pada saat kursor berada diatas tombol, maka kata Back akan membesar diikuti munculnya underline dengan warna kombinasi merah-hitam dan segitiga yang mengarah ke kanan juga membesar dengan warna kombinasi merah-hitam. • Pada saat diklik, underline akan menghilang. Ditengah segitiga akan muncul kombinasi warna putih-hitam. 7. Halaman Latihan Apakah Anda sudah siap test hari ini??? Belum Sudah VULCANOES a. Volcanoes TEKS 1 Warna : Biru 2 Jenis Font : Comic Sans MS b. Apakah Anda sudah siap test hari ini??? 1 Warna : Biru Universitas Sumatera Utara 2 Jenis Font : Comic Sans MS a. Button Belum GAMBAR Button ini berbentuk kotak berwarna hitam dengan stroke solid. Di dalam button terdapat segitiga terbalik dengan kombinasi warna putih-hitam dan teks belum berwarna putih dengan jenis font Comic Sans MS. b. Button Sudah Button ini berbentuk kotak berwana hitam dengan stroke solid. Di dalam button ini terdapat segitiga terbalik dengan kombinasi putih-hitam dan teks sudah berwarna putih dengan jenis font Comic Sans MS. a. Button Belum ANIMASI • Jika kursor tidak diarea button ini, kotak berwarna hitam, segitiga dalam berwarna kombinasi putih-hitam dan warna teks belum berwarna putih. • Saat kursor diatas button, warna kotak berubah menjadi kombinasi warna merah-hitam. Universitas Sumatera Utara • Jika button ini di klik, maka layer akan kembali ke layer “Bumi Earth”. b. Button Sudah • Jika kursor tidak diarea button ini, kotak berwarna hitam, segitiga dalam berwarna kombinasi putih-hitam dan warna teks belum berwarna putih. • Saat kursor diatas button, warna kotak berubah menjadi kombinasi warna merah-hitam. • Jika button ini di klik, maka layer akan kembali ke layer berikutnya. Tabel 3.1 Storyboard Perancangan Aplikasi PBK untuk pokok bahasan Metode Pengajaran Berbasis Multimedia untuk Proses Meletusnya Gunungapi

3.5 Perancangan Tampilan