nayzuko.com || animation n web tutorial

Simple Autoplay Flash Header

31 Jan 2011 nayzuko
Email Print PDF

flash headerKita akan menggunakan transisi built in Flash untuk membuat header slideshow yang autoplay. Maksudnya, transisi akan dijalankan setelah waktu tertentu dengan efek transisi yang dipilih. Kita bisa mengombinasikan penggunaan class transitions.easing yang built in dan setInterval.

Flash8 f8.png

Alternative content

Get Adobe Flash player

Pada contoh di atas, tidak digunakan image agar file cepat di-load.
Contoh di atas memakai transisi Blinds, fade, dan PixelDissolve. Image 1 >>Blinds >>Image2 >>Fade >>Image3 >>PixelDissolve >>Image1.

Untuk menggunakan image, buka movieclip "satu". "dua" dan "tiga". Lalu isi dengan image Anda.
Prinsip kerja slideshow header di atas adalah:

Di frame 1, kita memanggil class transisi Flash:

import mx.transitions.*;
import mx.transitions.easing.*;

Lalu kita memberi fungsi menuju frame ke-2 setelah 500miliseconds dengan setInterval.
function blinding() {
gotoAndStop(2);
clearInterval(myInterval);
}
myInterval = setInterval(blinding, 500);

Saat di frame 2, kita menjalankan transisi. Dan dalam waktu 3 detik, kita ke frame 3 untuk transisi image berikutnya.
stop();
mx.transitions.TransitionManager.start(satu, {type:mx.transitions.Blinds, direction:mx.transitions.Transition.OUT, duration:3, easing:mx.transitions.easing.Back.easeInOut, numStrips:10, dimension:1});

function blinding2() {
gotoAndStop(3);
clearInterval(myInterval);
}

myInterval = setInterval(blinding2, 5000);

Catatan: jangan jalankan setInterval lebih cepat dari durasi transisi agar timelinde flash tidak kacau karena harus menjalankan setInterval sementara transisi belum selesai. Terlihat di atas bahwa setInterval memakai waktu 5 detik, sementara durasi transisi 3 detik.

Lakukan hal yang sama pada frame berikutnya.
Di transisi terakhir adalah image yang sama dengan image di frame pertama, dengan posisi x,y yang sama sehingga muncul kesan looping.

Transisi lain: Wipe, Fly, Iris, Rotate, Squeeze, Wipe, Zoom.
Bagaimana penggunaannya? Berikut ini contohnya (ganti OUT dengan IN sesuai efek yang diinginkan).
mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Blinds, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, numStrips:10, dimension:1});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Fade, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Fly, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, startPoint:1});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Iris, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, startPoint:1, shape:mx.transitions.Iris.SQUARE});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.PixelDissolve, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, xSections:10, ySections:10});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Photo, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Rotate, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, ccw:false, degrees:360});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Squeeze, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, dimension:0});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Wipe, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut, startPoint:1});

mx.transitions.TransitionManager.start(example_mc, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.OUT, duration:1, easing:mx.transitions.easing.Back.easeInOut});


Download source
f8.png