Download - Modul Pelatihan Adobe Flash CS3 2014

Transcript
Page 1: Modul Pelatihan Adobe Flash CS3 2014

Athika Dwi Wiji Utami ǀ [email protected]

Yogyakarta, 12 – 13 April 2014 ǀ UNY

PELATIHAN ADOBE FLASH CS3 PEMBUATAN PRESENTASI ǀ MEDIA PEMBELAJARAN INTERAKTIF

Page 2: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 1

DAFTAR ISI HARI PERTAMA

MATERI 1

1. PENGENALAN ADOBE FLASH [02]

2. SYMBOL DAN INSTANCES [05]

3. ANIMASI [06]

MATERI 2

1. ACTIONSCRIPT DASAR : HALAMAN SLIDE PRESENTASI [12]

2. ACTIONSCRIPT DASAR : TOMBOL NAVIGASI [13]

3. ACTIONSCRIPT DASAR : AUDIO [15]

4. ACTIONSCRIPT DASAR : VIDEO [16]

HARI KEDUA

MATERI 3

1. PEMBUATAN TOMBOL CLOSE, MAXIMIZE, DAN MINIMIZE [20]

2. PEMBUATAN KUIS SEDERHANA [21]

3. PUBLISH [26]

Page 3: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 2

HARI PERTAMA

MATERI 1

1. PENGENALAN ADOBE FLASH a. Sekilas mengenai Adobe Flash

Adobe flash (selanjutnya Flash) adalah software populer dalam membuat presentasi multimedia, animasi, media pembelajaran, photo slide, dan video. Pada tahun 1996, flash muncul dengan nama macromedia flash, sampai saat perusahaan adobe membeli flash dari macromedia, dan sejak tahun 2005 flash menjadi adobe flash. Berikut perkembangan versi flash : 1) Macromedia Flash 2 (1997) 2) Macromedia Flash 3 (1998) 3) Macromedia Flash 4 (1999) 4) Macromedia Flash 5 (2000) 5) Macromedia Flash 6 (2002) atau Macromedia Flash MX 6) Macromedia Flash 7 (2003) atau Macromedia Flash MX 2004 7) Macromedia Flash 8 (2005) 8) Adobe Flash 9 (2007) atau Adobe Flash CS3 (saat ini telah sampai pada versi

CS6).

b. Interface Flash Interface flash terdiri atas menubar, timeline, toolbox, dan panel.

Page 4: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 3

No Nama Keterangan 1 Menubar Terdiri atas menu utama, seperti file, edit, view,

insert, modify, text, commands, control, debug, windows, dan help. Pada menu file terdiri atas sub menu seperti New (membuat file kerja baru), Open (membuka file kerja), Save (menyimpan file kerja), Publish (mempublish hasil kerja menjadi format .swf/.gif/.exe/dsb) dan seterusnya.

2 Timeline Berisi frame-frame (dan keyframe) yang berfungsi sebagai tempat objek, symbol, atau animasi yang dapat diatur waktu tampilannya (waktu tampilan animasi per frame atau fps). Secara default, standar flash adalah 12 fps, yang berarti 12 gambar animasi (frame) akan dimainkan/dibaca per detiknya.

3 Toolbox Tempat sekumpulan tool untuk memilih, membuat, atau mengedit objek.

4 Stage Area kerja 5 Panel Panel dapat ditampilkan dan juga disembunyikan

(tekan F4), antara lain panel color mixer (mengatur warna lebih detail), panel action (tempat menulis ActionScript ), dan sebagainya.

6 Properties Bagian ini berfungsi untuk mengatur properties file proyek atau objek (gambar, teks, animasi) dalam stage.

Page 5: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 4

No Tool Keterangan 1 Selection

Memilih objek pada stage dengan cara mengklik objek yang diinginkan. Jika ingin memilih beberapa objek, tekan Shift +klik objek yang diinginkan.

2 Sub selection

Memodifikasi bagian dari objek yang dibuat dengan pen/pencil/rectangle tool/dsb dengan cara mengklik node pada objek tersebut dan kemudian menggesernya sesuai keinginan.

3 Lasso Memilih semua atau beberapa bagian objek secara bebas.

4 FreeTransform

Memodifikasi ukuran, putaran (rotate), skew,distort dan envelope sebuah objek. Setelah tool aktif, kemudian dapat memilih opsi yang ingin dilakukan, dimana opsi terdapat di bagian bawah toolbox.

