`
hanyi366
  • 浏览: 289268 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex组件的行为和动画效果

    博客分类:
  • Flex
 
阅读更多

 

触发器名称                         对应事件名称                    事件描述

addedEffect                     added                       当组件被添加到容器时触发
createCompleteEffect      createComplete        当组件完成绘制时触发  
focusInEffect                    focusIn                    当组件获得光标焦点时触发
focusOutEffect                 focusOut                   当组件失去光标焦点时触发
hideEffect                        hide                          当组件变成不可见时触发
showEffect                      show                         当组件变成可见时触发
mouseDownEffect           mouseDown              当鼠标在组件上按下时触发
mouseUpEffect                mouseUp                    当鼠标在组件上松开时触发
rollOverEffect                   rollOver                      当鼠标移动到组件上时触发
moveEffect                      move                          当组件被移动时触发
resizeEffect                     resize                          当组件改变大小时触发


Effect中

引用

<mx:AnimateProperty>可实现拉伸效果
<mx:Blur>模糊效果
<mx:Dissolve>实现淡出淡入效果,与<mx:Fade>相似
<mx:Glow>外发光效果
<mx:Iris>以矩形方式出现或消失
<mx:Move>移动效果
<mx:Parallel>多种效果叠加
<mx:Pause>停止   mx.effects.easing.Bounce.easeOut可产生弹动效果
<mx:Resize>改变大小
<mx:Rotate>旋转角度
<mx:SoundEffect>声音效果
<mx:WipeDown>从上往下消失或出现
<mx:WipeLeft>从右往左消失或出现
<mx:WipeRight>从左往右消失或出现
<mx:WipeUp>从下往上消失或出现
<mx:Zoom>放大或缩小
</mx:Transition>不同state切换时的过渡效果

Charts(统计)
<mx:AreaChart>是一种以面积作为表示方式
<mx:AxisRenderer>是一种轴图,股票交易常以这种方式表示
<mx:BarChart>是柱状图
<mx:BubbleChart>气泡图
<mx:CandlestickChart>一种比较有趣的图,”涨”跟”跌”的颜色会不一样
<mx:CategoryAxis>跟AxisRenderer很像
<mx:ColumnChart>跟<mx:BarChart>很像
<mx:DateTimeAxis>以日期为轴的折线图
<mx:GridLines>多条线图
<mx:HLOCChart>跟AxisRenderer很像
<mx:Legend>图例,离散的点
<mx:LinearAxis>Axis系列
<mx:LineChart>折线图
<mx:LogAxis>Axis系列
<mx:PieChart>饼图
<mx:PlotChart>跟Legend很像

 

1.Resize

  尺寸调整效果,改变组件的长和宽。当改变组件的长和宽时,处于同一个容器的其他组件的大小也可能会相应改变,如果该容器使用了绝对定位则不会发生这种情况。

 

 

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            // Event handler for the effectEnd event.           
            private function endEffectHandler():void {
                Alert.show("Effect Ended!");
            }

            // Event handler for the reset button.           
            private function resetHandler():void {
                expand.end();
                img.width=30;
                img.height=60;
                button1.enabled=true;
            }
        ]]>
    </mx:Script>


    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"
        duration="10000" effectEnd="endEffectHandler();"/>

    <mx:Panel title="Resize Effect Example" width="100%" height="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Use the Button controls to control the Resize effect."/>

        <mx:Image id="img" width="30" height="60"
            source="@Embed(source='1.jpg')"/>
    
        <mx:ControlBar>
            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
            <mx:Button label="Pause" click="expand.pause();"/>
            <mx:Button label="Resume" click="expand.resume();"/>
            <mx:Button label="Reverse" click="expand.reverse();"/>
            <mx:Button label="End" click="expand.end();"/>
            <mx:Button label="Reset" click="resetHandler();"/>
        </mx:ControlBar>
       
    </mx:Panel>
</mx:Application>
 

 

 

2.Glow

 发光效果,使用了GlowFilter 滤镜。当对组件使用了该效果,不可再使用GlowFilter 滤镜和其他发光效果。

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Glow effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Glow id="glowImage" duration="1000"
        alphaFrom="1.0" alphaTo="0.3"
        blurXFrom="0.0" blurXTo="50.0"
        blurYFrom="0.0" blurYTo="50.0"
        color="0x00FF00"/>
      
    <mx:Glow id="unglowImage" duration="1000"
        alphaFrom="0.3" alphaTo="1.0"
        blurXFrom="50.0" blurXTo="0.0"
        blurYFrom="50.0" blurYTo="0.0"
        color="0x0000FF"/>

    <mx:Panel title="Glow Effect Example" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Click and hold the mouse on the image to see glowImage effect. Release the mouse to see unglowImage effect."/>
           
        <mx:Image source="@Embed(source='1.jpg')"
            mouseDownEffect="{glowImage}"
            mouseUpEffect="{unglowImage}"/>
       
    </mx:Panel>
</mx:Application>
 

 

 

3.Iris
 彩虹效果,组件以矩形方式,从中心放大或缩小到中心。属于遮罩效果。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Iris effect. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Iris id="irisOut" duration="1000" showTarget="true"/>
    <mx:Iris id="irisIn" duration="1000" showTarget="false"/>

    <mx:Panel title="Iris Effect Example" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue"
            text="Use the Iris effect to show or hide the phone image."/>

        <mx:Image id="flex" source="@Embed(source='1.jpg')" 
            visible="{cb1.selected}"
            showEffect="{irisIn}" hideEffect="{irisOut}"/>

        <mx:CheckBox id="cb1" label="visible" selected="true"/>
 

   </mx:Panel>
</mx:Application>
 
分享到:
评论

相关推荐

    flex组件之行为和特效组件实例源码

    Flex组件是Adobe Flex框架中的重要组成部分,主要用于构建富互联网应用程序(RIA)。在Flex中,组件是用户界面的基本构建块,可以是按钮、文本输入框、列表等可视元素。行为(Behaviors)和特效(Effects)组件则为...

    flex中动画效果

    在 Flex 中,动画效果主要通过 `Effect` 类来实现,它们可以应用于组件或容器,以实现各种动态行为。以下是一些主要的 Flex 动画效果及其详细解释: 1. **Zoom**:缩放效果,可以将组件放大或缩小。在示例中,`Zoom...

    Flex2的几个行为动画源码

    在Flex2中,行为(Behaviors)和动画(Animations)是两个关键概念,它们帮助开发者创建交互性和动态效果,提升用户体验。以下是对这些源码示例的详细解释: 1. **SoundExample**: 这个例子展示了如何在Flex2中处理...

    flex动画效果,有代码

    Flex提供了一系列预定义的效果组件,这些组件可以通过调整不同的属性来实现各种动画效果: - **AnimateProperty**:为组件的属性设置动画效果。 - `property`属性指定要设置动画的目标属性。 - `fromValue`和`to...

    flex 超炫组件 coverflow 组件源码

    在Coverflow组件的实现中,这个目录可能包含主类、皮肤类、以及处理动画和事件的辅助类。通过研究这些源代码,开发者可以学习如何控制组件的行为,调整动画效果,以及与用户的交互。 4. **lib目录**:此目录可能...

    flex特效学习---Flex组件-行为与特效类组件

    在深入探讨Flex特效学习中的行为与特效类组件之前,我们先来理解一下Flex的基本概念。Flex是一种用于构建高性能、跨平台的RIA(Rich Internet Applications)的开源框架,它基于Adobe Flash平台,允许开发者创建出既...

    flex的ppt(flex和java的整合及flex组件的应用共31章)

    数据绑定允许UI元素自动反映数据模型的变化,而状态管理则允许我们根据应用的不同阶段改变界面布局和组件行为。 第十一至第十五章可能会涉及Flex与Java服务的交互,如使用HTTPService、WebService或AMFChannel来...

    flex做拓扑图的组件

    综上所述,构建Flex拓扑图组件涉及图形渲染、交互设计、数据绑定、组件自定义、布局管理、动画效果、状态管理和性能优化等多个方面。通过深入理解和熟练运用这些知识点,你可以创建出功能强大、交互性强的拓扑图组件...

    Flex轮弹组件

    除此之外,像Flex SDK这样的开发工具包包含了构建Flex组件所需的所有库和框架,使得开发者无需从零开始编写所有代码。 在提供的文件列表"org"中,可能包含的是Flex组件相关的源代码文件。"org"通常是Java或相关开源...

    Flex 动画效果

    ##### 3.1 组件的行为和动画效果 在Flex中,所有组件都继承自`UIComponent`类,该类定义了一系列与动画相关的属性和方法。每个组件都可以定义自己的触发器,从而实现各种动画效果。 - **触发器和事件**:每个...

    flex----组件---行为类与特效类

    本篇文章主要探讨的是Flex组件中的两类特殊类型:行为类(Behaviors)和特效类(Effects),这两者都极大地增强了Flex组件的交互性和用户体验。下面将详细阐述这两个概念以及它们在实际应用中的作用。 首先,我们来...

    flex的state组件和trasition组件例子

    在Flex开发中,State组件和Transition组件是构建用户界面动态行为的重要工具。它们允许开发者创建丰富的、交互性强的用户界面,使应用更具吸引力和用户体验。本文将深入探讨这两个组件的概念、用法以及如何在实际...

    Flex的组件

    9. **动画和效果**:Flex还提供了强大的动画和过渡效果机制,可以为组件添加平滑的动态效果,提升用户体验。 10. **调试和性能优化**:了解如何使用Flex Builder或其他工具进行调试,以及如何优化组件性能,如减少...

    Flex控件折叠效果

    - **动画效果**:为了实现“缩入折叠”和“翻转折叠”效果,可以使用TweenMax或Flex的Animate类来添加平滑的过渡动画。这些动画可以改变组件的高度、宽度、透明度等属性,从而实现动态的折叠效果。 - **数据绑定**...

    flex 苹果桌面效果的弹出窗口

    在苹果桌面环境下,Flex可以通过其强大的MXML和ActionScript语言来模拟和实现苹果系统特有的窗口样式和行为,如半透明效果、圆角、阴影等,为用户提供更贴近原生应用的体验。这种效果通常通过自定义组件或使用第三方...

    Flex 翻页效果实例

    3. **动画效果**:Flex提供了强大的动画库,如TweenLite或TweenMax,可以用来平滑地改变组件的属性,如位置、角度和透明度。在这个实例中,这些动画将用于创建流畅的翻页效果,包括页面的旋转、滑动和淡入淡出。 4....

    Flex模拟Mac特效

    1. Flex组件库:Flex提供了一系列预定义的UI组件,如Button、Label、PopupWindow等,这些组件可以帮助开发者快速构建用户界面。在实现Mac弹出框特效时,可能需要用到PopupWindow或自定义组件来创建弹出效果。 2. ...

    Flex 3高级动画编程

    本主题聚焦于Flex 3中的高级动画编程,这是一门深入研究如何通过ActionScript在Flex环境中创建复杂、动态和交互性高的视觉效果的技术。 在Flex 3中,动画主要通过ActionScript实现,而不是使用图形设计工具。...

Global site tag (gtag.js) - Google Analytics