[AS3] TransitionManager dan Time Delay ActionScript 3

      Selamat datang kembali di nblognlife.com. Pada tutorial kali ini saya akan membahas cara menggunakan TransitionManager serta memanfaatkan Time Delay untuk membuat efek transisi dengan ActionScript3. 

     Saya pernah memanfaatkan fungsi-fungsi tersebut untuk memberikan efek transisi pada object saat melakukan suatu perpindahan dari halaman satu ke halaman lain pada media pembelajaran yang saya buat. Hasilnya menarik, seperti ketika menggunakan efek transisi di PowerPoint. Berikut penampakan efek transisi yang akan kita buat : 

*Jangan lupa mengaktifkan flash pada browser masing-masing.

     Selain fungsi TransitionManager, kita juga akan memanfaatkan fungsi delay. Apa tujuannya? Fungsi delay membuat efek transisi yang kita aplikasikan pada MovieClip muncul berurutan sesuai dengan keinginan. Jika efek transisi MovieClip ingin ditampilkan secara bersamaan maka penggunaan fungsi delay dapat diabaikan.

Tidak perlu berpanjang lebar langsung saja masuk ke bagian intinya. Berikut adalah langkah-langkah yang akan kita lakukan untuk membuat efek transisi di ActionScript3.

1) Buat MovieClip. Langkah pertama adalah membuat MovieClip. Saya berasumsi bahwa semua pembaca tulisan saya ini telah memahami cara membuat MovieClip sehingga tidak perlu saya jelaskan kembali. Ada tujuh MovieClip yang harus dibuat seperti yang terlihat pada gambar di bawah ini.

*Jika ingin melakukan improvisasi, dipersilahkan.

*Ukuran workspace di bawah ini adalah 500 x 300 px

Tampilan MovieClip pada TransitionManager

2) Code Action Script 3. Karena kita menggunakan AS3 yang (setahu saya) tidak lagi mengizinkan meletakkan code di objek, maka untuk memperjelas juga kita membuat layer baru yang khusus berisi kode AS3. Berikut adalah penampakan ss-nya.

Tampilan Layer-layer untuk Membuat Efek Transisi 

Berikut adalah code Action Script 3-nya:

/*
[RS]
*/
import flash.utils.Timer;

import flash.events.TimerEvent;

import fl.transitions.*;

import fl.transitions.easing.*;

kotakhijau_mc.visible = false;

kotakbiru_mc.visible = false;

menu1_mc.visible = false;

menu2_mc.visible = false;

menu3_mc.visible = false;

menu4_mc.visible = false;

inout_mc.visible = false;

var delay1 : Timer = new Timer(500);

delay1.addEventListener(TimerEvent.TIMER, fungsidelay1);

delay1.start();

function fungsidelay1(event:TimerEvent):void{

      TransitionManager.start(kotakhijau_mc, {type:Fly, direction:Transition.IN, duration:1, startPoint:2, easing:Elastic.easeOut});

      delay1.stop();

}

var delay2 : Timer = new Timer(1000);

delay2.addEventListener(TimerEvent.TIMER, fungsidelay2);

delay2.start();

function fungsidelay2(event:TimerEvent):void{

      TransitionManager.start(kotakbiru_mc, {type:Fly, direction:Transition.IN, duration:1, startPoint:2, easing:Bounce.easeOut});

      delay2.stop();

}

var delay3 : Timer = new Timer(2500);

delay3.addEventListener(TimerEvent.TIMER, fungsidelay3);

delay3.start();

function fungsidelay3(event:TimerEvent):void{

      TransitionManager.start(menu4_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:Elastic.easeOut, startPoint:4});

      delay3.stop();

}

var delay4 : Timer = new Timer(3500);

delay4.addEventListener(TimerEvent.TIMER, fungsidelay4);

delay4.start();

function fungsidelay4(event:TimerEvent):void{

      TransitionManager.start(menu3_mc, {type:Rotate, direction:Transition.IN, duration:1, easing:None.easeOut, ccw:false, degrees:360});

      delay4.stop();

}

var delay5 : Timer = new Timer(4500);

delay5.addEventListener(TimerEvent.TIMER, fungsidelay5);