= 5 Gradient Transform

Mengatur daerah gradiasi sebuah objek.

6 Pen Membuat garis lurus atau lengkung secara bebas

dengan membuat titik-titik (node). 7 Text

Membuat teks. Pada flash, teks terdiri atas 3 tipe : static text, dynamic text, dan input text, yang dapat dipilih melalui properties. Static text ditujukan untuk teks biasa dan label, misal label pada tombol. Dynamic text ditujukan untuk teks yang menyimpan nilai variabel dan berkenaan dengan ActionScript , misal skor nilai. Input text ditujukan untuk teks yang diketikkan oleh user, misal pada kotak isian nama.

8 Line Membuat garis lurus.

9 Rectangle Oval

PolyStar

Membuat objek kotak dan persegi panjang. Membuat lingkaran dan oval. Membuat polygon dan bintang.

10 Pencil Membuat objek garis secara bebas

Page 6: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 5

11 Brush Membuat objek garis seperti coretan kuas secara bebas.

12 Inkbottle Mengedit warna garis tepi (outline/stroke) pada sebuah objek.

13 Paintbucket Mengedit warna bagian isi (fill) pada sebuah objek.

14 Eyedropper Mengambil warna dari suatu tempat yang ada pada area kerja dan menempatkannya sebagai warna pada inkbottle atau paint bucket.

15 Eraser Menghapus objek (bisa semua objek atau hanya outline atau fillnya saja)

16 Hand Menggeser area pada stage.

17 Zoom Memperbesar atau memperkecil tampilan pada stage.

2. SYMBOL DAN INSTANCE

Symbol terdiri menjadi 3 jenis : Movie Clip, Button, dan Graphic. Seluruh objek dapat dikonversi menjadi symbol, dengan cara klik kanan pada objek terpilih kemudian pilih Convert to Symbol. Cara lainnya adalah dengan menekan F8 pada objek terpilih. Kemudian jendela Convert to symbol akan muncul dan pilih tipe symbol yang diinginkan. Semua objek yang telah dikonversi ke symbol akan secara otomatis tersimpan dalam library. Cara mengaktifkan Library dengan mengklik menu Windows > Library atau klik Ctrl+L.

No Tipe Symbol Keterangan 1 Movie Clip Symbol yang berisi objek animasi, dapat berupa obje

gambar atau bahkan tanpa gambar. Movie clip dapat diberi nama (Instance) untuk keperluan ActionScript .

2 Button Untuk membuat objek tombol yang dapat berubah warna dan suara saat kursor mouse di luar, di atas, mengklik, dan telah mengklik tombol tersebut.

Page 7: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 6

3 Graphics Dapat dibuat dari objek vektor, teks, foto, atau objek-objek statis yang tidak beranimasi.

Instances adalah duplikat symbol yang berada di library. Kita dapat menggunakan instances sebanyak yang diinginkan dan memodifikasi (mengatur skala, memutar, men-skew) instances sesuai dengan kebutuhan tanpa mengubah bentuk asli dari symbol asal. Cara membuat instances dengan cara mendrag dan drop symbol dari library ke dalam stage. Berikut contoh 4 instances yang dibuat dari symbol btn_tombol.

3. TEKNIK ANIMASI Animasi adalah beberapa gambar diam yang ditampilkan secara urut dan bergantian, dan dikarenakan keterbatasan kemampuan mata manusia menangkap gerakan pergantian tersebut, maka yang nampak di mata adalah gambar yang bergerak seperti hidup. Pada flash setiap gambar atau objek yang akan dianimasikan diletakkan ke dalam sebuah wadah disebut frame. Kecepatan banyaknya frame yang dibaca saat dimainkan disebut dengan frame per second (fps). Fps default flash adalah 12 fps (12 frame dibaca setiap detiknya). Semakin tinggi kecepatan fps, maka semakin halus hasil animasinya. Namun, semakin tinggi kecepatannya, maka semakin banyak frame yang dibutuhkan dalam waktu yang sama, dan hal tersebut akan membuat size file semakin besar dan tidak efisien. Frame ditempatkan pada timeline dan dibuat sesuai dengan kebutuhan. Konsep layer pada flash hampir sama dengan layer pada photoshop, di mana objek yang berada di dalam layer paling atas otomatis berada di atas (menutupi) objek yang ada dalam layer bawahnya. Setiap layer memiliki timeline masing-masing yang sejajar dengan timeline pada layer lainnya. Saat dimainkan, setiap timeline pada masing-masing layer akan dimainkan secara bersamaan dari awal hingga animasi berakhir.

