`

Flex开门效果

    博客分类:
  • Flex
阅读更多
<?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>  


分享到:
评论

相关推荐

    Flex开门,关门,翻转,效果

    这个“Flex开门,关门,翻转,效果”是一个展示Flex在动态UI交互方面强大能力的例子。在这个项目中,开发者可能利用了Flex的动画和图形渲染功能来创建出一种视觉上吸引人的用户体验。 首先,我们来看看“开门”和...

    flex特殊效果实例

    本资源"Flex源码大合集"是一个集合,包含了多种Flex项目的源代码实例,适用于开发者深入学习和理解Flex的特殊效果和功能。 1. **Flex框架**:Flex框架是Adobe提供的一个开发工具,它允许开发者使用MXML和...

    flex翻书效果 flex翻书效果

    Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...

    Flex 开门特效,很具体很全面。

    描述中提到的学习和新技术,暗示了Flex开门特效是当前技术领域中一种创新的视觉表现手法。这种特效不仅能够吸引用户的注意力,还展示了开发者对于交互设计的理解和技术的掌握。 在Flex中,实现开门特效可能涉及到...

    不错的flex杂志效果

    Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见于电子杂志、电子报纸等在线阅读应用中。这种效果通过动态渲染页面,模拟真实的纸张翻页动作,带给用户更接近传统纸质阅读体验的交互感受。...

    Flex动画效果教程

    Flex动画效果教程主要聚焦于如何在Flex开发环境中创建引人入胜的动态视觉体验。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的图形库和强大的动画功能,使得...

    flex3d效果展示

    Flex3D,全称为Adobe Flex 3D,是Adobe Flex框架的一个扩展,它允许开发者创建具有强大三维(3D)视觉效果的富互联网应用程序(RIA)。这个技术在2000年代中期非常流行,尤其在需要展示复杂数据或提供动态交互体验的...

    flex 各种 效果

    在本文中,我们将深入探讨Flex的各种效果及其应用。 1. **Flex布局模式**:Flex的核心是其强大的布局引擎,它允许开发者通过使用`display: flex`属性创建灵活的容器,使得子元素可以根据容器大小自动调整布局。这种...

    Flex 3D切换效果

    "Flex 3D切换效果"是指在Adobe Flex框架下实现的3D转换效果,它使得应用程序的界面元素在用户交互时能够呈现出立体的翻转或旋转效果。这种效果通常用于导航菜单、卡片式布局或者像登录界面中的按钮点击反馈,为用户...

    flex 图片轮播效果

    "flex 图片轮播效果"是指利用Adobe Flex这一开发框架来实现这种功能。Flex是一款基于ActionScript和MXML的开源工具,主要用于构建富互联网应用程序(RIA)。以下是对这个主题的详细讲解: 首先,Flex支持XML...

    Flex 翻页效果实例

    在本文中,我们将深入探讨如何在Flex中实现一个翻页效果,这主要是一个基于Adobe Flex技术的用户界面组件,用于创建具有类似真实书籍翻页体验的互动应用。Flex是一种强大的开发框架,允许开发者构建富互联网应用程序...

    flex气泡效果提示

    "flex气泡效果提示"项目正是针对这一问题进行的改进,它引入了更人性化、更具吸引力的提示方式,即气泡提示,以替代原有的验证信息显示。 Flex是一种流行的开源框架,主要用于创建富互联网应用程序(RIA),尤其在...

    Flex水波纹效果project

    Flex水波纹效果项目是一种基于Adobe Flex技术实现的动态视觉效果,主要应用于用户界面设计,为用户提供更加生动、直观的交互体验。Flex是基于ActionScript 3.0和MXML的开源框架,它允许开发者创建丰富的互联网应用...

    Flex 全选效果 批量删除

    本示例项目“Flex全选效果批量删除”聚焦于如何实现这些组件的一个实用功能,即用户可以通过全选复选框来一次性选择多个条目进行批量删除。这在数据管理界面中非常常见,能提升用户体验。 首先,`AdvancedDataGrid`...

    Flex控件折叠效果

    "Flex控件折叠效果"是一个常见的需求,它涉及到用户界面(UI)的动态性与可扩展性,使得用户能更有效地管理和浏览信息。本文将深入探讨Flex控件折叠效果的相关知识点,包括其工作原理、实现方式以及实际应用。 Flex...

    flex倒影效flex倒影效果

    而"flex倒影效果"则是在Flex布局基础上实现的一种视觉效果,它使得元素看起来像具有水中的倒影,增加了设计的动态感和深度。 要创建flex倒影效果,首先我们需要理解Flex布局的基本概念。Flex容器是包含一个或多个...

    flex 带效果的登录画面

    flex 带效果的登录画面

Global site tag (gtag.js) - Google Analytics