Animasi Header by emailnyagalih251

VIEWS: 16 PAGES: 5

									Animasi Header

ini untuk newbie.
karena itu akan banyak memakai motion tween di frame.

Pada web bankartharindo.com
ada beberapa animasi yang akan jadi objek tutorial ini.

1. Intro. Ada bar turun lalu background awal muncul.
2. Animasi background. Lihat awan di latar belakang selalu bergerak, kontinyu atau looping.
2. Animasi button menu. Lihat kanan bawah. Ketika mouse over, animasinya muncul.
3. Animasi teks dan logo. Teks dan logo, juga karakter orang di header, masuk ke stage dengan
motion tween.

Untuk melihat urutan animasi, klik kanan lalu klik "play"

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

:: 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.

PREVIEW

DONE

Motion tween adalah teknik dasar untuk animasi yang akan selalu dipakai.

Tapi actionscript mempermudah tugas motion tween manual. Ada banyak script yang bisa dipakai
untuk membuat animasi linear.

Untuk membuat animasi awan yang looping, kita tidak perlu membuat motion tween manual sampai
291 frame. Cukup kasih action di movie clip "aniawan"

onClipEvent (enterFrame)
{
var distance=_10; //ini gak dipake, pada file fla, silakan delete aja
_x-=2;
if (_x > 0) _x=-1088;
if (_x < -1088) _x=0;
}
Dan untuk animasi 5 menu yang muncul berurutan, bisa dipakai tween easing. seperti ini:

var xt:Tween = new Tween(m1, "_y", None.easeOut, 400, 101, 14, false);
var xt:Tween = new Tween(m2, "_y", None.easeOut, 400, 101, 18, false);
var xt:Tween = new Tween(m3, "_y", None.easeOut, 400, 101, 20, false);
var xt:Tween = new Tween(m4, "_y", None.easeOut, 400, 101, 22, false);
var xt:Tween = new Tween(m5, "_y", None.easeOut, 400, 101, 24, false);

								
To top