Selasa, 08 Mei 2012

Tutorial Membuat Kuis Sederhana dengan Flash ActionScript 3.0

Pertama, buka Adobe Flash CS4.
Lalu File->New->Flash File (ActionScript 3.0)->OK



1. Buatkan 2 Layer: Content dan Actions


2. Arahkan cursor ke frame 1 pada layer Content , lalu klik kanan dan pilih insert keyframe



3. Pada frame dan layer tersebut, buatkan beberapa properti sebagai berikut :

Masing-masing properti yang terdiri dari text dan button itu, atur propertisnya menjadi sebagai berikut:


Setelah selesai semua properti dibuat pada frame 1 layer content, maka selanjutnya pindah ke frame 2 pada layer content. Klik kanan dan pilih insert keyframe.



4. Buatkan properti seperti berikut :
 
Atur propertisnya sebagai berikut :
 
 

5. Pindah ke frame 1 pada layer Actions, arahkan cursor pada frame tersebut lalu klik kanan dan pilih Actions
 
Tuliskan script berikut :

stop();

var nQNumber:Number = 0;
var aQuestions:Array = new Array();
var aCorrectAnswers:Array = new Array("Jupiter", "Mars", "war", "Titan");
var aUserAnswers:Array = new Array();

aQuestions[0] = "What is the biggest planet in our solar system?";
aQuestions[1] = "Which planet in our solar system is the 4th planet from the sun?";
aQuestions[2] = "Mars is named after the Roman god of ___.";
aQuestions[3] = "What is the name of Saturn's largest moon?";

questions_txt.text = aQuestions[nQNumber];

submit_btn.addEventListener(MouseEvent.CLICK, quiz);

function quiz(e:MouseEvent):void
{
     aUserAnswers.push(answers_txt.text);
     answers_txt.text = ""; // This line puts an empty string, making the TextField appear empty again
     nQNumber++;
     if(nQNumber < aQuestions.length)
     {
          questions_txt.text = aQuestions[nQNumber];
     }
     else
     {
          nextFrame();
     }
}




6. Arahkan cursor ke frame 2 pada layer content, klik kanan dan pilih insert keyframe



7. Lalu klik kanan kembali dan pilih Actions



Tuliskan script berikut :

var nScore:Number = 0;

userAnswer0_txt.text = aUserAnswers[0];
userAnswer1_txt.text = aUserAnswers[1];
userAnswer2_txt.text = aUserAnswers[2];
userAnswer3_txt.text = aUserAnswers[3];

correctAnswer0_txt.text = aCorrectAnswers[0];
correctAnswer1_txt.text = aCorrectAnswers[1];
correctAnswer2_txt.text = aCorrectAnswers[2];
correctAnswer3_txt.text = aCorrectAnswers[3];

for(var i:Number = 0; i < aQuestions.length; i++)
{
     this["userAnswer" + i + "_txt"].text = aUserAnswers[i];
     this["correctAnswer" + i + "_txt"].text = aCorrectAnswers[i];
   
     if(aUserAnswers[i].toUpperCase() == aCorrectAnswers[i].toUpperCase())
     {
          nScore++;
     }
     if(i == aQuestions.length - 1)
     {
          score_txt.text = nScore.toString();
     }
}



8. Selesai. Simpan dengan nama "Start_Quiz_App". File->Save..
9. Tekan CTRL+Enter untuk melihat hasilnya. Maka akan terlihat seperti gambar berikut :