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
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 0 Metode pengajaran berbasis multimedia untuk proses meletusnya
gunungapi
0 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
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
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 AWAL/PEMBUKA
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 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.
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
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
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
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.
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.
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.
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
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
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
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), gunungapi(vulcano) 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.
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
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.
• 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
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
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
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
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???
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.
• 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