nayzuko.com || animation n web tutorial

Flash Header: Looping Cloud

Email Print PDF
Article Index
Flash Header: Looping Cloud
Animasi Awan
Animasi Menu
All Pages

Ingin membuat header flash dengan background looping?

Header di bawah ini mempunyai 3 bagian animasi.
1. Intro Easing Animation >> blok garis turun ke bawah
2. Background Animation >> awan yang bergerak tanpa putus dari kanan ke kiri
3. Menu Animation >> menu muncul dengan efek easing.

Flash8 f8.png

Alternative content

Get Adobe Flash player


:: ANIMASI INTRO

Buka flash. Stage 800x200. background putih. 24 fps.Kasih nama layernya "action". Di frame pertama, di action panelnya kasih "stop();"
Lalu buat layer di bawahnya (namai "animbar") dan buat kotak panjang. Convert simbol (tekan F8) jadi graphic, namai "bar". Convert jadi movie clip, namai "animbar".
Masuk "animbar". Buat motion tween "bar" ke layer 13, "bar" bergerak turun (dari y= 0) ke bawah (y=187).

Cari image cloud yang cukup panjang. Dengan photoshop buat ujung kanannya merupakan bagian terpotong ujung kiri sehingga jika nanti digerakkan kelihatan menyatu. (Akan lebih dimengerti jika melihat source fla).
Drag image ke stage. Convert jadi movieclip, misalnya bernama "awan1".
Masuk "animbar", buat layer baru di bawah yang ada, lalu di frame ke-13, tekan F7 untuk membuat keyframe kosong. Jadi kita akan membuat awan bergerak naik mulai frame 13, tepat ketika "bar" sudah turun.
Drag "awan1" ke frame 13. Posisikan "awan1" di bawah stage lalu motion tween ke frame 27 ke posisi atas (x dan y = 0). Awan akan bergerak naik sampai batas atas.
Beri action "stop();" di frame 27.

Preview. (Ctrl+Enter)

Catatan: Motion tween seperti sebenarnya bisa dibuat dengan transition built in di flash.
Misalnya:

var bar:Tween = new Tween(animbar, "_y", Bounce.easeOut, 0, 187, 13, false);//easing dari y=0 ke y=187 dengan durasi 13 frame
// jika ingin durasinya waktu, misalnya 4 seconds, ubah jadi 4, true