Flash8 & FlashCS3 — Membuat Kuis Matematika Sederhana

Halo. 🙂

Postingan kali ini tentang membuat sebuah kuis matematika sederhana. Kuis ini terdiri atas pembagian dan perkalian. Akan digunakan 3 buah scene untuk kuis ini.

Software yang di gunakan :

Flash 8 dan Flash CS3

AS [ActionScript] yang digunakan :

AS 2.0

Preview hasil jadi :

Kuis matematika sederhana terdiri atas 2 jenis kuis yaitu pembagian dan perkalian, setiap kuis hanya terdiri atas 3 pertanyaan. Bagian atas adalah saat tombol pembagian di klik maka akan masuk ke kuis pembagian dan bagian bawah adalah saat tombol Perkalian di klik maka akan masuk ke dalam kuis perkalian. Untuk memberi efek pada button bisa di lihat di sini.

Gambar sebelah kiri adalah kondisi saat berhasil menjawab dengan benar semua pertanyaan yang ada. Gambar sebelah kanan adalah saat ada pertanyaaan yang tidak terjawab dengan benar.

Flash dari postingan ini bisa dilihat di sini

Pertama tama munculkan terlebih dahulu panel Scene dengan cara memilih menu Window -> Other Panels->Scene. Atau menggunakan shortcut dengan menekan Shift + F2.

Akan muncul panel Scene di tengah tengah. Drag panel tersebut ke pinggir sehingga menempel dengan panel lainnya atau taruh saja panel itu di tempat yang tidak akan mengganggu Anda bekerja. 🙂

• Rename Layer 1 menjadi Text dan buat lah seperti contoh di bawah ini. Cara untuk merubah warna background stage bisa di lihat di sini

Tulisan “Kuis Matematika Sederhana” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Jangan lupa untuk memberi nama btn_Play di kotak instance name.

• Buat layer baru dan beri nama Actions. Kemudian ketikkan code di bawah ini : [Penjelasan code akan diberikan nanti]

stop();

_global.score = 0;

btn_Play.onRelease = function()

{

gotoAndPlay(“2”);

}

• Buat seperti contoh di bawah ini pada frame 2 di layer Text.

Tulisan “Silakan pilih jenis kuis : ” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Jangan lupa untuk memberi nama btn_Pembagian di kotak instance name.

Jangan lupa untuk memberi nama btn_Perkalian di kotak instance name.

• Isikan code berikut ini pada frame 2 di layer Actions :

stop();

btn_Pembagian.onRelease = function ()

{

gotoAndPlay(“Pembagian”, 1);

}

btn_Perkalian.onRelease = function ()

{

gotoAndPlay(“Perkalian”, 1);

}

• Buka panel Scene dan rename name Scene 1 dengan nama Menu Utama. Cara untuk mengubah nama Scene adalah dengan men-double klik pada nama Scene. Kemudian tambahkan 2 buah Scene baru dengan menggunakan menu Insert->Scene atau dengan menekan tombol Add Scene pada Panel Scene. 🙂 Ubah nama 2 scene baru tersebut dengan Pembagian dan Perkalian.

• Intemezzo : Secara default Flash akan memainkan animasi atau movie sesuai dengan urutan Scene yang ada. Scene yang terletak paling pertama akan dimainkan terlebih dahulu seterusnya sesuai dengan urutan yang ada. Kecuali bila Anda merubah urutan tersebut dengan menggunakan code 🙂 Kenapa saya bahas hal ini? Karena ada kemungkinan Anda akan mengubah urutan Scene yang ada dan nantinya bingung sendiri dengan dengan hasil yang muncul. 😉

• Klik scene Pembagian – Anda dapat mengetahui Scene mana Anda berapa dengan melihat pada Timeline – dan Anda akan masuk ke dalamnya. Rename layer 1 dengan nama Soal dan buat seperti contoh di bawah ini.

Tulisan “Soal pertama” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Pertanyaan  “12 / 3 = ” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Kotak untuk memasukkan jawaban dibuat dengan menggunakan Text Tool dan Text type Input Text. Untuk membuat efek border seperti yang ada di contoh pilih “Show border around text”.  Jangan lupa untuk memilih warna text yang BUKAN warna putih. Nanti input jawaban Anda tidak akan terbaca 😛

• Buat layer baru dan beri nama Actions. Ketikkan code di bawah ini pada frame 1 layer Actions tersebut :

stop();

btn_Next1.onRelease = function()

{

if(soalpem1 == 4) {score++;}

gotoAndPlay(“2”);

}

• Klik kanan pada frame 1 Layer Soal dan pilih Copy Frames. Kemudian klik kanan pada frame 2 dan pilih Paste Frames. Edit sehingga didapat hasil seperti di bawah ini :

Ubah nama soalpem1 pada kotak Variable menjadi soalpem2 dan nama btn_Next1 pada kotak instance name menjadi btn_Next2.

