一个比较好玩的Flex特效

如下所示，该程序使用了auhlmann写的一个组件，详细信息请至http://weblogs.macromedia.com/auhlmann/archives/2007/03/distortion_effe.cfm#more查询。login时开门，logout时关门。源代码贴在后面了。

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:eff="com.adobe.ac.mxeffects.*" 
    paddingBottom="0" paddingLeft="0" paddingTop="0" paddingRight="0"
    horizontalAlign="center" verticalAlign="middle" xmlns="*" viewSourceURL="srcview/index.html">

  <mx:Script>
       <![CDATA[
           import com.adobe.ac.mxeffects.Gate;
           import com.adobe.ac.mxeffects.Flip;
           import mx.effects.Sequence;
           import mx.effects.Parallel;
           import mx.effects.Resize;
           import mx.effects.Fade;
           import mx.effects.Iris;
           import com.adobe.ac.mxeffects.DistortionConstants;
           
           private const min_width:int = 350;
           private const min_height:int = 200;

           public function gotoChatRoom() : void {
              var mySequence:Sequence = new Sequence();

              var gate:Gate = new Gate(login);
              gate.siblings = [ chatRoom ];
              gate.direction = DistortionConstants.LEFT;    
              gate.smooth = true;
              gate.distortion = 10;
              gate.mode = Gate.OPEN;
              gate.duration = 1000;
              mySequence.addChild(gate);
            
              var parallel:Parallel = new Parallel();
              var resize:Resize = new Resize();
              resize.target = loginStack;
              resize.widthTo = this.width-20;
              resize.heightTo = this.height-20;
              resize.duration = 1000;
              parallel.addChild(resize);
              
              resize = new Resize();
              resize.target = chatRoom;
              resize.widthTo = this.width-20;
              resize.heightTo = this.height-20;
              resize.duration = 1000;
              parallel.addChild(resize);             
              mySequence.addChild(parallel);
              
              mySequence.play();
           }
           
           public function gotoLogin() : void {
              var mySequence:Sequence = new Sequence();

              var gate:Gate = new Gate(chatRoom);
              gate.siblings = [ login ];
              gate.direction = DistortionConstants.LEFT;    
              gate.smooth = true;
              gate.distortion = 10;
              gate.mode = Gate.CLOSE;
              gate.duration = 1000;
              mySequence.addChild(gate);
            
              var parallel:Parallel = new Parallel();
              var resize:Resize = new Resize();
              resize.target = loginStack;
              resize.widthTo = min_width;
              resize.heightTo = min_height;
              resize.duration = 1000;
              parallel.addChild(resize);
              
              resize = new Resize();
              resize.target = chatRoom;
              resize.widthTo = min_width;
              resize.heightTo = min_height;
              resize.duration = 1000;
              parallel.addChild(resize);             
              mySequence.addChild(parallel);
              
              mySequence.play();
           }
       ]]>

    </mx:Script>
    
    <mx:Style source="/assets/OSX.css"/>

    <mx:VBox>
    <mx:ViewStack id="loginStack" width="350" height="200">
      <mx:Panel id="login" title="Login" horizontalAlign="center" 
        verticalAlign="middle" backgroundColor="0xAAAAAA" >      
      	<mx:Form >      	
      		<mx:FormItem label="Username">
      			<mx:TextInput id="userName" />
      		</mx:FormItem>      		
      		<mx:FormItem label="Password">
      			<mx:TextInput displayAsPassword="true" id="password" 
      			  enter="gotoChatRoom();"/>
      		</mx:FormItem>      
      		<mx:FormItem>
      			<mx:Button label="Login" click="gotoChatRoom();" />
      		</mx:FormItem>      	
      	</mx:Form>      	
      </mx:Panel>
      
      <mx:Panel id="chatRoom" title="Chat Room" >      	 
      	<mx:VBox width="100%" height="100%">
      	  <mx:TextArea id="log" fontSize="12" width="100%" height="100%" 
      	    editable="false" />
      	</mx:VBox>
      	<mx:ControlBar>
      	  <mx:TextInput id="msg" width="100%" fontSize="12" enter=""/>
      		<mx:Button label="Send" click="" /> 
      		<mx:Button label="Logout" click="gotoLogin()" /> 
      	</mx:ControlBar>      
      </mx:Panel>
    </mx:ViewStack>
    </mx:VBox>

</mx:Application>