Page 8: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 7

No Kegiatan Keterangan 1 Membuat frame Frame dibuat dengan cara klik

kanan mouse pada frame ke berapa yang ingin dibuat (misal frame ke-20), pilih Insert Frame, atau klik F5.

2 Membuat blank

keyframe Key frame adalah frame yang berperan sebagai titik referensi yang berisi momen saat berubah. Cara membuat keyframe adalah klik kanan mouse frame yang ingin diubah, lalu pilih Insert Blank Keyframe atau Convert Blank Keyframe atau tekan F7.

3 Membuat keyframe

Perbedaan keyframe dengan blank keyframe adalah jika blank keyframe yakni membuat keyframe yang kosong. Sedangkan keyframe membuat keyframe yang ada isinya, di mana isinya sendiri adalah persis seperti isi frame sebelumnya. Cara membuat keyframe adalah klik kanan mouse frame yang ingin diubah, lalu pilih Insert Keyframe atau Convert Keyframe atau tekan F6.

4 Menghapus frame Klik atau seleksi frame yang ingin dihapus > klik kanan mouse > Remove Frame.

5 Memainkan frame Jika ingin memainkan timelinennya dengan cara menekan tombol Enter. Jika ingin memainkan timeline dengan tampilan hasil outputnya dengan menekan tombol Ctrl+Enter.

Page 9: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 8

Berikut beberapa teknik animasi dalam flash : a. Frame by Frame

Teknik ini adalah teknik membuat objek pada setiap frame. Kelemahan dari teknik ini adalah kemungkinan memakan kapasitas memory komputer yang semakin besar karena banyak frame yang harus digunakan beserta isi yang berbeda-beda. Kegiatan 1 : Membuat Animasi Dancing Stickman 1) Buat 5 layer dengan nama sesuai dengan gambar 1. Pada

setiap layer sesuai dengan namanya, buat objek dengan line tool.

2) Buat keyframe pada frame ke-2 sampai 5. Modifikasi kaki kanan-kiri, tangan kanan-kiri dan kepala sesuai dengan gerakan menari dengan selection tool.

3) Tes animasi dengan menekan Ctrl+Enter.

b. Motion Tween Pada teknik ini, kita hanya cukup membuat objek pada frame awal dan frame akhir. Frame in-between akan diisi oleh flash secara otomatis. Kegiatan 2 : Animasi Sederhana Kotak 1) Pada contoh ini, kita akan membuat animasi sederhana

kotak yang bergeser dari kiri ke kanan. Buat kotak pada frame 1. Kemudian buat keyframe pada frame 10.

2) Pada frame 1 atau di antara frame 1 dan 10, klik kanan mouse dan pilih Create Motion Tween.

3) Pada frame 10, geser objek kotak ke posisi akhir yang dikehendaki yakni

sebelah kanan stage. Tes animasi dengan menekan Ctrl+Enter.

Page 10: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 9

Kegiatan 3 : Animasi Teks 1) Pada contoh ini, kita akan membuat

animasi sederhana teks selamat datang. Buat keyframe pada frame 1, 10, 15 dan 20. Frame 1 : teks “Selamat Datang” Frame 10 : teks “Selamat Datang” Frame 15 : teks “di Pelatihan Adobe Flash CS3” Frame 20 : teks “di Pelatihan Adobe Flash CS3”

2) Pada frame 1, kita buat motion tween. Kemudian klik objek teks, pada properties pilih Color : Alpha denga nilai 0%.

3) Buat keyframe pada frame 11, kemudian teks pada frame 11 dan 15 kita break apart dengan cara tekan Ctrl+B. Kemudian klik kanan mouse frame di antara frame 11 dan 15, pilih Create Shape Tween. Jika efek shape tween terlalu cepat, maka tambahkan frame in-betweennya.

Page 11: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 10

4) Buat keyframe pada frame 16. Kemudian buat motion tween seperti pada

langkah 2 pada keyframe 16. Pada keyframe 20, klik objek teks dan atur Color : Alpha dengan nilai 0%. Tes animasi dengan menekan Ctrl+Enter.

