ANIMASI DAN INTERAKSI MENGGUNAKAN MACROMEDIA FLASH

DIGITAL INNOVATION CENTER (DIGINNOVAC) Jl. Halmahera II / 31 Semarang

DAFTAR ISI

1. 2.

PENGANTAR ANIMASI .......................................................................................1 TEKNIK ANIMASI ................................................................................................1 2.1 2.2 2.3 Frame-by-Frame ..............................................................................................2 Shape Tweening...............................................................................................2 Motion Tweening.............................................................................................2

3. 4. 5. 6. 7.

TEKNIK MASKING...............................................................................................3 TEKNIK MOTION GUIDE ....................................................................................8 PROYEK ANIMASI I PROYEK ANIMASI II LOADING MOVIE ........................................................ 10 SIMULASI JARINGAN ...............................................12

PENGANTAR ACTIONSCRIPT ..........................................................................21 7.1 Menggunakan Panel Actions..........................................................................21

8. 9.

MENGGUNAKAN BUTTON............................................................................... 22 KONTROL NAVIGASI MOVIE...........................................................................24

10. KONTROL MOVIE CLIP.....................................................................................35 10.1 10.2 Mengontrol Animasi dalam Movie Clip .........................................................35 Mengontrol Properti Movie Clip ....................................................................38

KATA PENGANTAR

Perkembangan teknologi informasi, khususnya dalam bidang multimedia, banyak mempengaruhi sistem belajar mengajar. Dulu proses belajar mengajar masih bersifat konvensional: dosen, mahasiswa, ruang kelas untuk tatap muka, dan buku sebagai referensi. Saat ini proses belajar mengajar bisa dilakukan dalam dunia maya (baca: online). Proses belajar mengajar bisa dilakukan tanpa harus berada di dalam kelas, melainkan secara on-line. Demikian halnya referensi menjadi lebih kaya, mahasiswa tidak hanya menggunakan buku sebagai referensi, tetapi referensi digital bersifat interaktif, yang dapat menampilkan simulasi dalam format animasi atau video bisa digunakan sebagai suplemen, atau bahkan mungkin menggeser buku sebagai referensi primer. Mendukung fakta di atas, tentunya penguasaan program-program aplikasi multimedia sangat diperlukan agar dapat mengikuti perkembangan proses belajar mengajar. Salah satu program aplikasi multimedia yang popular, yang mempunyai fitur lengkap adalah Macromedia Flash. Program ini menawarkan pembuatan animasi, dan disertai skrip (ActionScript) untuk menyisipkan interaksi. Kemudahan pengoperasian dan kelengkapan fiturnya membuat Macromedia Flash sangat tepat untuk membuat referensi digital. Digital Innovation Center atau Diginnovac, sebuah institusi yang bergerak di bidang Teknologi Informasi yang salah satu unit usahanya adalah pembuatan Multimedia Pembelajaran Interaktif menyusun modul ini sebagai referensi pembuatan animasi dan interaksi menggunakan program Macromedia Flash. Akhir kata penyusun berharap modul ini dapat bermanfaat untuk pengembangan ilmu teknologi informasi, lebih khususnya untuk pengembangan sistem belajar berbasis multimedia.

Tim Penyusun Diginnovac

1.

PENGANTAR ANIMASI

Animasi adalah sebagai proses perubahan bentuk atau properti obyek yang ditampilkan dalam kurun waktu tertentu. Contoh: Animasi perubahan bentuk dari kotak menjadi lingkaran. Animasi perubahan properti koordinat x dan y objek (bergeser). Animasi perubahan properti warna dari kuning menjadi merah. Animasi perubahan properti ukuran, dari kotak kecil menjadi kotak besar.

Durasi adalah waktu yang ditempuh untuk menyelesaikan suatu tampilan animasi. Contoh, tampilan animasi pergeseran posisi obyek dari koordinat awal ke koordinat akhir diselesaikan dalam waktu 5 detik. Dalam Macromedia Flash, pengaturan durasi dilakukan dengan menggunakan frame rate dengan unit pengukurannya fps (frame per second). Penentuan nilai fps berarti menentukan jumlah frame yang akan diputar dalam waktu 1 detik. Sebagai contoh, jika suatu movie Flash menggunakan frame rate: 12 fps, maka movie akan dimainkan dengan memutar 12 frame dalam 1 detik.

CATATAN Frame merupakan tempat objek-objek movie diletakkan.

2.

TEKNIK ANIMASI

Terdapat tiga teknik dasar pembuatan animasi, yaitu: frame-by-frame, tweening dan skrip. Masing-masing teknik dapat dieksplorasi untuk membuat berbagai tampilan

Animasi dan Interaksi Menggunakan Macromedia Flash

animasi. Selain itu terdapat teknik tambahan yang bisa digunakan untuk memperkaya tampilan animasi, seperti Motion Guide dan Masking.

2.1

Frame-by-Frame

Teknik frame-by-frame merupakan teknik merangkai urutan gambar yang diletakkan pada sejumlah frame. Pada dasarnya pembuatan animasi frame-by-frame memerlukan minimal dua frame. Jika pada frame 1 diletakkan objek lingkaran warna merah, pada frame 2 diletakkan objek lingkaran warna kuning, maka pada saat movie dimainkan akan tampil animasi warna kelip merah dan kuning.

