Flex组件的行为和动画效果（实例）
??
触发器名称????????????????????????对应事件名称???????????????????事件描述
addedEffect ???????????????? ?? added?????????????????????当组件被添加到容器时触发createCompleteEffect ???? createComplete?????? 当组件完成绘制时触发?
focusInEffect ?????????????????? focusIn?????????????????? 当组件获得光标焦点时触发
focusOutEffect ??????????????? focusOut????????????????? 当组件失去光标焦点时触发
hideEffect ?????????????????????? hide??? ? ? ? ? ? ? ? ? ? ??当组件变成不可见时触发
showEffect ???????????????????? show???????????????????????当组件变成可见时触发
mouseDownEffect ????????? mouseDown???????????? 当鼠标在组件上按下时触发
mouseUpEffect ?? ? ? ? ? ? ? mouseUp??????????????????当鼠标在组件上松开时触发
rollOverEffect ????????????????? rollOver????????????????????当鼠标移动到组件上时触发
moveEffect ???????????????????? move????????????????????????当组件被移动时触发
resizeEffect ??????????????????? resize???????????????????????? 当组件改变大小时触发
Effect中
<mx:AnimateProperty>可实现拉伸效果
<mx:Blur>模糊效果
<mx:Dissolve>实现淡出淡入效果,与<mx:Fade>相似
<mx:Glow>外发光效果
<mx:Iris>以矩形方式出现或消失
<mx:Move>移动效果
<mx:Parallel>多种效果叠加
<mx:Pause>停止??mx.effects.easing.Bounce.easeOut可产生弹动效果
<mx:Resize>改变大小
<mx:Rotate>旋转角度
<mx:SoundEffect>声音效果
<mx:WipeDown>从上往下消失或出现
<mx:WipeLeft>从右往左消失或出现
<mx:WipeRight>从左往右消失或出现
<mx:WipeUp>从下往上消失或出现
<mx:Zoom>放大或缩小
</mx:Transition>不同state切换时的过渡效果
Charts(统计)
<mx:AreaChart>是一种以面积作为表示方式
<mx:AxisRenderer>是一种轴图,股票交易常以这种方式表示
<mx:BarChart>是柱状图
<mx:BubbleChart>气泡图
<mx:CandlestickChart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样
<mx:CategoryAxis>跟AxisRenderer很像
<mx:ColumnChart>跟<mx:BarChart>很像
<mx:DateTimeAxis>以日期为轴的折线图
<mx:GridLines>多条线图
<mx:HLOCChart>跟AxisRenderer很像
<mx:Legend>图例,离散的点
<mx:LinearAxis>Axis系列
<mx:LineChart>折线图
<mx:LogAxis>Axis系列
<mx:PieChart>饼图
<mx:PlotChart>跟Legend很像
?
1.Resize
?尺寸调整效果，改变组件的长和宽。当改变组件的长和宽时，处于同一个容器的其他组件的大小也可能会相应改变，如果该容器使用了绝对定位则不会发生这种情况。
?
<?xml version="1.0"?><!-- Simple example to demonstrate the Effect class. --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.controls.Alert; // Event handler for the effectEnd event. private function endEffectHandler():void { Alert.show("Effect Ended!"); } // Event handler for the reset button. private function resetHandler():void { expand.end(); img.width=30; img.height=60; button1.enabled=true; } ]]> </mx:Script> <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" duration="10000" effectEnd="endEffectHandler();"/> <mx:Panel title="Resize Effect Example" width="100%" height="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" text="Use the Button controls to control the Resize effect."/> <mx:Image id="img" width="30" height="60" source="@Embed(source='1.jpg')"/> <mx:ControlBar> <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/> <mx:Button label="Pause" click="expand.pause();"/> <mx:Button label="Resume" click="expand.resume();"/> <mx:Button label="Reverse" click="expand.reverse();"/> <mx:Button label="End" click="expand.end();"/> <mx:Button label="Reset" click="resetHandler();"/> </mx:ControlBar> </mx:Panel></mx:Application>
2.Glow
?发光效果，使用了GlowFilter滤镜。当对组件使用了该效果，不可再使用GlowFilter 滤镜和其他发光效果。
?
<?xml version="1.0" encoding="utf-8"?><!-- Simple example to demonstrate the Glow effect. --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0x00FF00"/> <mx:Glow id="unglowImage" duration="1000" alphaFrom="0.3" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0x0000FF"/> <mx:Panel title="Glow Effect Example" width="75%" height="75%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/> <mx:Image source="@Embed(source='1.jpg')" mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}"/> </mx:Panel></mx:Application>??
3.Iris
?彩虹效果，组件以矩形方式，从中心放大或缩小到中心。属于遮罩效果。
?
<?xml version="1.0"?><!-- Simple example to demonstrate the Iris effect. --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Iris id="irisOut" duration="1000" showTarget="true"/> <mx:Iris id="irisIn" duration="1000" showTarget="false"/> <mx:Panel title="Iris Effect Example" width="75%" height="75%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" text="Use the Iris effect to show or hide the phone image."/> <mx:Image id="flex" source="@Embed(source='1.jpg')" visible="{cb1.selected}" showEffect="{irisIn}" hideEffect="{irisOut}"/> <mx:CheckBox id="cb1" label="visible" selected="true"/> </mx:Panel></mx:Application> 1 楼 Alex丿 2012-05-28 受教了。。 2 楼 天梯梦 2012-05-29 Alex丿 写道受教了。。有帮助就好~ 3 楼 Alex丿 2012-05-30 现在 在弄away3D，不知道怎么在 主mxml中显示出来。例子，都是as文件，不知道怎么用。求教~~