Tutorial Membuat Soal Via Flash

Assalamualaikumwr.wb
Apa kabar sobat blogger, kali ini saya akan berbagi tentang bagaimana cara membuat soal via flash. Langsung saja simak baik-baik berikut ini :

1. Buat dokument baru (New->Flash Document).
buat tiga buah layer dengan urutan dari atas : opsi, ctn dan bg.

2. Kedua kalian Membuat welcome screen.
Dengan Text Tool buat tiga buah textbox pada sisi atas stage.

Atur property masing masing textbox tersebut pada property panel sbb:
- text box paling kiri:
o Text Type : Dynamic Text,
o Instance Name : username_txt
o Font Size 16
o Line Type : Singgle Line
o Selectable : None

- text box tengah :
o Text Type : Dynamic Text,
o Instance Name : info_txt
o Font Size 16
o Line Type : Singgle Line
o Selectable : None

- text box paling kanan :
o Text Type : Dynamic Text,
o Instance Name : skor_txt
o Font Size 16
o Line Type : Singgle Line
o Selectable : None

Untuk ukuran silahkan sesuaikan sendiri.

Selanjutnya klik layer bg, kemudian kunci layer opsi dan ctn.
1. dengan Rectangle Tool buat kotak di belakang masing masing textbox pd layer opsi.
2. kemudian buat lagi kotak di bawahnya sebagai background content.

Kunci layer bg dan pilih layer ctn serta buka kuncinya.
1. Dengan text tool buat sebuah text box
a. Text type : static ukuran font 24, Bold.
b. Ketik Judul pada textbox ini.
 
2. Kemudian buat satu lagi untuk tambahan text judul.
 
3. Masih dengan text tool, buat satu lagi text box (untuk User name).
 
4. Kemudain buat lagi satu textbox sbb:
a. Type Text : Input Text
b. Instance Name : inputuser_txt
c. Variable : inputuser
d. Line Type : Single
e. Aktifkan tombol Border Around Text.
f. Maximum Character : 20.

5. Terakhir buat sebuah tombol (anda bisa mengambil tombol dari library). Atau bikin sendiri tombol sederhana sbb:
a. Dengan Rectangle Tool buat sebah kotak persegi panjang.
b. Jadikan sebagai syombol (Modify->Convert to Symbol / F8).

•   nama : tombol_mc
•  Behavior : Button

c. Double klik pada kotak untuk mengedit tombol.

• Tambahkan setatik text di depan kotak, ketik ; Masuk.
• Klik kanan frame2, Insert Keyframe.
• Ganti warna fill dengan warna lain. 

6. Klik Scane1 pada kiri atas stage untuk keluar dari editing tombol_mc.
 
7. kemudian klik tombol dan beri nama pada Instant Name enter_btn.

Welcome screen selesai,
 
Selanjutnya kita akan mebuat layar soal pilihan ganda.

- Klik kanan frame6 layer opsi, Insert Frame.
- Klik kanan frame2 layer ctn, Insert Blank Keyframe.
- Klik kanan frame6 layer bg, Insert Frame.

