12
Hal. | 1 TUTORIAL MEMBUAT ANIMASI QUIZ INTERAKTIF (Action Script 2.0 Adobe Flash CS3) Persiapan : 1. Buka Aplikasi Adobe Flash C3 Buat file baru dengan format Action Script 2.0 2. Buatlah layer-layer sbb. : 3. Rancanglah user interface pada layer Background sbb. :

Tutorial Membuat Animasi Quiz Interaktif-cs3

  • Upload
    yanz

  • View
    43

  • Download
    9

Embed Size (px)

DESCRIPTION

tutorial

Citation preview

Page 1: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 1

TUTORIAL MEMBUAT ANIMASI QUIZ INTERAKTIF

(Action Script 2.0 – Adobe Flash CS3)

Persiapan :

1. Buka Aplikasi Adobe Flash C3 – Buat file baru dengan format Action Script 2.0

2. Buatlah layer-layer sbb. :

3. Rancanglah user interface pada layer Background sbb. :

Page 2: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 2

4. Rancanglah user interface pada layer Tombol&Teks sbb. :

Objek-objek yang dibuat sbb.

[1] Tambahkan objek Dynamic Text dan diberi nama instance layarUtama_txt

Page 3: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 3

[2] Tambahkan objek Component Radio Button :

Keterangan.

a) Untuk menampilkan windows component pilih menu Window>Component atau

tekan tombol [Crtl+F7]

b) Pengaturan untuk objek component Radio Button, tampilkan windows Component

Inspector dengan menekan tombol [Shift+F7] sbb.

Baris data isi dengan huruf “a” (huruf kecil tanpa tanda petik); huruf ini kelak

di actions script akan dibandingkan dengan jawaban yang dipilih oleh User.

Page 4: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 4

Baris label isi dengan huruf “A” (untuk judul tanpa tanda petik).

Lakukan hal yang sama pada Radio Button pilihan B, C, dan D (dalam kasus

ini dibuat 4 pilihan ganda)

[3] Tambahkan objek Dynamic Text untuk menampilkan hasil jawaban user, beri

nama instance jawabSiswa_txt :

[4] Tambahkan objek button untuk menampilkan Teks Soal sesuai nomor soal :

Keterangan.

Banyaknya tombol (symbol button) tergantung kebutuhan. Untuk membuat tombol

yang lain dapat di-duplicate pada Library. Dan berikan nama instance yang berbeda

pada setiap symbol button-nya. Misal nomor1_btn, nomor2_btn, dst.

[4]

Page 5: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 5

[5] Tambahkan dua buah objek button untuk scrolling Teks Soal yang ada pada

instance layarUtama_txt (lihat pada point [1])

Keterangan.

Untuk symbol button scrolling ke atas di beri nama instance up dan ke bawah down.

[6] Tambahkan dua buah objek button component dan aturlah component inspector-

nya untuk mengontrol Teks Soal selanjutnya.

Keterangan.

Untuk symbol button [Submit] beri nama instance setuju dan [Lanjutkan] dengan

nama instance nextQuestion.

[5]

Page 6: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 6

Perancangan user interface pada layer Tombol&Text selesai. Kerjakan tahap kerja

selanjutnya.

5. Pindahkan area kerja ke Layer Prompt. Rancanglah symbol Movie Clip yang diberi

nama instance promptBox sbb.

Objek-objek yang dibuat pada symbol movie clip promptBox (isinya) sbb.

[1] Tambahkan objek Dynamic Text dan ketiklah keterangannya.

[2] Tambahkan dua buah symbol button (atau button component). Beri nama instance

no untuk button [BATAL] dan yes untuk button [LANJUTKAN]

Page 7: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 7

6. Pindahkan area kerja ke Layer Status Jawaban. Rancanglah symbol Movie Clip yang

diberi nama instance statJawab sbb.

Objek-objek yang dibuat pada symbol movie clip statJawab (isinya) sbb.

[1] Tambahkan objek Dynamic Text dan ketiklah keterangannya.

[2] Tambahkan objek Dynamic Text kosong. Beri nama instance statJawab

6. Pindahkan area kerja ke Layer Nilai Test. Rancanglah symbol Movie Clip yang diberi

nama instance nilaiAkhir sbb.

Objek-objek yang dibuat pada symbol movie clip nilaiAkhir (isinya) sbb.

Page 8: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 8

[1] Tambahkan objek Dynamic Text sesuai contoh dan ketiklah keterangannya serta

