积少成多Flash(11) - Flex 3.0 动画效果(effect)

最新推荐文章于 2026-06-17 15:11:35 发布

原创最新推荐文章于 2026-06-17 15:11:35 发布 · 739 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flex #flash #encoding #layout #image

Flash/ActionScript/Flex 专栏收录该内容

7 篇文章

订阅专栏

[源码下载]

积少成多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 的基类

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html

1、Zoom.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 - 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('images/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('images/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 ="{image}" duration ="100" />

< mx:Image id ="image" source ="@Embed('images/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 ="{image}" widthTo ="180" heightTo ="180" />

< mx:Resize id ="resizeDown" target ="{image}" widthTo ="48" heightTo ="48" />

< mx:Image id ="image" source ="@Embed('images/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('images/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 - (image.width / 2)

effectMove.yTo = localPosition.y - (image.height / 2)

effectMove.play();

}

]]>

</ mx:Script >

< mx:Move id ="effectMove" target ="{image}" />

< mx:Canvas id ="canvas" width ="100%" height ="100%" mouseDown ="moveImage(event)" >

< mx:Image id ="image" source ="@Embed('images/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('images/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('images/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('images/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('images/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('images/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 >

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('images/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 = "宽度: " + image.width;

}

private function tweenUpdateHandler(e:TweenEvent):void

{

lblUpdate.text = "宽度: " + image.width;

}

]]>

</ mx:Script >

< mx:Resize id ="resizeUp" target ="{image}" widthTo ="180" heightTo ="180" duration ="5000"

tweenStart ="tweenStartHandler(event)"

tweenEnd ="tweenEndHandler(event)"

tweenUpdate ="tweenUpdateHandler(event)"

< mx:Resize id ="resizeDown" target ="{image}" widthTo ="48" heightTo ="48" />

< mx:Image id ="image" source ="@Embed('images/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
[源码下载]