c. Motion Guide Pada teknik ini, objek akan bergerak mengikuti lintasan/jalur yang telah ditentukan. Kegiatan 4 : Animasi Motion Guide 1) Buat objek lingkaran pada frame 1.

2) Klik icon Motion Guide untuk membuat layer Guide. Dengan menggunakan

pencil tool atau brush tool buat jalur sesuka hati. Kemudian buat keyframe pada frame 25.

Page 12: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 11

3) Pada layer bola buat keyframe di frame 25 dan kemudian buat motion

tween. Pada frame terakhir atau 25, geser objek bola di ujung lintasan yang telah dibuat di layer Guide. Tes animasi dengan menekan Ctrl+Enter.

d. Masking

Kegiatan 5 : Animasi Rainbow Teks 1) Ganti nama layer 1 menjadi layer Mask. Buat objek lingkaran dengan warna

pelangi dan buat motion tween dari kiri ke kanan (frame 20). 2) Buat layer baru dan beri nama layer Teks. Posisikan layer teks di atas layer

mask. Buat teks pada layer teks. Buat keyframe di frame 20.

3) Pada layer teks, klik kanan mouse dan pilih

Mask. Tes animasi dengan menekan Ctrl+Enter.

Page 13: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 12

HARI PERTAMA

MATERI 2

1. APA ITU ACTIONSCRIPT ? ActionScript adalah bahasa pemrograman berorientasi objek yang digunakan Flash untuk mengontrol objek, symbol, gerakan animasi, tombol interaktif, perpindahan halaman, perhitungan dan lainnya. Pada modul ini, ActionScript yang digunakan adalah versi 2.0. ActionScript dapat diberikan pada movie clip, button, dan frame dengan cara mengetikkan scriptnya pada panel Action (tekan tombol F9). ActionScript pada frame (framescript) dapat diberikan pada keyframe dan blank keyframe yang berada pada timeline. Frame yang telah diberi script akan muncul tanda huruf ‘a’ kecil. ActionScript yang diletakkan di movie clip (moviescript) memiliki aturan penulisan sebagai berikut : onClipEvent (event) { baris statement atau perintah; } Ada beberapa jenis event yang dapat digunakan pada MovieScript, antara lain load, enterFrame, unLoad, MouseUp, MouseDown, KeyDown, KeyUp, dan Data. ActionScript yang diletakkan pada button memiliki aturan penulisan sebagai berikut: on (event) { baris statement atau perintah; } Event untuk ActionScript pada button antara lain press, release, rollOver, rollOut, dragOver, dragOut, dan Keypress.

2. ACTIONSCRIPT UNTUK HALAMAN SLIDE PRESENTASI Pada pembuatan presentasi atau media pembelajaran, terlebih dahulu dibuat

sebuah flowchart alur jalan media tersebut. Umumnya, beberapa menu atau pilihan yang dapat dipilih user akan ditampilkan dalam sebuah media. Pada kegiatan 1, kita akan membuat sebuah media pembelajaran dengan 4 menu utama, yakni halaman menu, halaman materi, halaman kuis, dan profil pembuat media. Kemudian, kita akan membuat 4 scene yang mewakili keempat menu tersebut.

Kegiatan 1 : Membuat Halaman Menu Utama dengan Scene a. Klik menu File > New b. Klik menu Insert > Scene. Lakukan langkah ini sejumlah halaman yang akan

dibuat (4 halaman/menu). Cara untuk melihat dan mengedit scene yang telah dibuat dengan cara klik menu Windows > Other Panels > Scene.

Page 14: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 13

Saat kembali ke timeline utama, secara otomatis kita akan berada pada scene paling atas (dalam kasus ini scene Menu). Jika ingin berpindah ke scene lainnya, misalnya scene Materi, dengan cara klik icon Edit Scene yang terletak di bagian bawah pojok kanan timeline utama, kemudian klik scene yang diinginkan.

c. Pastikan semua frame ke 1 pada setiap scene diberi script stop();. Caranya

dengan mengklik frame ke1, tekan tombol F9, dan ketik script stop(); pada panel action. Empat halaman/menu utama sudah berhasil dibuat dan untuk selanjutnya dapat diisi sesuai dengan skenario. Dalam menghubungkan satu scene ke scene lainnya, maka pengontrolan akan dilakukan melalui tombol navigasi yang dijelaskan pada bagian selanjutnya.