• Isikan code berikut ini pada frame 2 Layer Actions :

stop();

btn_Next2.onRelease = function()

{

if(soalpem2 == 3) {score++;}

gotoAndPlay(“3”);

}

• Klik kanan pada frame 1 layer Soal dan pilih Copy Frames. Kemudian klik kanan pada frame 3 dan pilih Paste Frames. Edit sehingga didapat hasil seperti di bawah ini :

Ubah nama soalpem1 pada kotak Variable menjadi soalpem3 dan nama btn_Next1 pada kotak instance name menjadi btn_Next3.

• Isikan code berikut ini pada frame 3 Layer Actions :

stop();

btn_Next3.onRelease = function()

{

if(soalpem3 == 5) {score++;}

gotoAndPlay(“4”);

}

• Buat text yang cukup besar dengan menggunakan Text Tool pada frame 4. Atur posisi text dan kemudian ubah Text Type text tersebut menjadi Dynamic Text.

Untuk membuat efek border seperti yang ada di contoh pilih “Show border around text”.  Jangan lupa untuk memilih warna text yang BUKAN warna putih. Nanti score akhir Anda tidak akan terbaca 😛 Pastikan juga pilihan pada Line Type adalah Multiline.

• Ketikkan code di bawah ini pada frame 4 layer Actions :

stop();

if(score == 3)

{

dyn.text = “Anda menang! Anda berhasil menjawab dengan benar ” + score + ” pertanyaaan yang ada. (^_^)”;

}

else

{

dyn.text = “Maaf Anda hanya berhasil menjawab dengan benar ” + score + ” dari 3 pertanyaan yang ada. Silakan coba lagi (^_^)”;

}

• Test movie dengan menekan Ctrl + Enter.

• Anda sudah bisa melakukan sendiri sisanya untuk kuis Perkalian bukan? 😉

Penjelasan code :

stop();

_global.score = 0;

btn_Play.onRelease = function()

{

gotoAndPlay(“2”);

}

Menghentikan movie pada frame ini. Kemudian mendefinisikan sebuah variabel global [variabel  yang nantinya akan ada sampai movie selesai dimainkan] bernama score yang di isi dengan nilai 0. Kemudian pada saat button bernama btn_Play ditekan dan dilepaskan movie akan berjalan menuju frame ke 2.

stop();

btn_Pembagian.onRelease = function ()

{

gotoAndPlay(“Pembagian”, 1);

}

btn_Perkalian.onRelease = function ()

{

gotoAndPlay(“Perkalian”, 1);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Pembagian ditekan dan dilepaskan movie akan berjalan menuju frame ke 1 dari Scene Pembagian. Kemudian pada saat button bernama btn_Perkalian ditekan dan dilepaskan movie akan berjalan menuju frame ke 1 dari Scene Perkalian.

stop();

btn_Next1.onRelease = function()

{

if(soalpem1 == 4) {score++;}

gotoAndPlay(“2”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next1 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem1 sama dengan 4, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 2.

stop();

btn_Next2.onRelease = function()

{

if(soalpem2 == 3) {score++;}

gotoAndPlay(“3”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next2 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem2 sama dengan 3, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 3.

stop();

btn_Next3.onRelease = function()

{

if(soalpem3 == 5) {score++;}

gotoAndPlay(“4”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next3 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem3 sama dengan 5, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 4.

stop();

if(score == 3)

{

dyn.text = “Anda menang! Anda berhasil menjawab dengan benar ” + score + ” pertanyaaan yang ada. (^_^)”;

}

else

{

dyn.text = “Maaf Anda hanya berhasil menjawab dengan benar ” + score + ” dari 3 pertanyaan yang ada. Silakan coba lagi (^_^)”;

}

Menghentikan movie pada frame ini. Kemudian dilakukan pengecekan apakah nilai dari variabel score sama dengan 3. Bila iya maka akan ditampilkan tulisan Anda menang! Anda berhasil menjawab dengan benar [score akhir] pertanyaaan yang ada. (^_^). Karena  sudah pasti score akhir adalah 3 maka yang akan tertampil adalah tulisan Anda menang! Anda berhasil menjawab dengan benar 3 pertanyaaan yang ada. (^_^). Bila tidak maka yang akan tertampil adalah tulisan Maaf Anda hanya berhasil menjawab dengan benar [score akhir] dari 3 pertanyaan yang ada. Silakan coba lagi (^_^). Score akhir dari pilihan yang ini akan berisi nilai yang sesuai dengan banyaknya pertanyaaan yang terjawab dengan benar, contohnya bila hanya 1 pertanyaan yang terjawab dengan benar maka akan tertampil Maaf Anda hanya berhasil menjawab dengan benar 1 dari 3 pertanyaan yang ada. Silakan coba lagi (^_^).

Hasil jadi (*.fla) bisa di lihat di :

FLASH8

FLASHCS3

Terima kasih sudah mampir dan membaca blog saya. (^_^)