Kamis, 22 September 2011

Membuat Kuis Pilihan Ganda dengan Adobe Flash

Langkah-Langkah:
1.       Aktifkan program Adobe Flash CS3 Anda. Pada kolom Creat New, pilih Flash File (ActionScript 2.0).
2.       Opsional: Pada Frame 1 Layer 1, buat background dengan rectangle tool:
Klik Fill color
Klik rectangle tool
2.1. Klik rectangle tool.
2.2. Klik kotak Fill color untuk memilih warna background.
2.3. Buat kotak persegi panjang di stage (area kerja).



3.       Klik kanan frame 7, pilh Insert Keyframe. Kunci Layer 1.
4.       Buat layer baru (Layer 2): Klik Insert Layer (sudut kiri bawah timeline), atau klik Insert  > Timeline > Layer.
5.       Klik Frame 1 Layer 2, buat judul kuis dengan static text sesuai dengan pilihan Anda:
5.1.                                     Klik text ool.
5.2.             Di properties pilih static text. Kalau tidak ada jendela properties di bawah stage (area kerja), klik Window > Properties > Properties.
5.3.                                     Tentukan jenis font, contoh: Arial Black.
5.4.                                     Tentukan ukuran font, contoh: 16.
5.5.                                     Tentukan warna font, contoh: putih.
5.6.             Drag/seret  tanda panah dengana huruf T ke area kerja, klik di area kerja kemudian buat tulisan yang dimaksud (judul kuis).

Show border around text
Warna Font
Ukuran Font
Jenis Font
Pilih static text
Klik Text Tool



6.       Di bawah judul buat petunjuk pengisian kotak nama, misal: “Tulislah namamu di kotak di bawah ini, kemudian klik MULAI” (tanpa tanda kutip).
7.       Di bawah petunjuk pengisian tsb buatlah kotak nama dengan Input Text (aktifkan ‘Show border around text’). Pilih fill color: putih, ukuran font 14 dan warna font: hitam. Pada Var, ketik ‘nama’ (tanpa tanda kutip). Sejauh ini hasilnya seperti gambar di bawah.


