Flex第一步：基于ActionScript 3.0的Flex 2应用开发

6.5  自定义行为

6.5.1  了解行为的运行机制

除了组件内置的行为类型，Flex还支持用户自定义行为。由于行为对象分触发器和动画效果两部分，因此，行为自定义也分两部分，包括自定义触发器和自定义动画效果。

在创建动画效果之前，先来了解动画效果的运作方式。每个动画效果由两个对象来实现：一个生   成（factory）类和一个实例（instance）类，factory对象用来处理事件，控制动画，而instance对象则        包含了动画效果的逻辑实现。当动画开始播放时，factory对象将创建一个instance对象来执行动画效    果，一旦动画结束，这个对象会被销毁。如果有多个目标对象，会创建多个instance对象，使得一个      对象对应一个instance。factory对象名和动画效果名称相同，而instance对象名是动画效果名再加上后缀“Instance”。

例如在上一节中：

<mx:Move id="myMove" target="{img}" xFrom="50" xTo="150" duration="2000"/>

这句代码定义了一个Move对象，当动画播放时Move对象会生成一个MoveInstance对象，动画播放完毕，MoveInstance被删除。

下面列出了mx.effects中核心对象的层级关系，如图6.14所示。

图6.14 （a）中所示的是所有生成类的层级关系，图6.14（b）中的则是所有实例类的层级关系。在创建自定义动画效果时，只需选择上面的对象进行扩展即可。我们可以扩展Effect类，也可以扩展Effect的子类（如TweenEffect）。其中MaskEffect是遮罩类型，TweenEffect是渐变类型，CompositeEffect是复合类型。这里又以TweenEffect的使用最为广泛，之前讲到的AnimateProperty、 Blur、Dissolve、Fade、Glow、Move、Pause、Resize、Rotate、Zoom等都是TweenEffect的子类。复合类型并不是新类型，它只是其他动画效果的集合，Parallel和Sequence就是它的子类。

扩展Effect和EffectInstance对象时，必须覆盖父类的部分方法或属性。

     

（a）                                                                （b）

图6.14

表6.3列出了生成类中必须定义的属性和方法。

表6.3

函数名或属性	事 件 描 述
构造函数	必需的。类的构造函数，必须调用super()方法来调用父类的构造函数进行初始化，并且必须接受一个参数来指定目标对象。
initInstance()	必需的。将生成类的属性传到实例对象中，这个方法由Effect对象内部调用，不在外部使用。 另外，覆盖的函数体中必须执行函数：super.initInstance()。
getAffectedProperties()	必需的。返回一个字符串数组，包括目标对象被改变的属性名。如果没有改变，则返回空    数组。
effectStartHandler()	可选的。该函数在实例开始播放时被调用，如覆盖，需要执行super()方法。
effectEndHandler()	可选的。该函数在实例结束播放时被调用，如覆盖，需要执行super()方法。
其他属性和方法	可选的。自定义其他接口。

表6.4是实例类中必须定义的属性和方法。

表6.4

函数名或属性	事 件 描 述
构造函数	必需的。类的构造函数，必须调用super()方法来调用父类的构造函数进行初始化，有且必须接受一个参数来指定目标对象。
play()	必需的。控制动画的播放，覆盖的函数体中必须执行super.play()。
end()	可选的。结束动画播放。
initEffect()	可选的。该函数在动画效果被激活时被调用。
onTweenUpdate()	必需的。如果继承于TweenEffectInstance必须覆盖此方法。该函数在动画播放过程中，会被反复   调用。
onTweenEnd	可选的。如果继承于TweenEffectInstance才可以覆盖此方法。该函数在动画播放结束时会被调用，函数体中必须执行super.onTweenEnd()。
其他属性和方法	可选的。自定义其他接口。

通常情况下，我们没有必要直接扩展Effect和EffectInstance，更方便的做法是扩展它们的子类。例如TweenEffect和 TweenEffectInstance，在这些子类中已经实现了表中的核心方法，这会省很多事。另外，阅读Effect子类的源代码，是学习 Effect对象的一个好方法。

6.5.2  自定义动画效果——一个修改Iris效果的尝试

下面通过实例，修改Flex的Iris效果，来理解如何创建自定义的动画效果。

在修改前，让我们先来看看Iris类的代码。

首先，进入Flex SDK目录下的Flex SDK 2\frameworks\source源代码文件夹，再选择mx\effects文件夹，打开Iris.as和effectClasses文件夹中的 IrisInstance.as两个文件。下面是这两个文件的代码，这里省略了文件中的版权说明和注释文字：

