Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果

6.3.1 模糊效果和发光效果的运用实例
Blur 模糊效果 和 Glow 发光效果都运用了Flash Player 内置的filter滤镜功能，继承于 TweenEffect 对象。TweenEffect 对象是所有形变效果的父类，它的子类占据了动画效果的绝大部分。

Blur 模糊效果

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
3.   
4.     <mx:Style source="style.css" />  
5.       
6.     <mx:Script>  
7.         <![CDATA[  
8.             private var handlerEnd:Boolean = true;  
9.             private var isReverse:Boolean = false;  
10.             //初始化函数  
11.             private function initUI():void{  
12.                 //指定目标对象，[]是数组定义符号  
13.                 //[myPane]表示一个只含有一个元素的数组  
14.                 Effect_Blur.targets = [myPanel];                 
15.                 //var arr:Array = new Array();  
16.                 //arr.push(myPanel);  
17.             }  
18.             //开始播放动画效果  
19.             internal function startBlur():void{  
20.                 handlerEnd = true;                 
21.                 Effect_Blur.play();  
22.             }  
23.             //执行动画播放结束后的动作  
24.             internal function endBlur():void{  
25.                 if(handlerEnd){  
26.                     //反向变化  
27.                     isReverse = !isReverse;  
28.                     Effect_Blur.play(null,isReverse);                     
29.                 }  
30.             }  
31.             //停止按钮的动作  
32.             internal function stopBlur():void{  
33.                 handlerEnd = false;  
34.                 Effect_Blur.end();  
35.                 pauseBtn.label = "暂停";  
36.                 //清空滤镜，消除模糊效果，将myPanel还原到原始状态  
37.                 myPanel.filters = [];  
38.             }  
39.             //暂停按钮的动作  
40.             internal function pauseHandler():void{  
41.                 if(!Effect_Blur.isPlaying){  
42.                     return;  
43.                 }  
44.                 if(pauseBtn.label == "暂停"){  
45.                     pauseBtn.label = "继续";  
46.                     Effect_Blur.pause();  
47.                 }else{  
48.                     pauseBtn.label = "暂停";  
49.                     Effect_Blur.resume();  
50.                 }  
51.             }  
52.         ]]>  
53.     </mx:Script>  
54.     <mx:Blur id="Effect_Blur" effectEnd="endBlur()"  
55.         blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>  
56.     <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="图片面板">  
57.         <mx:Image x="0" y="10" source="tree.jpg"/>  
58.         <mx:Label x="0" y="109" text="walking tree"/>  
59.     </mx:Panel>  
60.     <mx:Button click="startBlur()" x="30" y="275" label="开始" width="50"/>  
61.       
62.     <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>  
63.     <mx:Button click="pauseHandler()" x="214" y="275" label="暂停" width="48" id="pauseBtn"/>  
64.       
65. </mx:Application>  

<?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代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">  
3.     <mx:Style source="style.css" />  
4.       
5.     <mx:Script>  
6.         <![CDATA[  
7.             private var handlerEnd:Boolean = true;  
8.             private var isReverse:Boolean = false;  
9.              
10.             private function initUI():void{  
11.                 Effect_Blur.target = myPanel;  
12.                 Effect_Glow.target = myPanel;  
13.             }  
14.             //开始播放动画效果  
15.             internal function startBlur():void{  
16.                 //在播放函数中指定目标对象，[]是数组定义符号，[myPane]  
17.                 //var arr:Array = new Array();  
18.                 //arr.push(myPanel);  
19.                 handlerEnd = true;                 
20.                 Effect_Blur.play();  
21.                 Effect_Glow.play();  
22.             }  
23.             //执行动画播放结束后的动作  
24.             internal function endBlur():void{  
25.                 if(handlerEnd){  
26.                     //反向播放  
27.                     isReverse = !isReverse;  
28.                     Effect_Blur.play(null,isReverse);                     
29.                 }  
30.             }  
31.             internal function stopBlur():void{  
32.                 handlerEnd = false;  
33.                 Effect_Blur.end();  
34.                  
35.                 var tmpArr:Array = myPanel.filters;  
36.                 //遍历数组  
37.                 for (var i:uint = 0; i < tmpArr.length; i++) {  
38.                     //is 是类型判断符号，指明对象是否是指定对象的实例或指定对象子类的实例  
39.                     if (tmpArr[i] is BlurFilter) {  
40.                         //如果是，从数组中删除。  
41.                         //splice（i,1)，删除从i位置开始的一个元素  
42.                         tmpArr.splice(i,1);  
43.                         i = i-1;  
44.                     }  
45.                 }  
46.                 //将新的数据赋予对象，新的滤镜生效  
47.                 //myPanel.filters = tmpArr;  
48.                 myPanel.filters = []  
49.             }  
50.         ]]>  
51.     </mx:Script>  
52.       
53.     <mx:Blur id="Effect_Blur" effectEnd="endBlur()"  
54.         blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>  
55.     <mx:Glow id="Effect_Glow" alphaFrom="1.0" alphaTo="0.3"  
56.         blurXFrom="0.0" blurXTo="30.0"  
57.         blurYFrom="0.0" blurYTo="30.0" color="0x6633ff" />  
58.       
59.     <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="图片面板">  
60.         <mx:Image x="0" y="10" source="tree.jpg"/>  
61.         <mx:Label x="0" y="109" text="walking tree"/>  
62.     </mx:Panel>  
63.     <mx:Button click="startBlur()" x="30" y="275" label="开始" width="50"/>  
64.       
65.     <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>  
66.       
67. </mx:Application>  

<?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。