3. ACTIONSCRIPT UNTUK TOMBOL NAVIGASI Pemberian ActionScript pada tombol navigasi berkaitan dengan Mouse event atau sebuah event handler dalam flash. Mouse event ini diberikan pada tombol yang akan dikontrol melalui mouse atau input sejenisnya (touchscreen). Kegiatan 2. Berpindah halaman/scene a. Buat obyek bebas pada frame ke1 dalam setiap scene yang telah dibuat pada

kegiatan 1. b. Pada scene Menu, buat tiga buah tombol bernama btn_materi, btn_kuis, dan

btn_profil.

Page 15: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 14

c. Pada tombol btn_materi, beri script berikut :

Tombol btn_kuis :

Tombol btn_profil :

d. Beri label pada frame ke 1 di scene Materi dengan nama materi, scene Kuis

dengan nama kuis, dan scene Profil dengan nama profil. Tes tombol dengan menekan Ctrl+Enter.

Kegiatan 3. Berpindah frame/slide pada scene yang sama a. Buat dua buah tombol dengan nama btn_next dan btn_prev. Kemudian, buat

keyframe dari frame 2 sampai dengan 5.

Page 16: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 15

b. Beri script pada btn_next dan btn_prev secara berurut :

btn_next btn_prev c. Tes tombol dengan menekan Ctrl+Enter.

4. ACTIONSCRIPT UNTUK AUDIO

Kegiatan 4. Kontrol Musik Latar a. Buat dua buah tombol bernama btn_play dan btn_stop.

b. Import file musik (*.mp3) ke dalam library dengan cara klik menu File > Import >

Import to Library. c. Buka library, klik kanan mouse file mp3 dan pilih Linkage. Isi Identifier : musik

dan centang opsi Export for ActionScript dan Export in First Frame.

d. Beri script pada frame 1 :

e. Beri script pada tombol btn_play dan btn_stop secara berurutan :

btn_play

btn_stop f. Tes tombol musik dengan menekan Ctrl+Enter.

Script untuk memberhentikan semua suara yang ada di dalam movie sebagai berikut:

Page 17: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 16

5. ACTIONSCRIPT UNTUK VIDEO Kegiatan 5. Kontrol Video dengan ActionScript a. Import file movie ke dalam stage dengan cara klik menu File > Import > Import

Video. b. Klik tombol Browse dan cari tempat dimana file video disimpan, kemudian klik

tombol Next. c. Centang opsi Embed Video in SWF and play in timeline dan klik tombol Next. d. Pada opsi symbol type pilih Movie Clip dan klik tombol Next sampai dengan

halaman akhir klik tombol Finish. e. File video telah berhasil diimport ke stage dalam bentuk movie clip. Beri nama

instances movi clip tersebut dengan mc_video.

f. Buat tiga buah tombol dengan nama btn_play, btn_stop, dan btn_back.

g. Beri script pada tombol btn_play, btn_stop, dan btn_back.

btn_play

btn_stop

btn_back h. Tes video dengan menekan Ctrl+Enter.

Page 18: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 17

Gambar langkah-langkah b – d kegiatan 5 :

Kegiatan 6. Kontrol Video dengan FLV Playback Sebelum mengimpor file video, file video perlu dikonversi terlebih dahulu menjadi *.flv. Flash sendiri menyertakan video encoder secara bersamaan saat kita menginstall adobe flash.

Page 19: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 18

a. Siapkan file movie berformat *.flv. Klik menu Windows > Components. Pada

panel Components, klik tanda (+) pada Media dan pilih FLV Playback. Drag dan drop komponen FLV Playback ke dalam stage.

b. Pada bagian property, pilih Parameter. Klik kotak contentPath dan cari tempat kita menyimpan file video berformat *.flv.

c. Kita juga bisa memilih skin atau tampilan video player dengan cara klik kotak skin pada bagian property dan pilih Mojeve-OverNoVol.swf pada opsi Skin.

Page 20: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 19

f. Tes video dengan menekan Ctrl+Enter.

Page 21: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 20

HARI KEDUA

MATERI 3

1. PEMBUATAN TOMBOL KELUAR, MAXIMIZE, DAN MINIMIZE Kegiatan 1 : Pembuatan Tombol Keluar a. Buat tiga buah button dengan nama btn_keluar, btn_ya, dan btn_tidak.

