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

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

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

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

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

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

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

} if (score<=60) { keterangan = "Anda belum tuntas. Kembali kunci Layer 3. tipenya Button.Selanjutnya.20. Klik Frame 7 Layer 3. } Tutorial Flash: Membuat Kuis Pilhan Ganda_mmursyidpw2010 8 . 21. Klik kanan teks tersebut.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!". Ketik ‘ULANGI’ dengan tipe teks Static. Belajar lagi. pilih Convert to Symbol. ya!". buka kunci Layer 3. Pastikan panel Properties aktif dan pada kotak Instance Name ketik ‘restart_button’.

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

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

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

Sign up to vote on this title
UsefulNot useful