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