一个比较好玩的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>

 

 

 

评论

11 楼 xiejiangbo 2009-07-10  

从gate开始缺少类，后来找了个ac 和一个 andy 才总算能跑起来。请问这个是网上有开源的源码下载还是要用到swc

10 楼 mingliangfeng 2009-03-05  

源代码已经贴上了，就这么多，一个MXML文件。

9 楼 catony 2009-03-04  

好东西

catony 写道

好东西

8 楼 catony 2009-03-04  

好东西 能分享一下源代码吗？ 我的邮箱：[e-mail]

7 楼 mingliangfeng 2008-07-08  

回xiejiangbo：

使用的外部组件可以在这里下载：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.iteye.com/

6 楼 xiejiangbo 2008-07-06  

我也想发布些东西和大家分享一下
你的那个登陆界面实际效果是怎么往上面发布的？？？

5 楼 xiejiangbo 2008-07-06  

代码只有一部分吧
css和几个类找不到，也一起放上来吧

还想请教一个问题
我现在是用flex做银行里面的一个系统，
遇到一个关于下拉框绑定值的问题，
需要根据特定的值，让下拉框在初始化的时候显示到特定的下拉选项。
这个问题知道怎么弄吗？

4 楼 xiejiangbo 2008-07-06  

哥们
这个效果有意思！

3 楼 mingliangfeng 2008-07-05  

当然，无任何版权限制

2 楼 zbmartin 2008-07-05  

挺好看的，顶顶

1 楼 ioryioryzhan 2008-07-04  

先顶再看，效果不错，拿去用不介意吧