看看以下例子，stage上有500個圓形，當你scroll mouse時，圓形的scaleX及scaleY是用Tweener來改變的。由於MOUSE_WHEEL這個事件，會因為你捲動mouse時頻密地呼叫，因此電腦不勝負荷了。

View in new window

要解決這個問題，我們唯有放棄Tweener。沒有Tweener如何可以達到流暢的tweeing呢? 很簡單，不知大家記不記得我在Lesson 2中說過一個舊式的tweening方法? 現在重溫一次吧﹕

myMc.x += (targetX – myMc.x) / FACTOR;
//targetX 是目標的X座標
//FACTOR是一個constant，數字愈大，easing的時間愈長

所以解決辦法是，當mouse scroll時，我們只要改變圓形scale的目標數值，然後在ENTER_FRAME事件中，利用以上tweening formula去改動圓形的scaleX及scaleY。方法很簡單，也十分有效呢~

View in new window

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

結語:

到了這裡，我的Tweener教學也完結了。希望大家做Flash的時候，能夠想多一步，盡量使用Tweener美化你的RIA。另一方面，你也要知道Flash的能力是有上限的，小心地設計及優化每一個animation的程式碼。能做到以上兩點，你定可成為出色的RIA Developer!

>> 看其他教學

>> 下載所有例子: 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

>> Lesson 5: Tweener 有無用武之地的時候?

1. Tweener.addTween(target:Object, tweeningParameters:Object):Void

例子1﹕

Tweener.addTween(myMc, {
  x: 100, //a property of the movieclip "myMc"
  y: 100, //a property of the movieclip "myMc"
  alpha: 0.5, //a property of the movieclip "myMc"
  time: 1, //required
  delay: 1, //optional
  transition: "easeOutQuad" //optional, default value is "easeOutExpo"
});

說明:

• x、y及alpha都是myMc的屬性，我們都可以tween它們的值
• time 是指tweening的總時間，以秒做單位
• delay是tweening等多少秒才開始，以秒做單位
• transition是指用甚麼的easing formula，可查看Tweener transition types

例子2﹕

function doStart() { trace("start!"); }
function doUpdate() { trace("update!"); }
function doComplete() { trace("complete!"); }

Tweener.addTween(myMc, {
  alpha: 1, //a property of the movieclip "myMc"
  time: 1, //required
  onStart: doStart,
  onUpdate: doUpdate,
  onComplete: doComplete
});

說明:

這兒介紹了三個parameters:

• onStart: 當Tweener開始時會呼叫的function
• onUpdate: 當Tweener進行tweening時會呼叫的function，如tweening是1 秒，這個function就會在1秒內不斷被呼叫。onUpdate 這個handler是經常會用的!
• onComplete: 當Tweener完成時會呼叫的function

2. Tweener.isTweening(target:Object):Boolean;

檢查myMc這個object是否還進行tweening中。

3. Tweener.pauseAllTweens():Boolean;

暫停所有object進行中tweening

4. Tweener.pauseTweens(target:Object, [, property1:String, property2:String, ...]):Boolean;

暫停一個object所有或其中一些屬性的tweening。

5. Tweener.resumeAllTweens():Boolean;

繼續所有object原本進行中tweening

6. Tweener.resumeTweens(target:Object, [, property1:String, property2:String, ...]):Boolean;

繼續一個object所有或其中一些屬性的tweening。

7. Tweener.removeAllTweens():Boolean;

移除所有進行中的tweening

8. Tweener.removeTweens(target:Object, [, property1:String, property2:String, ...]):Boolean;

移除一個object所有或其中一些屬性的tweening。

9. Tweener.setTimeScale(scale:Number);

用來改變Tweener的時間速度。如scale是2，則原本是1秒的tweening會在0.5秒完成，即是快了一倍。

想了解Tweener詳細的API，請到:
http://hosted.zeh.com.br/tweener/docs/en-us/

>> Lesson 4: Tweener 10大用途

當我還小的時間，曾看過電腦雜誌的Flash教學，見過有人教用以下的formula做到easing的效果:

在EnterFrame的event中﹕

myMc.x += (targetX – myMc.x) / FACTOR;
//targetX 是目標的X座標
//FACTOR是一個constant，數字愈大，easing的時間愈長

可是這個方法有很多缺點:

• 只做到減速效果
• tweening時間不能控制
• 令program更複雜

但當有人寫了Tweener這些tweening engine後，問題已不再存在了!

甚麼是Tweener

Tweener 是一個 open source 的 tweening engine(即是一系例的class)，其主要功用就是可以利用actionscript動態地tween movieclip 的屬性，如x, y, scaleX, scaleY, alpha, width, height 等等。除此之外，你也可以用Tweener來tween object的屬性，如sound object的volume，textfield的座標，甚至是3D camera的位置等等，用途多不勝數。在之後的章節Stanley會介紹一些應用的例子。

大家都應該知道我們也可以用timeline制作transiton，但是用timeline卻有很大的限制:

• timeline即是hardcode的，對於制作很具互動性的RIA根本是沒可能
• timeline是frame-based的，即是如果timeline很複雜，Flash亦要每一個frame都畫出來，慢的電腦就會很不流暢，即是說播放時間不易控制
• timeline會令你的movieclip結更複雜

但是用Tweener，情況就恰好相反了:

• Tweener可以讓你動態地建立transition
• Tweener是time-based的，比如說你建立了2秒的transition，無論是快或慢的電腦都可以2秒完成
• Tweener是幫助你簡化movieclip的結構

總之，Tweener是一個可幫助你製作高互動性，流暢animation RIA不可或缺的工具。

Transition 的類型

Tweener的靈魂，就是它提供的transition types。Transition types是用來定義一個數值，是用甚麼的方法轉變到另一個目標數值，例如選用quadratic或是exponential的方式轉變。而物件移動或淡出淡入時都可以利用transition types建立easing，因而產生流暢的感覺。

下表就是Tweener提供的所有transition types:

Tweener 提供的transition types

詳情可以看 Tweener的文件:
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

* 其實這些Tweening forumula是由一位叫Robert Penner所創立的，有興趣可以看看他的網頁。他可是一位非常利害的人呢!
http://robertpenner.com/

比較其他Tweening Engine

其實除了Tweener外，還有很多其他的engine，如:

• TweenLite
• Boostworthy Animation System
• FuseKit
• Go
• KitchenSync

這些engine都各有特性，如果有興趣，可以看看它們的pros and cons呢。
http://dispatchevent.org/wp-content/uploads/2008/04/Tween-Engine-Comparisons.pdf

>> Lesson 3: Tweener 語法實習