delay5.start();

function fungsidelay5(event:TimerEvent):void{

      TransitionManager.start(menu2_mc, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeOut, numStrips:50, dimension:1});

      delay5.stop();

}

var delay6 : Timer = new Timer(5500);

delay6.addEventListener(TimerEvent.TIMER, fungsidelay6);

delay6.start();

function fungsidelay6(event:TimerEvent):void{

      //Efek transisi gabungan

      TransitionManager.start(menu1_mc, {type:Fade, direction:Transition.IN, duration:2, easing:Strong.easeOut});

      TransitionManager.start(menu1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:Strong.easeOut});

      TransitionManager.start(menu1_mc, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeOut, xSections:23, ySections:23});

      delay6.stop();

}

var delay7 : Timer = new Timer(7500);

delay7.addEventListener(TimerEvent.TIMER, fungsidelay7);

delay7.start();

function fungsidelay7(event:TimerEvent):void{

      //Efek transisi gabungan

      TransitionManager.start(inout_mc, {type:Fly, direction:Transition.IN, duration:2, startPoint:8, easing:Strong.easeOut});

      TransitionManager.start(inout_mc, {type:Fade, direction:Transition.IN, duration:2, easing:Strong.easeOut});

      delay7.stop();

}

var delay8 : Timer = new Timer(10000);

delay8.addEventListener(TimerEvent.TIMER, fungsidelay8);

delay8.start();

function fungsidelay8(event:TimerEvent):void{

      //Efek transisi gabungan

      TransitionManager.start(inout_mc, {type:Fly, direction:Transition.OUT, duration:2, startPoint:8, easing:Strong.easeOut});

      TransitionManager.start(inout_mc, {type:Fade, direction:Transition.OUT, duration:2, easing:Strong.easeOut});

      delay8.stop();

}

var delay9 : Timer = new Timer(13000);

delay9.addEventListener(TimerEvent.TIMER, fungsidelay9);

delay9.start();

function fungsidelay9(event:TimerEvent):void{

      goNextFrame();

      delay9.stop();

}

function goNextFrame():void

{

      delay1.removeEventListener(TimerEvent.TIMER, fungsidelay1);

      delay2.removeEventListener(TimerEvent.TIMER, fungsidelay2);

      delay3.removeEventListener(TimerEvent.TIMER, fungsidelay3);

      delay4.removeEventListener(TimerEvent.TIMER, fungsidelay4);

      delay5.removeEventListener(TimerEvent.TIMER, fungsidelay5);

      delay6.removeEventListener(TimerEvent.TIMER, fungsidelay6);

      delay7.removeEventListener(TimerEvent.TIMER, fungsidelay7);

      delay8.removeEventListener(TimerEvent.TIMER, fungsidelay8);

      delay9.removeEventListener(TimerEvent.TIMER, fungsidelay9);

     

      gotoAndPlay(2);

}

stop();

Catatan:

Setiap efek transisi dapat digunakan satu per satu atau dapat juga dikombinasikan seperti yang saya lakukan pada menu1_mc dan juga inout_mc. Untuk penjelasan parameter yang terdapat  pada transition manager akan dijelaskan pada bagian selanjutnya.

*Penting! Ketika kita menggunakan addEventListener, jangan lupa untuk melakukan removeEventListener.

PENJELASAN

EASING

     Sebelum membahas tentang masing-masing efek transisi saya akan terlebih dahulu menunjukkan tentang tipe-tipe easing pada motion tween. Beberapa tipe easing sudah saya terapkan pada code AS3 di atas.  

Tipe-Tipe Easing

1. Regular

2. Bounce

3. Back

4. Elastic

5. Strong

6. None

Keenam tipe easing di atas harus dikombinasikan dengan yang namanya easing method seperti yang saya contohkan. Berikut adalah masing-masing easing method-nya:

easeIn > Efek tweennya diterapkan di awal animasi

easeOut  > Efek tweennya diterapkan di akhir animasi

easeInOut > Efek tweennya diterapkan di awal dan di akhir animasi

easeNone > tidak ada efek tween yang diterapkan, ini digunakan ketika kita menggunakan tipe easing None

