Flex3行为(Behavior)设计(2)

ActionScript使用行为设计< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

你可以在ActionScript中声明和使用效果。通常这是作为时间监听的一部分。要使用效果，你必须调用paly()这个方法。

这个技术尤其适合通过一个组件调用在另外组件上的效果。以下的例子显示通过监听button的点击事件来调用TextArea控件的调整大小的效果。

<?xml version="1.0"?>

<!-- behaviors\ASplayVBox.mxml -->

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

creationComplete="createEffect(event);"

> 

<mx:Script>

<![CDATA[

// Import effect class.

import mx.effects.Resize;

// Create a Resize effect

private var resizeLarge:Resize = new Resize();

private function createEffect(eventObj:Event):void {

// Set the TextArea as the effect target.

resizeLarge.target=myTA;

// Set resized width and height, and effect duration.

resizeLarge.widthTo=150;

resizeLarge.heightTo=150;

resizeLarge.duration=750;

}

]]>

</mx:Script>

<mx:VBox borderStyle="solid">

<mx:HBox>

<mx:Button label="Start" click="resizeLarge.end();resizeLarge.play();"/>

<mx:Button label="Reset" click="myTA.width=100;myTA.height=100;"/>

</mx:HBox>

<mx:TextArea id="myTA" height="100" width="100" text="Here is some text."/>

</mx:VBox>

</mx:Application>

            这个方法中使用应用程序的createionComplete事件来配置效果，然后调用play()方法来对用户的点击按钮时间做出反应。因为你是programmatically（程式式的？）调用效果，所以你不要时间触发器来调用这一效果。

  注意程序在调用paly()方法之前首先调用Effect.end()方法,这样做的是为了确保任何之前的效果在新的效果执行前都结束。

以下是个使用AS定义效果的例子。你不要在AS中定义效果，你可以用MXML用重写的方法来定义效果：

<?xml version="1.0"?>

<!-- behaviors\MxmlPlay.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Resize id="resizeLarge"

target="{myTA}"

widthTo="150"

heightTo="150"

duration="750"

/>

<mx:Canvas height="300" width="400" borderStyle="solid">

<mx:Button label="Start"

x="50" y="50"

click="resizeLarge.end();resizeLarge.play();"

/>

<mx:TextArea id="myTA"

x="100" y="100"

height="100"

width="100"

text="Here is some text."

/>

<mx:Button label="Reset"

x="135" y="50"

click="myTA.height=100;myTA.width=100;"

/>

</mx:Canvas>

</mx:Application>

         你可以传递目标对象的数组给play()方法来调用指定在每个目标组件上的效果。比如：

resizeLarge.play([comp1, comp2, comp3]);

   例子中调用了在三个组件上的Zoom的效果。注意end()方法并没有使用effect目标组件作为参数，反而使用effect的实例来作为参数，这样就可以通过effect本身的end()方法来结束效果。

resizeLarge.end();

当你调用paly()方法的时候，你必须把方法调用替换称效果的触发器，你可以使用Effect.target 或者Effect.targets属性来指定目标组件调用paly()时所显示的效果。例子中使用了target属性，来指定单个目标组件，你如果有多个目标组件，你可以使用Effect.targets属性来指定一组目标组件。

除了传递target属性指定的目标组件的效果，你还可一传递目标组件给构造器：

// Create a Resize effect.

var resizeLarge = new mx.effects.Resize(myTA);

反向播放效果

你可以传递一个可选的参数给play()方法来指定反向播放效果。比如：

resizeLarge.play([comp1, comp2, comp3], true);

          例子中， 你指定了第二个参数来指定反向播放效果，默认值为false.你也可以调用Effect.pause()方法来暂停效果，Effect.resume()方法来继续被暂停的效果。Effect.reverse()方法来指定反向播放效果。

终止效果

你可以在任何时候调用end()方法来终止效果显示。比如：

<?xml version="1.0"?>

<!-- behaviors\ASend.mxml -->

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

creationComplete="createEffect(event);"

> 

<mx:Script>

<![CDATA[

// Import effect class.

import mx.effects.Resize;

// Create a Resize effect

private var resizeLarge:Resize = new Resize();

private function createEffect(eventObj:Event):void {

// Set the TextArea as the effect target.

resizeLarge.target=myTA;

// Set resized width and height, and effect duration.

resizeLarge.widthTo = 150;

resizeLarge.heightTo = 150;

// Set a long duration.

resizeLarge.duration = 5000;

}

]]>

</mx:Script>

<mx:Canvas height="228" width="328" borderStyle="solid">

<mx:Button label="Start"

x="10" y="10"

click="resizeLarge.end();resizeLarge.play();"

/>

<mx:Button label="End"

x="86" y="10"

click="resizeLarge.end();"

/>

<mx:Button label="Reset"

click="myTA.height=100;myTA.width=100;"

x="151" y="10"

/>

<mx:TextArea id="myTA"

x="10" y="40"

