Pelatihan Multimedia Pembelajaran Interaktif

Pelatihan Multimedia Pembelajaran Interaktif

ANIMASI SEDERHANA DENGAN MACROMEDIA FLASH

Oleh : Nur Hadi Waryanto,S.Si.,M.Eng

BAB 1 OBJEK DALAM FLASH MX A. Dasar Objek Ketika menggambar objek dalam Flash seperti objek lingkaran, kotak, oval dll, secara otomatis Flash akan menyediakan dua unsur objek, yaitu Fill (bidang objek) dan Stroke (bingkai/pinggir objek). Fill (bidang)

Stroke

Gambar 1. 1 Unsur Objek B. Memilih atau Menyeleksi Objek Objek dalam Flash terbagi dalam dua unsur yaitu Fill objek dan stroke objek.

Gambar 1.2 Keterangan :

Gambar 1.3

Gambar 1.2 Objek Belum Diseleksi Gambar 1.3 Fill Objek Terseleksi

Gambar 1.4

Gambar 1.5

Gambar 1.4 Stroke Objek Terseleksi Gambar 1.5 Fill dan Stroke Objek Terseleksi

Untuk melakukan penyeleksian objek, dilakukan dengan menggunakan Arrow Tool yang terdapat dalam Tools Box, kemudian tinggal di klik fill atau stroke dari objekyang akan diseleksi. Untuk menyeleksi seluruh objek (fill dan stroke) double klik pada fill objek tersebut.Objek Terseleksi C. Pengaturan Stroke dan Fill dalam Menggambar Objek Objek dalam Flash dapat digambarkan dalam satu unsur saja, yaitu fill saja ataupaun stroke saja. 1. Klik Rectange tool. 2. Atur warna dari fill dan strokenya melalui Color pada Toolbox 3. Klik tombol Stroke Color, lalu klik tombol No Color. No Color ditandai dengan garis merah melintang pada tombol Stroke Color.

No Color Option Color ToolBox

2

4. Buat objek segi empat di stage.

Objek Tanpa Stroke 5. Kebalikan dari langkah diatas, gambar objek segiempat tanpa fill, dengan klik tombol Fill Color pada toolbox dan pilih No Color.

6. 7. 8. 9.

Objek Tanpa Fill Dengan menggunakan Paint Bucket tool ubahlah warna dari objek yang anda buat. Klik Paint Bucket Tool. Atur warna melalui Toolbox bagian Color. Pilih warna pada tombol Fill Color dengan klik tanda segitiga hitam. Pilih salah satu warna yang ada. Klik pada objek segiempat yang akan diganti warnanya.

Pallet Warna pada Fill Color D. Membuat Gradasi Warna Untuk membuat contoh suatu gradasi warna ikuti langkah berikut : 1. Buatlah sebuah objek lingkaran pada stage. 2. Buatlah lingkaran tersebut tanpa stroke. 3. Seleksi objek lingkaran tersebut. 4. Klik tanda segitiga pada Panel Color Mixer. Jika Panel Color Mixer belum ada klik menu Window > Color Mixer kemudian tempatkan di bagian panel (bagian kanan stage). 5. Klik Fill Color, pilih warna hitam. 6. Klik Fill Style pilih Radial. Lingkaran akan berubah menjadi gradasi putihhitam 7. Ubahlah gradasi putih-hitam menjadi gradasi hitam-putih. Klik Pointer Gradasi bagian kiri di Bar Gradasi kemudian klik Fill Color dan ganti warnanya menjadi hitam. 8. Klik Pointer Gradasi bagian kanan lalu klik Fill Color ganti warnanya menjadi putih. 3

Gambar 2.10 Panel Color Mixer dengan Gradasi Radial Putih-Hitam