Iris.as:

package mx.effects{

    //导入Iris的实例类

    import mx.effects.effectClasses.IrisInstance;

    //扩展MaskEffect

    public class Iris extends MaskEffect{

        //包含Flex组件版本说明文件

        include "../core/Version.as";

        //构造函数

        public function Iris(target:Object = null){

            //调用父类构造函数

            super(target);

            //指定实例类型

            instanceClass = IrisInstance;

        }

    }

}

这个类的代码很少，最关键的代码只有一行，就是：instanceClass = IrisInstance，表示Iris动画对应的动画实例对象是IrisInstance对象。

IrisInstance对象实现了动画的主体功能，下面是文件IrisInstance.as的内容：

package mx.effects.effectClasses{

    import mx.controls.SWFLoader;

    //扩展MaskEffectInstance

    public class IrisInstance extends MaskEffectInstance{

        include "../../core/Version.as";

        //构造函数

        public function IrisInstance(target:Object){   

            super(target);

        }

        //覆盖父类的方法

        override protected function initMaskEffect():void{

        //调用父类的同名方法

            super.initMaskEffect();

            //得到目标的实际尺寸

            //targetVisualBounds对象包括了目标可视区域的长和宽

            var targetWidth:Number = targetVisualBounds.width / Math.abs(target.scaleX);

            var targetHeight:Number = targetVisualBounds.height / Math.abs(target.scaleY);

            //如果目标是SWFLoader对象，则计算加载内容的尺寸，而不是目标本身的尺寸

            if (target is SWFLoader)    {

                targetWidth = target.contentWidth;

                targetHeight = target.contentHeight;       

            }

            //如果showTarget为true，表示显示目标     

            if (showTarget){

                //定义x、y方向的起始放缩值

                scaleXFrom = 0;

                scaleYFrom = 0;

                scaleXTo = 1;

                scaleYTo = 1;  

                //目标的起始位置     

                xFrom = targetWidth / 2 + targetVisualBounds.x;

                yFrom = targetHeight / 2 + targetVisualBounds.y;

                //确定最后的坐标

                xTo = targetVisualBounds.x;

                yTo = targetVisualBounds.y;

            }else{

                //如果是隐藏目标

                scaleXFrom = 1; 

                scaleYFrom = 1;

                scaleXTo = 0;

                scaleYTo = 0;  

                //目标的起始位置             

                xFrom = targetVisualBounds.x;

                yFrom = targetVisualBounds.y;

                //确定最后的坐标

                xTo = targetWidth / 2 + targetVisualBounds.x;

                yTo = targetHeight / 2 + targetVisualBounds.y;

            }

        }

    }

}

IrisInstance中只有一个核心函数initMaskEffect，主要用来计算动画的各种参数，包括起始值、位置、坐标点等等。

相对其他动画效果而言，Iris效果的这两个类的代码较少，适合我们来学习和修改。

默认状态下Iris采用的遮罩层是矩形的，且动画始终以组件为中心进行运作，我们的目的是将遮罩层修改为圆形，且能选择动画播放时的中心点。

接下来，创建项目NewIris，并分别创建NewIrisEffect.as和NewIrisInstance.as两个类，在Iris两个源文件的基础上进行修改，新文件的内容如下：

源代码：NewIrisEffect.as

package tree{

    //导入代码中使用的对象

    import mx.effects.MaskEffect;

    import mx.effects.EffectInstance;

    import mx.controls.SWFLoader;  

    import flash.display.Shape;

    import mx.core.FlexShape;

    import flash.display.Graphics;

    import flash.geom.Rectangle;   

    //保持原来类的结构不变，继续扩展MaskEffect对象

    public class NewIrisEffect extends MaskEffect {

        //表明动画采用的起始点的类型

        public var position:String;

        //构造函数

        function NewIrisEffect(target:Object = null){

            super(target);

            //定义实例类型为NewIrisInstance，代替原来的IrisInstance

            //NewIrisInstance是我们新建的对象

            instanceClass = NewIrisInstance;   

            //定义新的createMaskFunction，此函数用于绘制遮罩层     

            this.createMaskFunction = createLargeMask;

        }

        //此函数用来绘制遮罩层

        //函数原形来自mx.effects.effectClasses. MaskEffectInstance对象的defaultCreateMask

函数

        public function createLargeMask(targ:Object, bounds:Rectangle):Shape{

            //绘制前，首先获得目标的尺寸，来确定遮罩层的尺寸

            //默认情况下，遮罩层和目标对象的尺寸一致    

            var targetWidth:Number = bounds.width / Math.abs(targ.scaleX);

            var targetHeight:Number = bounds.height / Math.abs(targ.scaleY);

            //

            if (targ is SWFLoader)  {

                // 如果是加载外部内容，则以外部内容的尺寸为准

                targ.validateDisplayList();

                if (targ.content){

                    targetWidth = targ.contentWidth;

                    targetHeight = targ.contentHeight;

                }

            }

            //创建遮罩层的表现对象    

            var newMask:Shape = new FlexShape();

            var g:Graphics = newMask.graphics;

            //设定填充色

            g.beginFill(0xFFFF00);

            //绘制椭圆，drawEllipse是Graphics对象的绘制方法之一

            g.drawEllipse(0,0,targetWidth,targetHeight);

            //默认情况下绘制矩形，这里将这句代码注释掉

            //g.drawRect(0, 0, targetWidth, targetHeight); 

            g.endFill();

            //判断是否旋转

            if (target.rotation == 0)   {

            //如果目标没有旋转

                newMask.width = targetWidth;

                newMask.height = targetHeight;

            }else{

                //如果有旋转，重新计算遮罩层的大小

                //得到角度的弧度数

                var angle:Number = targ.rotation _* Math.PI / 180;          

                var sin:Number = Math.sin(angle);

                var cos:Number = Math.cos(angle);  

                //计算出新的尺寸     

                newMask.width =  Math.abs(targetWidth _* cos - targetHeight _* sin);

                newMask.height = Math.abs(targetWidth _* sin + targetHeight _* cos);

            }      

            return newMask;

        }      

        //覆盖父类的initInstance方法。

        //将生成类的属性传到实例对象中，这个方法在对象内部被调用

        override protected function initInstance(instance:EffectInstance):void  {

            //必须调用父类的同名方法

            super.initInstance(instance);

            //创建新的实例

            var maskEffectInstance:NewIrisInstance = NewIrisInstance(instance);    

            //传递参数给实例

            maskEffectInstance.showTarget = showTarget;

            maskEffectInstance.xFrom = xFrom;

            maskEffectInstance.yFrom = yFrom;

            maskEffectInstance.xTo = xTo;

            maskEffectInstance.yTo = yTo;

            maskEffectInstance.scaleXFrom = scaleXFrom;

            maskEffectInstance.scaleXTo = scaleXTo;

            maskEffectInstance.scaleYFrom = scaleYFrom;

            maskEffectInstance.scaleYTo = scaleYTo;

            //这是新添加的参数，用来确定动画执行时的初始位置

            //是我们实现新的Iris效果的关键

            maskEffectInstance.position = position

        }

    }

}

在NewIrisEffect类中，我们修改了Iris类的代码，主要包括两点：

（1）覆盖了createMaskFunction函数，该函数主要用来绘制遮罩层。createMaskFunction函数原形来自 mx.effects.effectClasses.MaskEffectInstance对象的defaultCreateMask函数，这里只是做了一点小小的修改，在绘制矩形的位置：

//默认情况下绘制矩形

//g.drawRect(0, 0, targetWidth, targetHeight); 

修改为：

g.drawEllipse(0,0,targetWidth,targetHeight);

其中g是Graphics类型，drawEllipse和drawRect都是Graphics对象的绘图函数，drawEllipse用来绘制椭圆，drawRect用来绘制矩形。

createMaskFunction函数的其他部分和defaultCreateMask函数相同，读者可以参照注释阅读其他部分的代码，这里并不需要完全理解这些代码的含义。

（2）覆盖了initInstance方法，用来创建新的NewIrisInstance对象。initInstance方法是Effect对象的核心方法，用来创建动画实例，因为我们修改了实例对象，所以也要修改initInstance方法。在initInstance方法中，必须调用父类的同名方法。同时，要创建新的动画实例，并给实例对象传递参数：

var maskEffectInstance:NewIrisInstance = NewIrisInstance(instance);

…

maskEffectInstance.position = position;

NewIrisInstance是新创建的实例对象，其position属性是我们添加的一个属性，用来标示动画的参照位置，这个参数在后面要使用到。

在NewIrisEffect的构造函数中，覆盖了原来的两个属性：

//定义实例类型为NewIrisInstance，代替原来的IrisInstance

instanceClass = NewIrisInstance;   

//定义新的createMaskFunction，此函数用于绘制遮罩层     

