MEMBUAT SOAL ESSAY DENGAN FLASH 8

Jika beberapa waktu yang lalu saya berbagi tutorial bagaimana membuat Soal Interaktif Pilihan Ganda, kali ini saya akan berbagi bagaimana membuat Soal Interaktif Essay.
Langsung ke TKP sob…
Langkah 1. Buat flash dokumen baru dan buatlah 2 buah Layer dan beri nama Layer1 dengan nama latar dan Layer2 dengan nama essay.
clip_image002
Langkah 2. Masukkan gambar latar pada Layer latar sesuai keinginan sobat, kemudian kuncilah Layer latarnya.
clip_image004
Langkah 3. Klik Frame1 Layer essay dan buatlah desain soal seperti gambar berikut :
clip_image006
Keterangan :
A. Soal; Properti : Static Text
B. Kotak Jawaban;
Properti jawaban nomor 1 : var isi dengan “jawaban1” (tanpa tanda petik)
Properti jawaban nomor 2 : var isi dengan “jawaban2” (tanpa tanda petik)
Properti jawaban nomor 3 : var isi dengan “jawaban3” (tanpa tanda petik)
Properti jawaban nomor 4 : var isi dengan “jawaban4” (tanpa tanda petik)
Properti jawaban nomor 5 : var isi dengan “jawaban5” (tanpa tanda petik)
C. Tanda Benar / Salah
Jawaban nomor 1, Properti : tipe Movie Clip, Instance Name : tanda1
Jawaban nomor 2, Properti : tipe Movie Clip, Instance Name : tanda2
Jawaban nomor 3, Properti : tipe Movie Clip, Instance Name : tanda3
Jawaban nomor 4, Properti : tipe Movie Clip, Instance Name : tanda4
Jawaban nomor 5, Properti : tipe Movie Clip, Instance Name : tanda5
D. Nilai; Properti : Static Text
E. Isi Nilai; Properti : Dynamic Text
F. Tombol;
Langkah 4. Klik Frame 1 pada Layer Essay. Sebagai contoh, buatlah 5 pertanyaan essay pada Static Text.
clip_image008
Langkah 5. Buatlah 5 buah input text dengan masing-masing Var : Jawaban1, Jawaban2, Jawaban3, Jawaban4 dan Jawaban5, dan Maximum Characters : 6.
clip_image010
…..
Langkah 6. Buatlah tanda Benar (contreng) dan tanda Salah (silang) disamping kanan input text jawaban, dengan cara :
Buatlah lingkaran menggunakan Oval Tool. Selanjutnya seleksi gambar lingkaran kemudian tekan F8 dan aturlah seperti gambar berikut :
clip_image012
Dan pada propertinya beri Instance Name dengan nama tanda1.
clip_image014
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 7. Dobel klik gambar lingkaran yang telah menjadi Movie clip, tambah/insert keyframe pada frame2 dan frame3.
Berikut… klik frame2, gambarlah tanda contreng (benar) dan tanda silang (salah) pada frame3.
clip_image016
clip_image018
Jika sudah masukkan Action script :
  1. stop();
pada frame1, frame2, frame2
clip_image020
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 8. Klik Layer Essay, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //daftar untuk jawaban yang benar
  2. jawaban_benar1 = "200";
  3. jawaban_benar2 = "1";
  4. jawaban_benar3 = "0";
  5. jawaban_benar4 = "10000";
  6. jawaban_benar5 = "101";
  7. //nilai pertama kali sama dengan 0
  8. nilai = 0;
Klik tombol Koreksi, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //ketika mouse diklik
  2. on (release) {
  3. //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  4. for (i=1; i<6; i++) {
  5. //jika jawaban +i sama dengan jawaban +i
  6. if (_root["jawaban"+i] == _root["jawaban_benar"+i]) {
  7. //nilai ditambah 1
  8. nilai += 1;
  9. //tanda+i pindah ke frame 2
  10. _root["tanda"+i].gotoAndStop(2);
  11. } else {
  12. //tanda+i pindah ke frame 3
  13. _root["tanda"+i].gotoAndStop(3);
  14. }
  15. }
  16. koreksi.enabled = false; //tombol koreksi tidak bisa ditekan
  17. koreksi._alpha = 40; //tombol koreksi lebih transparan
  18. }
clip_image022
Klik tombol Reset, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. on (release) {
  2. koreksi.enabled = true; //tombol koreksi dapat ditekan
  3. koreksi._alpha = 100; //warna tombol koreksi tidak transparan
  4. nilai = 0; //nilai diubah menjadi 0
  5. for (i=1; i<6; i++) { //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  6. _root["jawaban_user"+i] = ""; //jawaban_user+i dikosongkan
  7. _root["tanda"+i].gotoAndStop(1); //tanda+i pindah ke frame 1
  8. }
  9. }
clip_image024
Langkah 9. Simpan project sobat dan cona jalankan project sobat.

Untuk file latihannya silahkan download disini
Share this article :
 

+ comments + 1 comments

August 27, 2014 at 11:08 AM

Bermanfaat mas, trimakasih atas bantuannya

Post a Comment

Terima Kasih Sudah Meninggalkan Komentar...

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ingin berbagi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger