Flex學習筆記_06 使用行爲對象和動畫效果_模糊、發光效果

6.3.1 模糊效果和發光效果的運用實例
Blur 模糊效果 和 Glow 發光效果都運用了Flash Player 內置的filter濾鏡功能，繼承於 TweenEffect 對象。TweenEffect 對象是所有形變效果的父類，它的子類佔據了動畫效果的絕大部分。

Blur 模糊效果

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">

    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            private var handlerEnd:Boolean = true;
            private var isReverse:Boolean = false;
            //初始化函數
            private function initUI():void{
                //指定目標對象，[]是數組定義符號
                //[myPane]表示一個只含有一個元素的數組
                Effect_Blur.targets = [myPanel];               
                //var arr:Array = new Array();
                //arr.push(myPanel);
            }
            //開始播放動畫效果
            internal function startBlur():void{
                handlerEnd = true;               
                Effect_Blur.play();
            }
            //執行動畫播放結束後的動作
            internal function endBlur():void{
                if(handlerEnd){
                    //反向變化
                    isReverse = !isReverse;
                    Effect_Blur.play(null,isReverse);                   
                }
            }
            //停止按鈕的動作
            internal function stopBlur():void{
                handlerEnd = false;
                Effect_Blur.end();
                pauseBtn.label = "暫停";
                //清空濾鏡，消除模糊效果，將myPanel還原到原始狀態
                myPanel.filters = [];
            }
            //暫停按鈕的動作
            internal function pauseHandler():void{
                if(!Effect_Blur.isPlaying){
                    return;
                }
                if(pauseBtn.label == "暫停"){
                    pauseBtn.label = "繼續";
                    Effect_Blur.pause();
                }else{
                    pauseBtn.label = "暫停";
                    Effect_Blur.resume();
                }
            }
        ]]>
    </mx:Script>
    <mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>
    <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="圖片面板">
        <mx:Image x="0" y="10" source="tree.jpg"/>
        <mx:Label x="0" y="109" text="walking tree"/>
    </mx:Panel>
    <mx:Button click="startBlur()" x="30" y="275" label="開始" width="50"/>
   
    <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>
    <mx:Button click="pauseHandler()" x="214" y="275" label="暫停" width="48" id="pauseBtn"/>
   
</mx:Application>

 
動畫效果的target 屬性，用來指定作用對象，而targets 屬性可以將動畫效果一次運用在多個對象上。targets 是一個Array 數組。

Blur 對象的這些屬性：blurXFrom、blurXTo、blurYFrom、blurYTo 定義了始末位置的模糊距離。

Effect 對象的play 方法中，第一個參數表示目標對象，如果之前已經指定，可以直接用null代替。第二個參數isReverse 表示播放方向，true：逆向播放，falsh：正向播放。

filters屬性代表目標對象當前使用的濾鏡集合。它是所有可視化對象的公有屬性，以數組的形式存儲了自身所有的濾鏡數據。如果使用[]給他賦值，代表清除了目標所有濾鏡效果的作用。


Glow 發光效果

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">
    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            private var handlerEnd:Boolean = true;
            private var isReverse:Boolean = false;
           
            private function initUI():void{
                Effect_Blur.target = myPanel;
                Effect_Glow.target = myPanel;
            }
            //開始播放動畫效果
            internal function startBlur():void{
                //在播放函數中指定目標對象，[]是數組定義符號，[myPane]
                //var arr:Array = new Array();
                //arr.push(myPanel);
                handlerEnd = true;               
                Effect_Blur.play();
                Effect_Glow.play();
            }
            //執行動畫播放結束後的動作
            internal function endBlur():void{
                if(handlerEnd){
                    //反向播放
                    isReverse = !isReverse;
                    Effect_Blur.play(null,isReverse);                   
                }
            }
            internal function stopBlur():void{
                handlerEnd = false;
                Effect_Blur.end();
               
                var tmpArr:Array = myPanel.filters;
                //遍歷數組
                for (var i:uint = 0; i < tmpArr.length; i++) {
                    //is 是類型判斷符號，指明對象是否是指定對象的實例或指定對象子類的實例
                    if (tmpArr[i] is BlurFilter) {
                        //如果是，從數組中刪除。
                        //splice（i,1)，刪除從i位置開始的一個元素
                        tmpArr.splice(i,1);
                        i = i-1;
                    }
                }
                //將新的數據賦予對象，新的濾鏡生效
                //myPanel.filters = tmpArr;
                myPanel.filters = []
            }
        ]]>
    </mx:Script>
   
    <mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>
    <mx:Glow id="Effect_Glow" alphaFrom="1.0" alphaTo="0.3"
        blurXFrom="0.0" blurXTo="30.0"
        blurYFrom="0.0" blurYTo="30.0" color="0x6633ff" />
   
    <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="圖片面板">
        <mx:Image x="0" y="10" source="tree.jpg"/>
        <mx:Label x="0" y="109" text="walking tree"/>
    </mx:Panel>
    <mx:Button click="startBlur()" x="30" y="275" label="開始" width="50"/>
   
    <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>
   
</mx:Application>

 

Glow 對象的參數比較多，主要是設置光顏色color、透明度alphaFrom alphaTo、水平和垂直的發光距離blurXFrom、blurXTo、blurYFrom、blurYTo。