this.createMaskFunction = createLargeMask;

这样，整个NewIrisEffect对象就完成了，接着是NewIrisInstance.as的源代码：

package tree{

    import mx.effects.effectClasses.MaskEffectInstance 

    import mx.controls.SWFLoader;

    public class NewIrisInstance extends MaskEffectInstance {

        //新添加的参数，用来确定动画播放时的初始位置

        public var position:String;

        //构造函数

        public function NewIrisInstance(target:Object)  {  

            super(target);         

        }      

        //_* 覆盖父类方法，initMaskEffect主要是初始化遮罩动画的信息

        //此函数取自IrisInstance的同名函数

        override protected function initMaskEffect():void{     

            //调用父类的同名方法  

            super.initMaskEffect();

            //计算出目标的尺寸

            //targetVisualBounds包括了目标可视区域的长、宽

            var targetWidth:Number = targetVisualBounds.width / Math.abs(target.scaleX);

            var targetHeight:Number = targetVisualBounds.height / Math.abs(target.scaleY);

            //如果是SWFLoader，以记载的内容的尺寸为准

            if (target is SWFLoader){

                targetWidth = target.contentWidth;

                targetHeight = target.contentHeight;       

            }

            //如果是让目标出现

            if (showTarget){               

                scaleXFrom = 0;

                scaleYFrom = 0;

                scaleXTo = 1;

                scaleYTo = 1;

                //依据position属性来决定起点的位置

                //如果中心是左上角

                if(position == "leftTop"){

                    //从左上角开始

                    //targetVisualBounds还包括了目标可视区域的坐标位置

                    xFrom = targetVisualBounds.x;

                    yFrom = targetVisualBounds.y;

                }else if(position == "rightBottom"){

                    //如果中心是右下角

                    //从右上角开始

                    xFrom = targetWidth+ targetVisualBounds.x;

                    yFrom = targetHeight + targetVisualBounds.y;

                }else{

                    //默认从中心开始，保持原来的计算方式不变

                    xFrom = targetWidth / 2 + targetVisualBounds.x;

                    yFrom = targetHeight / 2 + targetVisualBounds.y;

                }

                //终点位置

                xTo = targetVisualBounds.x;

                yTo = targetVisualBounds.y;            

            }else{

                scaleXFrom = 1;

                scaleYFrom = 1;

                scaleXTo = 0;

                scaleYTo = 0;

                //消失动画的起点

                xFrom = targetVisualBounds.x;

                yFrom = targetVisualBounds.y;

                //再计算一遍新的位置

                if(position == "leftTop"){

                    xTo = targetVisualBounds.x;

                    yTo = targetVisualBounds.y;

                }else if(position == "rightBottom"){

                    xTo = targetWidth + targetVisualBounds.x;

                    yTo = targetHeight + targetVisualBounds.y;

                }else{

                    xTo = targetWidth / 2 + targetVisualBounds.x;

                    yTo = targetHeight / 2 + targetVisualBounds.y;

                }

            }

        }

    }

}

NewIrisInstance沿用了IrisInstance对象的代码，只不过在initMaskEffect方法中，加入了判断动画参照点的代码，用来实现我们的新功能：

if(position == "leftTop"){

    //从左上角开始

    //targetVisualBounds还包括了目标可视区域的坐标位置

    xFrom = targetVisualBounds.x;

    yFrom = targetVisualBounds.y;

}else if(position == "rightBottom"){

    //从右下角开始

    xFrom = targetWidth+ targetVisualBounds.x;

    yFrom = targetHeight + targetVisualBounds.y;

}else{

    //默认从中心开始，保持原来的计算方式不变

    xFrom = targetWidth / 2 + targetVisualBounds.x;

    yFrom = targetHeight / 2 + targetVisualBounds.y;

}

position 属性存放了参照点位置，这个参数是在NewIrisEffect对象的initInstance函数中被传递过来的。 targetVisualBounds中包括了目标对象可视区域的坐标位置，利用这个对象，我们可以很快计算出参照点的坐标。这里一共添加了两个位置： leftTop和rightBottom，分别表示左上角和右下角。

完成了动画对象的所有代码后，下面就尝试将它们运用在实例中。在NewIris主程序中插入相应代码，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<!-- 定义命名空间，把新创建的对象都放入tree文件夹中 -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tree = "tree._*"

