24
DASAR ANIMASI MACROMEDIA FLASH 8 DISUSUN OLEH : NAMA : DEKA MUKHAMAD WILDAN KELAS : SKS 12.2 NPM : 410391290015 SEKOLAH TINGGI ELEKTRONIKA DAN KOMPUTER (STEKOM) TAHUN AKADEMIK 2012/2013

Animasi Dasar Menggunakan Macromedia Flash 8

Embed Size (px)

DESCRIPTION

Animasi Dasar Menggunakan Macromedia Flash 8

Citation preview

Page 1: Animasi Dasar Menggunakan Macromedia Flash 8

DASAR ANIMASI MACROMEDIA FLASH 8 

 

 

  

 

DISUSUN OLEH : 

NAMA  : DEKA MUKHAMAD WILDAN 

KELAS  : SKS 12.2 

NPM    : 410391290015 

 

SEKOLAH TINGGI ELEKTRONIKA DAN KOMPUTER 

(STEKOM) 

TAHUN AKADEMIK 2012/2013   

Page | 1  

 

 

Page 2: Animasi Dasar Menggunakan Macromedia Flash 8

PENGENALAN MACROMEDIA FLASH 8 Macromedia Flash merupakan sebuah software aplikasi yang digunakan untuk membuat animasi berbasis vektor dan bitmap. Didalam menu Macromedia flash hampir semua tool yang terdapat dalam macromedia flash sama dengan yang ada dalam menu aplikasi CorelDraw dan Photoshop. Pengenalan ToolBox Macromedia Flash : 

 

 

Page | 2  

 

Page 3: Animasi Dasar Menggunakan Macromedia Flash 8

 

 

 

Page | 3  

 

Page 4: Animasi Dasar Menggunakan Macromedia Flash 8

A. TEKNIK DASAR  MOTION TWEEN DAN MOTION SHAPE Motion merupakan serangkaian gerakan yang dimulai dari keyframe pertama dan bergerak menuju ke keyframe terakhir dari jalur motion yang dipilih tersebut. Motion Tween digunakan untuk menggerakan objek yang sudah menjadi simbol, sedangkan motion shape digunakan untuk menggerakkan objek  gambar vektor yang tidak dijadikan simbol seperti Rectangle, oval dan polystar. Pada tutorial kali ini akan dibahas teknik dasar animasi motion tween dan motion shape dengan menggunakan software aplikasi Macromedia Flash 8, langkah‐langkahnya sebagai berikut : 

1. Buka aplikasi macromedia flash 8, kemudian klik Flash Document pada menu Create New. 

 2. Setelah masuk pada menu macromedia flash project buat sebuah objek misal gambar lingkaran 

dengan warna bebas dengan cara klik menu Oval Tool pada toolbox lalu buat lingkaran didalam stage. 

  

3. Selanjutnya buat keyframe baru pada menu frame yang terdapat dalam menu timeline dengan cara klik kanan pada frame yang dipilih kemudian klik Insert Keyframe. 

 

Page | 4  

 

Page 5: Animasi Dasar Menggunakan Macromedia Flash 8

 4. Setelah itu blok keyframe terakhir yang baru dibuat tersebut, lalu geserkan objek lingkaran 

kearah kanan, seperti gambar di bawah ini : 

 5. Kemudian buat motion shape, karena objeknya tidak dibuat symbol, dengan cara kliksalah satu 

frame, lalu pada menu properties bagian bawah, pada menu Tween ganti dengan shape, seperti gambar di bawah ini : 

 6. Dan hasil bentuk framenya terdapat tanda panah antara keyframe pertama menuju keyframe 

terakhir seperti gambar di bawah ini : 

 7. Setelah itu simpan projectnya dengan nama misal motion dengan ekstensi atau perluasan *.fla 

lalu jalankan hasil animasinya dengan cara menekan tombol kombinasi ctrl+enter. Jika objek lingkarannya bergerak dari kiri kekanan maka animasi motionnya berhasil. Selanjutnya bisa ditambahkan keyframe lagi disela‐sela motion lingkaran tersebut dan mengganti objek lingkarannya misal diganti dengan objek persegi, dan hasil animasi motionnya akan berubah bentuk dari bentuk lingkaran ke bentuk persegi dan dari bentuk persegi akan berubah ke bentuk lingkaran lagi. 

