Kita akan mencoba membuat aplikasi quiz dengan menggunakan format data urlencoded.

1. Buat sebuah file pertanyaan.txt dengan format sebagai berikut:
&pertanyaan1=Ini adalah pertanyaannya pertama&
&a1=ini jawaban a&
&b1=ini jawaban b&
&c1=ini jawaban c&
&d1=ini jawaban d&
&e1=ini jawaban e&
&benar1=a&
&pertanyaan2=Ini adalah pertanyaannya kedua&
&a2=ini jawaban a&
&b2=ini jawaban b&
&c2=ini jawaban c&
&d2=ini jawaban d&
&e2=ini jawaban e&
&benar2=c&
&pertanyaan3=Ini adalah pertanyaannya ketiga&
&a3=ini jawaban a&
&b3=ini jawaban b&
&c3=ini jawaban c&
&d3=ini jawaban d&
&e3=ini jawaban e&
&benar3=b&
&pertanyaan4=Ini adalah pertanyaannya keempat&
&a4=ini jawaban a&
&b4=ini jawaban b&
&c4=ini jawaban c&
&d4=ini jawaban d&
&e4=ini jawaban e&
&benar4=d&
Ini adalah data pertanyaan yang akan ditampilkan di quiz, dimana terdapat 4 pertanyaan dan masing-masing pertanyaan memiliki variabel pertanyaan,a,b,c,d,e dan benar dengan diakhiri angka urutan pertanyaan.

2. Buat file baru dengan ukuran 600 x 400 pixels, kemudian buatlah kotak di Stage dengan ukuran 550 x 350 pixels lalu beri nama layer box.

3. Buat layer baru kemudian beri nama text field, pada frame pertama letakkan input textfield dan beri nama instance name_txt.

Masih pada layer text field, letakkan 6 dynamic textfield di frame 2 dengan urutan:

• title_txt : Untuk menampilan nomor urut pertanyaan
• p_txt : untuk menampilan pertanyaan
• ja_txt : untuk menampilkan pilihan jawaban a
• jb_txt : untuk menampilkan pilihan jawaban b
• jc_txt : untuk menampilkan pilihan jawaban c
• jd_txt : untuk menampilkan pilihan jawaban d
• je_txt : untuk menampilkan pilihan jawaban e

Kemudian di frame 3 pada layer text field ini letakkan 2 dynamic textfield yaitu greeting_txt & score_txt

4. Kemudian buat layer baru diatas layer text field dengan nama button lalu buatlah symbol button start kemudian letakkan di stage dan beri nama instance start_btn.

Kemudian di frame 2 pada layer button ini buatlah satu invisible button yang kemudian diduplikasikan menjadi 4 jadi total ada 5 invisible button yang diletakkan diatas masing-masing pilihan jawaban.

5. Kemudian buatlah layer baru diatas layer button dengan nama static text, dimana kita akan meletakkan semua static text di layer ini. Lalu letakkan static text “Online Quiz” dan “Masukan nama anda” pada frame 1. Kemudian pada frame 2 dan 3 cukup letakkan static text “Online Quiz”.

6. Lalu buat lagi layer baru dengan nama alert diatas layer static text, kemudian buat movieclip dengan nama symbol alertclip dan di dalam movieclip tersebut terdapat sebuah dynamic textfield dengan nama alert_txt dan sebuah button baru denga nama ok_btn. Letakkan movieclip alert tadi di frame 1 pada posisi tengah stage dengan nama instance alert_mc.

7. Kemudian buat layer dengan nama label, kemudian buat 3 label frame yaitu:

• start
• quiz
• finish

8. Lalu batlah layer terakhir dengan nama as letakkan diposisi paling atas. Pada layer ini kita akan meletakan semua ActionScript.

9. Pilih frame 1 pada layer as kemudian buka action panel dimana kita akan menuliskan actionscriptnya.

10. Pada langkah ini kita akan memulai sisi programming dari Flash
Dalam aplikasi quiz ini kita akan membuat 5 fungsi, yaitu:

• Function startQuiz
• Function setButtonPil
• Function getPertanyaan
• Function setPertanyaan
• Function cekJawaban
• Function endQuiz

Dengan posisi kursor pada action panel masukan script stop() ; dibaris pertama.

Karena movieclip alert_mc berada ditengah maka kita perlu menghilangkan sementara dengan menggunakan memasukan perintah

alert_mc. _visible = false;

Kemudian kita mulai membuat fungsi-fungsinya.

//Function startQuiz
function startQuiz() {
 	nama = nama_txt.text;
 	score = 0;
 	getPertanyaan();
}

Pada fungsi ini kita menginisialisasi variabel nama & score.

//Function setButtonPil
function setButtonPil() {
 	a_btn.onRelease = function() {
  		cekJawaban("a");
  	};
 	b_btn.onRelease = function() {
  		cekJawaban("b");
  	};
 	c_btn.onRelease = function() {
  		cekJawaban("c");
  	};
 	d_btn.onRelease = function() {
  		cekJawaban("d");
  	};
 	e_btn.onRelease = function() {
  		cekJawaban("e");
  	};
}

Fungsi ini akan mengaktifkan event onRelease pada 5 button pilihan jawaban setelah user

// Function getPertanyaan
function getPertanyaan() {
 	qvar_lv = new LoadVars();
 	qvar_lv.load("pertanyaan.txt");
 	qvar_lv.onLoad = function(success) {
  		if (success) {
   			setPertanyaan(1);
   		} else {
   			trace("fail");
   		}
  	};
 	gotoAndStop("quiz");
}