layout="absolute">

    <mx:Style source="style.css" />

    <!-- 定义动画效果 -->

    <tree:NewIrisEffect position="leftTop" id="myIris" duration="1000"/>

    <!-- 动画效果绑定在图片上 -->

    <mx:Image id="img" x="49" y="63" source="tree.jpg" showEffect="{myIris}" hideEffect=

    "{myIris}" />

    <!-- 改变图片的visible属性 -->

    <mx:Button x="49" y="173" label="播放" click="img.visible = !img.visible"/>

   

</mx:Application>

在代码中，使用MXML语句创建了一个NewIrisEffect对象：

<tree:NewIrisEffect position="leftTop" id="myIris" duration="1000"/>

NewIrisEffect的用法和其他动画对象的用法没什么差别，这里多了一个position属性，用来指定动画的参照点方式。

Image控件中，仍然是使用showEffect和hideEffect来指定动画对象。

按下Ctrl+F11快捷键运行程序。点击按钮，运行的效果如图6.15所示。

至此，完成了一个简单的动画效果。

通过修改Flex效果库中的动画对象，可以加深对动画对象的理解。

6.5.3  自定义触发器

触发器通常和事件相关联，要使对象具有行为属性，必须将事件和效果组合起来，形成一个触发器。

在上一节的NewIris程序的基础上，我们继续完善自定义的动画效果。下面创建一个新的用户组件ImgBox，放在tree文件夹中，编写代码如下。

源代码：tree/ImgBox.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="90" height="90">

    <!-- 元数据标签 -->

    <mx:Metadata>

        <!-- 为事件和效果触发器定义元数据 -->

        [Event(name="hideImage", type="flash.events.Event")]

        [Event(name="showImage", type="flash.events.Event")]

        <!-- 将事件和效果联系起来 -->

        [Effect(name="hideImageEffect", event="hideImage")]

        [Effect(name="showImageEffect", event="showImage")]

    </mx:Metadata>

    <mx:Script>

        <![CDATA[

            //鼠标按下事件

            internal function doDown():void{

                dispatchEvent(new Event("hideImage"));  //派发事件

            }

            internal function doUp():void{

                dispatchEvent(new Event("showImage"));  //派发事件

            }

        ]]>

    </mx:Script>

    <!--给图片添加鼠标按下和松开的动作事件-- >

    <mx:Image id="img" source="tree.jpg" mouseDown="doDown()" mouseUp="doUp()"/>   

</mx:Canvas>

这里使用了<mx:Metadata>元标签给用户组件添加了两个事件：hideImage和showImage，然后将事件和Effect动画联系起来，形成触发器。

使用元标签定义的事件可以在MXML代码中直接引用，但前提是这些事件必须是组件本身派发出去的，比如这里的hideImage事件：

[Event(name="hideImage", type="flash.events.Event")]

在type属性中，要明确标示事件类型。否则在MXML中添加事件监听函数时，将无法正确访问到事件对象。

使用元标签定义的行为触发器，必须和元标签定义的事件关联起来：

[Effect(name="hideImageEffect", event="hideImage")]

Effect标记要来定义触发器，name表示触发器名称，供外部访问，event表示触发器对应的事件，这个事件必须是经过元标签定义过的。

将事件和触发器定义好，就可以在外部控制这些属性。接下来，修改主程序NewIris.mxml如下所示。

源代码：NewIris.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tree = "tree._*"

layout="absolute">

    <mx:Style source="style.css" />

    <!-- 定义了两个新的NewIris效果，用来响应图片的行为-- >

    <tree:NewIrisEffect position="leftTop" scaleXFrom="0.1" scaleXTo="1" id="myIris"

    duration="2000"/>  

    <tree:NewIrisEffect position="rightBottom" scaleXFrom="1" scaleXTo="0.1"

    id="myIris2" duration="2000"/>

    <!-- showImageEffect和hideImageEffect是组件内定义的触发器-->

    <tree:ImgBox  x="49" y="64" showImageEffect="myIris" hideImageEffect="myIris2"/ >

</mx:Application>

在代码中，利用ImgBox的showImageEffect和hideImageEffect触发器，给组件分别定义了两个NewIrisEffect效果。showImageEffect和hideImageEffect就好比是组件的两个属性，可以随意修改。

运行程序，在图片上按下鼠标不动，观看动画播放，如图6.16所示。松开鼠标，另一个动画开始     播放。

鼠标按下时                              鼠标松开后

图6.16

至此，我们完成一个完整的自定义行为。这个行为效果和程序并没有直接联系，可以被重复使用。只需要把tree目录（包括NewIrisEffect.as和NewIrisInstance.as）拷贝到其他程序中，就可以使用了。