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

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

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

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

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful