JiangZone
天将降大任于是人也!
BlogJava
首页
新随笔
联系
聚合
管理
随笔-31 评论-257 文章-0 trackbacks-0
Flex的动画效果与变换!(一)
在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念。在Flex中使用动画效果,可以用Flex自带的Effect,或者自已定制Effect,因为很多人都想借Flash里面的一样操作Flex,比如在Flash里面做一个动态按钮很容易,当鼠标移动到上面时,会有很多发光的点跑出来(荧火虫效果),这种效果在Flash十分容易实现,但在Flex里面要实现这种效果就不是那么简单的了,下面说说在Flex里的的动务效果的使用与自定义制作。
首先介绍一下Flex里面的自带的效果有以下几种:
Blur 模糊效果
Move 移动效果
Fade 淡入淡出效果
Glow 发光效果
Resize 调整大小效果
Rotate 旋转效果
Zoom 缩放效果
WipeLeft 用遮罩实现画面收放效果,下同,分别为不同方向
WipeRight
WipeUp
WipeDown
不同的效果所需要设置的属性也不一样,比如Blur效果需要设置它的X与Y轴的模糊像素
<mx:Blur id="blur" blurXFrom="0" blurXTo="10" />
而Move效果需要设置移动的位置信息
<mx:Move id="moveEffect" xFrom="-100" />
其它设置可以参考Flex语言参考
下面说说如何使用这些效果。要运行这些效果有两种方法:一种是调用该效果的play()方法,另外一种是使用触发器来触发效果。
(1)使用play()方法:
先看效果:
以下代码:
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
<
mx:Script
>
4
<![CDATA[
5
private function onClick(event:Event):void {
6
be.target = event.currentTarget;
7
be.play( );
8
}
9
]]>
10
</
mx:Script
>
11
12
<
mx:Blur
id
="be"
blurXTo
="50"
blurYTo
="50"
duration
="1000"
/>
13
14
<
mx:Panel
id
="p"
width
="200"
height
="180"
click
="onClick(event)"
/>
15
</
mx:Application
>
在代码中看到,要使用效果,先定好一个效果,如上面的<mx:Blur ...>该标签就是模糊效果的MXML标签,定好效果后在Panel的点击事件里再对该效果进行一些设置,如be.target = event.currentTarget 设置该效果将要应用到的目标组件(Component),之后再调用play()方法后,该效果就会应用在Panel上面播放!
(2)使用触发器播放效果:
使用触发器播放效果的话,可以不用写ActionScript代码,直接在组件的效果触发器上指明使用哪个效果就可以了,比较简单明了,但就不能进行更多的属性定制,而用AS控制播放的话,可以对效果进行很多的设置再相应根据情况播放,先看看触发器播放的代码:
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
4
<
mx:Blur
id
="be"
blurXTo
="50"
blurYTo
="50"
duration
="2000"
/>
5
6
<
mx:Panel
id
="p"
width
="200"
height
="180"
creationCompleteEffect
="{be}"
/>
7
</
mx:Application
>
看以上代码,先写好了Blur的效果并设置好属性后,duration="2000"这个是播放的时间以毫秒为单位。
在Panel标签里有这样一句:creationCompleteEffect="{be}" 这个就是触发器,是该Panel组件的效果触发器,当Panel组件加载完成时,会由系统自动调用该效果触发器,触发器里面指了触发 be 这个Blur效果
在Flex里面还有很多触发器如:
addedEffect 被添加进容器时触发效果
removedEffect 被从容器中移除时触发效果
creationCompleteEffect 被创建成功时触发效果
focusInEffect 获得焦点时触发
focusOutEffect 失去焦点时触发
hideEffect 被隐藏时(visible=false)触发
showEffect 被显示时(visible=true)触发
rollOverEffect 鼠标经过时触发
rollOutEffect 鼠标离开时触发
mouseDownEffect 鼠标按下时触发
mouseUpEffect 鼠标松开时触发
moveEffect 被移动时触发
resizeEffect 被重整大小时触发
注意:这些都是效果触发器,不要与事件触发器混乱了。事件触发器是rollOver,事件触发器与效果触发器差不多,事件触发器是当用户执行相就操作时触发事件,将会调用自定的事件触发处理函数,而效果触发器是执行相应操作时被触发并由系统自动调用所定的效果的play()方法。
现在说说效果的一些其它属性:
每个效果都有reverse( );方法,该方法是反向播放,原本由小到大的变化,而调用reverse( );后再运行play()的话,效果将会从大到小进行播放。
但要注意的一点是,reverse( );不会自动播放,即是单单调用reverse( );的话,效果并不会播放,他只会记录该效果为倒转,而要再调用play()后倒转效果才会开始播放。而调用pause( )与resume( )就是暂停与继续播放效果
startDelay这个属性是设置效果的播放延时,以毫秒为单位,即要等待多少毫秒后效果才开始播放,如:
<mx:Blur id="be" blurXTo="50" startDelay="3000" />
该模糊效果将会在调用play()之后3秒才开始播放
repeatCount这个属性是设置效果的重复次数,默认为1,设置为0的话就是不停循环播放
<mx:Blur id="be" blurXTo="50" startDelay="3000" repeatCount="5" />
每个效果都有两个事件:effectStart 与 effectEnd
你可以在该效果事件的处理函数里面对效果作相应的操作,如:
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
<
mx:Script
>
4
<![CDATA[
5
import mx.events.EffectEvent;
6
public function onEffEnd(e:EffectEvent):void{
7
e.effectInstance.reverse();
8
e.effectInstance.play();
9
}
10
]]>
11
</
mx:Script
>
12
<
mx:Blur
id
="be"
blurXTo
="50"
blurYTo
="50"
duration
="2000"
/>
13
14
<
mx:Panel
id
="p"
width
="200"
height
="180"
creationCompleteEffect
="{be}"
effectEnd
="onEffEnd(event)"
/>
15
</
mx:Application
>
当效果播放完时,系统将会自动触发effectEnd事件,在处理函数里面,将该效果Instance即现时播放的效果实例进行倒转并播放,当播放完,又会触发effectEnd事伯,这样一直循环!
现在再来说说效果的组合:
通常如果你觉得只应用一个效果很单调的话,可以进行效果组合应用,即多个效果同时播放或者顺序播放,
如,当加载页面时,你想Panel先模糊到一定程度,再将Panel移动到某个位置,再把Panel还原成原来的清淅度(即消退模糊)。这样分析一下,一共用了三个效果,一,先应用Blur(由清至模)效果,当Blur完成时,再应用Move效果,当Move完成时,再应用另外一个Blur(由模至清)效果。这样三个效果组合就是按顺序组合,先后运行。先来看看效果:
再来看看代码:
1
<?
xml version="1.0" encoding="utf-8"
?>
2
<
mx:Application
xmlns:mx
="http://www.adobe.com/2006/mxml"
layout
="absolute"
>
3
4
<
mx:Sequence
id
="sequenceEffect"
>
5
<
mx:Blur
id
="beOut"
blurXTo
="50"
blurYTo
="50"
duration
="500"
/>
6
<
mx:Move
id
="mv"
xTo
="200"
yTo
="150"
duration
="500"
/>
7
<
mx:Blur
id
="beIn"
blurXFrom
="50"
blurYFrom
="50"
blurXTo
="0"
blurYTo
="0"
duration
="500"
/>
8
</
mx:Sequence
>
9
10
<
mx:Panel
id
="p"
width
="200"
height
="180"
mouseDownEffect
="sequenceEffect"
/>
11
</
mx:Application
>
看以上代码,<mx:Sequence id="sequenceEffect">标签就是顺序组合效果标签,当应用sequenceEffect效果的时候,它会按顺序播放该标签里面的三个子效果。
另外的就是同时播放了,
1
<
mx:Parallel
id
="parallelEffect"
>
2
<
mx:Blur
id
="beOut"
blurXTo
="50"
blurYTo
="50"
duration
="500"
/>
3
<
mx:Move
id
="mv"
xTo
="200"
yTo
="150"
duration
="500"
/>
4
</
mx:Parallel
>
这个标签就是同时播放的效果标签,放在它里面的子效果都会同时播放,即一边模糊一边移动。这个都可以自由组合,<mx:Parallel>与<mx:Sequence>标签都可以自由组合,例如先按顺序先播放模糊,再同时播放移动与隐藏等。这里就不多说了。
使用Flex自带的效果基本用法就这些,下篇文章将讨论自定义效果的制作,下篇将会详细说说这篇文章上面说到的 effectInstance 即实例与工厂的概念。
posted on 2008-07-29 14:20
姜大叔
阅读(20771)
评论(6)
编辑
收藏
所属分类:
Flash/Flex
评论:
#
re: Flex的动画效果与变换!(一) 2008-08-20 14:51 |
HUIHUI
厉害
回复
更多评论
#
re: Flex的动画效果与变换!(一) 2010-06-14 22:27 |
Flex初学
好文!!!!
回复
更多评论
#
re: Flex的动画效果与变换!(一) 2011-06-14 12:15 |
easy518网址导航
http://www.easy518.com
回复
更多评论
#
re: Flex的动画效果与变换!(一) 2011-07-01 08:53 |
fcer
学习了。。谢谢
回复
更多评论
#
re: Flex的动画效果与变换!(一) 2011-08-15 14:21 |
fx
很好 对动画效果有了初步的认识,写的不错。。
回复
更多评论
#
re: Flex的动画效果与变换!(一)
2012-02-13 13:58 |
sunli
好东西啊 哈哈
回复
更多评论
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
[转载]如何学习Flex Framework
基于PureMVC的一个Flex MP3播放器分析
Flex中的皮肤(二)完
Flex中的皮肤(一)
写了一个Flash效果!
自已做的一个Flex 3D效果!
Flex的动画效果与变换!(三)(完)
Flex的动画效果与变换!(二)
Flex的动画效果与变换!(一)
一群会跟着声音跳舞的3D格子!
<
2008年7月
>
日
一
二
三
四
五
六
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(22)
给我留言
查看公开留言
查看私人留言
随笔分类
Flash/Flex(16)
Java(6)
PHP(9)
随笔档案
2008年7月 (31)
搜索
最新评论
1. re: Java制作自动访问网站机器人!
你好吗?
--嗖嗖嗖
2. re: Java制作自动访问网站机器人!
嗖嗖嗖
--嗖嗖嗖
3. re: 一个不错的Flex效果!
我想要一份源代码,谢谢喽
--王丽娜
4. re: 基于PureMVC的一个Flex MP3播放器分析
有没有源码提供啊,多谢!!!
--rong
5. re: 基于PureMVC的一个Flex MP3播放器分析
272914287@qq.com
能不能发份源码到我邮箱啊,万分感谢!!
--rong
阅读排行榜
1. Flex的动画效果与变换!(一)(20771)
2. 自已做的一个Flex 3D效果!(12032)
3. Flex中的皮肤(一)(7260)
4. Flex的动画效果与变换!(三)(完)(6885)
5. 一个不错的Flex效果!(6525)
评论排行榜
1. 自已做的一个Flex 3D效果!(133)
2. 一个不错的Flex效果!(48)
3. 基于PureMVC的一个Flex MP3播放器分析(32)
4. Flex的动画效果与变换!(二)(7)
5. Flex的动画效果与变换!(一)(6)