2.2

Shape Tweening

Teknik shape tweening digunakan untuk menganimasi objek shape (kurva), seperti lingkaran, persegiempat, poligon, atau bentuk bebas. Teknik pembuatannya adalah: 1. Membuat objek shape pertama pada frame awal. 2. Membuat objek shape kedua pada frame akhir. 3. Memberikan tweening shape di antara frame awal dan frame akhir.

2.3

Motion Tweening

Teknik tweening tipe motion, atau motion tweening, digunakan untuk menganimasi objek objek, seperti teks, group objek, dan symbol. Cara membuatnya sama seperti teknik tweening shape: 1. Mengatur objek pada frame awal. 2. Mengatur objek pada frame akhir. 3. Memberikan tweening motion di antara frame awal dan frame akhir.

Animasi dan Interaksi Menggunakan Macromedia Flash

CATATAN Identifikasi pemilihan tipe tweening yang lebih mudah adalah: Objek yang jika terseleksi ditampilkan dengan titiktitik putih hanya bisa diterapkan tweening shape. Objek yang jika terseleksi ditampilkan dengan kotak warna biru di sekelilingnya hanya bisa diterapkan tweening motion.

Gambar 1: Perbedaan tampilan seleksi antara objek shape dan non-shape

3.

TEKNIK MASKING

Teknik masking digunakan untuk menampilkan objek yang berada dalam layer yang dimasked berdasarkan area yang bersimpangan dengan objek yang berada dalam layer mask. Sebagai contoh, Gambar 2 mengilustrasikan tampilan sebelum penerapan masking, objek kotak berada di Layer 2 (

Animasi dan Interaksi Menggunakan Macromedia Flash

Animasi dan Interaksi Menggunakan Macromedia Flash

yang atas) dan teks berada di Layer 1, terlihat bahwa karakter dalam teks yang berada di bawah objek kotak tidak terlihat. Sedangkan Gambar 3 mengilustrasikan tampilan setelah diterapkan masking, yaitu Layer 2 tempat objek kotak berada dijadikan layer mask, dan Layer 1 tempat teks berada dijadikan layer yang di-masked. Tampilan menjadi kebalikan dengan sebelum diterapkan mask, karakter dalam teks yang berada di bawah objek kotak menjadi terlihat, dan yang berada di luar objek kotak menjadi tidak terlihat.

Gambar 2: Tampilan sebelum penerapan masking

Gambar 3: Tampilan setelah diterapkan masking

Berikut akan dipraktekkan teknik animasi masking untuk membuat animasi teks. 1. Buatlah dokumen baru dengan properti sesuai keinginan. 2. Pada Layer 1 ketikkanlah sembarang teks, misalnya DIGINNOVAC.
Animasi dan Interaksi Menggunakan Macromedia Flash 5

Gambar 4: Menuliskan teks pada Layer 1

3. Pada panel Timeline tambahkanlah layer baru dengan mengklik tombol New Layer yang terletak di bagian bawah panel. 4. Pada layer baru, Layer 2, buatlah objek persegiempat tanpa warna stroke, dengan ukuran dan posisi seperti contoh pada Gambar 4.

Gambar 5: Membuat objek kotak pada Layer 2

5. Animasi masking akan dibuat menggunakan 10 frame, dan objek yang dianimasi adalah objek kotak, sedangkan teks akan terlihat statis. Oleh karena itu pada Layer 1 tempat teks berada, klik kanan frame 10, kemudian klik menu Insert Frame. Sedangkan pada Layer 2 tempat objek kotak berada, klik kanan frame 10, kemudian klik menu Insert Keyframe. 6. Kotak akan diskala sehingga ukurannya dapat menutup tampilan teks. Aktifkanlah tool Free Transform pada Toolbox, kemudian seleksilah objek kotak pada Layer 2 frame 10. Terapkanlah transformasi skala pada objek sehingga ukurannya menutup semua tampilan teks.

Animasi dan Interaksi Menggunakan Macromedia Flash

Gambar 6: Menerapkan transformasi pada kotak

7. Pada Layer 2 tempat objek kotak berada, klik salah satu frame di antara frame 1 dan 10, misalnya frame 5, kemudian pada panel Properties pilihlah Shape pada kotak Tweeen untuk menerapkan animasi shape tweening. 8. Pada panel Timeline posisikanlah playback pada frame 1, yaitu dengan mengklik frame 1 atau menyeret playback ke frame 1. Tekan tombol Enter pada keyboard untuk memainkan animasi pada jendela pengeditan. Terlihat bahwa ukuran kotak semakin melebar sehingga menutupi teks di bawahnya. 9. Selanjutnya adalah menerapkan masking. Pada panel Timeline klik kanan nama Layer 2 (tempat kotak berada), kemudian klik menu Mask untuk membuat Layer 2 menjadi mask, dan layer di bawahnya, yaitu Layer 1 menjadi layer yang dimasked. 10. Pada panel Timeline posisikanlah playback pada frame 1, yaitu dengan mengklik frame 1 atau menyeret playback ke frame 1. Tekan tombol Enter pada keyboard untuk memainkan animasi pada jendela pengeditan. Terlihat bahwa teks yang semula tidak terlihat menjadi terlihat sesuai animasi pada objek kotak.

