ener 10大用途

很多人都以為Tweener只是可以用來Tween Movieclip的屬性，只局限了在二維空間內發揮。但其實如果懂得利用，它的用途可以是非常廣泛的，令人嘆為觀止的RIA也亦由此而來。現在讓Stanley介紹Tweener 10式吧!

>> 下載所有例子: Tweener Tutorial Examples (1.8Mb) <<

1. Smooth Drag and Drop

Flash 其實已提供了startDrag(); 功能讓你做到拖曳，可是用這方法來拖曳東西總是給人很不爽的感覺。但是如果在MouseMove 事件用了Tweener來Tween MovieClip的x及y座標後，感覺截然不同了! 請試試看~

>> 下載”Smooth Drag and Drop” source code

2. Number Counter

Tweener本來就是用來interpolate數值的，因此很順理成章我們可以用它來做計數器。如果沒有Tweener，你可能要利用EnterFrame事件，並且加上很麻煩的邏輯來完成，很花時間。現在用了Tweener，幾行的程式碼就可做到了! 這個計數器可應用在計分板之類的地方，定可為你的RIA帶來多些生氣呢~

>> 下載”Number Counter” source code

3. Content Scroller

這次都是用了Tweener控制MovieClip的x,y座標，但是如果懂得利用，可以做出以下的捲動效果。幾行程式碼而已，誰也可以做到!

>> 下載”Content Scroller” source code

4. Animation Sequence

以前要做一連串的animation，通常一想到就是用timer function做 (即AS2的setInterval)。可是用timer時，你就要控制何時要移除timer，頗麻煩的。但你又知不知設定Tweener時，你可以加入”delay”這個設定? 如”delay”是1，tweening將會於一秒後開始。利用delay，你只要在一個for loop中加入Tweener，並給予不同delay的數值，也可以做到同樣效果!

>> 下載”Animation Sequence” source code

5. Simulation of Locus

Locus即軌跡，是指物件在二維或三維空間走過的路徑。好像下面兩個例子，是拋物線及四分一個圓的弧線，如果要做，可以寫數式去做，不過會很麻。不過如果你懂得把x及y分開來tween，並且善用Tweener提供的transition type，這個效果幾行程式碼就可完成了!

以拋物線為例，x 就用linear transition tween 2秒，y就先用easeOutQuad transition tween 1秒，之後再用easeInQuad transition tween 1秒回到原來的y就可。為何是 easeOutQuad 及 easeInQuad? 因為在物理世界中，物件受地心吸力下的拋物線是二元算式來的(quadratic equation)。圓形則用easeInSine 及 easeOutSine分別處理x及y座標就可以了。

>> 下載”Simulation of Locus” source code

6. Fading Sound Volume

不說不知，聲音大小也可以tween啊，這樣是不是比直接把聲量定為0或1更自然呢?

>>> 下載”Fading Sound Volume” source code

7. Spony Objects

Tweener有幾個transition type幾好玩的，就是easeOutBack及easeOutElastic。利用它們可以做出感覺很有彈性的東西呢~ 很多日本人做的RIA經常用這個效果的啊!

>> 下載”Spony Objects” source code

8. Tween the Blur Filter

玩到沒東西好玩了~ Blur Filter 也tween來試試看吧!

>> 下載”Tween the Blur Filter” source code

9. Tween in Papervision3D

相信這是最好玩的了! 留意RIA的朋友也應該聽過Papervision3D吧，它是一個open source的Flash 3D engine。在Papervision3D中，camera及 一般DisplayObject3D也有x,y及z的屬性。喜歡甚麼也tween一回的Stanley，今次又有東西玩了! 讓我只是tween camera的位置及望向的位置，只是簡單的程式碼又可以做到厲害的效果了!

>> 下載”Tween in Papervision3D” source code

10. Tween the Function

最後一招，Tweener提供了Tweener.addCaller(); 的功能，你可以用它來設定一個時間入call一個function多少次，而call function的頻率，是用transition type的控制。以下面的例子來說，我有一個function是用來創建圓形的，你可以見到圓形是創建得愈來愈快的，這是因為用了transition type有關。

>> 下載”Tween the Function” source code