b. Klik btn_keluar dan konversi kembali menjadi movie clip.

c. Di dalam movie clip mc_keluar, buat keyframe di frame 2 dan masukkan tombol

btn_ya dan btn_tidak. Pada frame 1 berisi tombol btn_keluar dan diberi script stop();.

Page 22: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 21

d. Tombol btn_ya dan btn_tidak secara berurut diberi script berikut :

Kegiatan 2 : Pembuatan Tombol Maximize dan Minimize a. Buat tiga buah button dengan nama btn_max dan btn_min. b. Beri script pada tombol btn_max :

c. Beri script pada tombol btn_min :

2. PEMBUATAN KUIS SEDERHANA Dalam pembuatan media pembelajaran, perlu adanya sebuah kuis sebagai umpan balik dari materi yang telah diberikan sebelumnya kepada user. Flash sendiri menyediakan template kuis yang bisa dibuat hanya dengan memasukkan soal dan jawaban. Selain itu, kuis juga dapat dibuat dengan menggunakan ActionScript. Pada bagian ini, kuis yang akan dibuat menggunakan ActionScript dan berkarakteristik sebagai berikut : 1. Berjumlah 10 soal; 2. Memiliki 4 pilihan jawaban (a, b, c, atau d); 3. Skor benar akan bertambah 10 dan salah tidak bertambah serta berkurang

dengan skor total 100; 4. Nilai standar kelulusan (KKM) adalah 60; 5. Waktu pengerjaan kuis adalah 1200 detik atau 20 menit; dan 6. Soal acak. Berikut langkah-langkah pembuatan kuis pilihan ganda sederhana dengan menggunakan ActionScript : 1. Kuis akan dibuat pada scene Kuis yang telah dibuat di latihan sebelumnya. 2. Berikut timeline akhir halaman kuis :

Page 23: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 22

3. Pada frame 1 ditujukan sebagai halaman awal yang berisi keterangan dan

petunjuk pengerjaan kuis. Beri script berikut pada frame ini.

4. Masih pada frame 1, buat sebuah tombol bernama btn_mulai sebagai navigasi

untuk memulai soal pertama. Kemudian beri script berikut :

5. Frame ke 2 sampai dengan 11

ditujukan untuk halaman soal, dimana soal pada kuis ini berjumlah 10 soal. Frame-frame tersebut diberi script stop();.

Page 24: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 23

6. Tombol btn_pilih dibuat dengan blank keyframe pada Up, Over, dan Down.

7. Beri script berikut pada tombol btn_pilih yang benar :

8. Beri script berikut pada tombol btn_pilih yang salah :

9. Pembuatan movie clip waktu berisikan teks dinamis yang menunjukkan waktu

yang semakin berkurang. Movie clip ini diberi nama instances : waktu.

Script pada frame ke 24 :

10. Kopi paste isi frame 2 ke frame 3 sampai dengan 11 dan ubah soal dan pilihan

jawabannya. 11. Frame ke 12 ditujukan untuk halaman hasil pengerjaan soal. Pada frame ini, buat

beberapa teks seperti pada gambar berikut.

Page 25: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 24

12. Beri script berikut pada frame ke 12 :

13. Agar user dapat mengulang mengerjakan soal, maka pada frame 12 buat sebuah

tombol bernama btn_ulang dan beri script berikut.

14. Tes kuis dengan menekan Ctrl+Enter.

Page 26: Modul Pelatihan Adobe Flash CS3 2014

12 – 13 April 2014

Pelatihan Adobe Flash CS3 Athika Utami ǀ [email protected] 25

3. PUBLISH Saat file proyek disimpan, secara otomatis akan ada dua file yang muncul, yakni file *.fla dan *.swf (shock wave flash). Selain *.swf, ada beberapa ekstensi yang bisa kita buat melalui flash ini, sepert *.gif dan *.exe. Langkah mempublish file flash dengan klik menu File > Publish Settings.., maka akan muncul jendela berikut.

Pilih tipe file, misalnya *.exe agar media dapat dijalankan di lintas platform (berbagai sistem operasi) dan lokasi tempat penyimpanan yang diinginkan lalu klik Publish.

** Semoga Bermanfaat, Selamat Berkreasi ! **