Animasi dan Interaksi Menggunakan Macromedia Flash

Gambar 7: Hasil menerapkan animasi teknik masking

CATATAN Pada jendela pengeditan Flash, efek tampilan teknik masking dapat terlihat apabila layer mask dan yang di-masked dalam keadaan terkunci.

4.

TEKNIK MOTION GUIDE

Macromedia Flash memungkinkan Anda untuk membuat animasi pergeseran posisi obyek dengan menentukan garis lintasannya, yaitu menggunakan layer Motion Guide. Motion guide adalah layer yang di dalamnya terdapat obyek garis (baik lurus, melengkung, atau bebas) yang digunakan sebagai garis lintasan pergeseran obyek yang berada di layer bawahnya (layer target guide). Dari istilahnya, yaitu motion guide, tentunya bisa disimpulkan bahwa teknik animasi ini hanya dapat diterapkan pada motion tweening. Berikut ini akan dipraktekkan pembuatan animasi dengan menggunakan teknik motion guide. 1. Buatlah movie baru dengan properti sesuai yang ditentukan program. 2. Gambarlah obyek lingkaran, kemudian konversikan menjadi symbol Graphic (klik menu Modify > Convert to Symbol).

Animasi dan Interaksi Menggunakan Macromedia Flash

Gambar 8: Membuat symbol Graphic

3. Di dalam layer instance symbol Graphic tersebut, sisipkan keyframe, misalnya pada frame 20. 4. Klik kanan salah satu frame di antara frame 1 dan 20, kemudian pilihlah menu Create Motion Tween. 5. Di dalam jendela Timeline, klik tombol Add Motion Guide yang terletak di bagian bawah jendela, maka akan tampil layer baru (layer Motion Guide). 6. Di dalam layer Motion Guide, gambarlah garis seperti contoh yang terlihat pada Gambar 9.

Gambar 9: Membuat layer Motion Guide

7. Langkah selanjutnya di dalam frame awal (frame 1), Anda harus memposisikan obyek (instance symbol Graphic) tepat pada ujung garis. Demikian halnya di

Animasi dan Interaksi Menggunakan Macromedia Flash

dalam frame akhir (frame 20). Untuk memudahkan pengaturan posisi obyek, Anda dapat mengunci layer Motion guide, dan mengaktifkan tombol Snap (ikon magnet) yang terletak di dalam Toolbox. 8. Lakukan test movie, setelah itu simpan latihan ini. Jika movie dimainkan di dalam jendela pengeditan movie Flash, obyek garis (lintasannya) masih terlihat. Namun jika Anda menampilkan movie di dalam Flash Player, obyek garis tidak akan terlihat.

5.

PROYEK ANIMASI I LOADING MOVIE

Proyek animasi pertama yang akan dipraktekkan adalah membuat loading movie. 1. Buatlah movie baru dengan properti sesuai yang ditentukan program. 2. Pada frame 1 layer 1 ketikkanlah teks, misalnya loading atau please wait atau yang lainnya.

Gambar 10: Menuliskan teks loading

3. Pada panel Timeline tambahkanlah layer baru, kemudiang gambarlah obyek untuk dijadikan progress status, misalnya persegiempat atau lingkaran (Gambar 11).

Gambar 11: Menggambar objek untuk dijadikan progress status

Animasi dan Interaksi Menggunakan Macromedia Flash

10

4. Pada panel Timeline layer 2, tempat objek progress status berada, klik kanan frame 2, kemudian klik menu Insert Keyframe. 5. Dengan objek masih dalam keadaan terseleksi, tekan tombol Ctrl+C pada keyboard untuk menggandakannya. 6. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place) untuk meletakkan hasil penggandan pada tempat yang sama, lanjutkanlah dengan langsung menekan tombol panah ke kanan (sambil dihitung jumlah ketukan penekanan tombol tersebut) untuk menggeser posisi objek hasil penggandaan, misalnya 7 ketukan.

Gambar 12: Menggandakan dan menggeser posisi objek

7. Pada panel Timeline layer 2, klik kanan frame 3, kemudian klik menu Insert Keyframe. 8. Hilangkan seleksi objek pada keyframe 3 dengan mengklik di luar area objek. 9. Klik objek ke dua untuk menyeleksinya, kemudian tekan tombol Ctrl + C untuk menggandakannya. 10. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place) untuk meletakkan hasil penggandan pada tempat yang sama, lanjutkanlah dengan langsung menekan tombol panah ke kanan sebanyak jumlah ketukan yang telah dilakukan sebelumnya. Jika sebelumnya menekan sebanyak 7 ketukkan, maka ulangilah jumlah tersebut agar jarak antara objek menjadi rata.

Gambar 13: Menggandakan dan menggeser posisi objek

11. Ulangi langkah di atas, yaitu menyisipkan keyframe, menggandakan dan menggeser posisi objek, sebanyak yang diinginkan. Jika akan menggunakan tujuh objek, maka keyframe yang digunakan juga 7.

Animasi dan Interaksi Menggunakan Macromedia Flash