*Agar lebih mudah memahami langsung dipraktekkan saja. Ubah codenya. Test dan lihat hasilnya!

TRANSITION

     Setidaknya ada 9 efek transisi yang dapat digunakan pada AS3, diantaranya Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, dan Zoom.

Blinds

TransitionManager.start(menu2_mc, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeOut, numStrips:50, dimension:1});

*numStrips : banyaknya strip yang digunakan. Dapat diisi dengan semua bilangan positif.

*dimension : 0 untuk horizontal, 1 untuk vertical

Fade

TransitionManager.start(inout_mc, {type:Fade, direction:Transition.IN, duration:2, easing:Strong.easeOut});

Fly

TransitionManager.start(kotakhijau_mc, {type:Fly, direction:Transition.IN, duration:1, startPoint:2, easing:Elastic.easeOut});

Iris

TransitionManager.start(nama_movieClip_mc, {type:Iris, direction:Transition.OUT, duration:2, easing:Strong.easeOut, startPoint:1, shape:Iris.CIRCLE});

*shape : Iris.CIRCLE untuk menggunakan iris bentuk lingkaran, Iris.SQUARE untuk menggunakan iris bentuk kotak.

Photo

TransitionManager.start(nama_movieClip_mc, {type:Photo, direction:Transition.OUT, duration:1, easing:Strong.easeOut});

PixelDissolve

TransitionManager.start(menu1_mc, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeOut, xSections:23, ySections:23});

Rotate

TransitionManager.start(menu3_mc, {type:Rotate, direction:Transition.IN, duration:1, easing:None.easeOut, ccw:false, degrees:360});

*ccw(counter-clockwise) : true berarti perputaran berlawanan arah putaran jarum jam, false berarti menggunakan clockwise (sesuai arah perputaran jarum jam).

*degrees : derajat perputaran, 360 berarti sekali putaran, 720 berarti dua kali putaran, 180 berarti setengah putaran, dst.

Squeeze

TransitionManager.start(nama_movieClip_mc, {type:Squeeze, direction:Transition.OUT, duration:2, easing:None.easeOut, dimension:1});

*dimension : 0 squeeze secara horizontal, 1 squeeze secara vertical

Wipe

TransitionManager.start(menu4_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:Elastic.easeOut, startPoint:4});

Zoom

TransitionManager.start(menu1_mc, {type:Zoom, direction:Transition.IN, duration:2, easing:Strong.easeOut});

Keterangan parameter lain fungsi TransitionManager di atas :

*duration : dalam second/detik

*startPoint : bisa diibaratkan sebagai “pintu masuk/keluar”. Jika menggunakan direction Transition.IN maka startPoint menjadi “pintu masuk” MovieClip, namun jika directionnya Transition.OUT maka startPoint menjadi “pintu keluar” MovieClip. Berikut ini adalah gambar startPoint.

TIME DELAY

Delay digunakan untuk menangguhkan secara sementara suatu proses.

var delay7 : Timer = new Timer(7500);

delay7.addEventListener(TimerEvent.TIMER, fungsidelay7);

delay7.start();

function fungsidelay7(event:TimerEvent):void{

            ...

delay7.stop();

}

Pada potongan code di atas menunjukkan bahwa fungsi fungsidelay7() baru akan dijalankan setelah 7,5 second.

*parameter pada Timer dalam milisecond, jadi 7500 artinya 7,5 second, 4000 artinya 4 second.

Semoga bermanfaat. :)

Baca juga : 
[AS3] Drag dan Drop Object ActionScript 3
[AS3] TransitionManager dan Time Delay ActionScript 3

[AS3] XML Loader ActionScript 3

[AS3] Disable Fullscreen Video pada ActionScript 3 

[RS]

Klik Like & Share jika postingan ini bermanfaat

Tweet

Apa tanggapan Anda?

Berikan tanggapan Anda melalui kolom komentar yang telah disediakan.
- Gunakan bahasa yang sopan;
- Saat menjadikan postingan pada blog ini sebagai referensi, jangan lupa mencantumkan sumbernya (link dari blog ini).

Jika blog ini bermanfaat jangan lupa memberikan 'like' atau 'share' untuk mendapatkan update terbaru.

Terima kasih