8.       Klik kanan Frame 2 Layer 2, pilih Insert Blank Keyframe. Buat soal beserta pilihan jawabannya dengan cara:
·         Klik Text Tool (Huruf T)  pada Tool Box.
·         Pada properties, pilih Static Text.
·         Tentukan jenis font (Arial Black), ukuran (18), warna (biru muda).
·         Tulis: “ Soal No. 1”, kemudian di bawahnya tulis soal dengan 4 kemungkinan jawabannya.
9.       Klik Frame 2 Layer 2, kemudian tekan F6 sebanyak 4 kali  pada Keyboard untuk meng-copy frame sampai dengan Frame 6. Klik Frame 3 untuk membuat soal nomor dua, ganti soal beserta jawabannya. Demikian seterusnya sampai dengan soal nomor lima yang ada di Frame 6.
10.   Klik kanan Frame 7 Layer 2, pilih Insert Blank Keyframe. Sampai di sini, kunci Layer 2 dan simpan dulu dengan nama file: LATIHAN1.
11.   Buat Layer baru (Layer 3). Klik Frame 1, Buat teks ‘MULAI(tanpa tanda kutip) dengan  Static Text,  ukuran font: 45 dan warna font: putih, letakkan di bawah kotak nama. Klik Selection Tool (tanda panah paling atas pada Tools), Klik kanan pada teks ‘MULAI’ tersebut, pilih Convert  to Symbol, Type-nya pilih Button, lalu klik OK. Pastikan Panel Properties aktif, pada kotak Instance Name ketik ‘startbutton’ (tanpa tanda kutip).
12.    Klik kanan Frame 2 layer 3, pilih Insert Blank Keyframe. Buat object kotak dengan Rectangle Tool sehingga menutupi pilihan jawaban A. Tekan F8, atau klik kanan,  Convert to Symbol, pada Type pilih ‘Button’, klik OK. Klik ganda kotak yang telah dikonversi menjadi button tersebut. Klik kanan pada Frame Up, pilih Cut Frames, klik kanan pada Frame Hit, pilih Paste Frames. Kemudian klik Scene 1 pada Timeline.
13.   Pastikan button kotak terseleksi, Ketik ‘button_a’ pada kotak Instance Name pada panel Properties.
14.   Kopi button kotak tadi (klik kanan, Copy,  Paste 3 kali) dan masing-masing letakkan tepat di atas pilihan B, C, dan D. Seleksi button di atas pilihan jawaban B, Ubah Instance Name-nya menjadi ‘button_b’, di atas pilihan jawaban C menjadi ‘button_c’, dan di atas pilihan jawaban D menjadi ‘button_d’. Sampai di sini, simpan dulu (tekan Ctrl+S).
15.   Klik Frame 2 Layer 3, tekan F6 4 kali untuk men-copy frame. Klik kanan Frame 7 Layer 3, pilih Insert Blank Keyframe. Kunci Layer 3.
16.   Buat Layer baru (Layer 4). Klik Frame 1 . Tekan F7 6 kali. Masih di Layer 4, kembali klik Frame 1, lalu tekan F9 untuk menampilkan panel Action dan masukkan ActionScript berikut (bisa dengan Copy-Paste):
stop();
score = 0;
startbutton.onPress = function() {
                nextFrame();
};
17.   Klik Frame 2 Layer 4, masukkan ActionScript berikut:
stop();
onEnterFrame = function () { skor = +score;};
button_a.onPress = function() {
                nextFrame();
};
button_b.onPress = function() {
                score += 20;
                nextFrame();
};
button_c.onPress = function() {
                nextFrame();
};
button_d.onPress = function() {
                nextFrame();
};
Keterangan: Soal no. 1 kunci jawabannya B. Jika button_b (pilihan jawaban B) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya.
18.   Klik Frame 3 (masih di Layer 4), masukkan ActionScript berikut:
stop();
onEnterFrame = function () { skor = +score;};
button_a.onPress = function() {
                score += 20;
                nextFrame();
};
button_b.onPress = function() {
                nextFrame();
};
button_c.onPress = function() {
                nextFrame();
};
button_d.onPress = function() {
                nextFrame();
};
Keterangan: Soal no. 2 kunci jawabannya A. Jika button_a (pilihan jawaban A) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya.
19.   Klik Frame 4 (masih di Layer 4), masukkan ActionScript berikut:
stop();
onEnterFrame = function () { skor = +score;};
button_a.onPress = function() {
                score += 20;
                nextFrame();
};
button_b.onPress = function() {
                nextFrame();
};
button_c.onPress = function() {
                nextFrame();
};
button_d.onPress = function() {
                nextFrame();
};
Keterangan: Soal no. 3 kunci jawabannya A. Jika button_a (pilihan jawaban A) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya.
20.   Klik Frame 5 (masih di Layer 4), masukkan ActionScript berikut:
stop();
onEnterFrame = function () { skor = +score;};
button_a.onPress = function() {
                nextFrame();
};
button_b.onPress = function() {
                nextFrame();
};
button_c.onPress = function() {
                score += 20;
                nextFrame();
};
button_d.onPress = function() {
                nextFrame();
};
Keterangan: Soal no. 4 kunci jawabannya C. Jika button_c (pilihan jawaban C) diklik skor bertambah 20 dan menuju frame berikutnya yang berisi soal berikutnya.
21.   Klik Frame 6 (masih di Layer 4), masukkan ActionScript berikut:
stop();
onEnterFrame = function () { skor = +score;};
button_a.onPress = function() {
                nextFrame();
};
button_b.onPress = function() {
                score += 20;
                nextFrame();
};
button_c.onPress = function() {
                nextFrame();
};
button_d.onPress = function() {
                nextFrame();
};
Keterangan: Soal no. 5 kunci jawabannya B. Jika button_b (pilihan jawaban B) diklik skor bertambah 20 dan menuju frame berikutnya.
Sampai di sini, simpan dulu (tekan Ctrl+S).
22.   Selanjutnya, buka kunci Layer 2 dengan cara klik tanda gambar gembok di Layer tersebut. Klik kanan kotak Input Text yang telah dibuat di Frame 1 Layer 2, Copy dan Paste-kan di Frame 7 (masih di Layer 2). Klik ganda kotak Input Text dan ketik ‘tanpa nama’ (Upayakan agar warna tulisan kontras dengan warna bacground input text tadi). Lihat di Properties, jenis text yang dipilih harus Input Text, kemudian pada var isikan ‘nama’.
23.   Di bawah kotak Input Text, ketik ‘Nilai Anda:’ dengan ukuran Font 15 (Type Text-nya Static Text).
24.   Di bawah teks ‘Nilai anda:’, buat Dynamic Text  kosong dengan  cara klik Text Tool (T) pada panel Tools, pastikan panel Properties aktif, kemudian pilih Dynamic Text dengan ukuran font 50, klik di bawah teks ‘Nilai Anda:’ dan drag ke kanan. Pada kotak ‘Var’, ketik ‘skor’.
25.   Di bawah ‘Dynamic Text’ dengan nama Variable ‘skor’, ketik dengan tipe teks Static TextKriteria ketuntasan Minimal (KKM): 80.
26.   Di bawah teks ‘Kriteria ketuntasan Minimal (KKM): 80’, buat lagi Dynamic Text kosong dengan nama variable ‘keterangan’. Kembali kunci Layer 2.
Tampilan Stage pada Frame 7 Layer 2 adalah seperti tampak di gambar berikut:
27.   Selanjutnya, buka kunci Layer 3. Klik Frame 7 Layer 3. Ketik ‘ULANGI’ dengan tipe teks Static Text. Klik kanan teks tersebut, pilih Convert to Symbol, tipenya Button. Pastikan panel Properties aktif dan pada kotak Instance Name ketik ‘restart_button’. Kembali kunci Layer 3.
28.   Klik Frame 7 Layer 4 (pastikan Layer 4 tidak terkunci) kemudian tekan F9 untuk mengaktifkan panel Action dan masukkan ActionScript berikut:
if (score>=80) {
                keterangan = "Bagus! Pertahankan Prestasi!";
}
if (score<=60) {
                keterangan = "Anda belum tuntas. Belajar lagi, ya!";
}
restart_button.onPress = function() {
                gotoAndStop(1);
};
29.   Selesai dan tekan Ctrl+S untuk menyimpan. Di bawah adalah tampilan akhir jendela Flash Ducument frame terakhir (7).

30.   Untuk melihat hasilnya, tekan Ctrl+Enter.

Tidak ada komentar: