Beberapa waktu yang lalu seorang klien meminta dibuatkan flash menu yang berputar seperti layaknya bianglala.  Jika Anda hendak melihat hasil akhirnya, silahkan cek link berikut:  http://www.shiningpillars.com/CarouselApp/CarouselApp.html

Dalam aplikasi tersebut, klien ingin perputaran menu yang teramat sangat lambat dan halus. Teknik animasi tweening biasa sebenarnya baik-baik saja dan will do fine dalam banyak kasus, tetapi tidak akan memuaskan dalam animasi yang teramat lambat (pixel demi pixel).

Silahkan perhatikan demo berikut ini (tekan F5 jika Anda tidak melihat animasinya):

Bandingkan animasi tulisan “Test” yang pertama (atas) dengan yang kedua di bawah.
Saya menggunakan tweening library yang sangat handal TweenMax dari greensock. Untuk animasi pertama, saya cukup memakai statement ini dalam Actionscript 3 (seperti yang Anda saksikan, hasilnya kurang begitu halus):
TweenMax.to(box3, 200, {x:box3.x + 200});

Kode tersebut dapat dibaca sebagai, “Gerakkan objek box3 secara mendatar, 200 pixel ke kanan dari posisi awal dalam waktu 200 detik”. Kalau 200 detik dapat menempuh 200 pixel berarti kecepatannya 1 pixel / detik. Penambahan satu pixel dalam satu detik ini membuat animasi patah-patah. Jika kita memang hendak membuat animasi yang lambat, tentu tidak mungkin mempercepat kecepatan hanya supaya smooth. Lalu apa yang bisa kita lakukan?

Dalam teknik yang saya temukan, untuk menganimasikan objek tersebut secara halus, diperlukan klon / objek kedua. Dua objek ini akan dimainkan transparansinya (fade in/out) dan juga posisinya. Objek klon akan dipindahkan terlebih dahulu ke koordinat target (biasanya hanya dalam jarak beberapa pixel) dan dilakukan fade-in perlahan. Selanjutnya setelah fade-in selesai, objek orisinil akan dipindahkan ke koordinat target dan di fade-out perlahan.

Solusi saya dalam masalah ini sebagaimana terlihat dalam animasi kedua akan saya ilustrasikan di bawah ini. Dalam ilustrasi ini saya menggunakan warna merah untuk menandakan objek asli dan warna biru untuk menandakan objek klon (mohon klik Start untuk memulai animasi):

Jika anda penasaran dengan kodenya, silakan lihat di bawah ini. Asumsikan ada bahwa ada dua objek yang identik di stage. Objek asli kita namakan box1 dan klon dari objek tersebut kita namakan box2 :

import gs.*;
function realMove(obj, x, y) {
 obj.x = x;
 obj.y = y;
 obj.alpha = 1;
}

function moveTo(obj, clone, x, y) {
// move the clone ahead and make it transparent
 clone.alpha = 0;
 clone.x = x;
 clone.y = y;

// slowly make the clone visible
 TweenMax.to(clone, 0.4, {alpha:1});
// slowly make the original object invisible
 TweenMax.to(obj, 0.5, {alpha:0, onComplete:realMove, onCompleteParams:[obj,x,y]});
}

setInterval(tickHandler, 600);
function tickHandler() {
 moveTo(box, box2, box.x+1, box.y);
}