[ Modul kuia sederhana A3 ]

MEMBUAT KUIS INTERAKTIF

Menggunakan ADOBE FLASH CS3

Disampaikan pada
Wong A3 dan terimakasi pada semua orang semoga ilmu
ditularkn bermanfaat dan barokah dunia akhirat

Oleh:

ES ACAK

1/A3

[ Modul kuia sederhana A3 ]

DAFTAR ISI

HALAMAN COVER..................................................................................... 1
KATA PENGANTAR.................................................................................... 2
DAFTAR ISI............................................................................................... 3
A. GAMBARAN UMUM............................................................................... 4
1. Pengenalan Adobe Flash CS3................................................................. 4
2. Alur Pembuatan Kuis Interaktif................................................................ 5
B. MEMBUAT KUIS INTERAKTIF ................................................................
6
1. Membuka Flash dan Menyusun Layer ...................................................... 6
2. Membuat Background .................................................................................. 8
3. Mengisi Teks Kuis ........................................................................................ 10
4. Membuat Tombol ......................................................................................... 15
5. Menambah Kode (Action Scipt) ................................................................ 17
6. Mempublish File ........................................................................................... 19
C. TUGAS................................................................................................. 20
D. PENUTUP............................................................................................ 20
TENTANG PENULIS............................................................................... 21
LAMPIRAN................................................................................................. 22

2/A3

[ Modul kuia sederhana A3 ]

A.GAMBARAN UMUM
1. Pengenalan Adobe Flash CS3
Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,
tetapi tak ada salahnya kita pelajari.
Menu
Merupakan kumpulan dari perintah-perintah yang terdapat
pada Adobe Flash CS3.

Tools
Merupakan kumpulan ikon yang mewakili salah satu perintah
tetentu, baik membuat, memilih, menghapus dan lain-lain.

Timeline
Merupakan tool yang berisi layer dan frame untuk mengatur,
mengontrol suatu animasi.

Stage
Merupakan layar/lembarkerja yang
meletakkan objek/gambar animasi.

4/A3

digunakan

untuk


Panel
Merupakan kumpulan perintah/ikon yang
digunakan untuk memanipulasi atribut
objek yang dibuat.
Poperties
Merupakan kumpulan panel yang digunakan untuk mengatur
dokumen, membuat action script pada animasi.

2. Alur Pembuatan Kuis Interaktif

Kuis interaktif yang akan kita buat terdiri tiga bagian, yakni
Awalan, Inti dan Akhiran. Awalan berisi interface yang meminta
user untuk memasukkan nama. Inti berisi soal-soal kuis pilihan
ganda. Akhiran berisi nama user yang di input, nilai dan kriteria
ketuntasan minimal.

Dari ketiga bagian diatas kita bagi menjadi 4 layer (Background,

Teks, Tombol dan Kode) dan masing-masing layer kita tambahkan
beberapa frame.

5/A3

Layer
Frame

Background
Teks
Tombol
Kode

:Berisi gambar latar belakang.

:Berisi teks-teks baik soal kuis maupun keterangan.
:Berisi tulisan/gambar yang berfungsi sebagai
tombol.
:Berisi kode (action script) untuk mengatur
jalannya progam.

B. MEMBUAT KUIS INTERAKTIF

Saatnya PRAKTEK. Ikuti langkah-langkah dibawah ini dengan
seksama :
1. Membuka Flash dan Menyusun Layer
a) Pastikan komputer anda telah terinstal software
Adobe Flash CS3, kemudian jalankan dengan cara
double click icon Adobe Flash CS3 pada desktop.
b) Langsung ke bagian Create New, pilih Flash File (ActionScript
2.0).

6/A3

c) Simpan (tekan Ctrl+S) dengan nama kuis interaktif dan pada

Save as type pilih Flash CS3 Document (*.fla).

d) Tampak pada timeline ada 1 buah layer (Layer 1), silakan

tambahkan 3 layer lagi dengan meng-klik icon Insert Layer 3x.
Hingga terbentuk 4 buah layer.

e) Ubah nama layer dengan cara Double Click pada layer : Layer 1
= Background, Layer 2 = Text, Layer 3 = Tombol dan Layer 4 =
kode.

