Flex之行为控制(3) ------ 移动，放大，渐变效果示例

1.移动效果：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ import flash.events.Event; import mx.effects.Effect; import mx.effects.Move; // 单击事件监听器，传递目标组件和父类容器的中心的坐标值 // 到建立行为效果的函数中。 private function playMove(target:Object, newX:Number, newY:Number):void { var myMove:Move = new Move(target); myMove.duration = 1000; myMove.xTo = newX - target.width/2; myMove.yTo = newY - target.height/2; myMove.play(); } // 建立移动行为效果并显示。 private function handleClick(eventObj:Event):void { var targetComponent:Object = eventObj.currentTarget; var parentCont:Object = targetComponent.parent; playMove(eventObj.target, parentCont.width/2, parentCont.height/2); } ]]--> </mx:Script> <mx:Panel title="建立可重复使用的行为效果" width="95%" height="95%" paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5"> <mx:Button label="移动" click="handleClick(event)"/> </mx:Panel> </mx:Application>

2.变大效果：

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createEffect(event);"> <mx:Script> <!--[CDATA[ import flash.events.Event; import mx.effects.Zoom; private function createEffect(eventObj:Event):void { // 定义一个新的缩放效果的实体。 var zEffect:Zoom = new Zoom(); zEffect.duration = 2000; zEffect.zoomHeightTo = 1.50; zEffect.zoomWidthTo = 1.50; // 定义按钮的缩放效果。 myB.setStyle("mouseDownEffect", zEffect); } ]]--> </mx:Script> <mx:Panel title="使用ActionScript实现行为控制示例" width="95%" height="95%" horizontalAlign="center" verticalAlign="middle"> <mx:Button label="放大按钮" id="myB"/> </mx:Panel> </mx:Application>

3.渐变效果：

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createEffect(event);"> <mx:Script> <!--[CDATA[ import mx.effects.Fade; import flash.events.Event; private var myFade:Fade = new Fade(); private function createEffect(eventObj:Event):void { myFade.duration=5000; // 定义两个目标面板显示其行为效果，这里省略了定义targets， //而是直接将目标组件组定义在play（）方法中。 myFade.play([myPanel1, myPanel2]); } private function playZoom(eventObj:Event):void { // 设定目标组件是文本区域 myZoom.target = myTA; myZoom.play(); } ]]--> </mx:Script> <mx:Zoom id="myZoom" duration="2000" zoomHeightFrom=".10" zoomWidthFrom=".10" zoomHeightTo="1.00" zoomWidthTo="1.00"/> <mx:Panel id="myPanel1" title="文本区域面板"> <mx:TextArea id="myTA"/> </mx:Panel> <mx:Panel id="myPanel2" title="按钮面板" width="150" height="100" horizontalAlign="center" verticalAlign="middle"> <mx:Button id="myButton" label="点击" click="playZoom(event);"/> </mx:Panel> </mx:Application>