dua buah symbol/ component button.

[2] Untuk objek text dynamic yang kosong, beri nama instance sbb.

Ket.

Nama-nama instance untuk di baris “Benar :” urutannya txt_b, multiply_b, dan

nilai_b

Nama-nama instance untuk di baris “Salah :” urutannya txt_s, multiply_s, dan

nilai_s

Nama instance untuk di baris “Total Score :” adalah jml

Nama instance untuk symbol button/ component yaitu : ulangi dan selesai

6. Setelah selesai membuat rancangan interface, pindahkan area kerja ke Layer Action

Script.

Page 9: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 9

Klik kanan pada frame 1 pilih menu action dan ketiklah kode script-nya sbb.

[1] /*----------------------------------------------------------------- [2] Action Script 2.0 - Adobe Flash C3 [3] Animasi Quiz Interaktif [4] Sumber : Buku "Making Educational Animation with Flash" [5] Modifikasi oleh : Xxxx. NPM : XXXXX

[6] -----------------------------------------------------------------*/ [7] fscommand("FullScreen", true);

[8] // Inisiasi Variabel Global [9] _global.i; [10] _global.kunciJawaban;

[11] _global.penjelasan;

[12] _global.BENAR;

[13] _global.SALAH;

[14] _global.MAXIMAL_PERTANYAAN;

[15] // Fungsi Perhitungan

[16] function evaluasi(j_benar, j_salah, mul_benar, mul_salah,

mul_seluruh, bonus)

[17] {

[18] nilaiAkhir.txt_b.text = j_benar;

[19] nilaiAkhir.txt_s.text = j_salah;

[20] nilaiAkhir.multiply_b.text = mul_benar;

[21] nilaiAkhir.multiply_s.text = mul_salah;

[22] nilaiAkhir.nilai_b.text = j_benar * mul_benar;

[23] nilaiAkhir.nilai_s.text = j_salah * mul_salah;

[24] nilaiAkhir.jml.text = ((j_benar * mul_benar) - (j_salah *

mul_salah))

[25] mul_seluruh + bonus;

[26] }

[27] function aktifJawab(param:Boolean)

[28] {

[29] if (param) {

radioGroup.eabled=true;

setuju.enabled=false;

}

else {

Page 10: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 10

radioGroup.eabled=true;

setuju.enabled=true;

}

}

[30] function soalKunciPenjelasan( _parSoal, _parJawab, _parPenjelasan)

[31] {

[32] layarUtama_txt.html = true;

[33] layarUtama_txt.htmlText = _parSoal;

[34] kunciJawaban = _parJawab;

[35] penjelasan = _parPenjelasan;

[36] }

[37] //=====

[38] function soal(){

[39] // Pemberian nilai awal pada tiap-tiap variabel di property objek

[40] promptBox._visible=nextQuestion._visible=false;

[41] statJawab._visible=nilaiAkhir._visible=false;

[42] i=1;

[43] nomor1_btn.enabled = nomor2_btn.enabled = false;

[44] nomor3_btn.enabled = false;

[45] BENAR=SALAH=0;

[46] MAXIMAL_PERTANYAAN = 3;

[47] setuju.enabled = false;

[48] nomor1_btn.enabled = true;

[49] layatUtama_txt.htmlText="<u><b> Pilih Nomor Soal </u></b>"+

[50] "<br><i>\t\t di sebelah kiri </i></br>";

[51] layarUtama_txt.html = true;

[52] // SOAL

[53] soal1 = "Perguruan tinggi STMIK AMIKBANDUNG yang merupakan PTS

pertama di Jawa Barat dan Banten terletak di "+

[54] "\n\n a. Jl. Jakarta No. 28\n b. Jl. Jakarta No. 20\n c. Jl.

Jakarta No. 30"+

[55] "\n d. Jl. Jakarta No. 25";

[56] jawab1="a";

[57] penjelasan1 = "Letak kampus STMIK Amik Bandung berada di depan gd.

Dephumham"+

[58] "\n atau di seberang Gd. Rutan Kebonwaru Bandung. Nomornya adalah

28";

[59] soal2 = "Semboyan kampus STMIK AMIKBANDUNG adalah : "+

[60] "\n\n a. Network Security Campus\n b. Kampus Biru\n c. The First

and The Best"+

[61] "\n d. The First and Competence";

[62] jawab2="d";

[63] penjelasan2 = "Semboyan kampus adalah The First and Competence"+

[64] "\n\n artinya PTS Pertama di Jabar dan Banten serta para

lulusannya berkompeten";

[65] soal3 = "Visi STMIK AMIKBANDUNG adalah : "+

[66] "\n\n a. Kampus Unggulan\n b. Next Generation\n c. Network

Security Campus"+

[67] "\n d. The Blue Campus";

[68] jawab3="c";

[69] penjelasan3 = "Ciri khas kompetensi adalah di bidang keamanan

jaringan"+

[70] "\n\n atau menjadi penjaga dunia virtual";

[71] //Cek jawaban

[72] answerListener=new Object();

[73] answerListener.click=function(choose){

Page 11: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 11

userAnswer=choose.target.selection.data;

jawabSiswa_txt.text=userAnswer;

[74] }

[75] radioGroup.addEventListener("click",answerListener);

[76] // Tekan tombol atas (UP) dan bawah (DOWN) untuk Scroll soal

[77] up.onRelease=function(){

layarUtama_txt.scroll --;

}

[78] down.onRelease=function(){

layarUtama_txt.scroll ++;

}

[79] //Pengaturan eksekusi tombol pilihan soal

[80] nomor1_btn.onRelease=function(){

this.enabled=false;

nomor2_btn.enabled=false;

nomor3_btn.enabled=false;

setuju.enabled=true;

soalKunciPenjelasan(soal1,jawab1,penjelasan1);

}

[81] nomor2_btn.onRelease=function(){

this.enabled=false;

nomor1_btn.enabled=false;

nomor3_btn.enabled=false;

setuju.enabled=true;

soalKunciPenjelasan(soal2,jawab2,penjelasan2);

}

[82] nomor3_btn.onRelease=function(){

this.enabled=false;

nomor1_btn.enabled=false;

nomor2_btn.enabled=false;

setuju.enabled=true;

soalKunciPenjelasan(soal3,jawab3,penjelasan3);

}

[83] //Konfirmasi tombol setuju

[84] setuju.onRelease=function(){

[85] promptBox._visible=true;

[86] this.enabled=false;

[87] aktifJawab(false);

}

[88] //Konfirmasi movie clip promptBox NO

[89] promptBox.no.onRelease=function(){

[90] promptBox._visible=false;

[91] aktifJawab(false);

}

[92] //Konfirmasi movie clip promptBox YES

[93] promptBox.yes.onRelease=function(){

[94] promptBox._visible=false;

[95] statJawab._visible=true;

[96] nextQuestion._visible=true;

[97] aktifJawab(true);

[98] if (userAnswer==kunciJawaban){

statJawab.statusJawaban.text="BENAR";

BENAR++;

}

else {

Page 12: Tutorial Membuat Animasi Quiz Interaktif-cs3

H a l . | 12

statJawab.statusJawaban.text="SALAH";

SALAH++;

}

}

[99] // Pengaturan Pertanyaan Selanjutnya

[100] nextQuestion.onRelease=function(){

[101] statJawab._visible=nextQuestion._visible=false;

[102] ++i;

[103] layarUtama_txt.text=penjelasan;

[104] if (i<=MAXIMAL_PERTANYAAN){

tellTarget("nomor"+i+"_btn"){enabled=true;}

}

[105] else {

nilaiAkhir._visible=true;

evaluasi(BENAR,SALAH,1,0,10,10);

radioGroup.enabled=false;

setuju.enabled=false;

}

}

[106] //------------

[107] }

[108] // Menjalankan PROGRAM UTAMA

[109] soalKunciPenjelasan("KLIK PADA TOMBOL NOMOR SOAL DI BAGIAN SEBELAH

KIRI","","");

[110] soal();

[111] //Ulangi atau Selesai

[112] //Konfirmasi movie clip promptBox NO

[113] nilaiAkhir.ulangi.onRelease=function(){

[114] soalKunciPenjelasan("KLIK PADA TOMBOL NOMOR SOAL DI BAGIAN SEBELAH

KIRI","","");

[115] soal();

}

[116] nilaiAkhir.selesai.onRelease=function(){

[117] fscommand("Quit", true);

}

[118] /*END*/

7. Test Movie Anda dengan [CTRL+ENTER] (perbaiki kesalahan dengan memeriksa

kembali langkah kerja).

8. Modifikasilah aplikasi di atas dengan menambahkan 10 soal yang disesuaikan dengan

kasus pada projek Anda.

*** Be Creative! ***