Flash Motion Path dalam AS3: 1 Animasi untuk Berbagai Objek

Posting pertamax di tahun 2010!
Seperti yang saya janjikan pada postingan sebelumnya, Flash Motion Path sebagai alternatif Motion Tween klasik, pada tulisan ini saya akan mencoba membahas cara menerapkan motion path melalui kode AS3. Seperti biasa, saya menggunakan cara yang paling mudah untuk membuat tutorial yaitu learning by doing alias teaching by example. File flash yang digunakan akan melanjutkan contoh dari postingan sebelumnya, jadi yang belum baca silakan baca terlebih dahulu dan ikuti langkah-langkahnya.

Kalau sudah, langkah berikutnya adalah menambahkan label pada motion path yang sudah dibuat. Klik frame pada Layer 1, lalu di bagian Properties beri nama motion path misalnya “motion1″.

Buat sebuah layer baru, tambahkan movie clip pada layer tersebut (bisa copy-paste dari movie clip pertama). Beri nama movie clip baru tersebut, misalnya “bola2″.

Pada frame pertama masukkan kode action script sebagai berikut:

import fl.motion.AnimatorFactory;
import fl.motion.AnimatorBase;

var animator:AnimatorBase = AnimatorFactory(this["motion1"]).addTarget(this["bola2"]);

Coba jalankan file tersebut, bola2 akan bergerak mengikuti jalur motion path yang sama dengan bola pertama.

Cara di atas cukup untuk mengaplikasikan sebuah motion path ke movie clip lain, tapi masalahnya sekali kita melakukan addTarget, movie clip tersebut akan terikat dengan motion path yang bersangkutan. Akibatnya jika kita melakukan addTarget terhadap movie clip lain dan menganimasikannya, movie clip yang sudah terikat sebelumnya akan ikut teranimasi. Karena itu saya mencoba membuat fungsi baru yang lebih fleksibel, di bawah ini saya tuliskan kodenya.

import fl.motion.AnimatorFactory;
import fl.motion.Animator;

function createAnimator(target:DisplayObject, path:AnimatorFactory, repeatCount:int,
autoPlay:Boolean = true, autoRewind:Boolean = false ):Animator
{
  var animator:Animator;
  animator = new Animator();
  animator.motion = path.motion;
  animator.repeatCount = repeatCount;
  animator.useCurrentFrame(false, 1);
  animator.autoRewind = autoRewind;
  animator.target = target;
  if (autoPlay){
    animator.play();
  }
  return animator;
}

//cara penggunaan
createAnimator(this["bola2"],this["motion1"],1);

Parameter-parameter yang lain dapat juga digunakan sesuai keperluan. Jika animasi tidak ingin dijalankan langsung (auto-play), maka cara menggunakannya

var animator:Animator = createAnimator(this["bola2"],this["motion1"],1,false);
animator.play();

Semoga tulisan ini cukup berguna bagi para Flash coder lainnya.