Selasa, 18 Oktober 2011

TUTORIAL FLASH: ANIMASI CONTRENG

Berikut ini kita akan membuat animasi tanda contreng dan silang. Kita akan menggunakan Mask untuk membuatnya. Animasi ini bisa anda pakai pada kuis untuk memberitahu kepada user/pemain apakah jawaban yang dipilih benar atau salah.

Animasi Contreng

1. Buatlah sebuah flash document.
2. Klik kanan frame 2 dan pilih Insert Blank KeyFrame. Pastikan anda aktif di frame 2 lalu buatlah sebuah tanda contreng seperti gambar di bawah ini :
contreng1
3. Tekan sekali tombol Insert Layer pada timeline sehingga muncul layer baru bernama Layer 2. Klik kanan frame 2 Layer 2 dan pilih Insert Blank KeyFrame.

4. Pastikan anda aktif di frame 2 Layer 2 kemudian buatlah sebuah lingkaran berwarna merah. Seleksi lingkaran 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. Letakkan movie clip lingkaran di frame 2 Layer 2 ini seperti gambar di bawah ini :
contreng2
6. Klik kanan frame 20 layer 1 dan pilih Insert Frame. Klik kanan frame 10 Layer 2 dan pilih Insert KeyFrame. Ubah bentuk dan letak movie clip lingkaran di frame 10 Layer 2 menjadi seperti gambar di bawah ini :
contreng3
7. Klik kanan frame 20 Layer 2 dan pilih Insert KeyFrame. Ubah bentuk dan letak movie clip lingkaran di frame 20 Layer 2 ini hingga menutupi seluruh tanda contreng seperti gambar di bawah ini :
contreng4
8. Klik kanan frame 2 Layer 2 dan pilih Create Motion Tween. Klik kanan frame 10 Layer 2 dan pilih Create Motion Tween. Klik kanan Layer 2 dan pilih Mask.
9. Tekan Ctrl+Enter untuk melihat hasilnya.

Animasi Silang

1. Buatlah sebuah flash document.
2. Tekan tombol Insert Layer sebanyak 4 kali sehingga muncul 4 buah layer baru masing-masing bernama Layer 2, Layer 3, Layer 4, Layer 5.
3. Klik kanan frame 2 Layer 2 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 2 Layer 2 kemudian buatlah sebuah garis miring seperti gambar di bawah ini :
silang1
4. Klik kanan frame 2 Layer 3 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 2 Layer 3 kemudian buatlah sebuah lingkaran berwarna merah.
5. Seleksi lingkaran ini lalu 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.
6. Atur letak dan besar movie clip lingkaran tadi seperti gambar di bawah ini :
silang2
7. Klik kanan frame 10 Layer 2 dan pilih Insert Frame. Klik kanan frame 10 Layer 3 dan pilih Insert KeyFrame.
8. Ubah bentuk dan letak movie clip lingkaran di frame 10 Layer 3 sehingga menutupi garis yang berada di Layer 2 seperti gambar di bawah ini :
silang3
9. Klik kanan frame 11 Layer 4 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 11 Layer 4 ini kemudian buatlah sebuah garis miring seperti gambar di bawah ini :
silang4
10. Pastikan garis yang anda gambar di frame 11 Layer 4 ini apabila digabungkan dengan garis yang ada di Layer 2 akan berbentuk tanda silang.
11. Klik kanan frame 11 Layer 5 dan pilih Inser Blank KeyFrame. Pastikan anda masih aktif di frame 11 Layer 5 ini kemudian tekan F11. Pada panel library yang muncul drag movie clip lingkaran yang ada di panel library ke dalam stage.
12. Atur letak dan bentuk movie clip lingkaran yang baru dikeluarkan dari panel library seperti gambar di bawah ini :
silang5
13. Klik kanan frame 2 Layer 2 kemudian pilih Copy Frames. Klik kanan frame 11 Layer 1 dan pilih Paste Frames.
14. Klik kanan frame 19 Layer 1 dan pilih Insert Frame. Klik kanan frame 19 Layer 4 dan pilih Insert Frame. Klik kanan frame 19 Layer 5 dan pilih Insert KeyFrame. Ubah ltak dan bentuk movie clip lingkaran di frame 19 Layer 5 menjadi seperti gambar di bawah ini :
silang6
15. Klik kanan frame 2 Layer 3 dan pilih Create Motion Tween. Klik kanan frame 11 Layer 5 dan pilih Create Motion Tween. Klik kanan Layer 3 dan pilih Mask. Klik kanan Layer 5 dan pilih Mask.
16. Tekan Ctrl+Enter untuk melihat hasilnya.
Sourcenya dapat di download di sini
SUMBER: http://warungflash.com/2009/12/contreng-silang/

Artikel Terkait



0 komentar:

Posting Komentar