Page | 5  

 

Page 6: Animasi Dasar Menggunakan Macromedia Flash 8

 B. MEMBUAT ANIMASI TRAFFIC LIGHT (LAMPU LALU LINTAS) 

Untuk membuat animasi traffic light atau lampu lalu lintas membutuhkan minimal 2 layer, karena jika menggunakan 1 layer maka ketika objek yang tidak dibuat symbol ditumpuk dengan objek lain yang berbeda warna yang juga tidak dibuat symbol, akan terjadi pemotongan ditengah objek atau biasa disebut trim shapping seperti di aplikasi Corel Draw. Langkah‐langkah untuk membuat animasi traffic light bisa dilakukan seperti langkah di bawah ini: 

1. Buka aplikasi macromedia flash 8, lalu pilih flash document pada menu Create New 

 2. Setelah itu buat persegi panjang dengan warna fill hitam dengan menggunakan menu Rectangle 

Tool pada toolbox, lalu ganti warna fillnya yang terletak di menu properties, seperti gambar di bawah ini : 

 

  

Page | 6  

 

Page 7: Animasi Dasar Menggunakan Macromedia Flash 8

3. Kemudian ganti nama layer 1 dengan nama kotak, dengan cara klik 2X tepat pada nama layer 1, lalu ganti namanya menjadi kotak lalu tekan enter, seperti gambar di bawah ini : 

 4. Selanjutnya buat layer baru lagi dan beri nama lampu, dengan cara klik kanan pada layer kotak, 

lalu pilih insert layer, atau bisa juga dengan mengklik ikon insert layer yang terdapat di bawah menu layer. 

 

 5. Setelah itu buat 3 buah lingkaran dengan menggunakan Oval Tool pada toolbox dan letakkan 

pada layer lampu dan posisikan ketiga objek lingkaran tersebut tepat diatas objek persegi panjang dan susun dengan bentuk vertikal dan ganti warna lingkaran paling atas dengan warna merah tua, warna lingkaran yang di tengah ganti dengan warna kuning tua atau redup dan warna lingkaran terkahir atau paling bawah ganti dengan warna hijau tua, seperti gambar di bawah ini : 

Page | 7  

 

Page 8: Animasi Dasar Menggunakan Macromedia Flash 8

 6. Kemudian tambahkan frame baru pada layer kotak pada time line frame 40, dengan cara klik 

kanan pada baris frame ke 40, lalu pilih insert frame. 

 7. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 8. Selanjutnya tambahkan keyframe baru pada layer lampu pada time line frame 5 dengan cara klik 

kanan pada time line frame 5 pada layer lampu, lalu pilih insert keyframe. 

 

Page | 8  

 

Page 9: Animasi Dasar Menggunakan Macromedia Flash 8

 9. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 10. Setelah itu ubah warna objek lingkaran paling atas menjadi warna merah cerah yang berarti 

lampu merah yang pertama kali menyala pada keyframe yang berada pada time line frame 5. 

 11. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 12. Selanjutnya buat keyframe baru lagi pada layer lampu di time line frame 15 dengan cara yang 

sama seperti di atas, kemudian ubah warna objek lingkaran merah cerah menjadi merah tua atau gelap kembali dan warna objek lingkaran yang diposisi paling bawah yang berwarna hijau tua atau gelap ubah warnanya menjadi warna hijau cerah, berarti lampu hijau menyala, dan hasilnya seperti gambar di bawah ini : 

 

Page | 9  

 

Page 10: Animasi Dasar Menggunakan Macromedia Flash 8

13. Setelah itu buat keyframe baru lagi pada layer lampu di time line frame 25. Kemudian ganti warna lingkaran hijau cerah dengan warna hijau tua atau gelap kembali dan ganti warna lingkaran kuning gelap atau tua dengan warna kuning cerah, berarti lampu kuning menyala. 

 14. Kemudian buat keyframe lagi pada time line frame ke 35 pada layer lampu. Untuk membuat 

