[AS3] Transition Types 漸變型態展示

點選Transition Types項目，而後按Click鈕，觀賞漸變效果。

SWF瀏覽

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

//
//將 List 組件加入應用程式時，您可以加入下列 ActionScript 程式碼，讓螢幕朗讀程式能夠存取此組件
import fl.accessibility.ListAccImpl;
ListAccImpl.enableAccessibility();
//匯入List類別
import fl.controls.List;
//宣告tranVar為tweenFun2()之漸變參數transition的參數值
var tranVar:String;
//主場景上實體名稱為aList之List組件，addItem()將項目逐一附加至項目清單的結尾
aList.addItem({label:"linearx", data:"linear"});
aList.addItem({label:"easeInSine", data:"easeInSine"});
aList.addItem({label:"easeOutSine", data:"easeOutSine"});
aList.addItem({label:"easeInOutSine", data:"easeInOutSine"});
aList.addItem({label:"easeInCubic", data:"easeInCubic"});
aList.addItem({label:"easeOutCubic", data:"easeOutCubic"});
aList.addItem({label:"easeInOutCubic", data:"easeInOutCubic"});
aList.addItem({label:"easeOutInCubic", data:"easeOutInCubic"});
aList.addItem({label:"easeInQuint", data:"easeInQuint"});
aList.addItem({label:"easeOutQuint", data:"easeOutQuint"});
aList.addItem({label:"easeInOutQuint", data:"easeInOutQuint"});
aList.addItem({label:"easeOutInQuint", data:"easeOutInQuint"});
aList.addItem({label:"easeInCirc", data:"easeInCirc"});
aList.addItem({label:"easeOutCirc", data:"easeOutCirc"});
aList.addItem({label:"easeInOutCirc", data:"easeInOutCirc"});
aList.addItem({label:"easeOutInCirc", data:"easeOutInCirc"});
aList.addItem({label:"easeInBack", data:"easeInBack"});
aList.addItem({label:"easeOutBack", data:"easeOutBack"});
aList.addItem({label:"easeInOutBack", data:"easeInOutBack"});
aList.addItem({label:"easeOutInBack", data:"easeOutInBack"});
aList.addItem({label:"easeInQuad", data:"easeInQuad"});
aList.addItem({label:"easeOutQuad", data:"easeOutQuad"});
aList.addItem({label:"easeInOutQuad", data:"easeInOutQuad"});
aList.addItem({label:"easeOutInQuad", data:"easeOutInQuad"});
aList.addItem({label:"easeInQuart", data:"easeInQuart"});
aList.addItem({label:"easeOutQuart", data:"easeOutQuart"});
aList.addItem({label:"easeInOutQuart", data:"easeInOutQuart"});
aList.addItem({label:"easeOutInQuart", data:"easeOutInQuart"});
aList.addItem({label:"easeInExpo", data:"easeInExpo"});
aList.addItem({label:"easeOutExpo", data:"easeOutExpo"});
aList.addItem({label:"easeInOutExpo", data:"easeInOutExpo"});
aList.addItem({label:"easeOutInExpo", data:"easeOutInExpo"});
aList.addItem({label:"easeInElastic", data:"easeInElastic"});
aList.addItem({label:"easeOutElastic", data:"easeOutElastic"});
aList.addItem({label:"easeInOutElastic", data:"easeInOutElastic"});
aList.addItem({label:"easeOutInElastic", data:"easeOutInElastic"});
aList.addItem({label:"easeInBounce", data:"easeInBounce"});
aList.addItem({label:"easeOutBounce", data:"easeOutBounce"});
aList.addItem({label:"easeInOutBounce", data:"easeInOutBounce"});
aList.addItem({label:"easeOutInBounce", data:"easeOutInBounce"});
//
//aList.selectedItem={label:"easeInOutElastic", data:"easeInOutElastic"};
//將aList組件被選取項目之索引編號設為34
aList.selectedIndex = 34;
//將aList組件捲軸捲動至項目索引編號39
aList.scrollToIndex(34+5);
trace(aList.selectedItem.data);
//將aList組件被選取項目物件的data屬性指定給tranVar
//tranVar為tweenFun2()之漸變參數transition的參數值
tranVar = aList.selectedItem.data;
//aList廣播Event.CHANGE事件給getData偵聽函式
aList.addEventListener(Event.CHANGE, getData);
//
function getData(event:Event) {
 //將event.target事件物件的selectedItem物件的data屬性值導入tranVar
 tranVar = event.target.selectedItem.data;
}


//宣告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:280, y:50, time:1, _color:0xffff00, onComplete:tweenFun2});
} 

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

Transition Types