| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



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

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES

07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Aplikasi CBT dengan Fitur Penyimpanan Data Nilai

Pendahuluan

Pada tutorial-tutorial sebelumnya telah dijelaskan proses pembuatan kuis interaktif(soal pilihan ganda) dengan menggunakan Adobe Flash/Adobe Animate. Namun, aplikasi ini masih dapat ditambah beberapa fitur lagi, salah satunya adalah fitur CBT (Computer Based Test) dimana pemain dapat menyimpan data nama dan nilai ke server. Untuk mendapatkan fitur tersebut, pada umumnya dibutuhkan aplikasi tambahan untuk menyimpan data, seperti PHP dan atau mySQL. Namun dalam tutorial ini kita hanya menggunakan bantuan PHP untuk menyimpan file dengan format XML

Hasil yang diharapkan pada tutorial ini adalah sebagai berikut (tunggu beberapa saat untuk membuka file sekitar 500Kb):


Get Adobe Flash player

Untuk membuatnya perhatikan langkah berikut :

  1. Terdapat beberapa persiapan yang harus dilakukan agar flash dapat menyimpan file di server. Pertama, kita membutuhkan sebuah file PHP. Untuk membuatnya, bukalah sebuah aplikasi editor teks seperti Notepad++, buat file baru dan ketikan kode berikut:
  2. <?php
    $data = $_GET['dataxml'];
    file_put_contents("dataNilai.xml", $data);
    ?>
    
  3. Simpan file tersebut dengan nama simpanNilai.php.
  4. Persiapan kedua, kita membutuhkan sebuah file XML. Untuk membuatnya, bukalah sebuah aplikasi editor teks seperti Notepad++, buat file baru dan ketikan kode berikut:
  5. <dataNilai>
    <dataPemain>
    	<nama>Wandah</nama>
    	<nilai>90</nilai>
    </dataPemain>
    </dataNilai>
    
  6. Simpan file tersebut dengan nama dataNilai.xml.
  7. Upload 2 file tersebut (PHP, dan XML) pada server, kemudian ubah kode URL yang ada pada kode berikutnya (ubah "www.wandah.org/swf/) menjadi URL baru tempat anda menyimpan file.

    Note: Untuk mengupload file ke server anda dapat menggunakan FTP, CPanel, Filezilla dan sebagainya.


  8. Persiapan ketiga adalah file SWF. Bukalah aplikasi Adobe Flash/Adobe Animate, kemudian buatlah file baru bertipe AS3 dengan ukuran 800x480 pixel.
  9. Buatlah 3 buah layer dengan nama layer BG, layer tombol, dan layer kode.
  10. Klik frame 1 layer BG buatlah/importlah sebuah background, berikut judul aplikasi.
  11. Buatlah sebuah input text dengan opsi show border around text dan max char = 15 untuk membatasi jumlah karakter nama pemain. Selanjutnya tambahkan instance name nama_txt pada input text tersebut.
  12. Buatlah sebuah tombol untuk memulai, dan tambahkan instance name mulai_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 1 sebagai berikut :

    tutorial flash membuat kuis CBT dengan flash by wandah_w
  13. Klik frame 1 layer kode kemudian buka panel action (F9) dan ketikan kode berikut :
  14. stop();
    var nama_pemain = "";
    var nilai_pemain = 0;
    
    mulai_btn.addEventListener(MouseEvent.CLICK, mulai);
    
    function mulai(e:MouseEvent):void{
    	if (nama_txt.text != ""){
    		nama_pemain = nama_txt.text;
    		mulai_btn.removeEventListener(MouseEvent.CLICK, mulai);
    		gotoAndStop(5);
    	}
    }
    

  15. Klik frame 5 layer BG tambahkan keyframe (F6).
  16. Klik frame 5 layer tombol tambahkan Blank Keyframe. Buatlah sebuah static text untuk menampilkan petunjuk penggunaan aplikasi.
  17. Buatlah sebuah tombol untuk melanjutkan kuis, dan tambahkan instance name mulai_kuis pada tombol tersebut. Perhatikan tata letak aset visual pada frame 5 sebagai berikut :

    tutorial flash membuat kuis CBT dengan flash by wandah_w
  18. Klik frame 5 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
  19. stop();
    mulai_kuis.addEventListener(MouseEvent.CLICK, mulaiKuis);
    
    function mulaiKuis(e:MouseEvent):void{
    	mulai_kuis.removeEventListener(MouseEvent.CLICK, mulaiKuis);
    	gotoAndStop(10);
    }
    

  20. Seleksi frame 10 di ketiga Layer tambahkan keyframe (F6).
  21. Ikuti tutorial membuat kuis interaktif pada link berikut Kuis Interaktif dengan membuat aset visual, tombol dan instance name yang sama. Sedikit perbedaan adalah kita tidak membutuhkan tombol ulang (retry btn)
  22. Buatlah sebuah tombol untuk menggantikan tombol retry, yaitu tombol submit nilai, dan tambahkan instance name submit_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 15 sebagai berikut :

    tutorial flash membuat kuis CBT dengan flash by wandah_w
  23. Klik frame 10 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
  24. 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"]];
    //perbanyak data base soal...
    
    var temp_soal:Array;
    var temp_jawaban:Array;
    
    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";
    	submit_btn.visible = false;
    }
    
    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 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 submit
    	submit_btn.addEventListener(MouseEvent.CLICK, kirim_nilai);	
    }
    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 = 250;
    	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);
    				submit_btn.visible = true;
    			}
    		}
    	}
    }
    function kirim_nilai(e:MouseEvent):void{
    	nilai_pemain = nilai;
    	removeChild(hasil);
    	//hapus semua listener
    	jawaban_1.removeEventListener(MouseEvent.CLICK, cek_jawaban);
    	jawaban_2.removeEventListener(MouseEvent.CLICK, cek_jawaban);
    	jawaban_3.removeEventListener(MouseEvent.CLICK, cek_jawaban);
    	jawaban_4.removeEventListener(MouseEvent.CLICK, cek_jawaban);
    	//listener untuk efek tombol
    	jawaban_1.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over);
    	jawaban_2.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over);
    	jawaban_3.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over);
    	jawaban_4.removeEventListener(MouseEvent.MOUSE_OVER, mouse_over);
    	//mouse out
    	jawaban_1.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out);
    	jawaban_2.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out);
    	jawaban_3.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out);
    	jawaban_4.removeEventListener(MouseEvent.MOUSE_OUT, mouse_out);
    	//tombol submit
    	submit_btn.removeEventListener(MouseEvent.CLICK, kirim_nilai);	
    	//pergi ke halaman submit
    	gotoAndStop(15);
    }
    
    setup_awal();
    
    

  25. Klik frame 15 layer BG tambahkan keyframe (F6).
  26. Klik frame 15 layer tombol tambahkan Blank Keyframe. Buatlah sebuah dynamic text untuk menampilkan hasil penilaian. Berikan instance name hasil_txt pada dynamic text tersebut.
  27. Buatlah sebuah tombol untuk mensubmit nilai, dan tambahkan instance name submit_nilai_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 15 sebagai berikut :

    tutorial flash membuat kuis CBT dengan flash by wandah_w
  28. Klik frame 15 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
  29. import flash.events.MouseEvent;
    
    hasil_txt.text = "Hai... "+nama_pemain+" nilaimu adalah "+String(nilai_pemain)+" klik untuk melanjutkan";
    
    var xmlData:XML;
    var totalData = 0;
    function salahServer():void {
    	trace("ada kesalahan server");
    }
    function kirimNilai(inputNama, inputNilai):void {
    	//Tahap 1 - Baca file data nilai dari server
    	trace("buka file XML...");
    	var xmlLoader:URLLoader = new URLLoader();
    	xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, salahServer);
    	xmlLoader.addEventListener(Event.COMPLETE, bacaXML); 
    	var rand = Math.floor(Math.random()*1000);
    	xmlLoader.load(new URLRequest("http://wandah.org/swf/dataNilai.xml?r="+rand)); 
    		
    	function bacaXML(e:Event):void {
    		//Tahap 2 - tambahkan data baru ke xml	
    		trace("update  file XML...");
    		xmlData = new XML(e.target.data);
    		totalData = xmlData.dataPemain.length();
    		xmlData.appendChild(< dataPemain> </dataPemain>);
    		xmlData.dataPemain[totalData].appendChild(< nama>{inputNama}</nama>);
    		xmlData.dataPemain[totalData].appendChild(< nilai>{inputNilai}</nilai>);
    		totalData+= 1;		
    		//Tahap 3 - update data dengan memanggil file PHP
    		var xmlURLReq:URLRequest = new URLRequest("http://wandah.org/swf/simpanNilai.php");
    		var requestVars:URLVariables = new URLVariables();
    		requestVars.dataxml = xmlData;
    		xmlURLReq.data = requestVars;
    		xmlURLReq.method = URLRequestMethod.GET;
    		var xmlSendLoad:URLLoader = new URLLoader();
    		xmlSendLoad.load(xmlURLReq);
    		trace("proses selesai "+xmlURLReq);
    		gotoAndStop(20);
    	}
    }	
    
    submit_nilai_btn.addEventListener(MouseEvent.CLICK, kirimData);
    function kirimData(e:MouseEvent):void{
    	if (nilai_pemain > 0 ){
    		kirimNilai(nama_pemain, nilai_pemain);
    	}
    	submit_nilai_btn.visible = false;
    }
    		
    

  30. Klik frame 20 layer BG tambahkan keyframe (F6).
  31. Klik frame 20 layer tombol tambahkan Blank Keyframe. Buatlah sebuah 2 buah dynamic text untuk menampilkan nilai pemain, pastikan opsi render Text as HTML anda aktifkan, serta opsi Multiline. Berikan masing-masing instance name nama_pemain_txt dan nilai_txt pada dynamic text tersebut.
  32. Buatlah sebuah tombol untuk kembali ke halaman awal, dan tambahkan instance name ulang_btn pada tombol tersebut. Perhatikan tata letak aset visual pada frame 20 sebagai berikut :

    tutorial flash membuat kuis CBT dengan flash by wandah_w
  33. Klik frame 20 layer kode, tambahkan Keyframe. Kemudian buka panel action (F9) dan ketikan kode berikut :
  34. import flash.events.MouseEvent;
    
    var data_nilai = [];
    nama_pemain_txt.htmlText = "Loading.....";
    nilai_txt.htmlText = "";
    
    function olah_data():void{	
    	//ubah data XML menjadi array
    	var i:int;
    	var j:int;
    	trace(totalData);
    	trace("xml = "+xmlData);
    	for (i = 0; i<totalData;i++){
    		data_nilai.push({nama:xmlData.dataPemain[i].nama, nilai:xmlData.dataPemain[i].nilai}); 
    	}
    	trace(data_nilai);
    	
    	//urutkan nilai tertinggi
    	data_nilai.sortOn("nilai", Array.DESCENDING);
    	//tampilkan 
    	var listNama = "";
    	var listNilai = "";
    	for (i = 0; i<totalData;i++){
    		if (i᝺){
    			//tampilkan 10 teratas saja
    			listNama+= String(i+1)+". "+data_nilai[i].nama+"\n";
    			listNilai+= data_nilai[i].nilai+"\n";
    		}
    	}
    	nama_pemain_txt.htmlText = listNama;
    	nilai_txt.htmlText = listNilai;
    }
    
    olah_data();
    
    ulang_btn.addEventListener(MouseEvent.CLICK, ulangi);
    
    function ulangi(e:MouseEvent):void{
    	ulang_btn.removeEventListener(MouseEvent.CLICK, ulangi);
    	gotoAndStop(1);
    }
    

  35. Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka akan didapatkan aplikasi seperti di atas