11

Gambar 14: Contoh menggunakan tujuh objek dan tujuh keyframe

12. Selanjutnya adalah mengatur agar teks pada layer 1 ditampilkan dengan durasi yang sama seperti objek pada layer 2. Jika objek pada layer 2 menggunakan 7 keyframe, maka pada layer 1 klik kanan frame 7 kemudian klik menu Insert Frame (Gambar 15). 13. Tekan tombol Ctrl + Enter untuk melakukan test movie. 14. Simpanlah proyek ini.

Gambar 15: Mengatur durasi tampil teks

6.

PROYEK ANIMASI II SIMULASI JARINGAN

Animasi dan Interaksi Menggunakan Macromedia Flash

12

Proyek animasi kedua adalah membuat simulasi jaringan komputer.

1. Buatlah movie baru dengan properti sesuai yang ditentukan program. 2. Klik menu File > Import kemudian imporlah file komputer.wmf.

Gambar 16: Mengimpor file komputer.wmf

3. Agar memudahkan pengeditan, groupkan gambar tersebut, klik menu Modify > Group. 4. Atur ulang ukuran gambar komputer untuk disesuaikan ukuran panggung, kemudian gandakanlah sebanyak 2 kali. 5. Aturlah posisi ketiga gambar komputer sehingga terlihat seperti Gambar 17.

Gambar 17: Menggandakan gambar komputer

Animasi dan Interaksi Menggunakan Macromedia Flash

13

6. Untuk mempercantik tampilan, salah satu gambar komputer, yaitu yang berada paling kanan akan di-mirror. Klik gambar tersebut, kemudian klik menu Modify > Transform > Flip Horizontal.

Gambar 18: Membalik (Flip Horizontal) gambar komputer yang posisinya paling kanan

7. Pada panel Timeline tambahkan frame pada layer 1. Klik kanan frame 80 kemudian klik menu Insert Frame. Untuk memudahkan pengeditan kuncilah layer ini. 8. Pada panel Timeline tambahkanlah layer baru. 9. Aktifkanlah tool Line, kemudian pada panel Properties ubahlah ukuran width menjadi 6 atau 8, dan pilihlah warna sesuai keinginan.

Gambar 19: Mengatur properti tool Line

10. Pastikanlah layer yang aktif adalah layer 2, kemudian gambarlah garis vertical seperti contoh pada Gambar 20.

Animasi dan Interaksi Menggunakan Macromedia Flash

14

Gambar 20: Menggambar garis vertikal

11. Pada layer 2 klik kanan frame 10 kemudian klik menu Insert Keyframe. 12. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis. Untuk mempermudah pengeditan Anda dapat mengaktifkan tombol Snap (ikon magnit) yang terletak pada Toolbox.

Gambar 21: Memperpanjang garis

13. Pada layer 2 klik salah satu frame di antara frame 1 dan 10, kemudian pada panel Properties pilihlah Shape pada kotak Tween.

Animasi dan Interaksi Menggunakan Macromedia Flash

15

14. Selanjutnya adalah membuat animasi garis jaringan berikutnya. Pada panel Timeline tambahkanlah layer baru (layer 3). Dan untuk memudahkan pengeditan kuncilah layer 2.

Gambar 22: Menggambar garis horizontal pada frame 10 layer 3

Gambar 23: Gambar garis horizontal dimulai dari frame 10

15. Klik kanan frame 10 layer 3, kemudian klik menu Insert Keyframe. 16. Klik frame 10 layer 3, kemudian gambarlah garis horizontal menyambung ujung garis sebelumnya ke arah kanan, seperti contoh pada Gambar 22. 17. Pada layer 3 klik kanan frame 20 kemudian klik menu Insert Keyframe. 18. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis. 19. Pada layer 3 klik salah satu frame di antara frame 10 dan 20, kemudian pada panel Properties pilihlah Shape pada kotak Tween.

Animasi dan Interaksi Menggunakan Macromedia Flash

16

Gambar 24: Memperpanjang garis pada layer 3

Gambar 25: Menganimasi garis pada layer 3

20. Selanjutnya adalah membuat animasi garis jaringan berikutnya. Pada panel Timeline tambahkanlah layer baru (layer 4). Dan untuk memudahkan pengeditan kuncilah layer 3. 21. Klik kanan frame 10 layer 4, kemudian klik menu Insert Keyframe. 22. Klik frame 10 layer 4, kemudian gambarlah garis horizontal menyambung ujung garis sebelumnya ke arah kiri, seperti contoh pada Gambar 26. 23. Pada layer 4 klik kanan frame 20 kemudian klik menu Insert Keyframe. 24. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis (Gambar 27).
Animasi dan Interaksi Menggunakan Macromedia Flash 17

25. Pada layer 4 klik salah satu frame di antara frame 10 dan 20, kemudian pada panel Properties pilihlah Shape pada kotak Tween.

Gambar 26: Menggambar garis pada frame 10 layer 4

Gambar 27: Memperpanjang garis

Animasi dan Interaksi Menggunakan Macromedia Flash

18

Gambar 28: Menganimasi garis pada layer 4