7/A3

2. Membuat Background
a) Klik layer Background, sebelum kita membuat background
silakan perkecil dulu tampilan stage (area kerja) menjadi 50%
agar bisa terlihat semua areanya.

b) Buatlah background dengan klik icon Rectangle Too

l

(tekan

tombol R), atur properties:

Stroke color

Fill color

c) Klik dan Drag pada stage hingga memenuhi area kerja.

d) Ingat selalu klik selection tool jika telah

selesai mengunakan tool.
e) Klik kanan objek pilih Convert to Symbol, pada Type pilih
Movie clip dan klik OK.

8/A3

f) Double Click objek, kita masuk ke dalam Symbol 1 yang

terdapat sebuah layer (Layer 1).

g) Tambahkan sebuah layer, di Layer 2 Frame 1 gunakan

Rectangle tool untuk membuat 2 gambar dan atur seperti
dibawah.

h) Seleksi objek bagian

atas, klik Free Transform Tool

(tekan tombol Q) dan pada bagian bawah tool pilih Envelope

Atur hingga seperti gambar dibawah.

i) Lakukan seperti langkah h) diatas pada Objek bagian bawah.

9/A3

j) Tambahkan sebuah layer lagi, pada Layer 3 Frame 1 dengan

Rectangle tool buat satu objek dan atur menggunakan Free
Transform Tool hingga terbentuk gambar seperti dibawah.

k) Masih di Layer 3 Frame 1, klik objek dan pada warna pilih putih
dengan alpha 50%.

l) Klik Scene 1 untuk kembali ke timeline utama.

m) Klik kanan layer Background frame 7 pilih Insert Keyframe,

Background selesai.

3. Mengisi Teks Kuis

Seperti yang telah dibahas sebelumnya, kuis terdapat 3 bagian.
Posisi Awalan : Frame 1, Inti : Frame 2-6 (5 Soal) dan Akhiran :
Frame 7. Lebih jelasnya ikuti langkah berikut:

10/A3

a) Klik layer Text Frame 1, kita isi dengan Awalan. Gunakan Text
Tool
(Tekan tombol T), pada properties atur Text type:
Static Text, jenis font, ukuran dan warna menyesuaikan.

b) Ketikan beberapa tulisan dan atur seperti gambar dibawah

(menyesuaikan).

c) Masih di layer Text Frame 1 menggunakan Text tool, ubah

properties pada Text type : Input Text, align : center,
aktifkan (klik) Show border around text, Var : nama, warna dan
ukuran menyesuaikan.

d) Klik dan drag dibawah tulisan Masukkan Nama

kemudian tambahkan tulisan Tanpa Nama.

11/A3

Anda,

e) Klik kanan layer Text Frame 2, pilih Insert Blank Keyframe.

f) Dengan Text tool, type: Static text, ketikan soal dan jawaban
hingga sepeti pada gambar dibawah. (Soal pada Lampiran)

g) Klik layer Text Frame 2, tekan F6 pada keyboard untuk mengcopy sampai pada Frame 6.

h) Klik Frame 3 kemudian edit soal dan jawaban, lakukan juga

pada frame 4, 5 dan 6.

12/A3

i) Klik kanan frame 7, pilih Insert Blank Keyframe

j) Klik frame 1, seleksi kotak input text. Copy kemudian paste di

frame 7.

k) Masih di frame 7, tambahkan tulisan dengan Text type:

Statict text dan atur seperti dibawah.

13/A3

l) Tambahkan tulisan dengan Text type: Dinamic text dibawah

Nilai Anda dan KKM.

m) Klik Dinamic text dibawah Nilai Anda, pada properties isikan

Var: total.

n) Klik Dinamic text dibawah KKM, pada properties isikan Var:

keterangan.

14/A3

4. Membuat Tombol
a) Klik layer Tombol Frame 1, tambahkan objek kotak (Rectangle
tool) tepat diatas kata Mulai. Beri sembarang warna dengan
alpha : 0%, sehingga objek tak kelihatan.

b) Klik kanan objek, Convert to Symbol pilih type Button.

c) Pada properties, <instance name> isi dengan mulai.

d) Klik kanan frame 2, pilih Insert Blank Keyframe.

