[索引页]
[×××]
作者：webabcd
介绍
演示 Flex 3.0 中的各种动画效果(effect)的应用
[×××]
积少成多Flash(11) - Flex 3.0 动画效果(effect)
作者：webabcd
介绍
演示 Flex 3.0 中的各种动画效果(effect)的应用
- Zoom - 放大/缩小
- Wipe - 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示
- Rotate - 旋转
- Resize - 调整控件大小
- Fade - 淡入/淡出
- Move - 改变控件位置
- Iris - 显示/消失（放射性渐变）
- Blur - 模糊
- Dissolve - 对控件做alpha修改
- Glow - 对控件做周边发光
- SoundEffect - 播放一段音频
- Parallel - 对各种 effect 做并行展示
- Sequence - 对各种 effect 做串行展示
- TweenEffect - 此类是大部分 effect 的基类
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 放大/缩小 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Zoom (放大/缩小)">
<mx:Script>
<![CDATA[
private function doZoom(e:MouseEvent):void
{
if (zoom.isPlaying)
{
zoom.reverse();
}
else
{
zoom.play([e.target], e.type == MouseEvent.ROLL_OUT ? true : false);
}
}
]]>
</mx:Script>
<mx:Zoom id="zoom" originX="24" originY="24"
zoomWidthFrom="1" zoomWidthTo="2" zoomHeightFrom="1" zoomHeightTo="2" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
scaleX="1" scaleY="1"
rollOver="doZoom(event)" rollOut="doZoom(event)"
/>
</mx:Panel>
<!--
演示 放大/缩小 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Zoom (放大/缩小)">
<mx:Script>
<![CDATA[
private function doZoom(e:MouseEvent):void
{
if (zoom.isPlaying)
{
zoom.reverse();
}
else
{
zoom.play([e.target], e.type == MouseEvent.ROLL_OUT ? true : false);
}
}
]]>
</mx:Script>
<mx:Zoom id="zoom" originX="24" originY="24"
zoomWidthFrom="1" zoomWidthTo="2" zoomHeightFrom="1" zoomHeightTo="2" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
scaleX="1" scaleY="1"
rollOver="doZoom(event)" rollOut="doZoom(event)"
/>
</mx:Panel>
2、Wipe.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - WipeUp, WipeDown, WipeLeft, WipeRight (擦除)">
<mx:Script>
<![CDATA[
private function effectEndHandler():void
{
mx.controls.Alert.show("WipeLeft 效果结束");
}
]]>
</mx:Script>
<mx:WipeLeft id="wipeLeft" duration="1000" effectEnd="effectEndHandler()" />
<mx:WipeUp id="wipeUp" duration="1000" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{wipeLeft}" showEffect="{wipeUp}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
<!--
演示 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - WipeUp, WipeDown, WipeLeft, WipeRight (擦除)">
<mx:Script>
<![CDATA[
private function effectEndHandler():void
{
mx.controls.Alert.show("WipeLeft 效果结束");
}
]]>
</mx:Script>
<mx:WipeLeft id="wipeLeft" duration="1000" effectEnd="effectEndHandler()" />
<mx:WipeUp id="wipeUp" duration="1000" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{wipeLeft}" showEffect="{wipeUp}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
3、Rotate.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 旋转 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Rotate (旋转)">
<mx:Script>
<![CDATA[
[Bindable]
private var angle:int = 0;
private function rotateImage():void
{
rotate.end();
angle +=45;
rotate.play();
}
]]>
</mx:Script>
<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{p_w_picpath}" duration="100" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="旋转 45 度" click="rotateImage();" />
</mx:ControlBar>
</mx:Panel>
<!--
演示 旋转 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Rotate (旋转)">
<mx:Script>
<![CDATA[
[Bindable]
private var angle:int = 0;
private function rotateImage():void
{
rotate.end();
angle +=45;
rotate.play();
}
]]>
</mx:Script>
<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{p_w_picpath}" duration="100" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="旋转 45 度" click="rotateImage();" />
</mx:ControlBar>
</mx:Panel>
4、Resize.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 调整控件大小 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Resize (重设大小)">
<mx:Script>
<![CDATA[
private function smoothImage(e:Event):void
{
var bmp:Bitmap = e.target.content as Bitmap;
bmp.smoothing = true;
}
]]>
</mx:Script>
<mx:Resize id="resizeUp" target="{p_w_picpath}" widthTo="180" heightTo="180" />
<mx:Resize id="resizeDown" target="{p_w_picpath}" widthTo="48" heightTo="48" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
creationComplete="smoothImage(event)"
/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />
<mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" />
</mx:ControlBar>
</mx:Panel>
<!--
演示 调整控件大小 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Resize (重设大小)">
<mx:Script>
<![CDATA[
private function smoothImage(e:Event):void
{
var bmp:Bitmap = e.target.content as Bitmap;
bmp.smoothing = true;
}
]]>
</mx:Script>
<mx:Resize id="resizeUp" target="{p_w_picpath}" widthTo="180" heightTo="180" />
<mx:Resize id="resizeDown" target="{p_w_picpath}" widthTo="48" heightTo="48" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
creationComplete="smoothImage(event)"
/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />
<mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" />
</mx:ControlBar>
</mx:Panel>
5、Fade.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 淡入/淡出 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Fade (淡入/淡出)">
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1" alphaTo="0" />
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0" alphaTo="1" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
<!--
演示 淡入/淡出 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Fade (淡入/淡出)">
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1" alphaTo="0" />
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0" alphaTo="1" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
6、Move.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 改变控件位置 的动画效果（移动控件）
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Move (移动)">
<mx:Script>
<![CDATA[
private function moveImage(e:MouseEvent):void
{
var position:Point = new Point(stage.mouseX, stage.mouseY);
var localPosition:Point = canvas.globalToLocal(position);
effectMove.end();
effectMove.xTo = localPosition.x - (p_w_picpath.width / 2)
effectMove.yTo = localPosition.y - (p_w_picpath.height / 2)
effectMove.play();
}
]]>
</mx:Script>
<mx:Move id="effectMove" target="{p_w_picpath}" />
<mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(event)">
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
</mx:Canvas>
</mx:Panel>
<!--
演示 改变控件位置 的动画效果（移动控件）
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Move (移动)">
<mx:Script>
<![CDATA[
private function moveImage(e:MouseEvent):void
{
var position:Point = new Point(stage.mouseX, stage.mouseY);
var localPosition:Point = canvas.globalToLocal(position);
effectMove.end();
effectMove.xTo = localPosition.x - (p_w_picpath.width / 2)
effectMove.yTo = localPosition.y - (p_w_picpath.height / 2)
effectMove.play();
}
]]>
</mx:Script>
<mx:Move id="effectMove" target="{p_w_picpath}" />
<mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(event)">
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
</mx:Canvas>
</mx:Panel>
7、Iris.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 显示/消失（放射性渐变） 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Iris (遮罩 - 用于消失/显示对象)">
<mx:Iris id="irisOut" duration="1000" showTarget="true" />
<mx:Iris id="irisIn" duration="1000" showTarget="false" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{irisOut}" showEffect="{irisIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
<!--
演示 显示/消失（放射性渐变） 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Iris (遮罩 - 用于消失/显示对象)">
<mx:Iris id="irisOut" duration="1000" showTarget="true" />
<mx:Iris id="irisIn" duration="1000" showTarget="false" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{irisOut}" showEffect="{irisIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
8、Blur.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 模糊 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Blur (模糊)">
<mx:Blur id="blurImage" duration="1000"
blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10"
/>
<mx:Blur id="unblurImage" duration="1000"
blurXFrom="10" blurXTo="0" blurYFrom="10" blurYTo="0"
/>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
rollOverEffect="{blurImage}" rollOutEffect="{unblurImage}"
/>
</mx:Panel>
<!--
演示 模糊 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Blur (模糊)">
<mx:Blur id="blurImage" duration="1000"
blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10"
/>
<mx:Blur id="unblurImage" duration="1000"
blurXFrom="10" blurXTo="0" blurYFrom="10" blurYTo="0"
/>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
rollOverEffect="{blurImage}" rollOutEffect="{unblurImage}"
/>
</mx:Panel>
9、Dissolve.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 对控件做alpha修改 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Dissolve (溶解, 变换 alpha 的效果)">
<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1" alphaTo="0" />
<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0" alphaTo="1" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
<!--
演示 对控件做alpha修改 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Dissolve (溶解, 变换 alpha 的效果)">
<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1" alphaTo="0" />
<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0" alphaTo="1" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
visible="{chk.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
/>
<mx:ControlBar horizontalAlign="center">
<mx:CheckBox id="chk" label="显示" selected="true"
textRollOverColor="blue"
textSelectedColor="red"
/>
</mx:ControlBar>
</mx:Panel>
10、Glow.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 对控件做周边发光 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Glow (发光)">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1" alphaTo="0.3"
blurXFrom="0" blurXTo="50" blurYFrom="0" blurYTo="50"
color="0x22aa55"
/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1"
blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0"
color="0x3388dd"
/>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"
/>
</mx:Panel>
<!--
演示 对控件做周边发光 的动画效果
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Glow (发光)">
<mx:Glow id="glowImage" duration="1000"
alphaFrom="1" alphaTo="0.3"
blurXFrom="0" blurXTo="50" blurYFrom="0" blurYTo="50"
color="0x22aa55"
/>
<mx:Glow id="unglowImage" duration="1000"
alphaFrom="0.3" alphaTo="1"
blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0"
color="0x3388dd"
/>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"
/>
</mx:Panel>
11、SoundEffect.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
播放一段音频
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - SoundEffect (音效)">
<mx:SoundEffect id="soundEffect" source="@Embed('assets/bomb.mp3')" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
mouseDownEffect="{soundEffect}"
/>
</mx:Panel>
<!--
播放一段音频
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - SoundEffect (音效)">
<mx:SoundEffect id="soundEffect" source="@Embed('assets/bomb.mp3')" />
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
mouseDownEffect="{soundEffect}"
/>
</mx:Panel>
12、Parallel.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
对各种 effect 做并行展示
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Parallel (效果并行), AddItemAction, RemoveItemAction">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection(["webabcd", "webabcd", "webabcd"])
private function addItem():void
{
dp.addItemAt("webabcd", dp.length);
}
private function removeItem():void
{
dp.removeItemAt(dp.length - 1);
}
]]>
</mx:Script>
<mx:Parallel id="parallel">
<mx:AddItemAction filter="addItem" startDelay="500" />
<mx:RemoveItemAction filter="removeItem" startDelay="500" />
<mx:Blur startDelay="500" duration="1000" blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10" filter="addItem" />
</mx:Parallel>
<mx:Label text="顺便说明 AddItemAction, RemoveItemAction" x="10" y="10"/>
<mx:List id="list" dataProvider="{dp}" fontSize="16" y="36" x="10" height="178" width="360"
itemsChangeEffect="{parallel}"/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="增加一项" click="addItem();" />
<mx:Button label="删除一项" click="removeItem();" />
</mx:ControlBar>
</mx:Panel>
<!--
对各种 effect 做并行展示
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="Effect - Parallel (效果并行), AddItemAction, RemoveItemAction">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection(["webabcd", "webabcd", "webabcd"])
private function addItem():void
{
dp.addItemAt("webabcd", dp.length);
}
private function removeItem():void
{
dp.removeItemAt(dp.length - 1);
}
]]>
</mx:Script>
<mx:Parallel id="parallel">
<mx:AddItemAction filter="addItem" startDelay="500" />
<mx:RemoveItemAction filter="removeItem" startDelay="500" />
<mx:Blur startDelay="500" duration="1000" blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10" filter="addItem" />
</mx:Parallel>
<mx:Label text="顺便说明 AddItemAction, RemoveItemAction" x="10" y="10"/>
<mx:List id="list" dataProvider="{dp}" fontSize="16" y="36" x="10" height="178" width="360"
itemsChangeEffect="{parallel}"/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="增加一项" click="addItem();" />
<mx:Button label="删除一项" click="removeItem();" />
</mx:ControlBar>
</mx:Panel>
13、Sequence.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
对各种 effect 做串行展示
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" width="400" height="300"
title="Effect - Sequence (效果串行), AnimateProperty, Pause">
<mx:Label text="顺便说明 AnimateProperty, Pause"/>
<mx:Sequence id="sequence">
<mx:AnimateProperty property="scaleX" fromValue="1" toValue="3" duration="300" />
<mx:Pause duration="2000"/>
<mx:AnimateProperty property="scaleX" fromValue="3" toValue="1" duration="1000" />
</mx:Sequence>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
width="48" height="48"
scaleX="1" scaleY="1"
mouseDownEffect="{sequence}"
/>
</mx:Panel>
<!--
对各种 effect 做串行展示
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" width="400" height="300"
title="Effect - Sequence (效果串行), AnimateProperty, Pause">
<mx:Label text="顺便说明 AnimateProperty, Pause"/>
<mx:Sequence id="sequence">
<mx:AnimateProperty property="scaleX" fromValue="1" toValue="3" duration="300" />
<mx:Pause duration="2000"/>
<mx:AnimateProperty property="scaleX" fromValue="3" toValue="1" duration="1000" />
</mx:Sequence>
<mx:Image source="@Embed('p_w_picpaths/logo.png')"
width="48" height="48"
scaleX="1" scaleY="1"
mouseDownEffect="{sequence}"
/>
</mx:Panel>
14、TweenEffect.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
演示 TweenEffect （此类是大部分 effect 的基类）
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="TweenEffect 的介绍（它是部分 effect 的基类）">
<mx:Script>
<![CDATA[
import mx.events.TweenEvent;
private function tweenStartHandler(e:TweenEvent):void
{
txtMsg.text += "补间效果开始\r";
}
private function tweenEndHandler(e:TweenEvent):void
{
txtMsg.text += "补间效果结束\r";
lblUpdate.text = "宽度: " + p_w_picpath.width;
}
private function tweenUpdateHandler(e:TweenEvent):void
{
lblUpdate.text = "宽度: " + p_w_picpath.width;
}
]]>
</mx:Script>
<mx:Resize id="resizeUp" target="{p_w_picpath}" widthTo="180" heightTo="180" duration="5000"
tweenStart="tweenStartHandler(event)"
tweenEnd="tweenEndHandler(event)"
tweenUpdate="tweenUpdateHandler(event)"
/>
<mx:Resize id="resizeDown" target="{p_w_picpath}" widthTo="48" heightTo="48" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
<mx:Text x="264" y="36" width="106" height="178" id="txtMsg"/>
<mx:Label x="264" y="10" id="lblUpdate"/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />
<mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" />
</mx:ControlBar>
</mx:Panel>
<!--
演示 TweenEffect （此类是大部分 effect 的基类）
-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"
title="TweenEffect 的介绍（它是部分 effect 的基类）">
<mx:Script>
<![CDATA[
import mx.events.TweenEvent;
private function tweenStartHandler(e:TweenEvent):void
{
txtMsg.text += "补间效果开始\r";
}
private function tweenEndHandler(e:TweenEvent):void
{
txtMsg.text += "补间效果结束\r";
lblUpdate.text = "宽度: " + p_w_picpath.width;
}
private function tweenUpdateHandler(e:TweenEvent):void
{
lblUpdate.text = "宽度: " + p_w_picpath.width;
}
]]>
</mx:Script>
<mx:Resize id="resizeUp" target="{p_w_picpath}" widthTo="180" heightTo="180" duration="5000"
tweenStart="tweenStartHandler(event)"
tweenEnd="tweenEndHandler(event)"
tweenUpdate="tweenUpdateHandler(event)"
/>
<mx:Resize id="resizeDown" target="{p_w_picpath}" widthTo="48" heightTo="48" />
<mx:Image id="p_w_picpath" source="@Embed('p_w_picpaths/logo.png')"
x="24" y="24" width="48" height="48"
/>
<mx:Text x="264" y="36" width="106" height="178" id="txtMsg"/>
<mx:Label x="264" y="10" id="lblUpdate"/>
<mx:ControlBar horizontalAlign="center">
<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />
<mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" />
</mx:ControlBar>
</mx:Panel>
OK
[×××]
[×××]