26. Jumlah frame yang digunakan adalah 80. Perpendeklah durasinya. Seleksilah frame yang tidak digunakan, kemudian klik kanan di atas frame yang terseleksi dan klik menu Remove Frames. 27. Selanjutnya adalah menambah garis sebagai track (jalur) animasi. Posisikanlah playback pada frame terakhir. Bukalah kunci semua layer, kecuali layer 1 (gambar komputer), kemudian klik menu Edit > Select All untuk menyeleksi semua garis yang berada pada frame terakhir.

Gambar 29: Menyeleksi semua garis pada frame terkahir

28. Klik menu Edit > Copy untuk menggandakan garis yang terseleksi. 29. Pada panel Timeline tambahkanlah layer baru (layer 5), kemudian klik menu Edit Paste in Place untuk meletakkan hasil penggandaan pada tempat yang sama.

Animasi dan Interaksi Menggunakan Macromedia Flash

19

30. Klik frame 1 layer 5 untuk menyeleksi garis, kemudian gantilah warnanya (stroke).

Gambar 30: Mengganti warna stroke garis pada layer 5

31. Garis pada layer 5 merupakan objek track animasi, oleh karena itu urutan layer 5 harus berada di bawah layer animasi garis. Pada panel Timeline seretlah nama layer 5 ke bawah layer animasi garis.

Gambar 31: Mengatur urutan layer 5

32. Animasi akan terlihat lebih cantik jika gambar komputer berada di atas garis. Oleh karena itu aturlah layer 1, tempat gambar komputer berada, sehingga berada pada urutan paling atas.

Animasi dan Interaksi Menggunakan Macromedia Flash

20

Gambar 32: Mengatur urutan layer 1 sehingga berada paling atas

33. Tekan tombol Ctrl + Enter untuk melakukan test movie. 34. Simpanlah praktek ini

7.

PENGANTAR ACTIONSCRIPT

ActionScript adalah bahasa pemrograman Macromedia Flash yang digunakan untuk mengontrol movie dan obyek-obyeknya. ActionScript dapat diterapkan pada frame di dalam panel Timeline, button, dan movie clip. Actions yang diterapkan pada frame akan dieksekusi pada saat playhead mencapai frame tersebut. Sebagai contoh, pada frame 20 diterapkan action stop(); maka setelah playhead mencapai frame 20 movie akan dihentikan. Actions yang diterapkan pada button atau movie clip akan dieksekusi setelah terjadinya suatu aksi, misalnya tombol mouse diklik, digeser, movie clip diseret, dan yang lainnya. Aksi tersebut biasa disebut dengan event. Contohnya release, rollover, dan yang lainnya.

7.1

Menggunakan Panel Actions

Panel Actions digunakan untuk menulis dan mengelola actions. Panel ini dapat ditampilkan atau disembunyikan dengan mengklik menu Window > Development Panels > Actions.

Animasi dan Interaksi Menggunakan Macromedia Flash

21

Actions dapat diterapkan pada frame, button, atau movie clip. Penulisan actions dapat dilakukan dengan memilih obyeknya, kemudian melakukan cara sebagai berikut. Dalam kolom daftar actions, klik ganda actions maka kode actions akan ditampilkan di dalam kolom penulisan actions. Dalam kolom penulisan actions, klik tombol Add (+) kemudian klik actions di dalam menu yang tampil (Gambar 33), maka kode actions akan ditampilkan di dalam kolom penulisan actions. Dalam kolom penulisan actions, ketikkan secara langsung kode actions.

Gambar 33: Panel Actions

CATATAN Jika frame yang terpilih, maka di dalam panel Actions akan ditampilkan informasi Actions Frame. Jika button yang terpilih, maka di dalam panel Actions akan ditampilkan informasi Actions Button. Jika movie clip yang terpilih,

maka di dalam panel Actions akan ditampilkan informasi Actions Movie Clip.

8.

MENGGUNAKAN BUTTON
22

Animasi dan Interaksi Menggunakan Macromedia Flash

Symbol Button digunakan untuk membuat interaksi di dalam movie. Sebagai contoh, audien dapat mengklik tombol untuk menghentikan playhead. Symbol Button terdiri dari empat bagian, yaitu: Bagian Up merupakan tampilan awal tombol. Bagian Over merupakan tampilan pada saat pointer berada di atas tombol. Bagian Down merupakan tampilan pada saat tombol mouse ditekan. Bagian Hit merupakan tampilan pada saat tekanan pada tombol mouse dilepaskan (diklik). Berikut ini akan dipraktekkan pembuatan symbol Button. 1. Buatlah movie baru dengan properti sesuai yang ditentukan program.. 2. Klik menu Insert > New Symbol, kemudian lakukan pengaturan di dalam kotak dialog Create New Symbol sebagai berikut. Ketikkan tbl enter di dalam kotak Name. Pilihlah opsi Button di dalam kolom Behavior. Klik tombol OK maka akan tampil jendela pengeditan symbol Button tbl enter.

Gambar 34: Membuat objek pada frame UP

3. Di dalam jendela pengeditan symbol Button tbl enter frame Up, gambarlah obyek persegiempat, kemudian tambahkan layer baru dan ketikkan teks ENTER, seperti

Animasi dan Interaksi Menggunakan Macromedia Flash

