2010年11月2日 星期二

[AS3] Tweener→→→游移在兩種狀態間?

Tweener的解釋→游移在兩種狀態間?蠻有一點意思.
所以,從某種狀態到另一種狀態間的漸變過程,該是Tweener類別的意圖。

Tweener是開放源碼的程式庫。
Tweener網址:http://code.google.com/p/tweener/
Tweener類別下載:http://code.google.com/p/tweener/downloads/list
Tweener Documentation:http://hosted.zeh.com.br/tweener/docs/en-us/

基本的Tweener漸變,需要知道以下1和2:
  1. import caurina.transitions.Tweener; //Tweener不是內建類別,必須匯入caurina類別套件下的transitions類別套件下的Tweener類別

  2. Tweener.addTween(target:Object, tweeningParameters:Object):Void//以Tweener類別的addTween方法,將tweeningParameters定義的漸變參數附加到target物件上,據此產生漸變動畫。

    //target:Object — Any object that will suffer a tweening. These objects are usually MovieClip, TextField, or Soundinstances, or any other custom object with a numeric property that needs to be tweened.

    //
    tweeningParameters:Object — An object containing various properties of the original object that you want to tween on the original objects, with their final values assigned (some special properties are also allowed), as well as some built-in Tweener properties used when defining tweening parameters. This is like the recipe for the tweening, declaring both what will be tweened, and how.

//所以→
 Tweener.addTween(目標物件:Object, 漸變參數:Object)
→目標物件可以是影片實體、文字欄位、聲音實體、其它擁有數值屬性的自訂物件。
→漸變參數定義目標物件新的屬性值,漸變過程即原有屬性值到新的屬性值之間的動畫過程。

swf例一:Tweener.addTween()


//匯入Tweener類別;匯入MouseEvent類別
import caurina.transitions.Tweener;
import flash.events.MouseEvent;

//
click_mc.addEventListener(MouseEvent.MOUSE_DOWN, tweenFun)

function tweenFun(e:MouseEvent):void{

//針對a_mc附加漸變動畫,{x:450, y:100, time:1.5}為其漸變參數,物件類型
Tweener.addTween(a_mc, {x:450, y:100, time:1.5});

} 


swf例二onComplete:value、transition:transitionType(String)




//匯入Tweener類別;匯入MouseEvent類別
import caurina.transitions.Tweener;
import flash.events.MouseEvent;

//宣告oriX和oriY,將a_mc在主場景上的初始位置x及y座標存入
var oriX:Number = a_mc.x;
var oriY:Number = a_mc.y;
//
click_mc.buttonMode = true;
click_mc.addEventListener(MouseEvent.MOUSE_DOWN, tweenFun1)

//定義tweenFun1的內容,a_mc的漸變參數為{x:470, y:80, time:1.5, onComplete:tweenFun2}
//onComplete:tweenFun2將驅使x:470, y:80, time:1.5的漸變完成後,
//呼叫tweenFun2開始執行
function tweenFun1(e:MouseEvent):void{
Tweener.addTween(a_mc, {x:470, y:80, time:1.5, onComplete:tweenFun2});
} 

//其中transition:"easeOutElastic"定義漸變階段的動作型態
//可參照Transition Types 之說明
function tweenFun2(){
 Tweener.addTween(a_mc, {x:oriX, y:oriY, time:1.5, transition:"easeOutElastic"});
}



swf例三:ColorShortcuts類別→Complete color transformation properties→_color:Number(16進位色彩碼)





ColorShortcuts類別 參考文件


//匯入Tweener類別;匯入MouseEvent類別
import caurina.transitions.Tweener;
import flash.events.MouseEvent;
//匯入ColorShortcuts類別
import caurina.transitions.properties.ColorShortcuts;
//初始化ColorShortcuts
ColorShortcuts.init();

//宣告oriX和oriY,將a_mc在主場景上的初始位置x及y座標存入
var oriX:Number = a_mc.x;
var oriY:Number = a_mc.y;
//
click_mc.buttonMode = true;
click_mc.addEventListener(MouseEvent.MOUSE_DOWN, tweenFun1)

//定義tweenFun1的內容,a_mc的漸變參數為{x:470, y:80, time:1.5, onComplete:tweenFun2}
//onComplete:tweenFun2將驅使x:470, y:80, time:1.5的漸變完成後,
//呼叫tweenFun2開始執行
//Complete color transformation properties裡的_color參數,其值為16進位數值
//例如0xff0000為紅色
function tweenFun1(e:MouseEvent):void{
Tweener.addTween(a_mc, {x:470, y:80, time:1.5, _color:0xff0000, onComplete:tweenFun2});
} 

//其中transition:"easeOutElastic"定義漸變階段的動作型態,
//可參照Transition Types 之說明。
//_color:null可將_color參數值回歸初始無值狀態。
function tweenFun2(){
 Tweener.addTween(a_mc, {x:oriX, y:oriY, time:5, _color:null,transition:"easeOutElastic"});
}

沒有留言: