Flex：开门关门特效

                                             Flex：开门关门特效

from:http://yecon.blog.hexun.com/28597959_d.html

如下所示，该程序使用了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>