Pada fungsi ini kita menggunakan object LoadVars untuk meload data dari file pertanyaan.txt dengan membuat object baru dengan nama qvar_lv dan kemudian mengekseusi fungsi setPertanyaan(1) untuk menampilkan pertanyaan pertama.

// Function setPertanyaan
function setPertanyaan(i) {
 	nextQst = i+1;
 	if(qvar_lv["pertanyaan"+i] != undefined) {
  		title_txt.text = "Pertanyaan ke-"+i;
  		p_txt.text = qvar_lv["pertanyaan"+i];
  		ja_txt.text = qvar_lv["a"+i];
  		jb_txt.text = qvar_lv["b"+i];
  		jc_txt.text = qvar_lv["c"+i];
  		jd_txt.text = qvar_lv["d"+i];
  		je_txt.text = qvar_lv["e"+i];
  		jawaban = qvar_lv["benar"+i];
  	} else {
  		endQuiz();
  	}
}

Fungsi ini dieksekusi berdasarkan nilai variabel i, jika dilihat pada fungsi getPertanyaan bahwa untuk menampilakan pertanyaan pertama maka fungsi setPertanyaan diberi nilai 1 untuk variabel i-nya. Pada fungsi ini jika variabel yang ada pada object qvar_lv mempunyai nilai (terdefinisi) maka niali-niali variabel yan sesuai dan ada di object qvar_lv ditampilkan di beberapa dynamic textfield.

//Function cekJawaban
function cekJawaban(val) {
 	alert_mc._visible = true;
 	if (val != jawaban) {
  		score = score - 50;
  		alert_mc.alert_txt.text = "Jawaban anda salah, score anda berkurang 50 points";
  	} else {
  		score = score + 100;
  		alert_mc.alert_txt.text = "Jawaban anda benar, score anda bertambah 100 points ";
  	}
}

Fungsi ini akan mengecek apakah jawabannya benar dan mengeksekusi kondisi tertentu seseuai dengan jawabannya serta menambahkan nilai variabel score dengan 100 points jika jawaban benar dan mengurangi nilai variabel score dengan 50 points jika jawaban salah.

// Function endQuiz
function endQuiz() {
 	gotoAndStop("finish");
 	score_txt.text = score+" points";
 	greeting_txt.text = nama+", score anda adalah:";
   }

Kemudian kita masukan script untuk dieksekusi ketika user mengklik button start

start_btn.onRelease = function() {
 	startQuiz();
}

Lalu masukan juga script untuk dieksekusi ketika user mengklik button OK yang ada di alert_mc

alert_mc.ok_btn.onRelease = function() {
 	setPertanyaan(nextQst);
 	this._parent._visible = false;
}

ActionScript keseluruhan adalah sebagai berikut;

stop();
alert_mc._visible = false;
function startQuiz() {
 	_global.nama = nama_txt.text;
 	_global.score = 0;
 	getPertanyaan();
}
function setButtonPil() {
 	a_btn.onRelease = function() {
  		cekJawaban("a");
  	};
 	b_btn.onRelease = function() {
  		cekJawaban("b");
  	};
 	c_btn.onRelease = function() {
  		cekJawaban("c");
  	};
 	d_btn.onRelease = function() {
  		cekJawaban("d");
  	};
 	e_btn.onRelease = function() {
  		cekJawaban("e");
  	};
}

function getPertanyaan() {
 	qvar_lv = new LoadVars();
 	qvar_lv.load("pertanyaan.txt");
 	qvar_lv.onLoad = function(success) {
  		if (success) {
   			setPertanyaan(1);
   		} else {
   			trace("fail");
   		}
  	};
 	gotoAndStop("quiz");
}

function setPertanyaan(i) {
 	nextQst = i+1;
 	if(qvar_lv["pertanyaan"+i] != undefined) {
  		title_txt.text = "Pertanyaan ke-"+i;
  		p_txt.text = qvar_lv["pertanyaan"+i];
  		ja_txt.text = qvar_lv["a"+i];
  		jb_txt.text = qvar_lv["b"+i];
  		jc_txt.text = qvar_lv["c"+i];
  		jd_txt.text = qvar_lv["d"+i];
  		je_txt.text = qvar_lv["e"+i];
  		jawaban = qvar_lv["benar"+i];
  	} else {
  		endQuiz();
  	}
}

function cekJawaban(val) {
 	alert_mc._visible = true;
 	if (val != jawaban) {
  		score = score - 50;
  		alert_mc.alert_txt.text = "Jawaban anda salah, score anda berkurang 50 points";
  	} else {
  		score = score + 100;
  		alert_mc.alert_txt.text = "Jawaban anda benar, score anda bertambah 100 points ";
  	}
}

function endQuiz() {
 	gotoAndStop("finish");
 	score_txt.text = score+" points";
 	greeting_txt.text = nama+", score anda adalah:";
}

start_btn.onRelease = function() {
 	startQuiz();
}

alert_mc.ok_btn.onRelease = function() {
 	setPertanyaan(nextQst);
 	this._parent._visible = false;
}

11. Untuk melihat apakah aplikasi quiz nya bekerja, tekan tombol crl+enter untuk test movie.
screenshot1
screenshot2
screenshot3
screenshot4
screenshot5
Download source | Flash version tutorial

Posted by herdiansah at 5:25 PM | References

Trackback Pings

TrackBack URL for this entry:
http://www.dailyflashid.org/cgi-bin/mt/mt-tb.cgi/70.

Comments

Post a comment

Name:

Email Address:

URL:
Remember Me? YesNo

Comments: (you may use HTML tags for style)

Security Code:

Buy SWF Studio for 10% off!
No credit card?
Click here for offline ordering

Categories

Archives

Recent Entries

Feeds

Movable Type 3.34