Klik frame2 layer ctn.
1. Buat textbox static dan tuliskan sebuah pertanyaan untuk soal pertama.
Miss (Berikut ini adalah bagian yang terdapat pada Toolbar Formating adalah ….
2. Buka panel componen (Window->Development Panel->Components)
3. Tarik (Drag) 4 buah RadioButton dari Panel Components ke dalam stage.
4. Set parameter dari Panel Properti sbb:
a. Instance Name masing-masing : s1a_cmp, s1b_cmp, s1c_cmp dan s1d_cmp.
b. Data masing-masing : A, B, C dan D
c. GroupName (keempatnya harus sama) : s1
d. Label masing-masing : A, B, C, dan D.
5. Kemudian dengan Text Tool beri pilihan jawaban untuk masing-masing radio button tsb
6. Buka Panle Library (Window->Library)
7. Tarik (Drag) tombol_mc ke dalam stage, ber nama pada Instance name enter_btn1

Klik Frame3 Layer ctn, Insert Keyframe.
Ganti masing-masing property sbb:
** Soal Pertanyaan ganti dengan soal nomor dua milik anda.
** Radio button
1. Instance name masing-maing : s2a_cmp, s2b_cmp, s2c_cmp dan s2d_cmp
2. GrupName keempatnya harus sama: s2
3. Untuk yg lainnya biarkan sama;
** Pilihan Jawaban ganti dengan pilihan jawaban anda.
** Untuk tombol ganti Instance Name menjadi enter_btn2.

Note : untuk soal berikutnya lakukan langkah pada step ini dengan mengganti property yg tersebut di atas.
Jangan lupa untuk memperpanjang frame untuk layer opsi dan layer bg dengan (Insert Frame)

Setelah Anda selesai membuat frame soal-soal, terakhir buatlah halaman penutup.

End Screen.
Klik frame terakhir dari layer ctn, Insert Blank Keyframe.
1. Dengan Text tool buat tiga dynamic textbox masing-maisng
Instant Name = trims_txt, pesanskor_txt, dan totalskor_txt
2. Buat sebuah tombol untuk kembali ke frame awal / 1.
Beri nama tombol ini pada instant name balik_btn

Selesai untuk disain tampilan soal pilihan ganda Anda.
Selanajutnya tinggal menambahkan skrip.

Klik frame1 layer ctn, kemudian panel Action (window->Developments Panel->Actions)
Ketikkan script berikut :

stop();

username_txt.text = “Nama Anda”;
info_txt.text = “Info Status”;
skor_txt.text = “Skor”;
inputuser_txt.text = “”;

klik frame2 layer ctn, kemudian masukkan script berikut :

var isiNilai = 0;

klik frame3 layer ctn, kemudian masukkan script berikut :

info_txt.text = isiInfo;
skor_txt.text = isiNilai;

(untuk layer-layer berikutnya masukkan script ini.)

Kemudian klik frame terakhir pada layer ctn dan masukkan script berikut :

info_txt.text = isiInfo;
skor_txt.text = isiNilai;
trims_txt.text = “Terima kasih ” + username_txt.text;
pesanskor_txt.text = “Skor Anda Adalah : “;
totalskor_txt.text = skor_txt.text;

Tutup Panel Action.
Selanjutnya tuliskan script pada masing-masing tombol pada tiap framenya sbb: (klik frame1 layer ctn, klik tombol, buka kembali Panel Action)

enter_btn (tombol pada frame1 layer ctn)

on(release){
if(inputuser_txt.text == “”){
username_txt.text = “Masukkan Nama Anda”;
}else{
username_txt.text = inputuser_txt.text;
nextFrame();
}
}

Tutup Panel Action, klik frame2, klik tombol pada stage, buka Panel Action.

enter_btn2 (tombol pada frame3 layer ctn)

on(release){
if(s1.selectedData == “B”){
isiInfo = “Jawaban Benar (” + s1.selectedData + “)”;
isiNilai = isiNilai + 1;
nextFrame();
}else{
isiInfo = “Jawaban Salah”;
isiNilai = isiNilai + 0;
nextFrame();
}
}

Tutup Panel Action, klik frame3, klik tombol pada stage, buka Panel Action.

enter_btn2 (tombol pada frame3 layer ctn)

on(release){
if(s2.selectedData == “B”){
isiInfo = “Jawaban Benar (” + s2.selectedData + “)”;
isiNilai = isiNilai + 1;
nextFrame();
}else{
isiInfo = “Jawaban Salah”;
isiNilai = isiNilai + 0;
nextFrame();
}
}

Demikian seterusnya scrip untuk tombol pada frame-frame berikutnya, dengan mengganti isi jawaban “B” yang ada pada baris if(s2.selectedData == “B”), dan s2, sesuai dengan GroupName pada radio button pada masing-masing frame.

Untuk tombol pada frame terakhir masukkan script berikut :

balik_btn (tombol pada frame terakhir  layer ctn)

on(release){
gotoAndStop(1);
}

Selesai. Silahkan dicoba.  (Ctrl + Enter).

Mohon maaf bila ada kesalahan dalam pengetikan.
Wassalmualaikum wr.wb

Posted in: tutorial