Menggunakan Tween Class

May 25th 2010, 10:52

Biasanya, tween kita buat pada time line dengan menu klikkanan->create tween. Namun Adobe juga menyediakan tween class yang memungkinkan kita untuk men-tween suatu object dengan actionScript. Berikut langkah-langkahnya

 

1. kita harus meng import library Tween dan Motion terlebih dahulu

 

Show Plain Text
  1.      import fl.transitions.Tween;
  2.      import fl.motion.easing.*;
  3.  

 

2. Definisikan variable tween untuk menghandle object tween kita nanti.

 

Show Plain Text
  1. private var tween:Tween;

 

3. Buat object tween dengan parameter sebagai berikut

 

Show Plain Text
  1. tween = new Tween(circle,"y",Quadratic.easeOut,circle.y,10,0.4,true);

 

Baris diatas berarti kita membuat satu object tween untuk menggerakkan movieclip bernama circle dari posisi Y awal-nya ke Y=10,  Selain itu bisa juga secara bersamaan kita tween X nya atau alpha, dll misalnya

 

Show Plain Text
  1. tween = new Tween(circle,"y",Quadratic.easeOut,circle.y,10,0.4,true);
  2. tweenX = new Tween(circle,"x",Quadratic.easeOut,circle.x,14,0.4,true);
  3. tweenA = new Tween(circle,"alpha",Quadratic.easeOut,circle.alpha,0.2,0.4,true);

 

Quadratic.easeOut pada contoh diatas adalah tween functionnya, yang memberikan model efek gerakan, untuk melihat perbedaannya dan apa saja macam2nya silakan coba demo dibawah. sedangkan nilai 0.4 berarti durasi gerakan adalah 0.4 detik.

 

 

Berikut ini document class dari contoh aplikasi diatas,

 

 

Show Plain Text
  1. package {
  2.     import flash.display.*;
  3.     import flash.events.*;
  4.    
  5.     //import library dulu
  6.     import fl.transitions.Tween;
  7.     import fl.motion.easing.*;
  8.    
  9.     public class DemoTween extends MovieClip {
  10.         private var tweenY,tweenX:Tween;
  11.         private var circle:Sprite;
  12.         private var area:Sprite;
  13.         private var tweenFunction:int=1;
  14.        
  15.         public function DemoTween() {
  16.             //bikin kotak area
  17.             area = new Sprite();
  18.             area.graphics.beginFill(0xE4EEBB);
  19.             area.graphics.drawRect(10,10,380,350);
  20.             addChild(area);
  21.            
  22.             //bikin lingkaran kecil
  23.             circle = new Sprite();
  24.             circle.graphics.beginFill(0xE8AD28);
  25.             circle.graphics.drawCircle(0,0,6);
  26.             addChild(circle);
  27.            
  28.             //tentukan posisi awal lingkaran kita
  29.             circle.x = 200;
  30.             circle.y = 200;
  31.            
  32.             //monitor kalo ada mouse click
  33.             area.addEventListener(MouseEvent.MOUSE_DOWN,mDown);
  34.             //monitor kalo combobox diganti
  35.             comboBox.addEventListener(Event.CHANGE,changeType);
  36.         }
  37.         private function mDown(e:MouseEvent) {
  38.             //simpan posisi mouse
  39.             var px:Number=mouseX;
  40.             var py:Number=mouseY;
  41.            
  42.             //durasi tween
  43.             var duration:Number = 1.2;
  44.            
  45.             //buat tween berdasar function yg dipilih (lihat function dibawah)
  46.             switch(tweenFunction) {
  47.                 case 1:
  48.                     tweenY = new Tween(circle,"y",Quadratic.easeOut,circle.y,py,duration,true);
  49.                     tweenX = new Tween(circle,"x",Quadratic.easeOut,circle.x,px,duration,true);
  50.                     break;
  51.                 case 2:
  52.                     tweenY = new Tween(circle,"y",Quadratic.easeIn,circle.y,py,duration,true);
  53.                     tweenX = new Tween(circle,"x",Quadratic.easeIn,circle.x,px,duration,true);
  54.                     break;
  55.                 case 3:
  56.                     tweenY = new Tween(circle,"y",Quadratic.easeInOut,circle.y,py,duration,true);
  57.                     tweenX = new Tween(circle,"x",Quadratic.easeInOut,circle.x,px,duration,true);
  58.                     break;
  59.                 case 4:
  60.                     tweenY = new Tween(circle,"y",Elastic.easeOut,circle.y,py,duration,true);
  61.                     tweenX = new Tween(circle,"x",Elastic.easeOut,circle.x,px,duration,true);
  62.                     break;
  63.                 case 5:
  64.                     tweenY = new Tween(circle,"y",Elastic.easeIn,circle.y,py,duration,true);
  65.                     tweenX = new Tween(circle,"x",Elastic.easeIn,circle.x,px,duration,true);
  66.                     break;
  67.                 case 6:
  68.                     tweenY = new Tween(circle,"y",Elastic.easeInOut,circle.y,py,duration,true);
  69.                     tweenX = new Tween(circle,"x",Elastic.easeInOut,circle.x,px,duration,true);
  70.                     break;
  71.                 case 7:
  72.                     tweenY = new Tween(circle,"y",Back.easeOut,circle.y,py,duration,true);
  73.                     tweenX = new Tween(circle,"x",Back.easeOut,circle.x,px,duration,true);
  74.                     break;
  75.                 case 8:
  76.                     tweenY = new Tween(circle,"y",Back.easeIn,circle.y,py,duration,true);
  77.                     tweenX = new Tween(circle,"x",Back.easeIn,circle.x,px,duration,true);
  78.                     break;
  79.                 case 9:
  80.                     tweenY = new Tween(circle,"y",Back.easeInOut,circle.y,py,duration,true);
  81.                     tweenX = new Tween(circle,"x",Back.easeInOut,circle.x,px,duration,true);
  82.                     break;
  83.                 case 10:
  84.                     tweenY = new Tween(circle,"y",Bounce.easeOut,circle.y,py,duration,true);
  85.                     tweenX = new Tween(circle,"x",Bounce.easeOut,circle.x,px,duration,true);
  86.                     break;
  87.                 case 11:
  88.                     tweenY = new Tween(circle,"y",Bounce.easeIn,circle.y,py,duration,true);
  89.                     tweenX = new Tween(circle,"x",Bounce.easeIn,circle.x,px,duration,true);
  90.                     break;
  91.                 case 12:
  92.                     tweenY = new Tween(circle,"y",Bounce.easeInOut,circle.y,py,duration,true);
  93.                     tweenX = new Tween(circle,"x",Bounce.easeInOut,circle.x,px,duration,true);
  94.                     break;
  95.             }
  96.         }
  97.         private function changeType(e) {
  98.             //combobox diganti, isikan ke variable
  99.             tweenFunction=e.target.value;
  100.         }
  101.     }
  102. }

 

Tips Menggunakan Tween Class agar stabil:

  1. Variable untuk object Tween harus global
  2. Satu variable utk satu target dan satu property

Add your comment

CAPTCHA
reload code