Flex组件的行为和动画效果（实例）
??
触发器名称????????????????????????对应事件名称???????????????????事件描述
addedEffect ???????????????? ?? added?????????????????????当组件被添加到容器时触发
Effect中
?
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丿 写道受教了。。