23

contoh yang terlihat pada Gambar 34. Pembuatan obyek di dalam frame Up merupakan tampilan tombol tanpa adanya aksi terhadap tombol tersebut. 4. Sisipkan keyframe di dalam frame Over untuk semua layer (teks dan persegiempat), kemudian Anda dapat mengedit warna baik obyek teks atau persegiempat. Pembuatan obyek di dalam frame Over merupakan tampilan tombol pada saat pointer berada di atas area tombol. 5. Ulangi langkah penyisipan frame di dalam frame Down dan Hit, dengan mengedit tampilan obyek di masing-masing frame tersebut. 6. Kembalilah ke jendela pengeditan movie utama dengan mengklik tombol Scene yang terletak di bagian atas panel Timeline. 7. Tampilkan panel Library kemudian seret symbol Button tbl enter ke dalam panggung. 8. Lakukan test movie. Meskipun sudah terdapat tombol di dalam movie, dan sudah dilakukan aksi pada tombol tersebut (rollover, klik), belum terlihat adanya perubahan di dalam movie. Hal ini dikarenakan tombol tersebut belum dituliskan actions.

CATATAN Pembuatan symbol button tidak mengharuskan penggunaan keempat state. Anda bisa menggunakan hanya dua state, misalnya state up dan over untuk membuat satu tombol.

9.

KONTROL NAVIGASI MOVIE

Animasi dan Interaksi Menggunakan Macromedia Flash

24

Action yang biasa digunakan untuk mengontrol navigasi di dalam movie, adalah play( ), stop( ), gotoAndPlay( ), gotoAndStop( ). Action tersebut menggunakan frame sebagai parameter untuk berhenti atau dimainkan. Identifikasi parameter bisa menggunakan nomor frame, atau label frame. Pernyataan di bawah ini berarti memerintahkan movie melompat ke frame 10 kemudian berhenti (playhead berhenti di frame tersebut). gotoAndStop ( 10 ) ; Di bawah ini adalah ilustrasi movie Flash yang akan dibuat di dalam praktek ini. Di dalam panggung terdapat monitor, dan lima tombol yaitu buku, jam, topi, kaca, awal (Gambar 35). Jumlah frame yang digunakan di dalam movie ini adalah 5, dengan isi di setiap frame adalah: Frame 1: monitor tidak menampilkan gambar. Frame 2: monitor menampilkan gambar buku. Frame 3: monitor menampilkan gambar jam. Frame 4: monitor menampilkan gambar topi. Frame 5: monitor menampilkan gambar kaca.

Gambar 35: Tampilan movie

Navigasi yang akan dibuat adalah:

Animasi dan Interaksi Menggunakan Macromedia Flash 25

Pertama kali movie dimainkan, movie tidak menampilkan gambar. Jika tombol buku diklik maka monitor akan menampilkan gambar buku. Jika tombol jam diklik maka monitor akan menampilkan gambar jam. Jika tombol topi diklik maka monitor akan menampilkan gambar topi. Jika tombol kaca diklik maka monitor akan menampilkan gambar kaca. Jika tombol awal diklik maka movie akan kembali ketampilan awalnya, yaitu monitor tidak menampilkan gambar.

Berikut akan dipraktekkan pembuatan navigasi dalam movie. 1. Buatlah dokumen baru dengan properti sesuai keinginan. 2. Pada panel Timeline gantilah nama layer 1 menjadi Latar, kemudian buatlah objek persegiempat dengan ukuran dan posisi sesuai ukuran panggung. 3. Pada panel Timeline buatlah layer baru dan berikanlah nama monitor, kemudian buatlah objek persegiempat untuk dijadikan media untuk menampilkan gambar.

Gambar 36: Membuat latar belakang dan monitor untuk menampilkan gambar

4. Selanjutnya adalah membuat tombol-tombol. Pada panel Timeline buatlah layer baru dan berikanlah nama tombol. 5. Kita akan menggunakan tombol yang telah disediakan program, kemudian memodifikasinya. Klik menu Window > Other Panels > Common Libraries > Buttons.

Animasi dan Interaksi Menggunakan Macromedia Flash

26

6. Pada panel Buttons yang tampil, kembangkanlah folder Oval, kemudian seretlah salah satu tombolnya ke dalam panggung (layer tombol).

Gambar 37: Menggunakan tombol dari program

Gambar 38: Menyisipkan tombol

7. Selanjutnya kita akan memodifikasi tombol tersebut. Penyisipan simbol tersebut secara otomatis akan tersimpan pada library dokumen. Bukalah panel Library, klik menu Window > Library.

Animasi dan Interaksi Menggunakan Macromedia Flash

27

Gambar 39: Tombol tersimpan dalam Library dokumen

8. Pada panel Library klik ganda nama tombol, kemudian namanya menjadi tbl buku. 9. Klik ganda ikon simbol tbl buku untuk masuk ke jendela pengeditannya. 10. Kita akan memodifikasi tombol dengan memberikan judul tombol. Pada jendela pengeditan tbl buku, tambahkanlah layer baru, kemudian ketikkan teks buku (Gambar 40).

Gambar 40: Menuliskan teks buku

