Latest Blog
Multimedia Interaktif Tata Surya
Membuat Multimedia Pembelajaran Interaktif tentang tata surya
ALL BLOG
;
Membuat Game Kuis dengan Flash AS 3
Pendahuluan
Aplikasi kuis sering kali kita jumpai pada media pembelajaran, game atau aplikasi multimedia. Model kuis dengan soal yang acak dan jawaban acak menjadi sebuah daya tarik tersendiri dalam sebuah media pembelajaran. Akan tetapi para pemula pemrograman biasanya mengalami kesulitan dalam membuat sistem soal acak, jawaban acak dan sistem penilaian. Untuk itu melalui tutorial ini, akan dijelaskan secara sederhana tentang pembuatan kuis interaktif dengan sistem pengacakan soal, pengacakan jawaban dan sistem penilaian. Hasil akhir dari aplikasi ini dapat anda kembangkan lebih lanjut menjadi sesuatu yang lebih kompleks semacam game Who Want to be Millionaire, Who has biggest brain dan sebagainya. Hasil akhir yang diharapkan kurang lebih sebagai berikut :
Untuk membuatnya, perhatikan langkah-langkah berikut :
Persiapan Aset Visual
Pada tutorial ini akan dijelaskan metode yang sangat sederhana dalam membuat Display Object, yaitu dengan membuat secara langsung tampilan / aset visual di Stage. Pada dasarnya metode ini lebih mudah untuk dipelajari, akan tetapi metode yang lebih baik adalah dengan menggunakan sistem class dan addChild. Ketika anda sudah memahami konsep sederhana berikut, anda dapat merubahnya agar lebih optimal.
- Buatlah sebuah file baru, atur properties file untuk keperluan mobile, yaitu dengan resolusi 800 x 480 pixel dan 30 fps.
- Selanjutnya buatlah sebuah tampilan untuk aplikasi kuis meliputi background, beberapa static text sebagai pemanis tampilan, dan dynamic text untuk soal dan untuk score. Perhatikan gambar :
- Seleksi dynamic text untuk soal kemudian buka panel properties kemudian atur jenis huruf, matikan opsi selectable dan opsi line type menjadi multi line. Opsi multi line digunakan agar sebuah dynamic text mampu menampilkan beberapa baris teks. Selain itu anda harus menekan tombol embed untuk menyertakan file huruf ke dalam aplikasi, sehingga aplikasi dapat dijalankan di semua tempat tanpa mengalami distorsi huruf. Perhatikan gambar :
- Untuk membuat tombol pilihan jawaban, buatlah sebuah Movieclip baru dengan memilih opsi Insert > New Symbol. Ketikan nama alternatif jawaban registrasi point berada di tengah, lalu tekan OK. Selanjutnya buatlah 2 buah Layer, pada Layer 2 (atas) buatlah sebuah dynamic text untuk menampilkan jawaban. Buka panel properties dan tambahkan instance name "jawaban_txt". Pada Layer 1 (bawah) buatlah sebuah background berupa kotak.
Untuk mendapatkan efek mouse over, klik frame 2 layer 1 tambahkan KeyFrame (F6), lalu ubah warna background jawaban menjadi warna lain. Selanjutnya klik frame 2 layer 2 dan tambahkan Frame (F5). (note : Efek mouse over dapat ditampilkan secara otomatis pada symbol bertipe button, akan tetapi button atau tombol tidak dapat menampilkan objek lain seperti dynamic text di dalamnya, sehingga kita harus menggunakan symbol bertipe Movieclip). Perhatikan gambar :
- Kembali ke Scene 1 kemudian drag Movieclip alternatif jawaban ke Stage sebanyak 4 kali. Atur posisinya masing-masing.
- Agar masing-masing objek dapat diakses oleh kode, maka perlu ditambahkan instance name, klik objek, kemudian buka panel properties, dan ketikan instance name sesuai dengan gambar berikut:
- Kemudian untuk menampilkan apakah jawaban pemain benar atau salah, digunakan metode pop up dengan sedikit animasi. Untuk itu diperlukan sebuah movieclip yang di dalamnya terdapat beberapa pesan pop up. Untuk membuatnya buatlah sebuah tampilan popup ketika jawaban benar seperti pada gambar, lalu seleksi dan pilih convert to symbol (F8) dengan nama hasil_mc, registrasi point tepat di tengah, centang opsi Export for Actionscript, lalu tekan OK. Perhatikan gambar :
- Edit Movieclip hasil_mc dengan cara dobel klik movieclip tersebut, kemudian klik frame 2 dan tambahkan Keyframe (F6), lalu edit konten di frame 2 menjadi tampilan ketika jawaban salah. Dengan cara yang sama pada frame 3 buatlah tampilan ketika permainan berakhir (soal telah habis). Perhatikan gambar :
Penambahan Kode Actionscript 3.0 untuk navigasi sederhana
Tahapan selanjutnya adalah penambahan kode. Buatlah sebuah layer baru agar tidak mengganggu objek yang sudah anda buat pada langkah di atas. Selanjutnya klik frame 1 layer 2, dan ketikan kode berikut :
var nilai:Number = 0; var no_soal:Number = 0; var max_soal:Number = 10; var hasil:hasil_mc; // struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no 1 var soal:Array = [["Siapakah penemu mesin uap ?", "James Watt", "Davinci", "Issac Newton", "James bond"], ["Akar dari 676 adalah ?", "26", "24", "16", "34"], ["Bagian tumbuhan yang berperan penting dalam fotosintesis adalah ?", "Klorofil", "Kambium", "Epidermis", "Kromatin"], ["Penulis trilogi Lord of The Ring adalah?", "JRR Tolkien", "JK Rowling", "J Cameron", "J Thomas"], ["Jumlah seluruh sudut segitiga siku-siku adalah ?", "180", "270", "90", "360"], ["Provinsi termuda di Indonesia adalah ? ", "Banten", "Bangka belitung", "Batam", "Gorontalo"], ["Hukum gravitasi ditemukan oleh ? ", "Issac Newton", "Einstein", "T. A. Edison", "Kopernicus"], ["(sin 30) x 8 + (sin 90) = ? ", "5", "8", "0", "1"], ["Penemu arus listrik bolak balik adalah ? ", "Nicola Tesla", "T. Alpha Edison", "James Watt", "A. Graham bell"], ["Komponen elektronik yang mengubah arus bolak-balik menjadi searah adalah? ", "Diode", "Transistor", "Resistor", "Trafo"], ["Planet ke 5 dari Matahari adalah?", "Yupiter", "Mars", "Uranus", "Saturnus"], ["Dinosaurus terbesar dalam film Jurrasic World adalah?", "Mousaurus", "Indominus Rex", "Tyranosaurus", "Spinosaurus"], ["Gedung tertinggi di dunia sampai dengan 2015 adalah?", "Burj Al Khaifa", "Burj Dubai", "Beijing Tower", "Petronas"], ["Pesawat komersial dengan kapasitas terbesar di dunia adalah?", "Airbus 380", "Boeing 777", "Beluga", "Antonov"], ["Juara Dunia MotoGP 2014 adalah?", "Mark Marquez", "Jorge Lorenzo", "Valentino Rossi", "Dani Pedrosa"]]; var temp_soal:Array; var temp_jawaban:Array; function acak_soal():void{ //mengacak soal temp_soal = soal.slice(0, soal.length); for (var i:Number = 0; i < soal.length; i++){ var acak:Number = Math.floor(Math.random()*soal.length); var temp:Array = temp_soal[acak]; temp_soal[acak] = temp_soal[i]; temp_soal[i] = temp; } } function restart():void{ //restart kuis, semua variabel dikembalikan ke posisi semula acak_soal(); nilai = 0; no_soal = 0; max_soal = 10; score_txt.text = "0"; restart_btn.visible = false; } function tampilkan_soal():void{ //tampilkan soal soal_txt.text = temp_soal[no_soal][0]; //acak jawaban temp_jawaban = temp_soal[no_soal].slice(1, 5); for (var i:Number = 0; i < temp_jawaban.length; i++){ var acak:Number = Math.floor(Math.random()*temp_jawaban.length); var temp:String = temp_jawaban[acak]; temp_jawaban[acak] = temp_jawaban[i]; temp_jawaban[i] = temp; } //tampilkan jawaban jawaban_1.jawaban_txt.text = temp_jawaban[0]; jawaban_2.jawaban_txt.text = temp_jawaban[1]; jawaban_3.jawaban_txt.text = temp_jawaban[2]; jawaban_4.jawaban_txt.text = temp_jawaban[3]; } function setup_awal():void{ restart(); tampilkan_soal(); //mengatur jawaban jawaban_1.stop(); jawaban_2.stop(); jawaban_3.stop(); jawaban_4.stop(); jawaban_1.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_2.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_3.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_4.addEventListener(MouseEvent.CLICK, cek_jawaban); //listener untuk efek tombol jawaban_1.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_2.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_3.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_4.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); //mouse out jawaban_1.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_2.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_3.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_4.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); //tombol restart restart_btn.addEventListener(MouseEvent.CLICK, ulangi); } function mouse_over(e:MouseEvent):void{ e.currentTarget.gotoAndStop(2); } function mouse_out(e:MouseEvent):void{ e.currentTarget.gotoAndStop(1); } function cek_jawaban(e:MouseEvent):void{ var no_jawaban:Number = Number(e.currentTarget.name.substr(8))-1; if (temp_jawaban[no_jawaban] == temp_soal[no_soal][1]){ //jawaban benar tampilkan_hasil(1); nilai+=10; score_txt.text = String(nilai); }else{ //jawaban salah tampilkan_hasil(2); } } function tampilkan_hasil(tp:Number):void{ hasil = new hasil_mc(); hasil.x = 400; hasil.y = 275; hasil.gotoAndStop(tp); hasil.scaleX = 0.2; hasil.scaleY = 0.2; hasil.waktu = 0; hasil.tp = tp; hasil.addEventListener(Event.ENTER_FRAME, gerak_hasil); addChild(hasil); } function gerak_hasil(e:Event):void{ var ob:Object = e.currentTarget; if (ob.scaleX < 1){ ob.scaleX+=0.1; ob.scaleY+=0.1; } if (ob.waktu > -1 && ob.tp < 3){ ob.waktu++; if (ob.waktu > 60){ ob.waktu = -1; //tambah no soal no_soal++; ob.removeEventListener(Event.ENTER_FRAME, gerak_hasil); removeChild(DisplayObject(ob)); if (no_soal < max_soal){ tampilkan_soal(); }else{ tampilkan_hasil(3); restart_btn.visible = true; } } } } function ulangi(e:MouseEvent):void{ hasil.removeEventListener(Event.ENTER_FRAME, gerak_hasil); removeChild(DisplayObject(hasil)); restart(); tampilkan_soal(); } setup_awal();
Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut:
Selanjutnya anda dapat melakukan perubahan database soal, menambahkan sistem perhitungan waktu, bantuan dan sebagainya.
File Sumber
download kuis acak soal dengan Flash AS 3
Share ( Ayo Berbagi )
Leave me a comment
untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon