Download - Tutorial Membuat Animasi Quiz Interaktif-cs3
H a l . | 1
TUTORIAL MEMBUAT ANIMASI QUIZ INTERAKTIF
(Action Script 2.0 – Adobe Flash CS3)
Persiapan :
1. Buka Aplikasi Adobe Flash C3 – Buat file baru dengan format Action Script 2.0
2. Buatlah layer-layer sbb. :
3. Rancanglah user interface pada layer Background sbb. :
H a l . | 2
4. Rancanglah user interface pada layer Tombol&Teks sbb. :
Objek-objek yang dibuat sbb.
[1] Tambahkan objek Dynamic Text dan diberi nama instance layarUtama_txt
H a l . | 3
[2] Tambahkan objek Component Radio Button :
Keterangan.
a) Untuk menampilkan windows component pilih menu Window>Component atau
tekan tombol [Crtl+F7]
b) Pengaturan untuk objek component Radio Button, tampilkan windows Component
Inspector dengan menekan tombol [Shift+F7] sbb.
Baris data isi dengan huruf “a” (huruf kecil tanpa tanda petik); huruf ini kelak
di actions script akan dibandingkan dengan jawaban yang dipilih oleh User.
H a l . | 4
Baris label isi dengan huruf “A” (untuk judul tanpa tanda petik).
Lakukan hal yang sama pada Radio Button pilihan B, C, dan D (dalam kasus
ini dibuat 4 pilihan ganda)
[3] Tambahkan objek Dynamic Text untuk menampilkan hasil jawaban user, beri
nama instance jawabSiswa_txt :
[4] Tambahkan objek button untuk menampilkan Teks Soal sesuai nomor soal :
Keterangan.
Banyaknya tombol (symbol button) tergantung kebutuhan. Untuk membuat tombol
yang lain dapat di-duplicate pada Library. Dan berikan nama instance yang berbeda
pada setiap symbol button-nya. Misal nomor1_btn, nomor2_btn, dst.
[4]
H a l . | 5
[5] Tambahkan dua buah objek button untuk scrolling Teks Soal yang ada pada
instance layarUtama_txt (lihat pada point [1])
Keterangan.
Untuk symbol button scrolling ke atas di beri nama instance up dan ke bawah down.
[6] Tambahkan dua buah objek button component dan aturlah component inspector-
nya untuk mengontrol Teks Soal selanjutnya.
Keterangan.
Untuk symbol button [Submit] beri nama instance setuju dan [Lanjutkan] dengan
nama instance nextQuestion.
[5]
H a l . | 6
Perancangan user interface pada layer Tombol&Text selesai. Kerjakan tahap kerja
selanjutnya.
5. Pindahkan area kerja ke Layer Prompt. Rancanglah symbol Movie Clip yang diberi
nama instance promptBox sbb.
Objek-objek yang dibuat pada symbol movie clip promptBox (isinya) sbb.
[1] Tambahkan objek Dynamic Text dan ketiklah keterangannya.
[2] Tambahkan dua buah symbol button (atau button component). Beri nama instance
no untuk button [BATAL] dan yes untuk button [LANJUTKAN]
H a l . | 7
6. Pindahkan area kerja ke Layer Status Jawaban. Rancanglah symbol Movie Clip yang
diberi nama instance statJawab sbb.
Objek-objek yang dibuat pada symbol movie clip statJawab (isinya) sbb.
[1] Tambahkan objek Dynamic Text dan ketiklah keterangannya.
[2] Tambahkan objek Dynamic Text kosong. Beri nama instance statJawab
6. Pindahkan area kerja ke Layer Nilai Test. Rancanglah symbol Movie Clip yang diberi
nama instance nilaiAkhir sbb.
Objek-objek yang dibuat pada symbol movie clip nilaiAkhir (isinya) sbb.
H a l . | 8
[1] Tambahkan objek Dynamic Text sesuai contoh dan ketiklah keterangannya serta
dua buah symbol/ component button.
[2] Untuk objek text dynamic yang kosong, beri nama instance sbb.
Ket.
Nama-nama instance untuk di baris “Benar :” urutannya txt_b, multiply_b, dan
nilai_b
Nama-nama instance untuk di baris “Salah :” urutannya txt_s, multiply_s, dan
nilai_s
Nama instance untuk di baris “Total Score :” adalah jml
Nama instance untuk symbol button/ component yaitu : ulangi dan selesai
6. Setelah selesai membuat rancangan interface, pindahkan area kerja ke Layer Action
Script.
H a l . | 9
Klik kanan pada frame 1 pilih menu action dan ketiklah kode script-nya sbb.
[1] /*----------------------------------------------------------------- [2] Action Script 2.0 - Adobe Flash C3 [3] Animasi Quiz Interaktif [4] Sumber : Buku "Making Educational Animation with Flash" [5] Modifikasi oleh : Xxxx. NPM : XXXXX
[6] -----------------------------------------------------------------*/ [7] fscommand("FullScreen", true);
[8] // Inisiasi Variabel Global [9] _global.i; [10] _global.kunciJawaban;
[11] _global.penjelasan;
[12] _global.BENAR;
[13] _global.SALAH;
[14] _global.MAXIMAL_PERTANYAAN;
[15] // Fungsi Perhitungan
[16] function evaluasi(j_benar, j_salah, mul_benar, mul_salah,
mul_seluruh, bonus)
[17] {
[18] nilaiAkhir.txt_b.text = j_benar;
[19] nilaiAkhir.txt_s.text = j_salah;
[20] nilaiAkhir.multiply_b.text = mul_benar;
[21] nilaiAkhir.multiply_s.text = mul_salah;
[22] nilaiAkhir.nilai_b.text = j_benar * mul_benar;
[23] nilaiAkhir.nilai_s.text = j_salah * mul_salah;
[24] nilaiAkhir.jml.text = ((j_benar * mul_benar) - (j_salah *
mul_salah))
[25] mul_seluruh + bonus;
[26] }
[27] function aktifJawab(param:Boolean)
[28] {
[29] if (param) {
radioGroup.eabled=true;
setuju.enabled=false;
}
else {
H a l . | 10
radioGroup.eabled=true;
setuju.enabled=true;
}
}
[30] function soalKunciPenjelasan( _parSoal, _parJawab, _parPenjelasan)
[31] {
[32] layarUtama_txt.html = true;
[33] layarUtama_txt.htmlText = _parSoal;
[34] kunciJawaban = _parJawab;
[35] penjelasan = _parPenjelasan;
[36] }
[37] //=====
[38] function soal(){
[39] // Pemberian nilai awal pada tiap-tiap variabel di property objek
[40] promptBox._visible=nextQuestion._visible=false;
[41] statJawab._visible=nilaiAkhir._visible=false;
[42] i=1;
[43] nomor1_btn.enabled = nomor2_btn.enabled = false;
[44] nomor3_btn.enabled = false;
[45] BENAR=SALAH=0;
[46] MAXIMAL_PERTANYAAN = 3;
[47] setuju.enabled = false;
[48] nomor1_btn.enabled = true;
[49] layatUtama_txt.htmlText="<u><b> Pilih Nomor Soal </u></b>"+
[50] "<br><i>\t\t di sebelah kiri </i></br>";
[51] layarUtama_txt.html = true;
[52] // SOAL
[53] soal1 = "Perguruan tinggi STMIK AMIKBANDUNG yang merupakan PTS
pertama di Jawa Barat dan Banten terletak di "+
[54] "\n\n a. Jl. Jakarta No. 28\n b. Jl. Jakarta No. 20\n c. Jl.
Jakarta No. 30"+
[55] "\n d. Jl. Jakarta No. 25";
[56] jawab1="a";
[57] penjelasan1 = "Letak kampus STMIK Amik Bandung berada di depan gd.
Dephumham"+
[58] "\n atau di seberang Gd. Rutan Kebonwaru Bandung. Nomornya adalah
28";
[59] soal2 = "Semboyan kampus STMIK AMIKBANDUNG adalah : "+
[60] "\n\n a. Network Security Campus\n b. Kampus Biru\n c. The First
and The Best"+
[61] "\n d. The First and Competence";
[62] jawab2="d";
[63] penjelasan2 = "Semboyan kampus adalah The First and Competence"+
[64] "\n\n artinya PTS Pertama di Jabar dan Banten serta para
lulusannya berkompeten";
[65] soal3 = "Visi STMIK AMIKBANDUNG adalah : "+
[66] "\n\n a. Kampus Unggulan\n b. Next Generation\n c. Network
Security Campus"+
[67] "\n d. The Blue Campus";
[68] jawab3="c";
[69] penjelasan3 = "Ciri khas kompetensi adalah di bidang keamanan
jaringan"+
[70] "\n\n atau menjadi penjaga dunia virtual";
[71] //Cek jawaban
[72] answerListener=new Object();
[73] answerListener.click=function(choose){
H a l . | 11
userAnswer=choose.target.selection.data;
jawabSiswa_txt.text=userAnswer;
[74] }
[75] radioGroup.addEventListener("click",answerListener);
[76] // Tekan tombol atas (UP) dan bawah (DOWN) untuk Scroll soal
[77] up.onRelease=function(){
layarUtama_txt.scroll --;
}
[78] down.onRelease=function(){
layarUtama_txt.scroll ++;
}
[79] //Pengaturan eksekusi tombol pilihan soal
[80] nomor1_btn.onRelease=function(){
this.enabled=false;
nomor2_btn.enabled=false;
nomor3_btn.enabled=false;
setuju.enabled=true;
soalKunciPenjelasan(soal1,jawab1,penjelasan1);
}
[81] nomor2_btn.onRelease=function(){
this.enabled=false;
nomor1_btn.enabled=false;
nomor3_btn.enabled=false;
setuju.enabled=true;
soalKunciPenjelasan(soal2,jawab2,penjelasan2);
}
[82] nomor3_btn.onRelease=function(){
this.enabled=false;
nomor1_btn.enabled=false;
nomor2_btn.enabled=false;
setuju.enabled=true;
soalKunciPenjelasan(soal3,jawab3,penjelasan3);
}
[83] //Konfirmasi tombol setuju
[84] setuju.onRelease=function(){
[85] promptBox._visible=true;
[86] this.enabled=false;
[87] aktifJawab(false);
}
[88] //Konfirmasi movie clip promptBox NO
[89] promptBox.no.onRelease=function(){
[90] promptBox._visible=false;
[91] aktifJawab(false);
}
[92] //Konfirmasi movie clip promptBox YES
[93] promptBox.yes.onRelease=function(){
[94] promptBox._visible=false;
[95] statJawab._visible=true;
[96] nextQuestion._visible=true;
[97] aktifJawab(true);
[98] if (userAnswer==kunciJawaban){
statJawab.statusJawaban.text="BENAR";
BENAR++;
}
else {
H a l . | 12
statJawab.statusJawaban.text="SALAH";
SALAH++;
}
}
[99] // Pengaturan Pertanyaan Selanjutnya
[100] nextQuestion.onRelease=function(){
[101] statJawab._visible=nextQuestion._visible=false;
[102] ++i;
[103] layarUtama_txt.text=penjelasan;
[104] if (i<=MAXIMAL_PERTANYAAN){
tellTarget("nomor"+i+"_btn"){enabled=true;}
}
[105] else {
nilaiAkhir._visible=true;
evaluasi(BENAR,SALAH,1,0,10,10);
radioGroup.enabled=false;
setuju.enabled=false;
}
}
[106] //------------
[107] }
[108] // Menjalankan PROGRAM UTAMA
[109] soalKunciPenjelasan("KLIK PADA TOMBOL NOMOR SOAL DI BAGIAN SEBELAH
KIRI","","");
[110] soal();
[111] //Ulangi atau Selesai
[112] //Konfirmasi movie clip promptBox NO
[113] nilaiAkhir.ulangi.onRelease=function(){
[114] soalKunciPenjelasan("KLIK PADA TOMBOL NOMOR SOAL DI BAGIAN SEBELAH
KIRI","","");
[115] soal();
}
[116] nilaiAkhir.selesai.onRelease=function(){
[117] fscommand("Quit", true);
}
[118] /*END*/
7. Test Movie Anda dengan [CTRL+ENTER] (perbaiki kesalahan dengan memeriksa
kembali langkah kerja).
8. Modifikasilah aplikasi di atas dengan menambahkan 10 soal yang disesuaikan dengan
kasus pada projek Anda.
*** Be Creative! ***