tempo animasi lampu warna kuningnya. 

 15. Selanjutnya ubah warna objek lingkaran warna kuning cerah dengan warna kuning gelap atau 

tua pada keyframe nomor 35 seperti pada keyframe yang pertama, setelah itu buat frame pada time line ke 40 pada layer lampu, sehingga hasilnya seperti gambar di bawah ini : 

 16. Setelah itu simpan projectnya dengan nama traffic light dengan ekstensi default *.fla, kemudian 

jalankan animasinya dengan cara tekan tombol kombinasi Ctrl+Enter. 

Page | 10  

 

Page 11: Animasi Dasar Menggunakan Macromedia Flash 8

C. MEMBUAT GAMBAR ANIMASI BURUNG TERBANG DAN PEMBUATAN SYMBOL Untuk membuat gambar animasi burung terbang, syarat yang utama minimal terdiri atas layer badan, kaki dan kepala burung untuk satu layer dan layer mata untuk membuat animasi mata berkedip dan layer ketiga adalah layer sayap. Langkah – langkah untuk membuat animasi burung terbang seperti di bawah ini : 

1. Buka aplikasi Macromedia Flash 8 kemudian pilih flash document pada create new. 

 2. Setelah itu buat gambar lingkaran untuk membuat kepala terlebih dahulu dengan menggunakan 

oval tool   pada toolbox dan beri warna backgroundnya pada fill dengan warna biru atau yang lain pada burung. 

 

3. Kemudian baru membuat badannya dengan menggunakan line tool   pada toolbox dan beri warna outlinenya dengan warna biru, lalu sambungkan dengan objek lingkarannya agar ketika pada gambar badannya diblok warna menggunakan paint bucket tool tidak ada yang kurang. Buat badannya seperti gambar di bawah ini : 

Page | 11  

 

 

Page 12: Animasi Dasar Menggunakan Macromedia Flash 8

 4. Selanjutnya ganti bentuk kursor dengan menu Selection Tool pada toolbox, kemudian arahkan 

kursornya pada garis paling bawah. Setelah bentuk kursor terdapat garis lengkung yang terletak di bawah kursor lalu klik dan tarik garisnya kebawah sehingga akan menjadi seperti gambar di bawah ini : 

   5. Setelah itu blok warna fill badan dengan warna biru muda dengan menggunakan menu paint 

bucket tool lalu klik pada bagian dalam badan. 

 6. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 7. Selanjutnya buat garis ekornya dengan menggunakan menu line tool. 

 

Page | 12  

 

Page 13: Animasi Dasar Menggunakan Macromedia Flash 8

8. Setelah itu buat jambul dan paruh burungnya dengan menggunakan menu line tool, seperti contoh gambar di bawah ini : 

 9. Kemudian blok background fillnya dengan warna kuning redup pada jambulnya dan warna 

merah pada paruhnya dengan menggunakan menu paint bucket tool. 

 10. Selanjutnya buat lingkaran lagi letakkan pdiatas objek badannya jangan ditempelkan, karena 

untuk dibuat kaki burungnya dengan menggunakan menu oval tool dan beri warna fill merah. 

 11. Setelah itu klik menu selection tool, kemudian arahkan kursor pada ujung garis tepi atau outline 

sisi kanan pada lingkaran, setelah dibawah kursor terdapat ikon garis hitam lengkung kemudian klik dan tarik ke kiri sehingga akan membentuk seperti gambar di bawah ini : 

 

Page | 13  

 

Page 14: Animasi Dasar Menggunakan Macromedia Flash 8

 12. Kemudian letakkan gambar lingkaran yang sudah dibuat kaki tersebut di bawah ekor, dengan 

cara klik menu Free Transform tool pada toolbox, lalu blok gambar kaki kemudian pindahkan dan letakkan di bawah ekornya, seperti gambar di bawah ini : 

 

