Flowchart tersebut menjelaskan prosedur untuk random soal yang disediakan. Pada saat masuk ke prosedur random, maka akan didefinisikan variabel bank_soal[],
sudah[] dan hasil[] yang berbentuk array, dan variabel i dan belum yang berbentuk integer. Kemudian akan dilakukan pengecekan apakah i lebih kecil dari 10? Jika tidak
maka prosedur berakhir, jika iya maka variabel belum akan diisi dengan 0. Kemudian akan dilakukan lagi pengecekan apakah belum = 0? Jika tidak maka nilai i akan
ditambah 1 dan kembali melakukan pengecekan apakah i lebih kecil dari 10. Namun jika belum = 0 maka variabel item adalah hasil random dari jumlah soal yang
disediakan. Kemudian akan dilakukan pengecekan apakah nilai array sudah[item] = 0? Jika iya maka akan kembali melakukan pengecekan apakah i lebih kecil dari 10.
Namun jika nilai suda h[item] = 0, maka variabel belum dan sudah[item] diisi dengan nilai 1 dan hasil[i] diisi dengan bank_soal[item]+1. Kemudian kembali lagi dilakukan
pengecekan apakah belum = 0. Proses ini akan terus berulang hingga nilai i lebih besar atau sama dengan 10.
3.2.3 Storyboard
Storyboard merupakan uraian yang berisi visual dan audio penjelasan dari masing- masing alur dalam flowchart. Satu kolom dalam storyboard mewakili satu tampilan di
layar monitor.
Tabel 3.2 Storyboard Aplikasi Pengajaran Berbantuan Komputer Untuk Mata Pelajaran SBK
No Nama
Layar Aktifitas Proses
Sound effect
1. Halaman
Utama •
Teks berwarna biru berada di tengah bagian atas stage dengan bacaan
“selamat dating…. Mari kita belajar warna dan nada”
• Tombol menu materi: berupa teks berwarna putih
Musik latar terdengar
apabila dijalankan
Universitas Sumatera Utara
dengan background bertekstur kayu berwarna cokelat. Klik tombol materi untuk melihat isi materi.
• Tombol menu simulasi: berupa teks berwarna putih
dengan background bertekstur kayu berwarna cokelat. Klik tombol materi untuk melihat isi materi.
• Tombol menu latihan: berupa teks berwarna putih
dengan background bertekstur kayu berwarna cokelat. Klik tombol latihan untuk melihat isi
latihan. •
Tombol menu materi: berupa teks berwarna putih dengan background bertekstur kayu berwarna
cokelat. Klik tombol profil untuk melihat isi profil. •
Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai
dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan
lagu yang dimainkan •
Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik
tombol keluar untuk menutup aplikasi.
Animasi: •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri.
Universitas Sumatera Utara
2. Halaman
materi •
Teks berwarna merah berada di tengah bagian atas stage dengan bacaan
“ayo pilih materinya” •
Tombol warna: berupa teks berwarna hijau dengan gambar 5 cipratan cat dengan warna yang berbeda.
Apabila kursor diarahkan ke atas tombol maka akan ada animasi cipratan cat. Klik untuk masuk ke
halaman isi materi warna. •
Tombol nada: berupa teks berwarna biru dengan gambar gitar dan 3 buah not balok. Apabila kursor
diarahkan ke atas tombol nada maka akan ada animasi not balok tersebut bergerak-gerak. Klik
untuk masuk ke halaman isi materi nada. •
Tombol tutup: berupa gambar silang X dengan background kotak berwarna merah. Klik tombol
tutup untuk kembali ke halaman utama. •
Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai
dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan
lagu yang dimainkan •
Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik
tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan.
• Musik
latar terdengar
apabila dijalankan
• Suara
burung saat
masuk halaman
materi
Universitas Sumatera Utara
• Kupu-kupu bergerak dari arah kanan menuju ke kiri
• Burung terbang dari arah kiri bawah menuju ke
kanan atas, bergerak seolah-olah menarik kertas yang menjadi background halaman materi. Animasi
ini muncul saat awal masuk ke halaman materi. 3.
Halaman isi materi
warna •
Tombol navigasi berbentuk panah berwarna hijau ke arah kiri. Klik untuk kembali ke halaman materi.
• Tombol tutup: berupa gambar silang X dengan
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.
• Tombol navigasi berbentuk panah berwarna hitam
berlatar belakang lingkaran berwarna hijau ke arah kanan. Klik untuk kembali ke halaman materi
selanjutnya. •
Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai
dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan
lagu yang dimainkan •
Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik
tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri
Musik latar terdengar
apabila dijalankan
Universitas Sumatera Utara
4. Halaman
isi materi nada
• Tombol navigasi berbentuk panah berwarna hijau ke
arah kiri. Klik untuk kembali ke halaman materi. •
Tombol tutup: berupa gambar silang X dengan background kotak berwarna merah. Klik tombol
tutup untuk kembali ke halaman utama. •
Tombol navigasi berbentuk panah berwarna hitam berlatar belakang lingkaran berwarna hijau ke arah
kanan. Klik untuk kembali ke halaman materi selanjutnya.
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri
5. Halaman
simulasi •
Teks berwarna merah berada di tengah bagian atas stage dengan bacaan
“ayo pilih simulasinya” •
Tombol warna: berupa teks berwarna hijau dengan
• Musik
latar terdengar
apabila dijalankan
Universitas Sumatera Utara
kuas, cat dan tempatnya. Apabila kursor diarahkan ke atas tombol maka akan ada animasi sebuah kuas
yang bergerak seolah-olah melukis. •
Tombol nada: berupa teks berwarna biru dengan gambar pianika dan 3 buah not balok. Apabila kursor
diarahkan ke atas tombol nada maka akan ada animasi not balok tersebut bergerak-gerak.
• Tombol tutup: berupa gambar silang X dengan
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri •
Pesawat terbang dari arah kiri menuju ke kanan bergerak seolah-olah menarik kertas yang menjadi
background halaman simulasi. Animasi ini muncul saat awal masuk ke halaman simulasi.
• Suara
pesawat terbang
saat masuk
halaman simulasi
Universitas Sumatera Utara
6. Halaman
simulasi warna
• Tombol dengan gambar cipratan cat dengan 8 warna
yang berbeda yang berlatar tekstur kayu berwarna coklat. Klik salah satu gambar cipratan cat tersebut
untuk memilih warna yang diinginkan. •
Gambar kartun berwana hitam putih merupakan target yang akan diwarnai
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol tutup: berupa gambar silang X dengan
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri
Musik latar terdengar
apabila dijalankan
7. Halaman
simulasi nada
• Gambar alat sebuah alat musik, yaitu pianika. Klik
tiap tuts pianika tersebut untuk mendengarkan nadanya
• Gambar contoh lagu yang dilengkapi dengan not
balok.
Musik latar terdengar
apabila dijalankan
Universitas Sumatera Utara
• Tombol navigasi berwarna bitu berbentuk panah ke
arah kiri dan kanan. Klik untuk memilih contoh lagu sebelumnya dan selanjutnya.
• Tombol tutup: berupa gambar silang X dengan
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri 8.
Halaman latihan
• Teks berwarna biru dengan bacaan “masukkan nama
anda” •
Kotak isi teks: kotak yang harus diisi dengan sebuah nama untuk memulai latihan
• Tombol OK: tombol dengan tulisan OK berwarna
biru. Klik untuk memulai latihan •
Tombol tutup: berupa gambar silang X dengan
• Musik
latar terdengar
apabila dijalankan
• Suara
katrol saat
masuk
Universitas Sumatera Utara
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri •
Orang berjalan dari kanan kemudian menarik tali yang dikaitkan ke sebuah katrol dan seolah-olah
menarik kertas yang menjadi background halaman latihan. Animasi ini muncul saat awal masuk ke
halaman latihan.
halaman materi
9. Halaman
latihan1 •
Pertanyaan: teks berwarna hitam dengan model soal random. soal yang disajikan hanya 10 soal.
•
Tombol pilihan A: tombol berwarna biru dengan Teks berwarna putih huruf A. Klik apabila menurut
Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
Musik latar terdengar
apabila dijalankan
Universitas Sumatera Utara
•
Tombol pilihan B: tombol berwarna biru dengan Teks berwarna putih huruf B. Klik apabila menurut
Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
•
Tombol pilihan C: tombol berwarna biru dengan Teks berwarna putih huruf C. Klik apabila menurut
Anda jawaban yang benar. Setelah di klik maka akan masuk ke soal berikutnya.
•
Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai
dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan
lagu yang dimainkan. •
Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik
tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan.
•
Kupu-kupu bergerak dari arah kanan menuju ke kiri 10. Halaman
latihan2 •
Teks berwarna biru dengan bacaan “jumlah soal benar” dan diikuti angka di sebelahnya yang
menunjukkan jumlah soal yang benar. •
Teks berwarna biru dengan bacaan “jumlah soal salah” dan diikuti angka di sebelahnya yang
menunjukkan jumlah soal yang salah.
Musik latar terdengar
apabila dijalankan
Universitas Sumatera Utara
• Teks berwarna hijau dengan bacaan “nilai” dan
diikuti angka di sebelahnya yang menunjukkan nilai yang diperoleh.
• Teks berwarna merah yang berisi pesan yang sesuai
dengan hasil yang telah diperoleh. •
Pilihan musik: berupa empat buah tombol dengan warna yang berbeda untuk memainkan musik sesuai
dengan yang judul lagu yang tertulis dan disertai dengan satu buah tombol stop untuk menghentikan
lagu yang dimainkan. •
Tombol keluar: berupa teks berwarna putih dengan background bertekstur kayu berwarna cokelat. Klik
tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri
11. Halaman profil
• Teks berwarna merah dengan bacaan “data diri”
• Teks berwarna biru dengan bacaan
NAMA : DENIS AFRIAWANTO ALAMAT : JALAN MERAK NO 21 E
SEI SKAMBING B T.T.L : LANGSA, 15 JUNI 1988
No. HP : 085275296423 EMAIL : basket_ballersmanyahoo.co.id
• Musik
latar terdengar
apabila dijalankan
• Suara
monyet saat
masuk
Universitas Sumatera Utara
• Teks berwarna hitam dengan bacaan
created by: denis afriawanto S1-Ilmu Komputer USU
• Tombol tutup: berupa gambar silang X dengan
background kotak berwarna merah. Klik tombol tutup untuk kembali ke halaman utama.
• Pilihan musik: berupa empat buah tombol dengan
warna yang berbeda untuk memainkan musik sesuai dengan yang judul lagu yang tertulis dan disertai
dengan satu buah tombol stop untuk menghentikan lagu yang dimainkan.
• Tombol keluar: berupa teks berwarna putih dengan
background bertekstur kayu berwarna cokelat. Klik tombol keluar untuk menutup aplikasi.
Animasi •
Burung terbang dari arah kiri menuju ke kanan. •
Kupu-kupu bergerak dari arah kanan menuju ke kiri •
Gambar monyet yang bergerak dari atas ke kiri bawah seolah-olah membawa kertas yang menjadi
background halaman profil. Animasi ini muncul saat awal masuk ke halaman profil.
halaman materi
Universitas Sumatera Utara
3.2.4 Perancangan Tampilan
