| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



06.07.2022

MPI Component

Library untuk pengembangan multimedia interaktif dengan Flash/Animate

23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

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 :
tutorial membuat kuis flash by wandah_w
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.

  1. Buatlah sebuah file baru, atur properties file untuk keperluan mobile, yaitu dengan resolusi 800 x 480 pixel dan 30 fps.
  2. 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 :
    tutorial membuat kuis flash by wandah_w
  3. 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 :
    tutorial membuat kuis flash by wandah_w
  4. 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 :
    tutorial membuat kuis flash by wandah_w
  5. Kembali ke Scene 1 kemudian drag Movieclip alternatif jawaban ke Stage sebanyak 4 kali. Atur posisinya masing-masing.
  6. 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:
    tutorial membuat kuis flash by wandah_w
  7. 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 :
    tutorial membuat kuis flash by wandah_w
  8. 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 :
    tutorial membuat kuis flash by wandah_w




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:


Get Adobe Flash player

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