Tweener 10大用途
filed in Flash on Sep.07, 2008 (7,578次檢視)
很多人都以為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有關。

September 17th, 2008 on 12:42 am
Thanks guy! It is pretty useful for me.
October 7th, 2008 on 12:14 am
great introduction with source !!!
October 7th, 2008 on 7:17 pm
謝謝你支持~
November 6th, 2008 on 10:06 am
Thanks a lot! Great!
November 12th, 2008 on 11:10 pm
好正丫!!多謝你!
December 1st, 2008 on 10:50 pm
Hi! 很喜歡你的Content Scroller效果, 工作上需要這效果.
想問如何將Content C & D都變成Content A & B左右捲動效果?
因我用PC Flash MXPro7 開唔到你現有的file.
謝你!
April 14th, 2009 on 1:35 pm
thanks,it’s really useful for me!
May 22nd, 2009 on 9:34 am
真的是太厲害了..深感佩服的文章~~
感謝這麼好的心得分享~~^^
July 30th, 2009 on 11:42 am
超酷的!!
October 23rd, 2009 on 5:17 pm
我下載完之後.看不到你寫的source code…可以請問你寫在哪裡??
October 25th, 2009 on 1:21 am
source code 不在timeline
在classes folder中的那些.as file
November 11th, 2009 on 12:18 pm
发大水分手
March 13th, 2010 on 2:46 am
很喜歡站長的教學,東西都好棒
感謝!^^
April 10th, 2010 on 12:20 am
還有更好的,可是沒有時間整理好~