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
姜大叔
閱讀(20801)
評論(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新聞
Chat2DB
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的動畫效果與變換!(一)(20801)
2.?自已做的一個Flex 3D效果!(12070)
3.?Flex中的皮膚(一)(7289)
4.?Flex的動畫效果與變換!(三)(完)(6908)
5.?一個不錯的Flex效果!(6549)
評論排行榜
1.?自已做的一個Flex 3D效果!(133)
2.?一個不錯的Flex效果!(48)
3.?基于PureMVC的一個Flex MP3播放器分析(32)
4.?Flex的動畫效果與變換!(二)(7)
5.?Flex的動畫效果與變換!(一)(6)
Powered by:
博客園
模板提供:
滬江博客
Copyright ©2025 姜大叔
主站蜘蛛池模板:
毛片免费观看的视频在线
|
一区二区三区视频免费观看
|
在线日本高清免费不卡
|
亚洲精品无码久久久久sm
|
狠狠热精品免费观看
|
免费成人黄色大片
|
在线看亚洲十八禁网站
|
国产午夜无码视频免费网站
|
卡一卡二卡三在线入口免费
|
亚洲精品456人成在线
|
成年免费大片黄在线观看岛国
|
91嫩草亚洲精品
|
午夜精品在线免费观看
|
国产区图片区小说区亚洲区
|
亚洲精品在线视频
|
国产无遮挡裸体免费视频在线观看
|
亚洲国产另类久久久精品小说
|
人妻丰满熟妇无码区免费
|
亚洲人成影院77777
|
国产一级淫片免费播放
|
成年网在线观看免费观看网址
|
亚洲无码在线播放
|
99久久久精品免费观看国产
|
亚洲卡一卡二卡乱码新区
|
免费在线看片网站
|
免费播放在线日本感人片
|
亚洲视频免费在线看
|
处破痛哭A√18成年片免费
|
日本高清免费中文在线看
|
亚洲av无码成h人动漫无遮挡
|
久久www免费人成看片
|
亚洲av无码专区国产不乱码
|
国产亚洲精久久久久久无码77777 国产亚洲精品成人AA片新蒲金
|
亚洲毛片无码专区亚洲乱
|
免费看www视频
|
中文成人久久久久影院免费观看
|
亚洲高清中文字幕综合网
|
成人性生交视频免费观看
|
成人免费一区二区三区
|
亚洲人成电影在线观看网
|
亚洲一级特黄大片无码毛片
|