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>

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

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