11. Kembalilah ke jendela scene 1 dengan mengklik label Scene 1 yang terletak di bagian kiri atas panel Timeline.

Animasi dan Interaksi Menggunakan Macromedia Flash

28

Gambar 41: Hasil memodifikasi tombol

12. Pengeditan akan dilanjutkan dengan membuat tombol lainnya, yaitu dengan menduplikasi tombol buku, dan memodifikasi hasil duplikasi. Pada panel Library klik kanan nama tbl buku, kemudian klik menu Duplicate. Pada kotak dialog Duplicate yang tampil, isikan nama tbl jam kemudian klik tombol OK. 13. Masih pada panel Library, klik ganda tbl jam untuk masuk ke jendela pengeditan symbol tersebut. Teks pada tombol ini masih buku, karena hasil duplikasi. Gantilah teksnya menjadi jam. 14. Ulangi langkah nomor 12 dan 13 untuk membuat tombol lainnya, yaitu kaca, topi dan reset.

Animasi dan Interaksi Menggunakan Macromedia Flash

29

Gambar 42: Hasil membuat tombol

15. Seretlah tombol tbl jam, tbl kaca, tbl reset dan tbl topi ke dalam panggung (layer tombol).

Gambar 43: Menyisipkan tombol lainnya

16. Selanjutnya adalah memperpanjang durasi tampil objek tombol, monitor dan latar. Klik kanan pada frame 5 di semua layer, kemudian klik menu Insert Frame.

Animasi dan Interaksi Menggunakan Macromedia Flash

30

Gambar 44: Memperpanjang durasi tampil semua objek sampai frame 5

17. Selanjutnya adalah menyisipkan gambar yang akan ditampilkan. Pada panel Timeline buatlah layer baru dan berikanlah nama gambar. Sesuai rencana, gambar buku akan ditampilkan pada frame 2. Pada layer gambar, klik kanan frame 2 kemudian klik menu Insert Keyframe. Setelah itu klik menu File > Import to Stage, kemudian imporlah file buku.wmf. Aturlah ukuran dan posisinya seperti contoh pada Gambar 45. 18. Selanjutnya adalah menyisipkan gambar jam. Sesuai rencana, gambar jam akan ditampilkan pada keyframe 3. Pada layer gambar, klik kanan frame 3 kemudian klik menu Insert Blank Keyframe. Setelah itu imporlah file jam.wmf. Aturlah ukuran dan posisinya seperti contoh pada Gambar 46.

Gambar 45: Mengimpor gambar buku pada keyframe 2

Animasi dan Interaksi Menggunakan Macromedia Flash

31

Gambar 46: Mengimpor gambar jam pada keyframe 3

19. Selanjutnya adalah menyisipkan gambar topi. Sesuai rencana, gambar topi akan ditampilkan pada keyframe 4. Pada layer gambar, klik kanan frame 4 kemudian klik menu Insert Blank Keyframe. Setelah itu imporlah file topi.wmf. Aturlah ukuran dan posisinya seperti contoh pada Gambar 47.

Gambar 47: Mengimpor gambar topi pada keyframe 4

20. Selanjutnya adalah menyisipkan gambar kaca. Sesuai rencana, gambar kaca akan ditampilkan pada keyframe 5. Pada layer gambar, klik kanan frame 5 kemudian klik menu Insert Blank Keyframe. Setelah itu imporlah file kaca.wmf. Aturlah ukuran dan posisinya seperti contoh pada Gambar 48.

Animasi dan Interaksi Menggunakan Macromedia Flash

32

Gambar 48: Mengimpor gambar kaca pada keyframe 5

21. Selanjutnya adalah menerapkan action untuk menghentikan movie. Dalam panel Timeline tambahkan layer baru, kemudian berikan nama layer actions. 22. Dalam layer baru (layer actions) klik frame 1 untuk memilihnya, kemudian di dalam panel Actions tuliskan actions di bawah ini. stop ( ) ;

Gambar 49: Menerapkan action stop pada layer actions frame 1

23. Di dalam panggung klik tombol buku untuk memilihnya, sehingga di dalam panel Actions akan ditampilkan informasi Actions-Button. Setelah itu tuliskan actions sebagai berikut. on(release) { gotoAndStop( 2 ) ; }

Animasi dan Interaksi Menggunakan Macromedia Flash

33

24. Selanjutnya

adalah

menerapkan actions pada

tombol jam

yang

dapat

memerintahkan movie untuk melompat ke frame tempat gambar jam diletakkan, dan berhenti di frame tersebut. Di dalam movie ini, gambar jam diletakkan di dalam frame 3. Untuk itu klik tombol jam kemudian di dalam panel Actions tuliskan actions sebagai berikut. on(release) { gotoAndStop( 3 ) ; } 25. Selanjutnya adalah menerapkan actions pada tombol topi seperti langkah di atas. Di dalam movie ini, gambar topi diletakkan di dalam frame 4. Untuk itu klik tombol topi kemudian di dalam panel Actions tuliskan actions sebagai berikut. on(release) { gotoAndStop( 4 ) ; } 26. Selanjutnya adalah menerapkan actions pada tombol kaca seperti langkah sebelumnya. Di dalam movie ini, gambar kaca diletakkan di dalam frame 5. Untuk itu klik tombol kaca kemudian di dalam panel Actions tuliskan actions sebagai berikut. on(release) { gotoAndStop( 5 ) ; } 27. Selanjutnya adalah menerapkan actions pada tombol reset seperti langkah di atas. Action yang akan diterapkan adalah untuk memerintahkan movie berhenti ditampilan awalnya, yaitu frame 1. Untuk itu klik tombol awal kemudian di dalam panel Actions tuliskan actions sebagai berikut. on(release) { gotoAndStop( 1 ) ;

Animasi dan Interaksi Menggunakan Macromedia Flash

34

} 28. Lakukan test movie. 29. Simpanlah praktek ini.

