- 浏览: 248043 次
- 性别:
- 来自: 厦门
文章分类
最新评论
-
topbox163:
图片显示不了
Flex 学习曲线图 -
彭利贤:
你好,想请教您一些关于flash的问题,您可以加我qq吗 59 ...
全屏flash的尺寸分析 -
jingj6:
是开源的吗?
小日本做的非常强大的一款AS3 3D引擎 -
hugh52066:
LZ牛B。
Flex 学习曲线图 -
sweed0:
a dream~~
一个让人瞠目结舌的传奇电脑高手!
6.1 认识行为对象
6.1.1 什么是行为对象
行为对象可以看作是触发器(Trigger) 和动画效果(Effect) 的结合体。
触发器和事件并不相同,针对一个事件的触发器,受到事件的制约。事件可以被监听,而触发器不可以。
组件定义了多种触发器,成为本身的一个属性,这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果,当触发器被激活,这些动画会按某种顺序运行。
触发器和事件并不相同,针对一个事件的触发器,受到事件的制约。事件可以被监听,而触发器不可以。
组件定义了多种触发器,成为本身的一个属性,这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果,当触发器被激活,这些动画会按某种顺序运行。
6.1.2 创建行为
Move 标签:将target 指定的作用目标 img图片 从xFrom 移动到 xTo 位置,duration 表示持续的时间(单位:毫秒)。
<mx:Move id="myMove" target="{img}" xFrom="50" xTo="150" duration="2000"/> <mx:Image id="img" x="53" y="53" source="tree.jpg"/> <mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
所有动画对象都继承 Effect 对象。抽象类,定义了以下方法来控制动画的播放流程:
- play(targets:Array = null, playReversedFromEnd:Boolean=false):开始播放,targets:一组目标对象,这将覆盖原来的目标对象。playReversedFromEnd:是否逆向播放。
- end():停止播放动画
- pause():暂停动画
- resume():当暂停时,继续播放
- reverse():逆向播放动画,如果动画正在播放,则从当前位置开始逆向播放。
我们也可以使用AS来完成行为的创建:
<mx:Script> <![CDATA[ import mx.effects.Move; private var myMove:Move; internal function initApp():void{ myMove = new Move(); myMove.xFrom = 50; myMove.xTo = 150; myMove.duration = 2000; myMove.target = img } ]]> </mx:Script> <mx:Image id="img" x="53" y="53" source="tree.jpg"/> <mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
6.2 行为和组件
6.2.1 组件的行为和动画效果
UIComponent 是所有组件的父类,定义了组件共有的属性和方法,其中包括行为触发器:
所有的动画效果都是Effcet 类的子类,位于 mx.Effects 包中:
触发器名词 |
对应的事件名词 |
事件描述 |
addedEffect |
added |
当被添加到容器中时触发 |
createCompleteEffect |
createComplete | 当组件完成绘制时触发 |
removedEffect | removed | 当组件从容器中删除时触发 |
focusInEffect | focusIn | 当组件获得焦点时触发 |
focusOutEffect | focusOut | 当组件失去焦点时触发 |
hideEffect | hide | 当组件变成不可见时触发 |
showEffect | show | 当组件变成可见时触发 |
mouseDownEffect | mouseDown | 当鼠标在组件上按下时触发 |
mouseUpEffect | mouseUp | 当鼠标在组件上松开时触发 |
rollOutEffect | rollOut | 当鼠标在组件上移开时触发 |
rollOverEffect | rollOver | 当鼠标移到组件上时触发 |
moveEffect | move | 当组件被移动时触发 |
resizeEffect | resize | 当组件大小改变时触发 |
所有的动画效果都是Effcet 类的子类,位于 mx.Effects 包中:
Effect 名称 |
动画效果描述 |
AnimateProperty |
针对组件的一个以数字计算的属性,比如长度, 按给定的起始值逐渐改变属性的大小。 |
Blur |
模糊效果。可以让组件变得模糊,核心由 BlurFilter 滤镜完成。 当对组件使用了该效果,不可再使用 Blur 滤镜和其他模糊效果。 |
Fade |
淡入淡出效果。 注意:当目标对象中包括文字时,必须使用嵌入字体。 |
Dissolve |
溶解效果,主要是在目标对象上增加覆盖层,改变覆盖层的透明度,达到让目标消失或出现的效果。 和 Fade 效果相比,它可以设置覆盖层的颜色。 注意:当目标对象中包括文字时,必须使用嵌入字体。 |
Glow |
发光效果,使用了GlowFilter 滤镜。 当对组件使用了该效果,不可再使用GlowFilter 滤镜和其他发光效果。 |
Iris |
彩虹效果,组件以矩形方式,从中心放大或缩小到中心。 属于遮罩效果。 |
Move |
移动效果,移动组件的坐标,只有当组件位于支持绝对定位的容器中时才有效。 |
Pause |
停止,什么都不改变,没有动画。 一般用于复合动画效果中,用来分割前后两个动画。 |
Resize |
尺寸调整效果,改变组件的长和宽。 当改变组件的长和宽时,处于同一个容器的其他组件的大小也可能会相应改变,如果该容器使用了绝对定位则不会发生这种情况。 |
Rotate |
旋转效果。 |
SoundEffect |
注意:当目标对象中包括文字时,必须使用嵌入字体。 |
WipeLeft WipeRight WipeUp WipeDown |
擦除效果,属于遮罩效果。 对应不同方向。 |
Zoom |
放缩效果,以组件为中心进行放缩。 |
6.2.2 为组件添加行为--监听动画的执行
<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
effectStart 和 effectEnd 是动画效果共有的事件,分别在动画的开始和结束时被激发。
<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
repeatCount 和 repeatDelay 也是共有属性,分别表示动画播放的次数和每次都间隔时间
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"> <mx:Style source="style.css" /> <mx:Script> <![CDATA[ internal function effectStartHandler():void{ tip_txt.text = "提示信息:动画开始了"; } internal function effectEndHandler():void{ tip_txt.text = "提示信息:动画结束了"; } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Label id="tip_txt" text="提示信息:" width="219" styleName="label"/> </mx:ApplicationControlBar> <mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" /> <mx:WipeLeft id= "myWipe" /> <mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/> <mx:Image id="image" x="35" y="43" source="tree.jpg" showEffect="myIris" hideEffect="myIris"/> <mx:Image id="image2" x="170" y="43" source="tree.jpg" showEffect="myWipe" hideEffect="myWipe2"/> <mx:Button label="改变图片" x="37" y="153" click="image.visible = image2.visible= !image.visible"/> </mx:Application>
可以通过CSS样式来设定组件的行为:
<mx:Style> .image{ showEffect: myIris; hideEffect: myIris; } .image2{ showEffect: myWipe2; hideEffect: myWipe; } </mx:Style> <mx:Image id="image" x="35" y="43" source="tree.jpg" styleName="image"/> <mx:Image id="image2" x="170" y="43" source="tree.jpg" styleName="image2"/>
或者通过setStyle 来设置样式:
<mx:Script> <![CDATA[ internal function initApp():void{ image.setStyle("showEffect",myIris); image.setStyle("hideEffect",myIris); image2.setStyle("showEffect",myWipe2); image2.setStyle("hideEffect",myWipe); } ]]> </mx:Script> <mx:Image id="image" x="35" y="43" source="tree.jpg“/> <mx:Image id="image2" x="170" y="43" source="tree.jpg"/>
发表评论
-
如何使用Cairngorm3的导航库(Spring AS)
2011-08-29 17:39 2854一、概述 二、LIB库包配置 下载需要的LIB库 ... -
Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果
2008-09-28 16:47 37626.3.2 放缩效果和调整大 ... -
Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果
2008-09-27 22:33 31296.3.1 模糊效果和发光效 ... -
Flex学习笔记_09 数据绑定_运用实例
2008-07-28 23:41 32159.3.1 实现界面的多语言切换 <?xml vers ... -
Flex学习笔记_09 数据绑定_晋级篇
2008-07-28 22:27 28329.2.1 函数和类级别的绑 ... -
Flex学习笔记_09 数据绑定_概念、使用
2008-07-21 23:32 20419.1 认识数据绑定 9.1.1 数据绑定的概念 ... -
Flex学习笔记_08 Flex的事件机制_高级应用
2008-07-16 23:11 31708.3 事件机制的高级应用 8.3.1 事件的优先级别和 ... -
Flex学习笔记_08 Flex的事件机制_事件工作流程
2008-07-15 09:05 26878.2 事件机制的工作流程 8.2.1 关于事件流 ... -
Flex学习笔记_08 Flex的事件机制_事件架构
2008-07-14 08:54 24558.1 一切从事件开始 8.1.1 关于事件 事件有 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础_数据类型及其运算、程序流程
2008-07-13 19:21 46087.3 数据类型和数据运算 7.3.1 关于数据类型 ... -
Flex学习笔记_07 ActionScript 3.0 编程基础
2008-07-09 23:15 28517.1 了解 ActionScript 3.0 7.1 ... -
Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用
2008-07-06 14:26 25523. 控件的实例应用 3.1 制作一个简单的涂鸦板 ... -
Flex学习笔记_06 使用组件处理数据和交互_02导航类组件
2008-07-02 00:04 29612. 导航类组件 2.1 ToggleButtonBa ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(下)
2008-06-30 10:37 4576Flex学习笔记_06 使用组 ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(中)
2008-06-29 22:50 3933Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_06 使用组件处理数据和交互_01常用组件(上)
2008-06-26 23:11 4486Flex学习笔记_06 使用组件处理数据和交互_01常用组件( ... -
Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局
2008-06-25 08:40 6680本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_02窗口布局
2008-06-24 09:07 5068本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局
2008-06-23 23:52 5609本文的相关文章: Flex学习笔记_05 使用容器控制界面布局 ... -
Flex学习笔记_04 MXML语言简介
2008-06-17 22:52 54211. MXML语法 MXML语言是专门用于Flex程序中, ...
相关推荐
Flex学习笔记_09 数据绑定_概念、使用 - Java&Flex - JavaEye技术网站 希望对爱好有帮助!!
Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记Flex学习笔记
学习了一段时间的flex... 上传点资源,大家分享。 flex,怎么学习flex,Flex_3_Cookbook_中文版
Flex_3_with_JavaFlex_3_with_JavaFlex_3_with_JavaFlex_3_with_Java
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
amcharts_flex_components_1.8.1 和开发示例
Flex_CookBook_读书笔记(精品) Flex_CookBook_读书笔记(精品)
flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记 flex学习笔记
将_Adobe_Flex_和_JavaFX_与_JavaServer_Faces_2.0_结合使用.pdf
4.2 动画效果Effect-Using Behaviors 26 4.3使用皮肤-Creating Skin 28 5.Flex通信 30 5.1 与HTTPService交互 30 5.2 与WEBService交互 30 5.2.1WebService简介 30 5.2.2 Flex访问WebService 32 6 BlazeDS与服务端...
最近开始学习Flex,其中用到了AS,AS2到AS3发生了很大的变化,完全的面向对象,知道这个特点以后我也一直没有特意的好好去学学AS3,但是随着最近学习的深入,还是有必要学习一下
arcgis_api_for_flex_3_6 api库文件,现在esri官网需哟注册才能下载了,而且网速超慢,我下了好几次才下载完,希望对大家有用
MAPABC_FLEX_API_WEB_V2.4
Flex_I_O_简介
Flex万年历记事本_flex源码
map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9map_flex_1_9
flex_video_帮助
flex_and_bison flex_and_bison
flex4源码 超酷menu导航 flex4
flex 图表