commit to user
IMPLEMENTASI DAN ANALISA
4.1 Detail Aplikasi
4.2.2 Tampilan Scene Aplikasi
4.2.2.1 Tampilan Home
Tampilan home adalah tampilan awal aplikasi dengan backrground gambar karakter anak laki-laki dan perempuan serta terdapat gambar masjid sebegai ilustrasi awal aplikasi sebagai media pembelajaran agama islam bagi siswa PAUD. Di halaman ini terdapat judul aplikasi dan sebuah button untuk masuk ke menu utama. Pada tombol ini menggunakan action script sebagai berikut :
on(release){
gotoAndStop(3) }
Adapun tampilan home dapat dilihat pada Gambar 4.2.
Gambar 4.2 Tampilan Home 4.2.2.2 Tampilan Menu Utama
Halaman menu utama Media Pembelajaran Kegiatan Ibadah Agama Islam adalah halaman yang tampil setelah kita masuk ke aplikasi. Pada halaman ini terdapat enam tombol yang masing-masing mewakili menu utama yang terdapat dalam aplikasi, yaitu Sholat, Wudhu, Tayamun, Doa, Quiz dan Profil. Pada tombol menu, menggunakan action script :
//skrip tombol wudhu : on (release) {
gotoAndStop(4);
pengertian = "Wudhu";
penjelasan = "wudhu adalah"; }
//skrip tombol sholat on (release) {
gotoAndStop(5);
pengertian = "Sholat";
penjelasan = "Sholat adalah"; } //skrip berdoa on (release) { gotoAndStop(6); pengertian = "Berdoa";
commit to user
penjelasan = "Berdoa adalah"; } //skrip tayamum on (release) { gotoAndStop(7); pengertian = "Tayamum";
penjelasan = "Tayamum adalah"; }
//skrip tombol quiz on (release) {
gotoAndStop(8); pengertian = "Quiz";
penjelasan = "Quiz adalah"; }
//skrip tombol profil on (release) {
gotoAndStop(9);
pengertian = "Profil";
penjelasan = "Profil adalah"; }
Adapun tampilan menu utama dapat dilihat pada Gambar 4.3.
Gambar 4.3 Tampilan Menu Utama
4.2.2.3 Tampilan Content Menu
Halaman content menu merupakan halaman yang menampilkan isi dari menu yang dipilih. Setiap menu utama terdiri dari tiga buah submenu yaitu penjelasan, animasi dan video. Disebelah kiri atas terdapat button menu yang dipilih, dibawahnya terdapat tiga buah kotak yang merupakan submenu yang masing-masing dapat diklik untuk menampilkan contentnya. Pada masing-masing tombol submenu menggunakan action script :
//tombol penjelasan on(release){ animasi.gotoAndStop(2) } //tombol animasi on(release){ animasi.gotoAndStop(3) } //tombol video on(release){ animasi.gotoAndStop(4) }
//animasi.gotoAndStop(nomer frame) berfungsi memunculkan pop up
Kemudian dikanan bawah ditambahkan sebuah tombol untuk kembali ke menu utama, menggunakan action script :
//frame 3 adalah menu utama on(release){
gotoAndStop(3) }
Adapun tampilan content menu dapat dilihat pada Gambar 4.4.
Gambar 4.4 Tampilan Content Menu 4.2.2.4 Tampilan Penjelasan
Tampilan penjelasan berisi judul dan pengertian dari menu pembelajaran yang dipilih tadi. Contohnya untuk menu penjelasan sholat. Disebelah kanan atas ditambahkan tombol close untuk keluar dari halaman ini dan kembali ke content menu Sholat, menggunnakan action script :
//gotoAndStop(1) berfungsi mengilangkan pop up on(release){
gotoAndStop(1) stopAllSounds() }
Adapun tampilan penjelasan dapat dilihat pada Gambar 4.5.
Gambar 4.5 Tampilan Penjelasan
commit to user
4.2.2.5 Tampilan Animasi
Tampilan animasi berisi judul dan animasi yang akan dimainkan sesuai dengan menu yang telah dipilih sebelumnya. Animasi ini ditampilkan step-by-step agar gerakan yang ditampilkan lebih fokus dan mudah dipahami, menggunakan tombol navigasi untuk kembali, lanjut dan ulangi, menggunakan action scipt :
//tombol lanjut on(release){ nextFrame() } //tombol kembali on(release){ prevFrame() }
Disebelah kanan atas ditambahkan tombol close untuk keluar dari halaman ini dan kembali ke content menu Sholat, menggunakan action script :
//gotoAndStop(1) berfungsi mengilangkan pop up on(release){
gotoAndStop(1) stopAllSounds() }
Adapun tampilan animasi dapat dilihat pada Gambar 4.6.
Gambar 4.6 Tampilan Animasi
commit to user
4.2.2.6 Tampilan Video
Tampilan berisi judul dan video yang akan dimainkan sesuai dengan menu yang telah dipilih sebelumnya. Di sisi kiri video terdapat dua buah tombol yang berisi piilihan untuk memainkan video, yaitu dapat berupa peragaan oleh wanita maupun pria, menggunakan action script :
//video wanita
btn_1._visible = false btn_2._visible = false
if(_root.animasi.pengertian=="Wudhu"){ vid.contentPath = "vid/wudhu_w.flv" judul = "Wudhu Wanita"
}
else if(_root.animasi.pengertian=="Sholat"){ vid.contentPath = "vid/sholat_w.flv" judul = "Sholat Wanita"
}
else if(_root.animasi.pengertian=="Berdo'a"){ vid.contentPath = "vid/doa_sajagad_w.flv" judul = "Doa Sapu Jagad / Kesejahteraan Umat" btn_1._visible = true
btn_2._visible = true }
else{
vid.contentPath = "vid/tayamum_w.flv" judul = "Tayamum Wanita"
} //video pria btn_1._visible = false btn_2._visible = false if(_root.animasi.pengertian=="Wudhu"){ vid.contentPath = "vid/wudhu_p.flv" judul = "Wudhu Pria"
}
else if(_root.animasi.pengertian=="Sholat"){ vid.contentPath = "vid/sholat_p.flv"
judul = "Sholat Pria" } else if(_root.animasi.pengertian=="Berdo'a"){ vid.contentPath = "vid/doa_ortu_w.flv" } else { vid.contentPath = "vid/tayamum_p.flv" judul = "Tayamum Pria"
}
Disebelah kanan atas ditambahkan tombol close untuk keluar dari halaman ini dan kembali ke content menu, menggunakan action script :
//gotoAndStop(1) berfungsi mengilangkan pop up on(release){
gotoAndStop(1) stopAllSounds() }
Adapun tampilan video dapat dilihat pada Gambar 4.7.
Gambar 4.7 Tampilan Video
4.2.2.7 Tampilan Quiz
Tampilan quiz merupakan tampilan yang muncul saat pengguna memilih menu quiz untuk memulai quiz. Tampilan ini berisi nomor quiz, penjelasan soal, gambar soal, pertanyaan, dan lima pilihan jawaban. Dalam quiz ini terdapat 10 soal yang ditampilkan secara acak. Action script yang digunakan :
//frame 1 inisialisasi _root.nomor = 1 _root.nilai = 0 //frame 2 random frame = random(14); stopAllSounds() if(_root.nomor==1){ s1 = frame } else if(_root.nomor==2){ s2 = frame if(s1 == frame){ gotoAndStop(15) } } else if(_root.nomor==3){ s3 = frame
if(s1 == frame or s2 == frame){ gotoAndStop(15)
} }
else if(_root.nomor==4){ s4 = frame
if(s1 == frame or s2 == frame or s3 == frame){ gotoAndStop(15)
} }
else if(_root.nomor==5){
s5 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 == frame){ gotoAndStop(15) } } else if(_root.nomor==6){ s6 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 == frame or s5 == frame){ gotoAndStop(15) } } else if(_root.nomor==7){ s7 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 == frame or s5 == frame or s6 == frame){
gotoAndStop(15) }
}
else if(_root.nomor==8){ s8 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 == frame or s5 == frame or s6 == frame or s7 == frame){
gotoAndStop(15) }
}
else if(_root.nomor==9){ s9 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 ==
frame or s5 == frame or s6 == frame or s7 == frame or s8 == frame){ gotoAndStop(15) } } else if(_root.nomor==10){ s10 = frame
if(s1 == frame or s2 == frame or s3 == frame or s4 == frame or s5 == frame or s6 == frame or s7 == frame or s8 == frame or s9 == frame){
gotoAndStop(15) }
}
//frame 3 cek random frame if (_root.nomor == 11) {
gotoAndStop(14); } else {
if (frame == 0 or frame == 1 or frame == 2 or frame == 3 or frame>=14) { gotoAndPlay(2); } else { gotoAndStop(frame); } }
//frame 15 refresh random gotoAndPlay(2)
stopAllSounds()
Adapun tampilan quiz dapat dilihat pada Gambar 4.8.
Gambar 4.8 Tampilan Quiz
Adapun tampilan quiz apabila jawaban salah dapat dilihat pada Gambar 4.9.
Gambar 4.9 Tampilan Jawaban Salah
Adapun tampilan quiz apabila jawaban benar dapat dilihat pada Gambar 4.10.
Gambar 4.10 Tampilan Jawaban Benar
Action script yang digunakan apabila jawaban salah atau benar sebagai berikut : //jawaban benar on(release){ //benar truefalse.gotoAndStop(2) _root.nilai += 10 } on(rollOut){ stopAllSounds() } //jawaban salah on(release){ truefalse.gotoAndStop(3) nilai = nilai } on(rollOut){ stopAllSounds() }
Pengguna dapat menjawab dengan mengklik salah satu jawaban yang dianggap benar. Di akhir quiz, ditampilkan skor yang diperoleh, kemudian pengguna dapat memilih untuk mengulangi quiz atau kembali ke menu utama. Adapun tampilan akhir quiz dapat dilihat pada Gambar 4.11.
Gambar 4.11 Tampilan Akhir Quiz 4.2.2.8 Tampilan Profil
Tampilan profil merupakan tampilan yang berisi profil yang memuat informasi pembuat aplikasi media pembelajaran ini. Dan di sebelah kanan bawah terdapat sebuah tombol untuk kembali ke menu utama, menggunakan action script :
//gotoAndStop(3) , 3 adalah menu utama on(release){
gotoAndStop(3) }
Adapun tampilan profil dapat dilihat pada Gambar 4.12.
Gambar 4.12 Tampilan Profil