10.

KONTROL MOVIE CLIP

Properti movie clip dapat dikontrol, dengan kata lain kita dapat membuat interaksi untuk mengontrol properti movie clip, atau mengontrol jalannya animasi dalam movie clip.

10.1

Mengontrol Animasi dalam Movie Clip

Berikut ini kita akan memraktekkan pembuatan interaksi untuk mengontrol animasi dalam movie clip. 1. Buatlah dokumen baru dengan properti sesuai keinginan. 2. Klik menu Insert > New Symbol, kemudian pada kotak dialog New Symbol yang tampil isikan nama bola dan pilihlah Movie Clip, kemudian klik tombol OK. 3. Pada jendela pengeditan movie clip bola, buatlah animasi yang menampilkan bola bergeser posisinya.

Gambar 50: Membuat animasi dalam movie clip bola

Animasi dan Interaksi Menggunakan Macromedia Flash

35

4. Kembalilah ke jendela Scene 1 dengan mengklik label Scene 1 yang terletak di bagian kiri atas panel Timeline. 5. Tampilkan panel Library, kemudian seretlah symbol movie clip bola ke dalam panggung. 6. Lakukan test movie, maka akan terlihat animasi bola bergeser. 7. Kembalilah ke jendela pengeditan Flash untuk melanjutkan pengeditan. 8. Jalannya animasi movie clip bola dalam panggung akan dikontrol. Oleh karena itu movie clip ini harus diberikan nama instance. Klik movie clip bola kemudian pada panel Properties isikanlah nama mcbola pada kotak Instance Name.

Gambar 51: Memberikan nama instance mcbola untuk movie clip bola

9. Selanjutnya adalah membuat tombol untuk mengontrol jalannya animasi. Klik menu Window > Other Panels > Common Libraries > Buttons. Pada panel Buttons seretlah symbol Playback getRight, getPause dan getStop ke dalam panggun (Gambar 52).

Gambar 52: Menyisipkan tombol getRight, getPause dan getStop

Animasi dan Interaksi Menggunakan Macromedia Flash

36

10. Klik tombol getRight, kemudian pada panel Actions-Buttons tuliskan action berikut: on(release) { _root.mcbola.play( ) ; } 11. Klik tombol getPause, kemudian pada panel Actions-Buttons tuliskan action berikut: on(release) { _root.mcbola.stop( ) ; } 12. Klik tombol getStop, kemudian pada panel Actions-Buttons tuliskan action berikut: on(release) { _root.mcbola.gotoAndStop (1 ) ; } 13. Lakukan test movie. Pada saat movie dimainkan, klik ketiga tombol tersebut untuk melihat hasilnya. Jika tombol getRight diklik maka animasi akan dimainkan, jika tombol getPause diklik maka animasi akan berhenti pada posisi terakhir, jika tombol getStop diklik maka animasi akan berhenti di awal. 14. Jika ingin pada saat pertama kali movie dimainkan animasi akan berhenti, maka kita harus menerapkan action frame stop pada frame 1 dalam Timeline movie clip bola. 15. Simpanlah praktek ini.

Animasi dan Interaksi Menggunakan Macromedia Flash

37

10.2

Mengontrol Properti Movie Clip

Berikut ini kita akan memraktekkan pembuatan interaksi untuk mengontrol properti movie clip. 1. Buatlah dokumen baru dengan properti sesuai keinginan. 2. Klik menu Insert > New Symbol, kemudian pada kotak dialog New Symbol yang tampil isikan nama kotak dan pilihlah Movie Clip, kemudian klik tombol OK. 3. Pada jendela movie clip kotak, buatlah objek persegiempat, kemudian kembalilah ke jendela Scene 1. 4. Seretlah symbol movie clip kotak dari panel Library ke dalam panggung. Selanjutnya berikanlah nama instance mckotak untuk movie clip kotak. 5. Buatlah dua symbol button, dengan nama besar dan kecil, seperti contoh pada Gambar 53.

Gambar 53: Membuat dua Button

16. Klik tombol besar, kemudian pada panel Actions-Buttons tuliskan action berikut: on(release) { _root.mckotak._xscale = 200; _root.mckotak._yscale = 200; }
Animasi dan Interaksi Menggunakan Macromedia Flash 38

17. Lakukan test movie. Pada saat movie dimainkan klik tombol besar maka kotak akan diperbesar, klik tombol kecil maka kotak akan diperkecil. 18. Simpan praktek ini.

Animasi dan Interaksi Menggunakan Macromedia Flash

39