Flex4 弹出窗口滑入滑出

先看示例：


代码SimpleMessageBox：

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
				   xmlns:s="library://ns.adobe.com/flex/spark"
				   xmlns:mx="library://ns.adobe.com/flex/mx"
				   width="200" backgroundColor="0xFF0000"
				   visible="false"
				   showEffect="{seq}"
				   initialize="bordercontainer1_initializeHandler(event)"
				   creationComplete="bordercontainer1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
			{
				var w:Number = msgLabel.measuredWidth + 5;
				moveIn.xBy = -w;
				moveOut.xBy = w;
				
				this.height = msgLabel.measuredHeight + 5;
				
				this.visible = true;
			}
			
			[Bindable]
			protected static var instance:SimpleMessageBox;
			
			private static var _message:String;
			
			public static function show(message:String, parent:DisplayObject):void
			{
				if(instance != null)
					return;
				
				instance = new SimpleMessageBox();
				_message = message;
				
				instance.x = parent.x + parent.width;
				instance.y = 10;
				
				PopUpManager.addPopUp(instance, parent);
			}
			
			protected function seq_effectEndHandler(event:EffectEvent):void
			{
				PopUpManager.removePopUp(instance);
				instance = null;
			}
			
			protected function bordercontainer1_initializeHandler(event:FlexEvent):void
			{
				msgLabel.text = _message;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:Sequence id="seq" effectEnd="seq_effectEndHandler(event)" target="{instance}">
			<s:Move id="moveIn" duration="1000"/>
			<!--用startDelay指定滑出前的暂停时间-->
			<s:Move id="moveOut" duration="1000" startDelay="3000"/>
		</s:Sequence>
	</fx:Declarations>
	
	<s:Label id="msgLabel" width="100%" maxDisplayedLines="2" verticalAlign="middle"/>
</s:BorderContainer>

application关键代码：

	
	<fx:Script>
		<![CDATA[
			import controls.SimpleMessageBox;
			
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			import spark.components.BorderContainer;
			import spark.components.Label;
			
			protected function showMessageBox():void
			{
				SimpleMessageBox.show(msgInput.text, this);
			}
			
			protected function msgInput_creationCompleteHandler(event:FlexEvent):void
			{
				msgInput.setFocus();
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:TextInput id="msgInput" x="10" y="10"
				 creationComplete="msgInput_creationCompleteHandler(event)" enter="showMessageBox()"
				 text="注意啦，回车也能弹出来啦"/>
	<s:Button x="10" y="50" label="show" click="showMessageBox()"/>
	<s:Button x="10" y="80" label="clear input" click="msgInput.text='';"/>