TUTORIAL Membuat Kuis Pilihan Ganda dengan Flash

Langkah-Langkah: 1. Aktifkan program Macromedia Flash anda. Pada Creat New, pilih Flash Document. 2. Opsional: Pada Frame 1 Layer 1, buat background dengan rectangle tool. Klik kanan frame 7, pilh Insert Keyframe. Kunci Layer 1. 3. Klik Insert Layer (sudut kiri bawah timeline) untuk membuat Layer baru (layer 2). 4. Klik Frame 1 Layer 2, buat judul kuis dengan Static Text. Di bawah judul, buatlah kotak nama dengan Input Text (aktifkan ‘Show border around text’). Pada Var, ketik ‘nama’. Tambahkan petunjuk pengisian kotak nama di atas Input Text. Sejauh ini hasilnya seperti gambar di bawah.

Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010

1

Demikian seterusnya sampai dengan soal nomor lima yang ada di Frame 6. Pastikan Panel Properties aktif. kemudian tekan F6 pada Keyboard untuk meng-copy frame sampai dengan Frame 6. Klik kanan Frame 7 Layer 2. Klik Frame 2 Layer 2. pilih Insert Blank Keyframe. Type-nya pilih Button. pilih Insert Blank Keyframe. Buat teks ‘MULAI’ dengan Static Text. Klik kanan Frame 2 layer 3. 6. 7. Klik kanan Frame 2 Layer 2. 8. pilih Insert Blank Keyframe. Klik Frame 3. Pilih Convert to Symbol. 9. Sampai di sini. Klik kanan pada teks ‘MULAI’ tersebut. kunci Layer 2 dan simpan dulu dengan nama file LATIHAN1. Buat object kotak dengan Rectangle Tool tepat di atas pilihan jawaban A. Buat soal beserta pilihan jawabannya dengan tipe teks Static. lalu klik OK. Klik Selection Tool (tanda panah kanan atas pada Tools). ganti soal beserta jawabannya.5. Tekan F8 (Klik kanan 2 Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 . letakkan di bawah kotak nama. Klik Frame 1. pada kotak Instance Name ketik ‘startbutton’. Buat Layer baru (Layer 3).

onPress = function() { nextFrame(). 13. dan D. startbutton. Masih di Layer 7. pilih Cut Frames. Kemudian klik Scene 1 pada Timeline. Kunci Layer 3. 11.Kopi button kotak tadi (klik kanan. button_b. pada Type pilih ‘Button’. dan di atas pilihan jawaban D menjadi ‘button_d’. nextFrame(). 12. Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 3 . }.onPress = function() { nextFrame().Klik Frame 2 Layer 7. Ubah Instance Name-nya menjadi ‘button_b’. C. klik OK. }. kembali klik Frame 1. Seleksi button di atas pilihan jawaban B. Ketik ‘button_a’ pada kotak Instance Name pada Panel properties. pilih Insert Blank Keyframe. Sampai di sini. 14.Pastikan button kotak terseleksi.Convert to Symbol). 10. }. pilih Paste Frames. klik kanan pada Frame Hit. simpan dulu (tekan Ctrl+S). masukkan ActionScript berikut: stop(). Klik Frame 1 . button_a. Klik kanan pada Frame Up.onPress = function() { score += 20. Klik ganda Kotak yang telah dikonversi menjadi button tersebut. di atas pilihan jawaban C menjadi ‘button_c’.Buat Layer baru (Layer 4). onEnterFrame = function () { skor = +score.}. score = 0. Copy Paste 3 kali) dan masing-masing letakkan tepat di atas pilihan B. Klik kanan Frame 7 Layer 3. lalu tekan F9 untuk menampilkan panel Action dan masukkan ActionScript berikut (bisa dengan Copy-Paste): stop(). tekan F6 4 kali untuk men-copy frame.Klik Frame 2 Layer 3. Tekan F7 6 kali.

}. button_c. onEnterFrame = function () { skor = +score. }.onPress = function() { nextFrame(). button_d. }. Jika button_a (pilihan jawaban A) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya. }.button_c. 2 kunci jawabannya A.onPress = function() { nextFrame(). Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 4 . Jika button_b (pilihan jawaban B) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya. nextFrame().Klik Frame 3 (masih di Layer 4). }. button_b. }.onPress = function() { score += 20. Keterangan: Soal no.onPress = function() { nextFrame(). masukkan ActionScript berikut: stop(). button_d. button_a. 15. 1 kunci jawabannya B.}.onPress = function() { nextFrame(). Keterangan: Soal no.onPress = function() { nextFrame().

Jika button_a (pilihan jawaban A) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya. masukkan ActionScript berikut: stop().onPress = function() { nextFrame(). }.}. button_a. 17. button_a. button_c.onPress = function() { score += 20. }. }. Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 5 . button_d. button_b. onEnterFrame = function () { skor = +score.onPress = function() { nextFrame(). onEnterFrame = function () { skor = +score. nextFrame(). Keterangan: Soal no.onPress = function() { nextFrame().onPress = function() { nextFrame(). 3 kunci jawabannya A. }. masukkan ActionScript berikut: stop(). button_b.16.}.onPress = function() { nextFrame(). }.Klik Frame 5 (masih di Layer 4).Klik Frame 4 (masih di Layer 4).

onPress = function() { nextFrame(). Jika button_c (pilihan jawaban C) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya.onPress = function() { nextFrame(). button_d. }.Klik Frame 6 (masih di Layer 4).onPress = function() { score += 20. masukkan ActionScript berikut: stop(). }.onPress = function() { nextFrame(). button_c. }.onPress = function() { score += 20. button_b. button_a. button_c. }. nextFrame().}.}. Keterangan: Soal no.onPress = function() { nextFrame(). 18. button_d. }. 4 kunci jawabannya C. nextFrame(). onEnterFrame = function () { skor = +score. }. Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 6 .

ketik ‘Nilai anda:’ dengan ukuran Font 15 (Type Text-nya Static Text). Kembali kunci Layer 2. buat lagi Dynamic Text kosong dengan nama variable ‘keterangan’. buka kunci Layer 2 dengan cara klik tanda gambar gembok di Layer tersebut.Keterangan: Soal no. klik di bawah teks ‘Nilai anda:’ dan drag ke kanan. Jika button_b (pilihan jawaban B) diklik skor bertambah 20 dan menuju frame berikutnya. ketik ‘skor’. Pada kotak ‘Var’. 19.Selanjutnya. ketik dengan tipe teks Static Text ‘Kriteria ketuntasan Minimal (KKM): 80’ Di bawah teks ‘Kriteria ketuntasan Minimal (KKM): 80’. Sampai di sini. pastikan panel Properties aktif. kemudian pilih Dynamic Text dengan ukuran font 50. Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 7 . Di bawah ‘Dynamic Text’ dengan nama Variable ‘skor’. simpan dulu (tekan Ctrl+S). Copy dan Paste-kan di Frame 7 (masih di Layer 2). Klik ganda kotak Input Text dan ketik ‘tanpa nama’. Di bawah teks ‘Nilai anda:’. Tampilan Stage pada Frame 7 Layer 2 seperti Gambar di bawah. 5 kunci jawabannya B. Di bawah kotak Input Text. buat Dynamic Text kosong dengan cara klik Text Tool (A) pada panel Tools. Klik kanan kotak Input Text yang telah dibuat di Frame 1 Layer 2.

} if (score<=60) { keterangan = "Anda belum tuntas. } Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 8 .20.Selanjutnya. Klik Frame 7 Layer 3. ya!". tipenya Button.Klik Frame 7 Layer 4 (pastikan Layer 4 tidak terkunci) kemudian tekan F9 untuk mengaktifkan panel Action dan masukkan ActionScript berikut: if (score>=80) { keterangan = "Bagus! Pertahankan Prestasi!". Klik kanan teks tersebut. buka kunci Layer 3. Ketik ‘ULANGI’ dengan tipe teks Static. Kembali kunci Layer 3. pilih Convert to Symbol. Belajar lagi. 21. Pastikan panel Properties aktif dan pada kotak Instance Name ketik ‘restart_button’.

Di bawah adalah tampilan akhir jendela Flash Ducument frame terakhir (7).restart_button. }. SAMPAI JUMPA LAGI PADA TUTORIAL BERIKUTNYA. Salam Kreatif! M Mursyid PW 2010 Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 9 . 22.Untuk melihat hasilnya. SELAMAT MENCOBA DAN MEMODIFIKASINYA. 23.onPress = function() { gotoAndStop(1). tekan Ctrl+Enter.Selesai dan tekan Ctrl+S untuk menyimpan.

imageshack.us/img7/5106/gb05n. klik kanan dan pilih "Insert Keyframe".us/img25/1420/gb07.". http://img10. dan tambahkan satu layer. klik kanan. lalu rubah posisi dan warna ( gb 08 ).us/img8/1473/gb13.imageshack. 15. lalu ketik "stop().us/img10/7206/gb12. Tambahkan satu Layer lagi dan beri nama "sript". klik kanan dan pilih "Paste Frame" ( gb 11 ). http://img18. http://img18. gb 04 ). Seleksi Frame 5 pada Layer "sript". Sekarang kita telah mempunyai animasi pada "asabutton ( Movie Clip )". Seleksi Frame 5 pada Layer Text.us/img6/9189/gb06. 13.jpg 12.jpg 2. 5. http://img6. Double klik Movie Clip.imageshack. http://img25. klik kanan dan pilih "Insert Keyframe" ( gb 07 ). Seleksi Frame 1 pada Layer "sript". klik kanan dan pilih "Copy Frame" ( gb 10 ).us/img17/5189/gb11.jpg 4.langkahnya sebagai berikut : 1.jpg Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 1 0 .imageshack.jpg 6. http://img7.Langkah .imageshack.jpg 7. Seleksi Frame 1 pada pada kedua Layer. lalu pilih "Create Classic Tween" ( gb 06 ).us/img18/9942/gb01.imageshack.us/img10/9366/gb03. Pilih Movie Clip dan berilah nama ( gb 02 ). klik kanan lalu Convert To Symbol. Klik kanan dan pilih "Actions". http://img17.imageshack.imageshack. Tambahkan satu Layer dan beri nama seperti gambar 13.us/img11/5686/gb09. Seleksi layer Text.jpg 9.imageshack. http://img11. Seleksi layer pertama pada kedua layer. 3.jpg 11.imageshack. Tekan "Enter" untuk melihat hasil animasi. lalu klik tombol Text untuk menulis kata "ASA STUDIO Tutorial" ( gb 05 ). Kembali pada "Scene 1". Seleksi di Frame 5 pada kedua layer.us/img22/813/gb08. lalu ketik "stop(). http://img22. Seleksi Frame 10 pada pada kedua Layer. Seleksi kotak tersebut. Beri nama pda Instance Name seperti pada gambar 03 yaitu "asaButtonMc". http://img8. lalu rubah warna ( gb 09 ).jpg 17.imageshack. Seleksi Frame 5 pada Lyer BG.jpg 10. 16. http://img10. klik kanan dan pilih "Actions". 18. 14." seperti pada gambar 12. Buatlah kotak sepeti pada gambar 01.us/img18/1796/gb10.jpg 8. lalu beri nama pada layer ( BG & Text.

lalu tekan F9 untuk mengeluarkan "Actions Script Panel". sekarang "Test Movie" atau "Ctr+Enter". Tutorial telah selesai.us/img7/6872/gb14. Lalu ketik seperti gambar 14.jpg 20. http://img7. Seleksi Frame 1 pada Layer Cript. Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 1 1 .imageshack.19.

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.