Hasil Gradasi Warna E. Transformasi Objek Untuk mengubah skala objek, langkahnya dalah sebagai berikut : 1. Buat objek segiempat di stage. 2. Seleksi seluruh objek. 3. Klik Free Transform tool pada toolbox 4. Drag salah satu titik sudutnya. Skala objek juga dapat diubah dengan menggunakan Transfom Panel yang ada di bagian kanan layar (Jika Transform Panel belum ada klik Window > Transform. Pada Transform Panel masukan sebuah nilai 1 sampai 1000 untuk kolom lebar dan tinggi, kemudian tekan Enter.

Panel Transform F. Memutar dan Memiringkan Objek 1. Seleksi seluruh objek 2. Klik Free Transform Tool pada toolbox 3. Klik option Rotate and Skew pada toolbox 4. Drag salah satu titik sudut dari objek untuk memutar objek. 5. Klik option Distort dan drag salah satu titik sudut untuk memiringkan objek 6. Dengan menggunakan Transform Panel. Klik Rotate dan isikan nilainya untuk memutar objek. (Objek dapat diputar dengan Modify > Transform >

4

Rotate 900 CW atau 900 CCW untuk memutar objek sebesar 900 searah jarum jam (CW) atau berlawanan jarum jam (CCW). Scale

Rotate and Skew

Envelope

Distort

Option Free Transform Tool 7. Klik Distort pada Transform Panel dan isikan nilainya untuk memiringkan objek. G. Menata Posisi Objek 1. Seleksi atau pilih objek yang akan dirapikan. 2. Klik Align Panel (Jika belum ada Klik Window > Align). 3. Klik icon To Stage di Align Panel untuK merapikan objek relatif terhadap ukuran stage. 4. Klik icon-icon yang ada di Align Panel pada perintah Align, Distribute, atau Amtch Size untuk merapikan objek yang sudah dipilih sesuai dengan kebutuhan.

Align Panel

5

BAB 2 ANIMASI

A. Membuat Animasi Motion Tween Animasi Motion Tween adalah animasi yang paling banyak digunakan dalam membuat suatu animasi Tween. Langkah-langkahnya adalah sebagai berikut. 1. Buka sebuah movie flash baru. 2. Klik Oval tool pada toolbox untuk mengambar sebuah lingkaran tanpa stroke, beri warna lingkaran tersebut dengan warna gradasi. 3. Seleksi seluruh lingkaran. 4. Klik menu Insert > Convert to Symbol untuk mengubah objek menjadi simbol atau tekan F8 pada keyboard. 5. Beri nama simbol tersebut pada kotak dialog Convert to Symbol dengan mengetikkan nama pada kotak Name. 6. Pilih Behavior Graphic dengan mengklik lingkaran di katak dialog, kemudian klik OK. 7. Ganti nama Layer 1 menjadi Lingkaran dengan double klik layer 1 kemudian ketikkan nama layer.

Mengganti Nama Layer 8. Klik frame 35 di kotak Timeline. 9. Klik menu Insert > Keyframe atau klik kanan tombol mouse kemudian pilih Insert Keyframe.

Insert Keyframe 10. Masih di frame 35, klik Arrow tool pada Toolbox kemudian pilih lingkaran dan pindahkan ke bagian kanan layar ( tempat animasi berakhir). 11. Klik frame 1 di Timeline, kemudian klik Properties panel pada bagian bawah layar. Pilihlah bagian Tween dan klik Motion atau klik frame 1 kemudian klik kanan tombol mouse dan pilih Create Motion Tween.

6

Create Motion Tween 12. Klik Frame 35, Lingkaran akan berpindah ke bagian kanan layar. 13. Lakukan Test Movie dengan menekan Ctrl+Enter pada keyboard. B. Membuat Animasi Motion Tween dengan Objek Mengikuti Alur (Path) 1. Buat sebuah movie flash baru. 2. Ganti nama layer menjadi objek. 3. Buatlah sebuah objek lingkaran atau kotak dengan menggunakan Oval Tool atau Rectange Tool pada Toollbox. 4. Ubahlah objek tersebut menjadi simbol dengan behavior Graphic. 5. Klik frame 35 pada Timeline dan berilah sebuah Keyframe. 6. Buat sebuah layer baru, beri nama layer ini dengan nama Lintasan, letakkan di bawah layer objek. 7. Buatlah sebuah lintasan pada layer ini dengan menggunakan Pencil Tool pada Toolbox. 8. Klik frame 1 Layer objek, dan pindahkan objek pada awal lintasan.

Posisi Awal dan Akhir Objek 9. Klik frame 35 Layer Objek dan pindahkan objek pada akhir lintasan yang telah dibuat. 10. Kembali ke frame 1, klik menu Insert > Create Motion Tween atau klik kanan mouse dan pilih Create Motion Tween. 11. Klik kanan Layer Lintasan dan klik Guide, terdapat gambar palu pada Layer lintasan. 12. Klik Layer Objek, tahan dan drag/geser layer objek sehingga berada di bawah Layer lintasan, gambar palu berubah pada Layer lintasan.

Layer Guide 13. Lakukan test movie. 7

C. Membuat Animasi Motion Shape Animasi motion shape untuk membuat animasi perubahan bentuk satu ke bentuk lainnya, misalnya bentu kotak ke bentuk lingkaran, teks menjadi lingkaran, manusia menjadi binatang , dll. 1. Buatlah sebuah movie flash baru. 2. Buatlah objek kotak di stage dengan Rectange tool. 3. Klik Frame 35, lalu klik menu Insert > Blank Keyframe. 4. Klik Text Tool, dan ketikkan kalimat MULTIMEDIA dengan font Arial ukuran 60 Bold.

Insert Blank Kyframe 5. Klik Modify > Break A Part sebanyak dua kali. 6. Klik frame 1, klik Properties dan pilih Shape pada bagian Tween . 7. Lakukan test movie. D. Animasi Masking Animasi masking animasi yang berfungsi seperti topeng yang menutupi wajah. Animasi masking berguna untuk menutupi objek satu dengan objek lainnya, sehingga objek yang menutupi terlihat transparan. Misalkan kita ingin membuat objek tulisan yang akan terlihat jika tertutup oleh objek lain. 1. Buat sebuah movie flash baru. 2. Buat tulisan MULTIMEDIA dengan menggunkan Text Tool. 3. Klik frame 50 lalu klik menu Insert > Keyframe. 4. Klik menu Insert > Layer untuk membuat layer baru sehingga terdapat dua layer dalam timeline. 5. Klik Layer 2 untuk berpindah dari Layer 1. 6. Buat persegi panjang dengan Rectange Tool, persegi panjang dibuat di atas tulisan MULTIMEDIA.

Persegi panjang di atas teks 7. Seleksi persegi panjang tersebut dan ubah menjadi simbol dengan behavior Graphic. 8. Klik frame 25 Layer 2, kemudian klik Insert > Keyframe dan pindahkan persegi panjang di bawah tulisan.

8

Persegi panjang di bawah teks 9. Klik Frame 50 dan pindahkan persegi panjang kembali di atas tulisan. 10. Klik frame 1, kemudian klik Insert > Create Motion Tween atau klik kanan mouse dan pilih Create Motion Tween atau klik Properties dan pada bagian Tween pilih Motion. 11. Lakukan langkah 10 pada frame 25. 12. Klik kanan Layer 2 dan pilih Mask.

Animasi Mask Layer 2 13. Test movie dengan menekan Ctrl + Enter.

Layer dalam Keadaan Mask E. Animasi Tombol Tambol atau button dalam Falsh MX dapat diberi animasi sehingga tombol akan terlihat lebih menarik dan interaktif pada waktu tombol ditekan atau disentuh dengan mouse pointer. 1. Buka movie flash baru. 2. Buatlah persegi panjang dengan Rectange tool. Klik Rectange Tool dan atur sudut dari persegi panjang tersebut dengan klik Round Rectange Radius pada bagian bawah Toolbox (properties).

Round Rectange Tool 9

3. Atur sudut-sudut persegi panjang dengan mengganti nilai pada Round Rectange Radius sebesar 30 point.

Rectange Setting 4. Beri warna persegi panjang dengan warna gradasi, 5. Klik Teks Tool dan ketikkan MENU. Letakkan teks di atas persegi panjang. 6. Aturlah letak persegi panjang dan teks dengan Allign Panel.

Tombol dan Teks 7. Seleksi seluruh objek (persegi panjang dan teks) dengan drag mouse sampai seluruh objek berada dalam radius mouse drag atau klik Edit > Select All. 8. Klik menu Insert > Convert to Symbol atau tekan F8, beri nama simbol dan pilih Behavior : Button. 9. Klik Edit > Edit Symbol untuk masuk ke menu Edit Symbol atau Double Klik simbol tersebut. 10. Terdapat empat buah frame pada mode Edit Symbol, yaitu Up, Over, Down, Hit. Frame-frame ini mempunyai sifat yang berbeda, yaitu : Up : Keadaan tombol standar. Over : Keadaan ketika mouse berada di atas tombol atau melewati tombol Down : Keadaan tombol ketika ditekan Hit : Penentuan area tombol yang bisa diklik dengan mouse. 11. Klik frame Up kemudian beri Keyframe dengan Insert > Keyframe atau klik kanan mouse dan pilih Insert Keyframe. Pilih teksnya saja dan ganti warnanya. 12. Klik frame Over dan beri keyframe. Klik persegi panjang dan ubahlah warna persegi panjang dan teksnya. 13. Klik Frame Down dan berilah Keyframe. Ubah warna persegi panjang. Kemudian pilih Teksnya dan ganti tulisan sekaligus warnanya menjadi DAFTAR. 14. Klik frame Hit dan Insert Keyframe. 15. Klik menu Insert > Layer untuk menambah layer baru. Klik Frame Hit dan beri Keyframe. 16. Masih di Layer 2, klik Rectange tool dan buat kotak di stage dengan ukuran lebih besar dari tombol. Atur letaknya dengan Align Panel.

10

over down hit Gambar5.14 Keadaan Tombol Pada Masing-Masing Frame 17. Pindahkan posisi Layer 2 di bawah layer 1 dengan klik layer 2 dan drag ke bawah sampai layer 1.

Gambar 5.15 Posisi Layer 2 dan Keadaan Frame-Frame Layer 2 18. Klik Scene 1 untuk kembali ke stage utama. 19. Lakukan Test Movie.

11

BAB 3 NAVIGASI A. Sistem Navigasi Latihan ini bertujuan untuk membuat sebuah tombol yang akan mengontrol frame untuk melompat ke frame yang diinginkan. Misalnya seperti halaman web, jika kita menekan tombol tertentu maka kita akan menuju ke halaman yang kita inginkan. Langkah-langkahnya adalah sebagai berikut : 1. Klik menu Window > Common Libraries > Buttons. 2. Double klik Oval Button. Kili and drag Oval Button Orange dan Oval Button Green ke stage. 3. Buat layer baru diatas Layer 1. Pindah ke Layer 2, klik frame 1 dan klik Proerties Panels, pada bagian Frame ketikkan Frame Label-nya satu.

4. 5. 6. 7.

Properties Frame Label Klik frame 10 dan 20 Layer 2, masukkan Blank Keyframe. Klik frame 10, klik Properties Panels, ketikkan dua pada frame labelnya. Lakukan langkah 5 pada frame 20 Layer 2 dengan frame label tiga. Klik frame 25, klik kanan mouse dan Insert Frame, sehingga Timelinenya terlihat seperti di bawah ini.

Timeline dengan Frame Label 8. Klik frame 1 Layer 2, buka Action Panels, klik Action Toolbox atau klik tanda ( + ) di atas Script Pane, kemudian pilih Action > Movie Control > Stop. 9. Lakukan langkah 8 pada frame 10 dan 20. 10. Pindah ke Layer 1, klik tombol hijau kemudian buka Action Panels. 11. Pindah ke Normal Mode, klik Action > Movie Control > Goto. Isikan bagian Type : Frame Label, Frame : dua

Gambar 7.3 Action goto Frame Label Dua

12

12. Lakukan langkah 11 untuk tombol orange, isikan Type : Frame Label dan Frame : tiga. 13. Berikan Blank Keyframe untuk frame 10 dan 20 Layer 1. 14. Klik frame 10, klik Text tool, ketikkan “Anda berada di halaman dua”. 15. Klik frame 20, klik Text tool ketikkan “Anda berada di halaman tiga.” 16. Lakukan test movie. 17. Klik salah satu tombol hijau atau orange. Perhatikan perubahannya.

13

BAB 4 TUTORIAL GAME TTS Berikut ini adalah tutorial untuk membuat game TTS. Buatlah sebuah movie flash dengan mengikuti tutorial yang ada di bawah ini. Bentuk, warna dari objekobjek yang digunakan dalam tutorial ini boleh dimodifikasi. Anda dapat berkreasi melalui tutorial ini dengan menambahkan script atau mengganti gambar-gambarnya sehingga menjadi game yang sempurna. 1. Buatlah sebuah flash document. 2. Buatlah beberapa buah kotak yang di tata seperti gambar di bawah ini :

3. Buatlah 5 buah static text masing-masing bertuliskan angka 1 sampai 5. Letakkan 5 buah static text tersebut seperti gambar di bawah ini :

4. Buatlah 6 buah static text masing-masing bertuliskan F, R, I, D, A, Y. Letkkan 6 buah static text tersebut seperti gambar di bawah ini :

5. Lakukan hal yang sama pada kotak lainnya dengan kata-kata seperti di bawah ini :

6. Seleksi static text bertuliskan F, R, I, D, A, Y kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS1 sebagai name dan movie clip sebgai type kemudian tekan ok. 14

7. Seleksi movie clip jawabanTTS1 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS1 sebagai instance name. 8. Seleksi static text bertuliskan L, A, U, T kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS2 sebagai name dan movie clip sebgai type kemudian tekan ok. 9. Seleksi movie clip jawabanTTS2 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS2 sebagai instance name. 10. Seleksi static text bertuliskan A, K, A, R kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS3 sebagai name dan movie clip sebgai type kemudian tekan ok. 11. Seleksi movie clip jawabanTTS3 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS3 sebagai instance name. 12. Seleksi static text bertuliskan B, U, S kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS4 sebagai name dan movie clip sebgai type kemudian tekan ok. 13. Seleksi movie clip jawabanTTS4 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS4 sebagai instance name. 14. Seleksi static text bertuliskan H, A, R, I kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS5 sebagai name dan movie clip sebgai type kemudian tekan ok. 15. Seleksi movie clip jawabanTTS5 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS5 sebagai instance name. 16. Buatlah sebuah static text bertuliskan Masukkan hanya huruf kapital saja. 17. Tekan Ctrl+F7 dan pada panel components yang muncul klik tanda + disebelah User Interface kemudian drag ComboBox ke dalam stage. 18. Seleksi ComboBox tersebut dan pada panel properties masukkan no sebagai instance name. 19. Pastikan anda masih menyeleksi ComboBox kemudian plih pada menu bar Window>Properties>Parameters. Pada panel parameters yang muncul, klik dua kali tanda [ ] di sebelah tulisan labels. 20. Pada panel yang muncul klik tanda + sebanyak 5 kali sehingga muncul 5 buah baris bertuliskan defaultValue. Ubah tulisan defaultValue tersebut dengan cara mengkliknya dan ganti dengan angka 1 sampai 5 secara berurutan dari atas ke bawah sehingga panel akan terlihat seperti gambar di bawah ini. Jika sudah tekan ok.

15

21. Buatlah sebuah input text. Seleksi input text ini dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTampil sebagai var. 22. Buatlah sebuah dynamic text bertuliskan OK. Seleksi dynamic text ini dan pada panel properties nonaktifkan tombol selectable dan aktifkan tombol show border around text. 23. Pastikan anda masih menyeleksi dynamic text bertuliskan OK kemudian tekan F8. Pada panel yang muncul masukkan ok_btn sebagai name dan button sebagai type lalu tekan ok. 24. Seleksi ok_btn di stage dan pada panel properties masukkan ok_btn sebagai instance name. 25. Buatlah 5 buah static text masing-masing bertuliskan 1. Jum’at dalam bahasa Inggris, 2. Tempat mencari ikan, 3. Bagian pohon yang ada di tanah, 4. Kendaraan roda empat, 5. Day dalam bahasa Indonesia 26. Letakkan seluruh objek yang di buat tadi seperti gambar di bawah ini :

16

27. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

//membuat variable jawaban1 dengan nilai FRIDAY jawaban1 = "FRIDAY"; //membuat variable jawaban2 dengan nilai LAUT jawaban2 = "LAUT"; //membuat variable jawaban3 dengan nilai AKAR jawaban3 = "AKAR"; //membuat variable jawaban4 dengan nilai BUS jawaban4 = "BUS"; //membuat variable jawaban5 dengan nilai HARI jawaban5 = "HARI"; //mengosongkan tampilan awal combo box no no.text = ""; //membuat variable i dengan nilai 1 sampai 5 for (i=1; i<=5; i++) { //mengubah nilai transparansi movie clip berinstance name jawabanTTS+i menjadi 0 _root["jawabanTTS"+i]._alpha = 0; } //perintah yang dijalankan ketika frame ini dimainkan onEnterFrame = function () { //nilai variable noSoal sama dengan teks yang di pilih pada combo box no noSoal = no.text; }; //ketika tekanan pada ok_btn dilepaskan ok_btn.onRelease = function() { //jika nilai pada dynamic text sama dengan nilai variable jawaban+noSoal if (jawabanTampil == _root["jawaban"+noSoal]) { //ubah nilai transparansi movie clip berinstance name jawabanTTS+i menjadi 100 _root["jawabanTTS"+noSoal]._alpha = 100; //kosongkan tulisan pada dynamic text jawabanTampil jawabanTampil = ""; //hapus angka yang terdapat pada combo box no sesuai angka yang dipilih no.removeItemAt(no.selectedIndex); //kosongkan tulisan yang terdapat pada combo box no no.text = ""; } };

28. Tekan Ctrl+Enter untuk melihat hasilnya.

17

BAB 5 Tutorial Animasi UFO Berikut ini adalah tutorial untuk membuat animasi UFO. Buatlah sebuah movie flash dengan mengikuti tutorial yang ada di bawah ini. Bentuk, warna dari objek-objek yang digunakan dalam tutorial ini silakan dimodifikasi. 1. Buka Flash anda masing-masing 2. Setting stage standar jangan dirubah apapun. 3. Kemudian buat empat layer dengan masing-masing nama: Background, Tanah, Ufo dan Pohon.

4. Dengan Rectangle Tool gambarlah kotak sebesar stage berwarna Hitam.

5. Sekarang kunci layer background, dan masuk ke layer tanah. gambarkan kotak persegi sepanjang stage, berwarna hijau.

6. Kunci layer tanah, dan masuk ke layer UFO. gambarkan Ufo dengan Oval Tool di luar stage seperti gambar dibawah ini:

7. Kunci layer ufo, dan sekarang masuk ke layer pohon. gambarlah pohon dengan Rectangle Tool atau dengan Line. seperti gambar dibawah ini:

18

8. Pasang keyframe di masing-masing layer di frame 50

9. Masuk ke layer Ufo dan klik di Keyframe 50. Lalu gerakkan Ufo dengan Tombol Navigasi kiri keyboard. ke tengah pohon.

10. Sekarang Seleksi Frame 50 di Layer Pohon, Tanah dan Background. lalu klik kanan pasang Insert Frame.

11. Seleksi frame 51 layer Ufo, lalu Tekan F6 (Keyframe)

12. Di keyframe 51, kita pasang efek cahaya dengan rectangle tool. buatlah setengah dulu seperti gambar dibawah ini:

13. Pasang lagi keyframe di frame 52 layer Ufo. kemdian dengan selection tool kita tarik dan perlebar lg cahaya Ufo yang akan mengambil pohon Pinus.

19

14. Lakukan terus seperti itu, dengan penambahan keyframe. sampai terlihat seperti ini.

15. Jika sudah selesai. tambahkan frame yang tersisa. jika dilihat dari gambar diatas, masih ada tersisa frame 59 sampai frame 70. nah, kalau begitu kamu tambah frame lagi di frame 70. seperti gambar dibawah:

16. Selanjutnya. kita pasang Motion/Classic Tween di Frame 20 Layer Ufo. Agar Ufo Tersebut Bergerak.

17. Selanjutnya di frame 100 Layer Background, Tanah dan Ufo kita pasang Insert Frame. dan keyframe di layer pohon, frame 100.

20

18. Supaya, ada efek menghilang saat pohon diambil Ufo, kita Convert dulu Objek Pohon jadi Movie Clip. caranya. klik keyframe 100 layer Pohon, lalu tekan F8. dan ganti nama menjadi pohon, type Movie clip.

19. Supaya ada efek menghilang kita beri efek color di pohonnya. perhatikan tutorial

berikut: A. Dengan Macromedia Flash 8 Atau Flash CS3

1. klik keyframe 100 layer pohon. lalu bila anda gunakan macromedia flash 8 atau Adobe Flash CS3. masuk ke layer properties movie clip, lalu pilih menu color > advanced > setting

2. Ganti R G B menjadi 255 semua. sampai pohon menghilang

B. Dengan Adobe Flash CS 4 Atau Flash CS5 1. Masuk ke Properties Movie Clip, lalu buka Menu Color Effect, kemudian pilih Advanced

21

2. Ubah Alfa (A) menjadi -255. Sehingga Pohon menjadi menghilang.

20. Jika sudah menghilang pohonnya. kita klik lagi keyframe 100 layer pohon. lalu dengan tekan tombol navigasi atas keyboard, dan tarik keatas sampai menyentuh badan ufo.

21. Jika sudah ditarik, kita pasang motion tween/classic tween di frame 75 layer pohon.

22. Sekarang, setelah Ufo mencuri pohon Pinus, kita buat animasi supaya Ufo Kabur. tapi sebelumnya kita insert frame dulu di layer Pohon di frame 130, Background dan Tanah. dan pasang keyframe di frame 100 layer Ufo.

23. Klik di keyframe 100 layer Ufo, dan tarik mundur sebagian Sinar Ufo. seperti kita tarik kebawah sinar Ufo sebelumnya. lihat gambar dibawah.

22

24. Klik lagi di Keyframe 102, dan tarik mundur lagi sebagian.

25. Begitu seterusnya, sampai cahaya ufo hilang.

26. Setelah cahaya menghilang. selanjutnya kita klik di frame 130 layer Ufo lalu pasang Keyframe.

27. Masih klik di keyframe 130 layer Ufo.. lalu tarik Ufo ke Samping Kiri Luar Stage.

23

28. Jika sudah, pasang motion tween/classic tween di frame 115 layer Ufo

29. Supaya Animasi ada Jeda. kita Insert Frame di Empat Layer di Frame 150

30. Terakhir Ctrl+Enter untuk melihat hasilnya

24

BAB 6 TUTORIAL MOUSE GAME Berikut ini adalah tutorial untuk membuat game. Buatlah sebuah movie flash dengan mengikuti tutorial yang ada di bawah ini. Bentuk, warna dari objek-objek yang digunakan dalam tutorial ini boleh dimodifikasi. Anda dapat berkreasi melalui tutorial ini dengan menambahkan script atau mengganti gambar-gambarnya sehingga menjadi game yang sempurna. 1. Buatlah sebuah flash document. 2. Buatlah sebuah objek seperti gambar di bawah ini :

3. Buatlah sebuah lingkaran berbentuk oval seperti gambar di bawah ini :

4. Seleksi lingkaran berbentuk oval tersebut dan tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok. 5. Seleksi movie clip lingkaran di stage dan tekan Ctrl+D sebanyak 5 kali. 6. Seleksi salah satu movie clip lingkaran dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran1 sebagai instance name. Lakukan hal yang sama pada movie clip lingkaran lainya dengan masing-masing instance name lingkaran2, lingkaran3, lingkaran4, lingkaran5, lingkaran6 7. Buatlah sebuah static text bertuliskan Jumlah Terpukul. 8. Buatlah sebuah dynamic text dan pada panel propertiesnya masukkan jumlah sebagai var 9. Tempatkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :

25

10. Buatlah sebuah palu seperti gambar di bawah ini :

11. Seleksi palu tersebut dan tekan F8. Pada panel yang muncul masukkan palu sebagai name dan movie clip sebagai type lalu tekan ok. Seleksi movie clip palu di stage dan pada panel properties masukkan palu sebagai instance name. 12. Klik kanan movie clip palu di stage dan pilih Edit maka anda akan masuk ke dalam stage movie clip palu. 13. Sesuaikan letak dan rotasi palu pada frame 1 seperti gambar di bawah ini :

14. Klik kanan frame 2 dan pilih Insert Keyframe. Sesuaikan letak dan rotasi palu seperti gambar di bawah ini :

26

15. Klik kanan frame 6 dan pilih Insert Keyframe. 16. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut : 1

stop();

17. Klik frame 6 dan pada panel actions yang muncul masukkan script berikut : 1

gotoAndStop(1);

18. Tekan Ctrl+E untuk kembali ke stage scene 1. Letakkan movie clip palu di luar stage. 19. Buatlah sebuah kepala tikus seperti gambar di bawah ini :

20. Seleksi kepala tikus tersebut dan tekan F8. Pada panel yang muncul masukkan tikus sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok. 21. Klik kanan movie clip tikus di stage dan pilih Edit maka anda akan masuk ke dalam stage movie clip tikus. 22. Klik kanan frame 2 dan pilih Insert Keyframe. Ubah mata tikus di frame 2 menjadi X sehingga berbentuk seperti gambar di bawah ini :

23. Klik kanan frame 7 dan pilih Insert Blank Keyframe. 24. Seleksi frame 1 dan panel actions masukkan script berikut : 1

stop();

25. Seleksi frame 7 dan pada panel actions masukkan script berikut : 1

stop();

26. Tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip tikus dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul, klik kanan movie clip tikus dan pilih Linkage. 27. Pada panel yang muncul berikan tanda contreng/centang pada Export for ActionScipt dan masukkan tikus sebagai identifier alalu tekan ok. 28. Klik frame 1 dan pada panel actions masukkan script berikut : 1 2 3 4 5 6 7 8

//membuat variable jumlah dengan nilai 0 jumlah = 0; //membuat variable waktu_muncul dengan nilai 0 waktu_muncul = 0; //membuat fungsi buat_tikus function buat_tikus() { //membuat variable nomor dengan nilainya sama dengan nilai acak 5 ditambah 1

27

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

nomor = random(6)+1; //membuat variable tikus dengan memasukan movie clip berlinkage tikus tikus = attachMovie("tikus", "tikus", 2, {_x:_root["lingkaran"+nomor]._x, _y:_root["lingkaran"+nomor]._y}); tikus.onEnterFrame = function() { //variable waktu_muncul ditambah 1 secara terus-menerus waktu_muncul++; //jika variable waktu_muncul bernilai 12 if (waktu_muncul == 12) { //mainkan frame 7 movie clip tikus this.gotoAndStop(7); } //jika variable waktu_muncul bernilai 25 if (waktu_muncul == 25) { //hapus movie clip tikus dari stage removeMovieClip(this); buat_tikus(); //ubah nilai variable waktu muncul menjadi 0 waktu_muncul = 0; } //ketika movie clip mouse ditekan tikus.onPress = function() { //jika movie clip tikus berada di frame 1 if (this._currentframe == 1) { //variable jumlah ditambah 1 jumlah += 1; //mainkan frame 2 movie clip tikus this.gotoAndPlay(2); } }; }; } onEnterFrame = function () { //movie clip palu berada di posisi paling atas palu.swapDepths(_root.getNextHighestDepth()); //posisi x movie clip palu sama dengan posisi x kursor mouse palu._x = _xmouse; //posisi y movie clip palu sama dengan posisi y kursor mouse palu._y = _ymouse; }; //ketika mouse ditekan onMouseDown = function () { //jika movie clip palu berada di frame 1 if (palu._currentframe == 1) { //mainkan frame 2 movie clip palu palu.gotoAndPlay(2); } }; //jalankan fungsi buat_tikus buat_tikus();

29. Tekan Ctrl+Enter untuk melihat hasilnya

28

BAB 7 Tutorial Animasi Foto Kartun Berikut ini adalah tutorial untuk membuat animasi foto kartun. Buatlah sebuah movie flash dengan mengikuti tutorial yang ada di bawah ini. Bentuk, warna dari objekobjek yang digunakan dalam tutorial ini boleh dimodifikasi. 1. Siapkan sampel foto (foto sendiri) yang akan dijadikan kartun, lalau bukalah program adobe flash atau macromedia flash. Pada dialog welcome sreennya pilih flashfile (ActionScript 3.0)

2. Atur dulu ukuran kanvas agar sesuai dengan sampel foto yang akan dijadikan kartun dengan cara menekan CTRL + J atau masuk ke menu modify -> documen. Lalu pada kotaak dialog aturlah agar sesuai dengan foto.

3. Gunakan rectagle tool yang ada di toolbox dan pada stroke color pilih warna merah dan pada fill color pilih no fill. Lalu buatlah kota seukuran area kerja sebagai bingkai untuk menjaga agar gambar tidak keluar dari area kerja.

29

4. Buatlah layer baru dengan cara mengklik icon insert layer kemudian geser layer tersebut ke bawah layer 1. Setelah itu masukan sampel foto yang sudah di siapkan dengan cara masuk ke menu file->import->import to stage. Lalu aturlah posisi gambar agar sesuai dengan bingkai foto, gunakanlah FreeTransformTool unteuk merubah ukuran foto.

5. Untuk memudahkan mewarnai dan memodifikasi gambar nantinyya sebaiknya setiap bagian gambar dibagi-bagi menjadi layer-layer yang berbeda. Dan setiap layer sebaiknya diberi nama dengan cara mengklik 2 kali pada nama layer. Dalam tutorial kali ini saya memakai layer yangmasing-masing dibernama sesuai baginnya yaitu kepala, rambut, mata, alis, hidung, bibir, leher, badan,kuping. Ingat layer-layer tersebut harus berada di atas layer 2 atau layer yang berisi foto.

6. Mulailah menggambar foto dengan menggunakan pencil tool dengan mode smooth. Dan gunakanlah stroke tool dengan warna yang mencolokagar garis bisa terlihat jelas. Muali dari layer kepala, gambarlah samapai bagian badan yang ada di bagian frame. Ingat ketika mengambar layer harus sesuai dengan yang digambar, untuk memmudahkan menggambar bagian yang agak detail, gunaknnalah fasilitas zion yang ada disudut kanan arae kerja.

30

7. Biasanya gambar masih terlihat kasar, jadi lakukanlah penyesuaian dengan menggunakan Selection Tool yang ada di tool box. Lakukan dengan caramendekatkan ke garis klik dan geser.

8. Lihatlah perbedaannya sebelum dan sesudah dirapihkan.

9. Untuk membuat garis tepi kembali berwarna hitam, caranya adalah dengan menekan CTRL+A kemuadian masuk ke properti dan gantilah strokr fill dengan warna hitam.

10. Dan hasilnya akan seperti ini.

11. Sekarang kita mualai mewarnai. Gunaknlah paint bucket tool. Dan kunculah dulu layer laian yang tidak sedang di warnaidengan mengklik lock layer. Pilihlah ukuran gap yang besar untuk memudahkan pewarnaan. Jika ada bagian yang tidak berhasil di warnai, periksalah garis pinggir bagian tersebut apakah sudah tertutup rapi. 31

12. Jika pewarnaan sudah selesai sobat bisa menghapus layer gambar aslu dengan mengklik kanan dan pilih delete layer. Anda juga bisa menghapus layer bingkai dengan cara yang sama. 13. Untuk lebih rapi anda rapihkan kembali bagian bagian yang kurang rapi. 14. Jika sudah merasa mantap dengan hasilnya untuk mengeksport gambar tersebut anda masuk ke menu file->export->exportimage. Berilah nama sesuai keinginan sobat dan simpanlah dengan format PNG atau JPG tapi agar lebih bagus simpanlah dengan format PNG.

15. Dan hasil yang sudah di simpan dan dirapihkan akan terlihat seperti ini.

32

DAFTAR PUSTAKA Andreas Andi S (2003). Menguasai Pembuatan Animasi dengan Flash MX. Jakarta, PT Elex Media Komputindo. Baba (2003), Animasi Kartun dengan Flash MX, Jakarta, PT elex Media Komputindo Didik Wijaya (2003). Tips dan Trik Macromedia Flash 5 dengan ActionScript. Jakarta, PT Elex Media Komputindo. Lukman Hakim dan Siti Mutmainah (2003). Teknik Jitu Menguasai Flash MX. Jakarta, PT Elex Media Komputindo. Mdcom ( 2004). Membuat Animasi Kartun dengan Macromedia Flash MX 2004. Yogyakarta, Penerbit Andi. Nur Hadi W (2004). Tutorial Komputer Multimedia. Jurusan Pendidikan Matematika FMIPA Universitas Negeri Yogyakarta. Home Page Macromedia (www.macromedia.com) Home Page Baba (www.babaflash.com) Home Page Situs Flash (www.flashkit.com). -----------, http://teguhashax.blogspot.com/2011/12/membuat-foto-wajah-menjadianimasi.html -------------, http://rumahflash.blogspot.com/2011/05/tutorial-3-membuat-animasiufo.html

33