e) Buat objek kotak diatas jawaban a. Beri sembarang warna

dengan alpha : 0%, sehingga objek tak kelihatan.

15/A3

f) Klik kanan objek, Convert to Symbol pilih type Button.

g) Pada properties, <instance name> isi dengan a .

h) Klik dan drag sambil menekan tombol Ctrl pada keyboard,

letakkan objek diatas jawaban b. Ubah <instance name> isi
dengan b.

i) Ulangi seperti langkah h) untuk jawaban c dan d. Hingga semua

masing-masing jawaban memiliki button.
j) Klik layer Tombol Frame 2, tekan F6 pada keyboard untuk
meng-copy sampai pada Frame 6 (soal no 5).

16/A3

k) Klik kanan Frame 7, pilih Insert Blank Keyframe.

l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol >

Type: Button. <instance name> isi dengan ulangi. Warna dengan
alpha : 0%.

5. Menambah Kode (Action Script)

a) Aktifkan actions-frame (tekan F9).

b) Klik layer Kode Frame 1, ketikan kode dibawah:

stop(); nilai=0;
mulai.onPress=function() {
nextFrame();
};

c) Klik kanan frame 2, Insert Blank Keyframe. Pada action-frame

ketikan kode berikut:
stop();
onEnterFrame=function(){
total=+nilai;
};
a.onPress=function(){
nilai+=20;
nextFrame();
};
b.onPress=function(){
nextFrame();
};
c.onPress=function(){
nextFrame();
};
d.onPress=function(){
nextFrame();
};

19

d) Lakukan seperti langkah c) diatas, pada frame 3 sampai frame

6. Edit sedikit pada kunci, yakni script yang tercetak tebal
warna merah nilai+=20;. Letakkan script tersebut pada
jawaban yang benar. Contoh : Jika Frame 3 (soal no 2)
jawabannya c, maka yang ada script nilai+=20; hanyalah c.
c.onPress=function(){
nilai+=20;
nextFrame();
};

e) Klik frame 7, Insert Blank Keyframe. Ketikan kode berikut :

if(nilai>=80){
keterangan="Selamat, Anda Tuntas...Pertahankan!";
}
else{
keterangan="Maaf, Anda Belum Tuntas...Tingkatkan Belajar";
}
ulangi.onPress=function(){
gotoAndStop(1);
};

6. Mempublish File
Klik kursor diluar area kerja, lihat properties pada publish klik
Settings...

20

Beralih ke tab Formats, pilih yang diperlukan saja. Dalam hal ini kita
coba 3, yaitu: Flash (.swf), HTML (.html), Windows Projector (.exe).
Klik Publish dan OK.

Silakan buka folder tempat

interaktif.fla dan jalankan hasilnya.

anda

menyimpan

file

kuis

C. TUGAS
Follow up dari workshop, silakan buat kuis sejenis yang telah
dikembangkan dengan 10 soal sesuai materi yang anda inginkan.
- Subjek : Follow Up Modul Workshop (nama)
- Pada isi email sertakan Nama Lengkap, Alamat dan Nama
Satuan Pendidikan
D.PENUTUP
Modul ini hanya sebagai salah satu contoh. Tentunya jika kita ingin
dan mau menjadi mahir, perbanyaklah latihan ( praktek ).
Kapan waktu yang tepat untuk latihan? Katakan pada Hati kita :
LAKUKAN SEKARANG JUGA.
Semoga bermanfaat.

21/A3

21

LAMPIRAN
Soal :
1. Siapa nama presiden RI pertama?
a. Soekarno

c. Habibie

b. Soeharto

d. Gus Dur

2. 20 + 20 x 20 = ...
a. 800

c. 420

b. 600

d. 840

3. Bulan berputar mengelilingi...

a. Matahari

c. Bintang

b. Bumi

d. Galaksi

4. Mr.Moen bought a camera, ... has three lenses.

a. Which

c. Whom

b. Who

d. Whose

5. Sinonim kata senang adalah...

a. Susah

c. Renang

b. Sedih

d. Bahagia

Kunci Jawaban:
1.
2.
3.
4.
5.

a. Soekano
c. 420
b. Bumi
a. Which
d. Bahagia

22/A3