Animasi Header

: ANIMASI INTRO

Buka flash. Stage 800x200. background putih. 24 fps.

1. Buat shape bar dengan rectangle tool, warnanya ijo, ukurannya 800x5.
2. Tekan F8, namai bar, registrasi point kiri atas.
3. Pindahkan ke atas, di luar stage. x=0 y=-10.
4. Untuk animasinya: F8, animbar, kiri atas.
5. Klik 2 kali "animbar". Masuk ke timeline-nya.
6. Di frame 13, tekan F6.
7. Di frame 13, posisi bar turunkan jadi x=0 y=169.
8. Buat motion tween.
9. Buat layer "action". F7 di frame 13, ketik stop(); di action panel.

Preview.

>> background awan
Klik kanan lalu save gambar ini:


10. Buat layer "awan". Jadi kita punya layer "bar" (layer1 tadi jadikan layer "bar") dan "action".
11. Import to library (Menu: File/import) gambar tadi.
12. F8, "awan1", kiri atas
13. F7 di frame 13. Lalu drag "awan1" ke frame 13.
14. Posisikan x=0 y=200, nama instance "awanstatis". Obyek ini ada di luar stage dan akan di-motion ke atas setelah "bar" turun.
15. Di frame 26, F6. Posisikan "awan1" x=0 y=0.
16. Buat motion tween.
17. Samakan jumlah frame "bar" dan "action". F5 pada layer "bar" dan F7 pada "action". Pindahkan stop(); pada frame 26.

Preview.

Kita hanya perlu memperlihatkan movie seukuran stage sementara "awan1" ukurannya 1088, maka kita pakai masking.

18. Pindah kan stage ke root.
19. Buat layer "mask" di atas layer "animbar".
20. Buat shape ukuran 800x171.
21. Klik kanan di layer, lalu tekan "mask". Jadi layer "animbar" dimasking sehingga sisa "awan1" tidak terlihat.

:: ANIMASI BACKGROUND

Kondisi yang ada: Jadi ada bar turun lalu background awan naik.
Setelah ini semestinya awan bergerak.

22. Di main stage. Buat layer "as". F7 di frame ke-2. Kasih stop(): di frame 1 dan 2.
23. F7 juga di frame 2 di layer "animbar". Biarkan kosong.

>> Dengan begini, setelah animasi bar selesai, maka flash akan berhenti. Kita ingin flash ke frame ke-2 karena di frame ke-2 kita akan buat animasi awan.

24. Masuk ke obyek "animbar", di layer"action" frame 26, di bawah stop(); ketik _root.gotoAndStop(2);

>>Sekarang kita buat animasi di root, frame 2.

25. Di main stage, di bawah layer "mask" dan "animbar" buat layer "awan".
26. F7 pada frame 2. Drag "awan1" dari library ke frame 2.
27. F8 "awan1" jadi "aniawan", kiri atas.
28. Klik 2 kali "aniawan". Di timeline, F6 pada frame 291. Posisi "awan1" pada layer "awan1" (buat layernya) adalah x=0 y=0.
29. Pada frame 291, posisikan "awan1" x=-1088 y=0.
30. Motion tween.
31. Buat layer "awan2". Copy "awan1" di layer "awan1" lalu paste in place pada layer "awan2". Namakan instance "awan2". Posisikan x=1088 y=0. Posisi awan2 ada di ujung awan1.
31. F6 di frame 291, pada layer "awan2". Posisikan "awan2" x=0 y=0.
32. Motion tween.
33. Buat layer "as" di paling atas. F7 di frame 291. Kasih action di action panel, gotoAndPlay(1);
>> Animasi akan looping scr kontinyu.


:: ANIMASI MENU

Motion tween juga dipakai untuk membuat 5 menu naik ke atas secara berurutan.
Caranya, saat motion tween, bedakan posisi start menu. Misalnya menu1 dimulai dari frame 1, menu2 pada frame 20, dst.

Ingatlah untuk menyamakan semua akhir frame. Dan di frame akhir kasih stop();

Tutorial ini akan menjelaskan animasi mouse over pada menu.

