使用行为设计
你可以在ActionScript中声明和使用效果。通常这是作为时间监听的一部分。要使用效果,你必须调用paly()这个方法。
这个技术尤其适合通过一个组件调用在另外组件上的效果。以下的例子显示通过监听button的点击事件来调用TextArea控件的调整大小的效果。
creationComplete="createEffect(event);"
>
// 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;
}
]]>
这个方法中使用应用程序的createionComplete事件来配置效果,然后调用play()方法来对用户的点击按钮时间做出反应。因为你是programmatically(程式式的?)调用效果,所以你不要时间触发器来调用这一效果。
注意程序在调用paly()方法之前首先调用Effect.end()方法,这样做的是为了确保任何之前的效果在新的效果执行前都结束。
以下是个使用AS定义效果的例子。你不要在AS中定义效果,你可以用MXML用重写的方法来定义效果:
target="{myTA}"
widthTo="150"
heightTo="150"
duration="750"
/>
x="50" y="50"
click="resizeLarge.end();resizeLarge.play();"
/>
x="100" y="100"
height="100"
width="100"
text="Here is some text."
/>
x="135" y="50"
click="myTA.height=100;myTA.width=100;"
/>
你可以传递目标对象的数组给play()方法来调用指定在每个目标组件上的效果。比如:
resizeLarge.play([comp1, comp2, comp3]);
例子中调用了在三个组件上的Zoom的效果。注意end()方法并没有使用effect目标组件作为参数,反而使用effect的实例来作为参数,这样就可以通过effect本身的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()方法来终止效果显示。比如:
creationComplete="createEffect(event);"
>
// 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;
}
]]>
x="10" y="10"
click="resizeLarge.end();resizeLarge.play();"
/>
x="86" y="10"
click="resizeLarge.end();"
/>
click="myTA.height=100;myTA.width=100;"
x="151" y="10"
/>
x="10" y="40"
height="100"
width="100"
text="Here is some text."
/>
例子中,你设定了duration属性值来指定Resize效果持续10s.并且添加了一个按钮控件通过点击时间调end()方法来终止效果的显示。当你调用end()方法时,Resize效果会跳到最后的状态然后停止,效果同你让它自动停止是一样的。如果你是用Move效果,效果也会在停止之前移动到最后的位置。
你可以调用UIComponent.endEffectsStarted()方法来终止某个组件上的所有效果。这个方法将为组件上当前播放的每一个效果调用end()方法。
你可以可调用stop()方法,stop()方法使得效果停止在当前状态。它不会跳转到最后的状态或者位置。不像pause(),你不能在调用stop()方法后调用resume()方法。然后你可以使用play()方法来重新开始效果显示。
创建可重用的效果
下个例子就是创建一个可重用的方法,该方法使用了三个对应目标组件的Move效果和移动坐标作为参数。该方法创建了Move效果并且在目标组件上使用:
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);
}
]]>
label="Center me"
x="0"
y="0"
click="handleClick(event);"
/>
中使用styles的行为运用
因为Flex实现效果触发器对应的属性为styles.所以你可以使用style sheet和setStyle(),getStyle()方法来使用效果。所以你可以在AS中创建一个效果,然后使用setStyle()方法来把它关联到某个触发器。:
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);
}
]]>
你也可以在MXML定义效果,然后使用AS来使用它。
creationComplete="initializeEffect(event);"
>
import flash.events.Event;
private function initializeEffect(eventObj:Event):void {
myB.setStyle("mouseDownEffect", myWL);
}
]]>
以下的代码为button控件的mouseDownEffect轮流调用了WipeRight和WipeLeft效果。
private function changeEffect():void {
if (myButton.getStyle("mouseUpEffect") == myWR) {
myButton.setStyle("mouseUpEffect", myWL);
}
else if (myButton.getStyle("mouseUpEffect") == myWL) {
myButton.setStyle("mouseUpEffect", myWR);
}
}
]]>
label="Click Me"
click="changeEffect();"
mouseUpEffect="{myWL}"/>