Modul Membuat Kuis Interaktif - Flash Cs3

22
[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ] 1 http://kangmoen-ebook.blogspot.com MEMBUAT KUIS INTERAKTIF Menggunakan ADOBE FLASH CS3 Disampaikan pada Workshop MGMP Bahasa Inggris SMP/MTs Kabupaten Wonosobo Tanggal 14 Mei 2013 di SMP N 1 Mojotengah Wonosobo Oleh: Miftakhul Munip, S.Kom ( Kang Moen Ad-Dima’i )

description

Modul Membuat Kuis Interaktif - Flash Cs3Disampaiakan pada Workshop MGMP Bahasa Inggris SMP/MTs Pokja 4 Kabupaten Wonosobo di SMP Negeri 1 Mojotengah Wonosobo tanggal 14 Mei 2013

Transcript of Modul Membuat Kuis Interaktif - Flash Cs3

Page 1: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

1 http://kangmoen-ebook.blogspot.com

MEMBUAT KUIS INTERAKTIF

Menggunakan ADOBE FLASH CS3

Disampaikan pada

Workshop MGMP Bahasa Inggris SMP/MTs Kabupaten Wonosobo

Tanggal 14 Mei 2013 di SMP N 1 Mojotengah Wonosobo

Oleh:

Miftakhul Munip, S.Kom

( Kang Moen Ad-Dima’i )

Page 2: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

2 http://kangmoen-ebook.blogspot.com

KATA PENGANTAR

Bismillahirrohmanirrohim

Puji syukur Al-Hamdulillahi Rabbil ’Alamin penulis panjatkan kehadirat Allah SWT, yang telah menganugerahkan kasih, sayang dan cinta kepada setiap hamba yang di Ridhai-Nya. Modul Membuat Kuis Interaktif Menggunakan ADOBE FLASH CS3 ini tercipta tak luput dari kenikmatan yang Allah berikan kepada kita semua.

Shalawat dan Salam senantiasa tercurah kepada baginda Muhammad SAW, segenap keluarganya, para sahabatnya dan pengikut seluruhnya. Rasul akhir zaman yang selalu kita nantikan syafa’atnya dihari kiamat nanti. Semoga kita termasuk pengikut yang mendapat syafa’atnya, amin.

Penulis menyadari bahwa penyusunan modul ini masih banyak kekurangan karena keterbatasan ilmu. Penulis sangat senang apabila para pembaca mau memberikan masukan, kritikan dan berbagi ilmunya sehingga modul yang akan datang bisa lebih baik.

Semoga dengan adanya modul ini dapat menambah wawasan kita untuk menjadi manusia-manusia yang berilmu, dan juga sebagai ladang amal bagi penulis. Akhir kata, penulis mohon maaf yang sebesar-besarnya.

Wonosobo, 13 Mei 2013

Penulis

Miftakhul Munip, S.Kom.

Page 3: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

3 http://kangmoen-ebook.blogspot.com

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

Page 4: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

4 http://kangmoen-ebook.blogspot.com

A. GAMBARAN UMUM

1. Pengenalan Adobe Flash CS3

Tak kenal maka ta’aruf. 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 digunakan untuk meletakkan objek/gambar animasi.

Page 5: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

5 http://kangmoen-ebook.blogspot.com

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.

Page 6: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

6 http://kangmoen-ebook.blogspot.com

Layer Frame Background :Berisi gambar latar belakang. Teks :Berisi teks-teks baik soal kuis maupun keterangan. Tombol :Berisi tulisan/gambar yang berfungsi sebagai

tombol. Kode :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).

Page 7: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

7 http://kangmoen-ebook.blogspot.com

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.

Page 8: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

8 http://kangmoen-ebook.blogspot.com

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 Tool (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.

Page 9: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

9 http://kangmoen-ebook.blogspot.com

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.

Page 10: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

10 http://kangmoen-ebook.blogspot.com

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:

Page 11: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

11 http://kangmoen-ebook.blogspot.com

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 Anda”, kemudian tambahkan tulisan “Tanpa Nama”.

Page 12: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

12 http://kangmoen-ebook.blogspot.com

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 meng-copy sampai pada Frame 6.

h) Klik Frame 3 kemudian edit soal dan jawaban, lakukan juga pada frame 4, 5 dan 6.

Page 13: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

13 http://kangmoen-ebook.blogspot.com

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.

Page 14: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

14 http://kangmoen-ebook.blogspot.com

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.

Page 15: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

15 http://kangmoen-ebook.blogspot.com

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.

Page 16: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

16 http://kangmoen-ebook.blogspot.com

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).

Page 17: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

17 http://kangmoen-ebook.blogspot.com

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).

Page 18: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

18 http://kangmoen-ebook.blogspot.com

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();

};

Page 19: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

19 http://kangmoen-ebook.blogspot.com

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...

Page 20: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

20 http://kangmoen-ebook.blogspot.com

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 anda menyimpan file kuis interaktif.fla dan jalankan hasilnya.

C. TUGAS

Follow up dari workshop, silakan buat kuis sejenis yang telah dikembangkan dengan 10 soal sesuai materi yang anda inginkan.

Kirimkan hasil file (.fla dan .swf) yang telah diarsip (.zip/.rar) ke email : [email protected] dengan format : - 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.

Page 21: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

21 http://kangmoen-ebook.blogspot.com

TENTANG PENULIS

Kang Moen, begitu panggilan akrab teman-teman kepada penulis. Nama aslinya adalah Miftakhul Munip. Lahir di Kota Demak, Tanggal 03 Agustus 1987.

Jenjang SMA dilewatinya di SMA AL-MUAYYAD Surakarta dan menyelesaikan jenjang S-1 di Universitas Sains Al-Qur’an (UNSIQ) Wonosobo

Program Studi Teknik Informatika (TI).

“Belajar dari hal kecil, Mulai dari yang kita bisa”.

Pertanyaan, kritik dan saran demi peningkatan ilmu pengetahuan bersama bisa menghubungi lewat:

Email : [email protected]

Blog : http://www.kangmoen-ebook.blogspot.com

Facebook : https://www.facebook.com/kangmoenip

Page 22: Modul Membuat Kuis Interaktif - Flash Cs3

[ Modul Workshop MGMP Bahasa Inggris SMP/MTs Kab.Wonosobo ]

22 http://kangmoen-ebook.blogspot.com

LAMPIRAN

Soal :

1. Siapa nama presiden RI pertama?

a. Soekarno b. Soeharto

c. Habibie d. Gus Dur

2. 20 + 20 x 20 = ...

a. 800 b. 600

c. 420 d. 840

3. Bulan berputar mengelilingi...

a. Matahari b. Bumi

c. Bintang d. Galaksi

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

a. Which b. Who

c. Whom d. Whose

5. Sinonim kata senang adalah...

a. Susah b. Sedih

c. Renang d. Bahagia

Kunci Jawaban:

1. a. Soekano 2. c. 420 3. b. Bumi 4. a. Which 5. d. Bahagia