創異數位Inspire Digital網路技術分享-Flash actionscritp class

1. 拯救動畫設計師的ActionScritp Class

2. 前言
• 以程式碼實現flash補間動畫的三個類別
• Tweener
• TweenLite
• TweenNano
• 使某個物件, 經過一段時間後,將物件本身的
屬性變化到設定的目標值

3. 為什麼要用AS實現動畫
• 方便物件化管理
• 節省製作(修改)時間
• 強大的動態形式

4. 使用程式管理動畫和一般補間動畫的差異
一般補間動畫：引格數多，Layer管理複雜
程式管理動畫：引格數及Layer管理單純

5. Tweener簡介
• MC Tween的後繼者
• Free Source Code
• 有AS2 和 AS 3版本可供使用
• 為靜態類別- 無須新增實例(instance), 而是使用Tweener
去幫你的物件進行動作
• 使物件由目前的屬性(位置, 角度, 亮度, 透明透, 比例…)漸
變至目標屬性, 經過的時間和動態可由設計師精確掌握

6. 基本句構
• Tweener.addTween(myMovie, {x:10, time:1, transition:"linear"});
• myMovie: 要控制的物件名稱
• x: 要移動到的x軸位置
• time: 動作所花時間
• transition: 動態的型式
• 只要是Flash可視物件支援的屬性都可列入作變化
ex:大小, 位置, 透明度, 寬度, 高度…etc

7. 動態形式
• transition:
http://hosted.zeh.com.br/tweener/docs/en-us/
• Tweener.addTween(myMovie, {y: 300, time:5,
transition:"easeoutElastic"});
• Tweener.addTween(myMovie, {y: 300, time:5,
transition:"easeOutBounce"});

8. 更多可控制的屬性(plug-in)
• FilterShortcuts
-陰影,模糊,光暈,漸層等
• ColorShortcuts
-亮度,對比,彩度,飽和度等
http://hosted.zeh.com.br/tweener/docs/en-us/

9. Tweener貝茲曲線
• 誰說只能直線移動?!
– http://labs.zeh.com.br/blog/?p=104

10. 常用輔助參數
• onComplete: 當此動畫結束時同時執行某函式
• onCompleteParams:傳遞給函式的參數
• onStart:當此動畫開始時同時執行某函式
• onStartParams:傳遞給函式的參數
• onUpdate:當此動畫進行時, 不斷叫用某函式
• delay:延後某時間後, 開始跑動畫
• http://hosted.zeh.com.br/tweener/docs/en-us/
• Tweener具有非常好的時程控制參數, 幫助設計師
掌控物件動畫的進程, 串聯所有動畫和程式

11. Tweener的組合技
• 一個蘿蔔一個坑?
• 在同一段時間, 同一個元件的屬性們可以各
自變化而互不干擾.
• Tweener.addTween(target, {x:100, time:3, transition:"linear"});
• Tweener.addTween(target, {y:200, time:2, transition:"easeInQuad"});

12. 注意事項
• Tweener動畫不會因為物件消失而停止
• 善用removeTweens();
• 使用過多的tweener對記憶體, CPU都是負
擔
• 匯入tweener會增加一定的體積(約10kb),
不適用於Banner.

13. TweenLite簡介
• Greensock開發
• 與tweener同樣為支援as2與as3的free
source code
• 更輕量更快速(swf僅增加4.7kb)
• 機動性的擴增插件, 避免增加不必要占用資
源

14. 基本句構
• TweenLite.to(myMovie, 1, {x:65, ease:Bounce.easeInOut});
• myMovie: 要控制的物件名稱
• 1: 動作所花時間
• x: 要移動到的x軸位置
• ease: 動態的型式

15. 貝茲曲線
• 簡單好用的Web API
http://www.greensock.com/tweenlite/

16. 與tweener比較-1
• 彼此有類似的動態形式, 而tweenlite較不細
緻, 種類也不及tweener多
• 可控制的屬性,濾鏡效果大多相同
• 常用的輔助參數名稱也相同, 同樣具有良好
的動畫串聯能力.

17. 與tweener比較-2
• 當Tweenlite發現將要執行tweenlite的物件
仍在動作時, 會取消進行中的tweenlite而執
行新的.
• Tweenlite執行完成後, 會直接從記憶體消
除. 不必擔心重複叫用的問題

18. 與tweener比較-3
• 需要同時執行多個物件動畫時, Tweenlite
是較好的選擇!
• 需要細膩, 組合式的動畫時, tweener是較好
的選擇!

19. TweenNano簡介
• 同樣是greensock所開發
• 超級輕量的tween引擎
– swf僅增加1.6kb, 非常適合製作banner時套用
• 沒有任何插件
– 僅支援基本屬性, 位置,大小,透明度等變化

20. 與tweenlite比較-1
• 具有和tweelite完全相同的程式句構
• TweenNano.to(myMovie, 1.5, {alpha:0.5, x:120,
ease:Back.easeOut});
• 可以完全使用tweenlite相同的動態形式
• 具有相同的動畫控制參數
– onComplete
– onStart
– onUpdate
– delay

21. 與tweenlite比較-2
• 超輕量超快速
• 可視為沒有任何插件可供使用的tweenlite
• http://www.greensock.com/features/

22. 結論
• 使用程式開發動畫可達到較好的管理及效
率, 修改也非常方便!
• Tween三兄弟的語法及概念幾乎相同, 學一
而可貫之!
• 三者適用的時機不同
Tweener:需要較精細擬真的動畫時
Tweenlite:數量較多的物件同時動作時
TweenNano:對swf體積要求嚴格時

23. THANK YOU!
Inspire digital 創異數位聯絡人
Kevin 羅韋翰 ‧ 總經理
電話: 02-7701-6199 # 102
Fang yi 張芳儀 ‧ 客務副總監
電話: 02-7701-6199 # 274