CHAPTER 3 ANIMASI LLANJUT ANJUT AN ANJUTAN
MACROMEDIA FLASH
Ariesto Hadi
MACROMEDIA FLASH Ariesto Hadi S
1
DAFT AR ISI AFTAR
6. Transisi gambar .............................................................................................................. 3 7. Animmasi dengan efek khusus ...................................................................................... 5 1. Membuat efek air ............................................................................................. 5 8. Button .............................................................................................................................. 7 9. Mengubah gamnbar bitmap menjadi vektor ................................................................ 11
MACROMEDIA FLASH Ariesto Hadi S
2
6. TRANSISI GAMBAR Animasi lanjutan ini adalah sebagian dari kemampuan untuk membuat berbagai animasi yang akan digunakan pada implementasi action script.
Membuat transisi beberapa foto Beberapa foto dapat dibuat transisi dengan motion tweening. Setaip foto ditempakan pada layer tersendiri. Supaya penempatan foto tepat, digunakan guide
Langkah-langkah membuat transisi warna: 1. Select Insert −−−> Keyframe, keyframe pertama pada layer bluesky1 2. Select File −−−> Import, file bluesky.jpg 3. Select Insert −−−> Convert to Symbol, buat simbol bluesky1 4. Buat keyrame pada frame 10 dan 20 kemudian buat tweening animation 5. Buat effect terhadap image bluesky, yaitu alpha 100, kemudian buat tweening animation
MACROMEDIA FLASH Ariesto Hadi S
3
6. Select Insert −−−> Keyframe, keyframe pertama pada layaer david1 7. Select File −−−> Import, file david.jpg 8. Select Insert −−−> Convert to Symbol, buat simbol david1 9. Buat keyrame pada frame 10 dan 20 10. Buat effect terhadap image david, yaitu alpha 50, kemudian buat tweening animation. 11. Select Insert −−−> Keyframe, keyframe pertama pada layaer chicago1 12. Select File −−−> Import, file chicago.jpg 13. Select Insert −−−> Convert to Symbol, buat simbol chicago1 14. Buat keyrame pada frame 20 15. Buat effect terhadap image chicago, yaitu alpha 0, kemudian buat tweening animation. Demikian selanjutnya dilakukan langkah-langkah yang sama untuk file sunset.jpg. Pada frame lain dibuat image yang sama dengan efek lain yang berbeda. Sehingga secara keseluruhan seolah-olah gambar bergerak ke kanan bergantian. 16. Simpan file tersebut dengan nama Latihan301.fla atau europe.fla 17. Select Control −−−> Play, maka file europe.swf akan dapat digunakan pada movie lain.
MACROMEDIA FLASH Ariesto Hadi S
4
7. ANIMASI DENGAN EFEK KHUSUS Membuat efek air Layer mask dapat digunakan untuk membuat efek air. Langkah langkah berikut dapat diikuti: 1. Buat symbol graphic ":mask"
2. Buat symbol graphic "warna air" dengan menggunakan radial gradient
3. Select Insert −−−> Keyframe, keyframe pertama pada layer gambar asli 4. Select File −−−> Import, ramayana.jpg (gambar pulo Bali) dan ditempatkan di atas 5. Buat layer "warna air" dan symbol "warna air" dari library 6. Buat layer "mask" dan ambil symbol mask dari library 7. Buat layer "cermin" dan ditempatkan gambar pulo Bali di bagian bawah pada
MACROMEDIA FLASH Ariesto Hadi S
5
layer paling bawah. Select Modify −−−> Flip Vertical, maka diperoleh gambar pulo Bali yang terbalik. 8. Buat layer "riak air" yang isinya sama dengan layer "cermin" dan ditempatkan di atas layer "cermin" 10. Aktifkan layer"mask" dan klik tombol mouse sebelah kanan dan pilih Mask 11. Simpan file tersebut dengan nama Latihan302.fla atau ramayana.fla 12. Select Control −−−> Play, maka file europe.swf akan dapat digunakan pada movie lain.
MACROMEDIA FLASH Ariesto Hadi S
6
8. BUTTON Membuat button Button sebenarnya merupakan suatu movie clip interaktif yang terdiri dari 4 frame. Setiap frame mempunyai fungsi yang berbeda-beda. l
Frame 1 (Up), bila kursor tidak berada dalam area buttun
l
Frame 2 (Over), bila kursor berada dalam area button
l
Frame 3 (Down), bila button diklik atau ditekan
l
Frame 4 (Hit), untuk menentukan area yang merespon saat mouse diklik. Area ini tidak kelihatan saat movie berjalan.
Untuk membuat button dapat dilakukan langkah-langkah sebagai berikut: 1. Select Insert ---> New Symbol, pada dialog box symbol properties, masukkan nama button dan Behaviour pilih graphics. Buat gambar circle1. 2. Buat graphics circle2 yang sama dengan circle1 tetapi warnanya berbeda.
3. Buat graphics shadow1, yaitu lingkaran dengan warna light grey. 4. Buat graphics shadow2, yaitu lingkaran dengan warna dark grey. Symbol circle1, circle2, shadow1. shadow2 masuk ke dalam library.
MACROMEDIA FLASH Ariesto Hadi S
7
5. Select Insert ---> New Symbol, pada dialog box symbol properties, masukkan nama button dan Behaviour pilih button.
6. Klik OK, maka akan muncul Timeline button seperti pada gambar. Frame 1 (Up) adalah keyframe yang kosong
MACROMEDIA FLASH Ariesto Hadi S
8
7. Drag circle1 dan shadow1 ke dalam stage 8. Select Insert ---> Keyframe, maka playhead berpindah ke frame 2 (Up) 9. Drag circle2 dan shadow1 ke dalam stage 10. Select Insert ---> Keyframe, maka playhead berpindah ke frame 3 (Down) 11. Drag shadow2 ke dalam stage. Posisi circle2 dan shadow2 digeser sedikit sehingga tidak tepat dengan frane sebelumnya. 12. Simpan file tersebut dengan nama Latihan303.fla 13. Select Control −−−> Play, maka file bila mouse diarahkan ke button, button akan berubah sesuai gambar pada frame2 (Up).
Rollover image Button dapat berupa gambar vektor, image maupun teks. menggambarkan rollover image yang juga dapat digunakan sebagai button. Untuk membuat button yang elemennya terdiri dari gambar dan teks dapat dilakukan langkah-langkah sebagai berikut: 1. Select Insert ---> New Symbol, pada dialog box symbol properties, masukkan nama button dan Behaviour pilih button.
MACROMEDIA FLASH Ariesto Hadi S
9
2. Klik OK, maka akan muncul Timeline button seperti pada gambar. Frame 1 (Up) adalah keyframe yang kosong. Buat tulisan "Around the World Travel" dengan warna dan tata letak seperti gambar. 3. Select Insert ---> Keyframe, maka playhead berpindah ke frame 2 (Up). Tulisan "Around the World Travel" diubah warnanya.
4. Import file bluesky.jpg, chicago.jpg, sunset.jpg dan david.jpg. Letakkan keempat gambar tersebut, sehingga mendapatkan tata letak yang baik. Bila perlu dilakukan transformasi. 5. Kembali pada Scene 1 7. Drag burtton daro library ke dalam stage. 8. Simpan file tersebut dengan nama Latihan304.fla 9. Select Control −−−> Play, maka file bila mouse diarahkan ke teks "Around the World Travel" , tulisan akan berubah warba dan muncul foto-foto yang telah diatur tersebut. MACROMEDIA FLASH Ariesto Hadi S
10
9. MENGUBAH GAMBAR BITMAP MENJADI VEKTOR Gambar bitmap dapat diubah menjadi vektor dengan perintah Trace Bitmap. Gambar bimap dapat digunakan dalam movie Flash dengan menyertakannya dalam library, tetapi tidak demikian untuk gambar vektor, karena gambar vektor bukan merupakan suatu link pada gambar bitmap. 1. Import mickey.jpg, diletakkan pada frame pertama 2. Select Modify ---> Trace Bitmap, gambar mickey diubah dalam format vektor 3. Select Insert ---> Keyframe pada frame 20 4. Import woman_head.jpg.
Dengan transformasi, letakkan woman_head tepat dengan kepala mickey 5. Buat gamber woman_head menjadi vektor dengan Select Modify ---> Trace Bitmap,
MACROMEDIA FLASH Ariesto Hadi S
11
6. Buat keyframe pada frame 40 7. Buat shape animation dari frame 1 sampai frame 20
8. Simpan file tersebut dengan nama Latihan305.fla 9. Select Control −−−> Play, maka suatu mophing gambar mickey berubah kepalanya menjadi gambar orang.
MACROMEDIA FLASH Ariesto Hadi S
12
