`
strugglesMen
  • 浏览: 117039 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

Flex特效使用大全之触发器

    博客分类:
  • Flex
 
阅读更多

本文和大家重点讨论一下Flex特效,Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩。本文将介绍如何在Flex应用程序中创建行为及动画效果。

Flex特效讲解

Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩。本章将介绍如何在Flex应用程序中创建行为及动画效果。

1.什么是Flex行为

Flex中的行为(Behavior)是由触发器(Trigger)和效果(Effect)组合而成。当用户在界面中进行某项操作时,如单击某个按钮,触发器会被激活,从而使目标组件发生某些视觉或听觉上的变化,例如播放一段逐渐显示的动画或发出声响等。触发器可以由用户操作触发,也可以由程序触发,一个触发器可以对应多个效果。

1.1触发器与效果

触发器的使用非常简单,可以作为MXML标记中的一个属性,也可以在<mx:Style>标记中调用,或者在ActionScript中用setStyle()和getStyle()方法调用。触发器的名称为triggerEvent名称+“Effect”后缀。按照这种名称约定,mouseDown事件的触发器名称为mouseDownEffect。Flex中提供的触发器名称包括以下几种。

laddedEffect:当组件添加到容器中时触发。

lcreationCompleteEffect:组件创建完毕时触发。

lfocusInEffect:组件获得焦点时触发。

lfocusOutEffect:组件失去焦点时触发。

lhideEffect:当组件的visible属性更改为false时触发。

lmouseDownEffect:按下鼠标时触发。

lmouseUpEffect:释放鼠标时触发。

lmoveEffect:组件移动时触发。

lremovedEffect:组件被移除时触发。

lresizeEffect:组件改变大小时触发。

lrollOutEffect:鼠标从组件上移开时触发。

lrollOverEffect:鼠标移动到组件上时触发。

lshowEffect:组件的visible属性更改为true时触发。

Flex的动画效果由一个工厂类(Factory)和一个实例类(Instance)构成。工厂类用来处理事件、控制动画,它的名称就是效果的名称,如Zoom。通常我们在应用程序中创建一个工厂类的实例,设置必要的参数,然后将该实例与触发器关联。实例类则用来实现动画效果,当触发器被触发或调用play()方法时,工厂类创建一个实例类的实例来播放所需效果,执行结束后,该实例会被销毁,如果一个效果对应多个目标对象,每一个目标对象都会有一个自己的实例。实例类的命名规则为效果名+Instance。如之前定义的工厂类名为Zoom,那么实例类名就是ZoomInstance。Effect的这种机制,是设计模式中工厂模式的一种应用,效果执行的时候,运行的不是Zoom,而是ZoomInstance。

下面的图9-1分别表现了工厂类和实例类的层级关系。Effect类是一个抽象基类,是定义所有效果的基本工厂类。EffectInstance类是定义所有效果实例子类的基类。在应用程序中不会创建Effect类本身的实例,而是创建一个子类的实例,如Mask或Tween。

图9-1工厂类与实例类

 

分享到:
评论

相关推荐

    FLEX特效FLEX特效FLEX特效FLEX特效

    随着技术的不断演进,Flex特效仍然是构建高质量Web应用的重要工具之一。 通过学习和掌握Flex特效,开发者能够构建出更具吸引力和用户体验的Web应用,同时,结合其他Web技术,如Angular、React等,可以进一步提升...

    flex特效编辑器 开发flex游戏的利器

    在学习和使用Flex特效编辑器时,开发者应掌握基本的Flex编程知识,了解ActionScript和MXML,这是Flex应用程序的基础。同时,熟悉图形设计和动画原理也是必要的,这将有助于创造出更具艺术感的特效。 总而言之,Flex...

    Flex 3D特效源码

    Flex 3D特效源码是一种基于Adobe Flex技术的高级视觉表现形式,主要用于创建引人注目的3D动画和交互效果。Flex是ActionScript 3.0的开发框架,它允许开发者构建富互联网应用程序(RIA)并发布为Flash Player或Adobe ...

    flex特效整理好久了

    在Flex中,可以使用BitmapData类和DisplayObject的drawToBitmap方法来处理图像,实现动态效果。 2. mipreloaderdemo.mxml:这是一个MXML文件,很可能是一个Flex预加载器的示例。预加载器在应用程序启动时显示,帮助...

    flex特效、适合初学者学习

    【Flex特效详解与初学者指南】 Flex特效是Adobe Flex框架中的一大亮点,它允许开发者轻松地为用户界面添加丰富的动态效果和动画,从而提升用户体验。本文将深入探讨Flex特效的原理和实现方式,特别适合初学者学习。...

    flex特效 不错的flex样式生成器

    这个“flex特效 不错的flex样式生成器”是一个工具,可以帮助开发者更轻松地生成适用于Flex布局的CSS样式。通过图形化的界面,用户可以直观地调整各种属性,以实现所需的布局效果。 首先,让我们深入理解Flex布局的...

    flex特效鼠标放上去字体变大的特效

    根据给定文件的信息,本文将围绕“Flex特效:鼠标放上去字体变大的特效”这一主题进行深入探讨。本文首先简要介绍Flex技术及其在Web开发中的应用,随后详细解析实现鼠标悬停时字体放大效果的具体代码逻辑和技术要点...

    最全的flex布局使用大全

    flex布局使用大全

    flex 特效demo

    通过这些demo,开发者可以深入理解Flex特效的工作原理,学习如何使用Flex SDK中的类库和API来实现这些效果。 首先,让我们来看看Flex中的动画机制。在Flex中,我们可以使用Animate类来创建基本的动画效果。例如,平...

    flex特效代码

    Animate类是Flex中最常用的特效类之一,它允许开发者创建自定义的动画。Animate类支持多种属性的动画,如x、y坐标、宽度、高度、颜色等。开发者可以使用Tween类来实现平滑变化,或者直接使用AnimateColor、...

    flex特效组件用法效果

    `ContainerCtrlDemo`可能是一个示例项目,演示了如何使用Flex容器来构建交互式的特效组件。 在Flex容器中,我们可以设置以下属性来控制布局: 1. `display: flex;`:这是开启Flex布局的关键,它告诉浏览器这个元素...

    FLEX 特效工具FLEX 特效工具

    FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具

    flex特效dome

    Flex特效Dome是一个集合了各种基于Flex技术的交互效果示例,它提供了丰富的用户体验设计,非常适合开发者和设计师学习和借鉴。在本篇文章中,我们将深入探讨Flex特效的原理、应用场景以及如何利用EffectsCtrlDemo这...

    超炫Flex特效.rar

    这组“超炫Flex特效.rar”压缩包文件显然包含了一些使用Flex技术实现的独特视觉效果,适合于提升用户体验和交互性。 在Flex中,特效主要通过ActionScript编程来实现,ActionScript是Flash平台的核心脚本语言,它为...

    flex4 收集13种特效

    Flex特效是增强Flex应用程序视觉效果的重要手段之一。通过灵活运用各种触发器和效果,开发者可以轻松地为应用程序添加各种动态元素,从而提升用户的参与度和满意度。无论是基本的动画还是复杂的交互,Flex都能提供...

    Flex 4.6之可用第三方特效开发包

    本文将深入探讨Flex 4.6中一个重要的第三方特效开发包——Efflex。 Efflex是一个专为Flex 4.6设计的特效库,它为开发者提供了大量预定义的视觉效果,以增强应用程序的用户体验。通过使用Efflex,开发者无需从头编写...

    FLEX4动画特效

    在Flex4中,`mx.effects`和`spark.effects`包下提供了大量的内置效果类,例如Fade、Slide、Zoom等,开发者可以直接使用,也可以自定义效果。这些效果可以应用于组件、容器甚至整个舞台,为应用带来丰富的视觉动态。 ...

    Flex 果冻特效Demo

    在果冻特效中,我们需要使用时间轴来控制动画的播放速度和顺序,使得元件在特定时间内按照预设路径进行变形。 4. **ElasticEffect**:虽然Flex官方库可能没有直接提供“果冻”效果,但开发者可以通过自定义类和算法...

    flex特效范例源码

    2. Flex组件的使用和自定义,以及如何添加特效。 3. 数据绑定的实现方式和应用场景。 4. 动画的创建和控制,如何利用Tween类实现平滑过渡。 5. 如何组织项目的源码结构,以便于管理和维护。 通过对这些源码的学习,...

    Flex_特效之鱼眼特效

    2. **图形绘制**:Flex允许开发者使用Graphics类来绘制自定义图形,包括在鱼眼特效中的图像变形。通过改变图形的顶点坐标,我们可以模拟鱼眼镜头的扭曲效果。 3. **计算变形**:鱼眼效应的计算涉及到数学公式,主要...

Global site tag (gtag.js) - Google Analytics