你可以利用这两个属性指定效果的目标组件。尤其是,当你使用play()方法而不是触发器来调用效果时,你可以使用target属性来指定单个目标组件,同样你可以使用targets属性来指定一组目标组件。比如:
zoomHeightFrom="0.10" zoomWidthFrom="0.10"
zoomHeightTo="1.00" zoomWidthTo="1.00"
target="{myButton}"/>
label="Zoom target"
click="myZoom.end();myZoom.play();"/>
例子中,你使用了数据绑定到target属性来指定按钮控件作为Zoom效果的一个目标组件。然而你没有关联这个效果到一个触发器,所以你必须调用paly()这个方法。
以下的例子,使用和effect的targets属性的数据绑定方法来运用Zoom效果到多个按钮空间上。
zoomHeightFrom="0.10"
zoomWidthFrom="0.10"
zoomHeightTo="1.00"
zoomWidthTo="1.00"
targets="{[myButton1, myButton2, myButton3]}"
/>
label="Zoom targets"
click="myZoom.end();myZoom.play();"
/>
你没有为这个效果定义触发器,所以你必须调用paly()方法。因为你指定了三个目标组件,play()方法调用了三个按钮控件上的效果。同时你也可以在AS中设定target/targets属性值:
creationComplete="createEffect(event);"
>
import mx.effects.Fade;
import flash.events.Event;
private var myFade:Fade = new Fade();
private function createEffect(eventObj:Event):void {
myFade.duration=5000;
/* Pass Array of targets to play(). */
myFade.play([myPanel1, myPanel2]);
/* Alternatively, set targets to an array of components.
myFade.targets = [myPanel1, myPanel2];
myFade.play(); */
}
private function playZoom(eventObj:Event):void {
myZoom.end();
/* Alternatively, pass Array of targets to play().
myZoom.play([myTA]); */
// Set target to a single component.
myZoom.target = myTA;
myZoom.play();
}
]]>
duration="2000"
zoomHeightFrom="0.10"
zoomWidthFrom="0.10"
zoomHeightTo="1.00"
zoomWidthTo="1.00"
/>
例子中,你使用Fade效果的targets属性来指定两个panels容器作为效果的目标组件。并且Zoom效果的target属性指定了按钮控件作为目标组件。你如果使用了targets属性来定义多个事件的目标组件,你之后就需要调用end()方法来终止效果。你必须保存paly()方法的返回值,并且作为参数传递给end()方法:
var myFadeArray:Array = myFade.play();
然后你可以传递这个数据到end()方法来终止所以目标组件上的效果。比如:
所以的效果都可以通过duration 属性来指定效果持续的时间(ms).下面的例子创建了两个版本的WipeLeft效果。但是指定了不同的持续时间。
mouseDownEffect="{SlowWipe}"/>
mouseDownEffect="{ReallySlowWipe}"/>
Fade和Rotate效果只工作在使用嵌入式的字体的文本呈递(text rendered).假如你要使用这些效果的组件使用了系统字体,那么那个组件的文本是不会用反应的。
当你把Zoom效果运用在使用系统字体的 text rendered上,Flex将依据比例调整这个文本所有磅值。然而当你不需要在文本上使用Zoom效果时,如果你使用的是嵌入式字体,那么Zoom将呈现平滑的效果。
以下的例子其中一个label控件使用嵌入式字体,因此当你你使用Rotate效果到使用系统字体的label控件上,将不会有任何反应。
@font-face {
src:url("../assets/MyriadWebPro.ttf");
font-family: myMyriadWebPro;
}
fontFamily="myMyriadWebPro"
mouseDownEffect="{rotateForward}"
mouseUpEffect="{rotateBack}"
text="Embedded font. This text will rotate."
/>
mouseDownEffect="{rotateForward}"
mouseUpEffect="{rotateBack}"
text="System font. This text will not rotate."
/>
有两种组合方式:
并行:所有效果同时执行 由定义
串行:所有效果逐个执行,即一个结束时另外一个开始,由定义。以下的例子定义了Zoom和Rotate效果的并行组合,以及ZoomRotateHide同Zoom.Rotate效果的串行组合。
zoomHeightFrom="0.0"
zoomWidthFrom="0.0"
zoomHeightTo="1.0"
zoomWidthTo="1.0"
/>
zoomHeightFrom="1.0"
zoomWidthFrom="1.0"
zoomHeightTo="0.0"
zoomWidthTo="0.0"
/>
hideEffect="{ZoomRotateHide}"
showEffect="{ZoomRotateShow}"
/>
label="Show!"
click="aTextArea.visible=true;"
/>
label="Hide!"
click="aTextArea.visible=false;"
/>
使用AnimateProperty效果
这个属性能然很多的组件性质变得更有生气。比如你可以使用这个效果来设置scaleX属性。
property="scaleX"
fromValue="1.0"
toValue="1.5"/>
property="scaleX"
fromValue="1.5"
toValue="1.0"/>
mouseDownEffect="{animateScaleXUpDown}"/>
例子中,点击按钮后,开始做sequence的效果。先放大到150%然后恢复的初始状态。
用户还可指定效果的延迟显示时间:由Effect.stargDelay属性来指定。
同时还可以指定某个效果的重复展现。Effect.repeatCount和Effect.repeatDelay两个属性分别指定重复的次数,以及指定在重复效果前的停顿的时间长度。
你可以使用SoundEffect类来播放mp3文件。由source属性来指定文件来源。如果你是本地资源,你可以使用Embed关键字,来把mp3的类对象给source属性。否之你必须指定mp3文件的URL.
// Embed MP3 file.
[Bindable]
[Embed(source="../assets/sound1.mp3")]
public var soundClass:Class;
]]>
useDuration="false"
loops="0"
source="{soundClass}"/>
label="Sound Embed"
mouseDownEffect="{soundEmbed}"/>
效果的事件处理
每一个效果支持以下的事件:
effectStart: 事件在效果开始执行时被调度。
effectEnd: 事件在效果结束时被调度。
具体的操作请参考开发文档。文中翻译中错误在所难免,仅供参考,需要的时候请参考官方开发文档。
pdf格式文档下载:
翻译整理:一路风尘
博客:http://yexin218.cublog.cn
日期:2008-6-1