一个比较好玩的切换窗口的Flex特效

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

 

 

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
3.     xmlns:eff="com.adobe.ac.mxeffects.*"    
4.     paddingBottom="0" paddingLeft="0" paddingTop="0" paddingRight="0"  
5.     horizontalAlign="center" verticalAlign="middle" xmlns="*" viewSourceURL="srcview/index.html">  
6.   
7.   <mx:Script>  
8.        <![CDATA[  
9.            import com.adobe.ac.mxeffects.Gate;  
10.            import com.adobe.ac.mxeffects.Flip;  
11.            import mx.effects.Sequence;  
12.            import mx.effects.Parallel;  
13.            import mx.effects.Resize;  
14.            import mx.effects.Fade;  
15.            import mx.effects.Iris;  
16.            import com.adobe.ac.mxeffects.DistortionConstants;  
17.              
18.            private const min_width:int = 350;  
19.            private const min_height:int = 200;  
20.  
21.            public function gotoChatRoom() : void {  
22.               var mySequence:Sequence = new Sequence();  
23.  
24.               var gate:Gate = new Gate(login);  
25.               gate.siblings = [ chatRoom ];  
26.               gate.direction = DistortionConstants.LEFT;      
27.               gate.smooth = true;  
28.               gate.distortion = 10;  
29.               gate.mode = Gate.OPEN;  
30.               gate.duration = 1000;  
31.               mySequence.addChild(gate);  
32.               
33.               var parallel:Parallel = new Parallel();  
34.               var resize:Resize = new Resize();  
35.               resize.target = loginStack;  
36.               resize.widthTo = this.width-20;  
37.               resize.heightTo = this.height-20;  
38.               resize.duration = 1000;  
39.               parallel.addChild(resize);  
40.                 
41.               resize = new Resize();  
42.               resize.target = chatRoom;  
43.               resize.widthTo = this.width-20;  
44.               resize.heightTo = this.height-20;  
45.               resize.duration = 1000;  
46.               parallel.addChild(resize);               
47.               mySequence.addChild(parallel);  
48.                 
49.               mySequence.play();  
50.            }  
51.              
52.            public function gotoLogin() : void {  
53.               var mySequence:Sequence = new Sequence();  
54.  
55.               var gate:Gate = new Gate(chatRoom);  
56.               gate.siblings = [ login ];  
57.               gate.direction = DistortionConstants.LEFT;      
58.               gate.smooth = true;  
59.               gate.distortion = 10;  
60.               gate.mode = Gate.CLOSE;  
61.               gate.duration = 1000;  
62.               mySequence.addChild(gate);  
63.               
64.               var parallel:Parallel = new Parallel();  
65.               var resize:Resize = new Resize();  
66.               resize.target = loginStack;  
67.               resize.widthTo = min_width;  
68.               resize.heightTo = min_height;  
69.               resize.duration = 1000;  
70.               parallel.addChild(resize);  
71.                 
72.               resize = new Resize();  
73.               resize.target = chatRoom;  
74.               resize.widthTo = min_width;  
75.               resize.heightTo = min_height;  
76.               resize.duration = 1000;  
77.               parallel.addChild(resize);               
78.               mySequence.addChild(parallel);  
79.                 
80.               mySequence.play();  
81.            }  
82.        ]]>  
83.   
84.     </mx:Script>  
85.        
86.     <mx:Style source="/assets/OSX.css"/>  
87.   
88.     <mx:VBox>  
89.     <mx:ViewStack id="loginStack" width="350" height="200">  
90.       <mx:Panel id="login" title="Login" horizontalAlign="center"    
91.         verticalAlign="middle" backgroundColor="0xAAAAAA" >         
92.         <mx:Form >           
93.             <mx:FormItem label="Username">  
94.                 <mx:TextInput id="userName" />  
95.             </mx:FormItem>               
96.             <mx:FormItem label="Password">  
97.                 <mx:TextInput displayAsPassword="true" id="password"    
98.                   enter="gotoChatRoom();"/>  
99.             </mx:FormItem>         
100.             <mx:FormItem>  
101.                 <mx:Button label="Login" click="gotoChatRoom();" />  
102.             </mx:FormItem>           
103.         </mx:Form>           
104.       </mx:Panel>  
105.          
106.       <mx:Panel id="chatRoom" title="Chat Room" >             
107.         <mx:VBox width="100%" height="100%">  
108.           <mx:TextArea id="log" fontSize="12" width="100%" height="100%"    
109.             editable="false" />  
110.         </mx:VBox>  
111.         <mx:ControlBar>  
112.           <mx:TextInput id="msg" width="100%" fontSize="12" enter=""/>  
113.             <mx:Button label="Send" click="" />    
114.             <mx:Button label="Logout" click="gotoLogin()" />    
115.         </mx:ControlBar>         
116.       </mx:Panel>  
117.     </mx:ViewStack>  
118.     </mx:VBox>  
119.   
120. </mx:Application>  
126. 使用的外部组件可以在这里下载：http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip
     
     CSS不是必要的，不过分享一个很棒的flex免费皮肤网站：http://www.scalenine.com/
     可以在上面找到很多非常酷的皮肤，例子中使用的是MacOS风格的。
     
     编辑帖子时，Javaeye支持链接到某个flash文件。只要因特网上的某个URL上存在一个SWF文件，都可以链接到javaeye的帖子中。其实最好的方法是到google app engine(http://code.google.com/appengine/)上申请一个APP，然后把SWF文件当静态文件上传上去就可以了。上面的flash实际上来自这个链接：http://fmldemo.appspot.com/flash/Chat.swf。
     
     google app engine使用的python语言。python语言有一个AMF实现pyafm(http://pyamf.org/)，可以实现FLEX程序与后台进行数据交换。这方面的研究有一个很棒的BLOG，建议你参考一下：http://nealmi.javaeye.com/
128. 转自:http://mingliangfeng.javaeye.com/blog/211779