Free Transform Tool 

 13. Setelah itu buat objek burung setengah jadi itu menjadi symbol, dengan cara posisikan kursor 

pada menu Free Transform Tool, kemudian blok semua objeknya, lalu klik kanan pilih Convert To Symbol. 

 14. Setelah muncul menu Convert To Symbol ganti nama symbol1 pada name menjadi “burung” 

tanpa tanda kutip setelah itu pilih type movie clip lalu klik ok. 

 15. Setelah objek burung setengah jadi sudah menjadi symbol, kemudian edit kembali objeknya 

untuk dilengkapi dengan sayap dan mata dengan cara klik 2X pada objek burung yang sudah menjadi symbol. 

  

Masuk di area editor symbol 

Page | 14  

 

Page 15: Animasi Dasar Menggunakan Macromedia Flash 8

Page | 15  

 

  

16. Kemudian ganti nama layer 1 dengan nama layer badan. 

 17. Selanjutnya buat layer baru lagi dan beri nama layer mata dengan cara klik kanan pada layer 

badan lalu pilih insert layer, atau bisa juga dengan mengklik ikon insert layer yang berada di bawah layer badan. 

   

Status objek burung yang sudah di buat symbol menjadi shape karena masuk dalam area kerja symbol 

18. Setelah itu buat lingkaran sedikit berbentuk oval pada layer mata dengan menggunakan menu oval tool dan beri warna fill dan outline dengan warna biru, seperti gambar di bawah ini : 

Page 16: Animasi Dasar Menggunakan Macromedia Flash 8

  

Menu Warna Outline dan Fill 

19. Kemudian buat lingkaran yang sedikit berbentuk oval lagi dengan warna fill dan outline hitam dan letakkan di dalam lingkaran yang baru dibuat tadi, seperti gambar di bawah ini : 

 20. Setelah itu buat lagi lingkaran yang lebih kecil untuk membuat efek sinar cahaya ke mata dengan 

warna fill dan outline putih, dan letakkan di atas lingkaran warna hitam, seperti gambar di bawah ini : 

  

Page | 16  

 

Page 17: Animasi Dasar Menggunakan Macromedia Flash 8

21. Kemudian kunci layer badan agar aman dari proses editan dengan cara klik tanda bulat warna hitam bagian tengah pada layer badan dan hasilnya akan berubah menjadi ikon gembok, berarti tandanya layer telah dikunci. 

 22. Selanjutnya blok gambar mata tersebut dengan posisi kursor dalam bentuk menu free 

transform, lalu kecilkan ukurannya dan letakkan di bagian kepala dan sesuaikan hingga seperti membentuk mata dengan posisi layer badan masih terkunci. 

 23. Setelah itu buat frame baru pada layer badan di time line frame nomor  25 dengan cara klik 

kanan pada frame time line no 25 pada layer badan lalu klik insert frame. 

 24. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 

Page | 17  

 

Page 18: Animasi Dasar Menggunakan Macromedia Flash 8

25. Kemudian buat keyframe baru pada layer mata dengan cara klik pada keyframe layer mata lalu tekan tombol F6 terus untuk membuat keyframe dengan jumlah banyak sampai pada time line frame nomor 25. 

 26. Selanjutnya hapus objek mata pada keyframe nomor 5 dan ganti dengan objek garis dengan 

ketebalannya 3 pada menu properties stroke height dan dilengkungkan untuk membuat efek berkedip dengan menggunakan menu Line Tool pada toolbox, dan hasilnya seperti pada gambar di bawah ini : 

 

 27. Setelah itu copykan keyframe nomor 5 dan pastekan pada keyframe nomor 10, 15, 20, dan 25 

dengan cara klik kanan pada keyframe nomor 5 lalu pilih copy frames, lalu paste kan atau tempelkan pada keyframe yang dipilih tadi dengan cara klik kanan pada keyframe yang dipilih lalu pilih paste frames. 

Page | 18  

 