height="100"

width="100"

text="Here is some text."

/>

</mx:Canvas>

</mx:Application>

例子中，你设定了duration属性值来指定Resize效果持续10s.并且添加了一个按钮控件通过点击时间调end()方法来终止效果的显示。当你调用end()方法时，Resize效果会跳到最后的状态然后停止，效果同你让它自动停止是一样的。如果你是用Move效果，效果也会在停止之前移动到最后的位置。

你可以调用UIComponent.endEffectsStarted()方法来终止某个组件上的所有效果。这个方法将为组件上当前播放的每一个效果调用end()方法。

你可以可调用stop()方法，stop()方法使得效果停止在当前状态。它不会跳转到最后的状态或者位置。不像pause()，你不能在调用stop()方法后调用resume()方法。然后你可以使用play()方法来重新开始效果显示。

创建可重用的效果

下个例子就是创建一个可重用的方法，该方法使用了三个对应目标组件的Move效果和移动坐标作为参数。该方法创建了Move效果并且在目标组件上使用：

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

<!-- behaviors\PlayEffectPassParams.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import flash.events.Event;

import mx.effects.Effect;

import mx.effects.Move;

private var myMove:Move = new Move();

/* Click event listener that passes the target component

and the coordinates of the center of the parent container

to the function that creates the effect. */

private function playMove(target:Object,

newX:Number, newY:Number):void {

myMove.end();

myMove.target=target;

myMove.duration = 1000;

myMove.xTo = newX - target.width/2;

myMove.yTo = newY - target.height/2;

myMove.play();

}

/* Create the Move effect and play it on the target

component passed to the function. */

private function handleClick(eventObj:Event):void {

var targetComponent:Object = eventObj.currentTarget;

var parentCont:Object = targetComponent.parent;

playMove(eventObj.target, parentCont.width/2,

parentCont.height/2);

}

]]>

</mx:Script>

<mx:Canvas width="200" height="200" borderStyle="solid">

<mx:Button id="myButton"

label="Center me"

x="0"

y="0"

click="handleClick(event);"

/>

</mx:Canvas>

<mx:Button label="Reset" click="myButton.x=0;myButton.y=0;"/>

</mx:Application>

AS中使用styles的行为运用

因为Flex实现效果触发器对应的属性为styles.所以你可以使用style sheet和setStyle(),getStyle()方法来使用效果。所以你可以在AS中创建一个效果，然后使用setStyle()方法来把它关联到某个触发器。：

<?xml version="1.0"?>

<!-- behaviors\BehaviorsASStyles.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

<mx:Script>

<![CDATA[

import mx.effects.Zoom;

// Define a new Zoom effect.

private var zEffect:Zoom = new Zoom();

private function initApp():void {

// Set duration of zoom effect.

zEffect.duration = 1000;

// Define zoom in ratio.

zEffect.zoomHeightTo = 1.0;

zEffect.zoomWidthTo = 1.0;

}

private function applyZoomEffect(newZoom:Number):void {

zEffect.zoomHeightTo = newZoom;

zEffect.zoomWidthTo = newZoom;

// Apply or re-apply the Zoom effect to the Button control.

b1.setStyle("mouseDownEffect", zEffect);

}

private function resizeButton():void {

var newZoom:Number;

var n:Number = zEffect.zoomHeightTo;

if (n == 1.0) {

newZoom = 2.0;

} else {

newZoom = 1.0;

}

applyZoomEffect(newZoom);

}

]]>

</mx:Script>

<mx:HBox>

<mx:Button id="b1" label="Click Me" click="resizeButton();"/>

</mx:HBox>

</mx:Application>

        你也可以在MXML定义效果，然后使用AS来使用它。

<?xml version="1.0"?>

<!-- behaviors\BehaviorsASStyles.mxml -->

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

creationComplete="initializeEffect(event);"

> 

<mx:Script>

<![CDATA[

import flash.events.Event;

private function initializeEffect(eventObj:Event):void {

myB.setStyle("mouseDownEffect", myWL);

}

]]>

</mx:Script>

<mx:WipeLeft id="myWL" duration="1000"/>

<mx:Button id="myB" label="Click Me"/>

</mx:Application>

以下的代码为button控件的mouseDownEffect轮流调用了WipeRight和WipeLeft效果。

<!-- behaviors\ASStyleGetStyleMXML.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

private function changeEffect():void {

if (myButton.getStyle("mouseUpEffect") == myWR) {

myButton.setStyle("mouseUpEffect", myWL);

}

else if (myButton.getStyle("mouseUpEffect") == myWL) {

myButton.setStyle("mouseUpEffect", myWR);

}

}

]]>

</mx:Script>

<mx:WipeRight id="myWR" duration="1000"/>

<mx:WipeLeft id="myWL" duration="1000"/>

<mx:Button id="myButton"

label="Click Me"

click="changeEffect();"

mouseUpEffect="{myWL}"/>

</mx:Application>