34. Di main stage, buat layer "menu" di atas layer "mask". Buat shape kotak seperti yang diinginkan. F8, jadikan "button".
35. Klik 2 kali di button, masuk ke timeline. ada 4 frame: up, over, down, hit.
36. F6 di frame "over". Ubah warna shape atau gradient button sesuai tampilan yang diinginkan ketika over.
37. Buat layer "ani" di atas layer 1(jadikan namanya "bg").
38. Isi frame "up" dg simbol button. F8 simbol ini sebagai "statismenu", registrasi tengah. (pada file fla nanti, gue gak jadikan movieclip, tapi hanya di-group)
39. F6 di frame "over".
40. Di frame "over", klik "statismenu", F8 jadikan "animenu", registrasi tengah.
41. Klik 2 kali "animenu" untuk masuk ke timeline-nya sehingga kita bisa animasi motion tween.
42. Di timeline "animenu", klik pada frame 29 lalu F6.
43. F6 di frame 8,9, 16,23,24.
44. Motion tween setiap bagian.

>> kita akan buat ikon di button berputar dengan scale.
45. Klik obyek di frame 8, bikin width jadi 4. Jangan lupa, unlock skala (tanda gembok di sampingnya tidak ada garis) sehingga ukuran height tidak ikut berubah.
>> ini posisi ikon berputar balik dengan poros x. Jika registrasi point tidak di tengah maka perputarannya akan kacau.
46. Klik obyek di frame 9, lalu Menu: Modify/Transform/Flip Horizontal. Skala lagi lebarnya jadi 4 (W=4).
47. Klik obyek di frame 16. Width-nya asli ukuran semula (100%). Tapi flip horizontal.
48. Di frame 23, skala w=4.
49. Di frame 24, w-4 tapi flip horizontal.
50. Di frame 29, buat width sedikit lebih kecil dari width asli. Karena obyek akan ke ukuran aslinya setelah dari frame ini.

Preview.

:: ANIMASI TEKS DAN LOGO

Animasi teks dan logo juga memaki motion tween. Coba eksplorasi motion tween. Misalnya dengan memakai "brightness" pada opsi "color" di property panel. Opsi ini dipakai untuk motion tween karakter manga pada header contoh.

Pengetahuan dasar

* Kenali tool di panel tool: rectangle, text, color dll.
* Jika disebut "buat shape" berarti kita pakai rectangle tool atau oval tool, buat line pakai line tool, dst.
* Jika disebut buat frame baru, tekan F5. Frame baru akan terisi sampai di tempat kita menekan F5.
* Membuat keyframe tekan F6. Frame baru akan terisi obyek dan satu keyframe dg obyek akan berada di tempat kita menekan F6.
* F7 untuk blank keyframe. Isinya hanya satu frame kosong.
* Jika disebut F8, berarti itu meng-convert jadi movie clip. Selalu Pikirkan registrasi point yang tepat. Biasanya kiri atas, kalau untuk kebutuhan rotasi: tengah.
Formatnya: F8, "nama simbol", "registrasi".
Keadaan simbol sedang di-klik (di-select).
* Membuka actions panel, tekan F9.
* Property panel ada di bagian bawah. Jika disebut x y maka lihat posisi simbol di property.
* Simbol adalah elemen yang ada di library (F11). Nama yang muncul di library adalah nama simbol.
* Instance adalah obyek yang ada di stage, namanya muncul di property panel.
* Insert layer baru ada di bawah kiri timeline.
* Untuk membuat motion tween: klik pada frame tengah, antara dua keyframe di timeline, lihat property panel ada "motion", pilih "tween". warna frame akan jadi biru dan tanda panah.
" jika disebut layer "action" maka itu berarti layer dengan nama "action".
* jika disebut "Menu: File/import", maka itu berarti menu bar di flash (paling atas).
* Main stage adalah stage dg timeline utama (scene1). Setiap obyek dalam main stage juga punya stage dan timeline sendiri. Jika disebut root berarti main stage (tombolnya ada di dekat timeline ada "scene1").
* Preview dengan menekan Ctrl+enter

>> biasakan membuat nama layer sesuai isinya.
>> biasakan membuat nama simbol dan instance sesuai isinya.

Step by step