Page 19: Animasi Dasar Menggunakan Macromedia Flash 8

 28. Selanjutnya buat layer baru dan beri nama sayap kiri untuk membuat sayap kiri burungnya. 

 29. Setelah itu buat gambar sayapnya dengan menggunakan menu line tool dan letakkan di bagian 

badannya dengan catatan layer badan yang dikunci tersebut jangan dibuka terlebih dahulu agar layer badan aman dari editan. Seperti gambar di bawah ini : 

 30. Kemudian blok fill gambar sayapnya dengan menggunakan paint bucket tool, sebelum di blok 

ubah gap size untuk penutup outline yang tidak tertutup semua dengan cara klik ikon   pada menu option pada toolbox bagian bawah, lalu klik Close Large Gaps, kemudian baru blok fill gambar sayapnya dengan paint bucket tool dengan warna biru muda. 

     

Page | 19  

 

Page 20: Animasi Dasar Menggunakan Macromedia Flash 8

31. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 32. Lalu buat sayapnya sedikit melengkung dan hapus garis bagian bawah sayap seperti gambar di 

bawah ini : 

 33. Selanjutnya buat keyframe baru pada layer sayap kiri dan atur ukuran sayapnya sedikit mengecil 

pada bagian atasnya dengan menggunakan menu Free Transform Tool pada toolbox, seperti gambar di bawah ini : 

 34. Setelah itu buat lagi keyframe pada layer sayap kiri sampai pada time line nomor25 dan atur 

ukuran sayapnya pada tiap keyframe, buat seperti burung sedang mengepakkan sayapnya, kemudian setelah sayapnya jadi tes hasil animasinya dengan cara menekan tombol enter atau tombol kombinasi Ctrl+enter. 

 

Page | 20  

 

Page 21: Animasi Dasar Menggunakan Macromedia Flash 8

 35. Selanjutnya buat layer baru lagi dengan nama sayap kanan dan letakkan di bawah layer badan. 

 36. Setelah itu copykan semua keyframe yang ada dalam layer sayap kiri dan paste kan ke dalam 

layer sayap kanan. 

 37. Dan hasilnya akan terlihat seperti gambar di bawah ini : 

 

Page | 21  

 

Page 22: Animasi Dasar Menggunakan Macromedia Flash 8

38. Kemudian hapus sisa frame pada layer sayap kanan, lalu edit objek sayap kanannya sedikit didepan dari objek sayap kiri terus sampai pada objek keyframe nomor 25. Setelah itu jalankan animasinya. 

 39. Setelah animasi burungnya selesai dibuat kemudian kembali lagi ke menu scene 1, dengan cara 

klik tanda panah arah kiri atau klik pada scene 1. 

 40. Setelah itu kecilkan ukuran gambar burung dan tambahkan lagi gambar burung dengan cara klik 

drag dan drop dari symbol burung yang terdapat pada library, seperti gambar di bawah ini : 

 41. Kemudian ubah background stage nya dengan warna kuning cerah yang terdapat pada menu 

properties. 

 

 

Page | 22  

 

Page 23: Animasi Dasar Menggunakan Macromedia Flash 8

42. Selanjutnya buat layer baru dengan nama awan dan letakkan di bawah layer 1 atau layer burung tersebut. Kemudian buat gambar awan dengan menggunakan menu oval tool. 

 43. Setelah itu buat frame baru pada layer burung pada time line nomor 25. Dan buat keyframe 

baru pada layer awan pada time line nomor 25. 

 44. Kemudian pada keyframe nomor 1 pada layer awan, pindahkan objek awannya disebelah kiri 

diluar stage animasi, dan keyframe nomor 25 pindahkan objek awannya disebelah kanan diluar stage animasi. 

 

Page | 23  

 

Page 24: Animasi Dasar Menggunakan Macromedia Flash 8

 45. Setelah itu buat motion shape pada layer awan untuk menggerakkan awannya dari kiri ke kanan. 

 46. Kemudian simpan projectnya dengan nama burung dan berekstensi *.fla, kemudian jalankan 

animasinya. Untuk menambah efek lagi bisa menggunakan gambar burung diiberi efek motion atau yang lainnya. 

 

Page | 24