Penjelasan Kode

Aplikasi di atas pada dasarnya sama dengan aplikasi kuis pada tutorial sebelumnya, hanya saja terdapat fitur menyimpan data ke server. Untuk menyimpan data ke file XML diperlukan sebuah file PHP dimana data dari flash ke PHP dikirim menggunakan metode GET. Anda juga dapat menggunakan teknik lain seperti metode POST atau mengencrypt data terlebih dahulu sebelum dikirimkan ke server untuk mengamankan aplikasi dari kecurangan.

Pada tiap-tiap keyframe (frame 1, 5, 10, 15, dan 20) pada dasarnya memiliki kode dengan fungsi yang sederhana :

  1. Pada frame 1, kode sederhana untuk memasukkan nama pemain
  2. Pada frame 5, kode hanya untuk melewati halaman petunjuk
  3. Pada frame 10, kode kuis dipastekan dan diedit sedikit untuk menambahkan tombol submit
  4. Pada frame 15, kode submit akan mengirimkan data ke file PHP. Data akan diolah dan disimpan, dan setelah proses selesai frame akan di pindah ke frame 20
  5. Pada frame 20, data diurutkan dari nilai terbesar, kemudian ditampilkan dengan teknik teks HTML dimana karakter \n akan menghasilkan baris baru (enter)


Pada tahapan selanjutnya anda bisa menambahkan beberapa fitur baru seperti soal gambar, timer, pilihan materi dan sebagainya. Selamat mencoba dan semoga bermanfaat!!

file sumber (Adobe Animate CC 2017): dapat diunduh disini

Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon