Flex之行为控制

向上擦掉效果示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<!-- 定义效果 -->
    <mx:WipeUp id="wipeOut" duration="1000"/>
    <mx:WipeUp id="wipeIn" duration="1000"/>

    <mx:Panel title="向上擦掉效果示例" width="95%" height="95%" 
        paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">

        <mx:Text width="100%" color="blue" 
            text="使用向上擦掉的效果来显示或者隐藏图片。"/>
		
		<!-- 给目标组件赋予效果 -->
        <mx:Image source="@Embed(source='Water lilies.jpg')" 
            visible="{cb1.selected}"
            hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
            
        <mx:CheckBox id="cb1" label="可视" selected="true"/>

    </mx:Panel>
</mx:Application>

 

左右擦掉效果示例

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			private function changeEffect(eventObj:Event):void {
				if (myButton.getStyle("mouseUpEffect") == myWR) {
					myButton.setStyle("mouseUpEffect", myWL);
				}
				else if (myButton.getStyle("mouseUpEffect") == myWL) {
					myButton.setStyle("mouseUpEffect", myWR);
				}
			}
		]]>
	</mx:Script>
	<!--定义左右两个方向的擦去效果-->
	<mx:WipeRight id="myWR" duration="1000"/>
	<mx:WipeLeft id="myWL" duration="1000"/>
	
	<mx:Panel title="交换使用不同的行为效果" width="95%" height="95%" 
        horizontalAlign="center" verticalAlign="middle">
		<mx:Button id="myButton" label="按钮"
			width="150" height="80"
			mouseUpEffect="{myWL}"
			click="changeEffect(event);"/>
	</mx:Panel>
	
</mx:Application>

 

提示：

mx:WipeRight 和mx:WipeLeft 标签分别实现自左往右和自右往左隐藏或显示组件的效果

 

移动

<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>

 

放大

<?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>

 

渐变

<?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>