FLASH隱藏類公布/使用
--------------------------------------------------------------------------------
MM未公布的Tween/Easing類原教程譯文
MM未公布的Tween/Easing類原教程譯文及示範
原文章如下:
http://www.actionscript.org/tutorials/advanced/Tween-Easing_Classes_Documented/index.shtml
幾天前轉載的就是譯至此,我現譯全文,並加上示範及示範源檔案:
FlashMX 2004 未公布的Tween/Easing 類
作者:Devon Wolfgang
譯者:xfykzz
前言
我並不打算成為一個職業AS作家.有時我甚至不明白自己到底在幹什麼.現在一切都結束了,對於真正懂AS的高手,請原諒
我廢話太多.事實上儘管我寫的教程是在FlashMX 2004下的,而例卻是用AS1.0寫的.
引言
當我在網上閑逛時,我發現一些論壇上有不少貼子是討論Flash中未公布的類的.但我發現還沒有關於Tween/Easing類的文章,
於是我花了很多時間研究,現在寫出來希望對大家有些協助.
本文
I. Tween類
Flash現在支援一個很特別的新類"Tween"類,利用它可以使得很多MC運動效果變得簡單.它的使用方法如下:
someTweenID = new mx.transitions.Tween(object, property, function, begin, end, duration, useSeconds)
參數解釋如下:
object:一個您想要增加Tween動作的MC的執行個體名.
property:該MC的一個屬性,即為將要添加Tween動作的屬性.
function:easing類的一個方法(下面會提到).
begin:屬性開始時的數值.
end:屬性結束時的數值.
duration:動作持續的幀數/時間.
useSeconds:一個布爾值,決定是使用幀數計時(為false)還是秒數計時(為true).預設為false.
就這些了,下面我們來看看有哪些easing類中的方法可供使用.
II. Easing類
MX 2004支援16種不同的easing類方法(應該是19種,但是有4種是相同的).泛泛而談,Easing類中有五大類方法,每一類又
分為3種,最後還有第六類(只提供一個方法,就是什麼easing也沒有).
具體地說,有以下六類:
Strong
Back
Elastic
Regular
Bounce
None
每類各有四種方法:
easeIn
easeOut
easeInOut
easeNone
None和easeNone是相同的,所以我忽略掉它們. 關於該方法的完整調用應該如下:
mx.transitions.easing.Bounce.easeOut
現在您需要用以上字串代替"function"預留位置.
III.把兩者結合起來
好了,現在我們掌握了所有的基本元素,接下來我們做一個完整的動畫出來.設想一下我們現在製作了一個執行個體名為"
ball_mc"的小球,想到從x座標為20的在方移動到x座標為380的地方,用時0.5秒,並在最後彈兩下.那麼我們需要這樣寫:
ballTween = new mx.transitions.Tween(ball_mc, "_x", mx.transitions.easing.Bounce.easeOut, 20, 380, .5, true);
這串代碼真難看! 我們最好把它寫成一個函數:
function tweenBall() {
easeType = mx.transitions.easing.Bounce.easeOut;
var begin = 20;
var end = 380;
var time = .5;
var mc = ball_mc;
ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true);
}
這下看起來好多了.當然,我們還需要調用這個函數.下面我們做一個執行個體名為"myButton_btn"的按鈕.然後在幀上加上如下的
代碼:
myButton_btn.onRelease = function() {
tweenBall();//調用Tween
};
function tweenBall() {
easeType = mx.transitions.easing.Bounce.easeOut;
var begin = 20;
var end = 380;
var time = .5;
var mc = ball_mc;
ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time, true);
}
還不錯,不過我們還可以改進一下,把easing類方法設為入口參數,這樣我們就可以自訂所執行的運動方式了:
myButton_btn.onRelease = function() {
tweenBall(mx.transitions.easing.Bounce.easeOut);//注意入口的easing方法參數
};
function tweenBall(easeType) {//加了一個參數.
var begin = 20;
var end = 380;
var time = 20;
var mc = ball_mc;
ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time);
}
注意一點,time變數為20,我們把幀率調成25,然後去掉了最後一個boolean參數"useSeconds".這樣運動就以幀為標準了.好了,
現在我們的代碼看起來和先前的差不多,但是我們還要加15個差不多的按鈕,用來向函數傳遞不同的參數.
所有按鈕只是調用了一個函數,這下就有用多了.
IV.進一步研究
事實上,MM還為該類提供了幾個事件和方法.我所找到的最有用的事件就是"onMotionFinished"事件,方法呢?有yoyo()和
rewind().
舉個例子,我們想讓小球迴圈對稱地運動,只需要這樣稍微改一下:
myButton_btn.onRelease = function() {
tweenBall(mx.transitions.easing.Bounce.easeOut);
};
function tweenBall(easeType) {
var begin = 20;
var end = 380;
var time = 20;
var mc = ball_mc;
ballTween = new mx.transitions.Tween(mc, "_x", easeType, begin, end, time);
ballTween.onMotionFinished = function() {
this.yoyo();
};//多了一個事件和方法
}
rewind()方法把增加了Tween運動的MC重設到初始(未增加Tween前)狀態.
結論
好了,我知道我還有一些東西沒有介紹.因為有些我發現沒什麼用,有些我根本還不知道怎麼用!當然我很清楚瞭解清楚以
上幾點就能夠正確地使用Tween/Easing類了.
一點實際例子:
在收到不少Email後,我決定再多給幾個例子.畢竟沒有人只會想到移動小球.下面的例子會使您看到其用處的.
下面是代碼:
navText_array = new Array("Home", "About", "Work", "Play", "Contact");
setUpButtons();
stop();
function setUpButtons() {
var btnCnt = navText_array.length;
for (i=0; i var temp = this["tab"+i+"_mc"];
temp.navText.text = navText_array;
temp.begin = temp._y;
temp.end = temp._y-100;
temp.time = 8;//為temp添加了三個屬性
temp.onRollOver = function() {
easeUp(this);
};
temp.onRollOut = function() {
easeDown(this);
};
}
}
function easeUp(what) {
var tabUp = new mx.transitions.Tween(what, "_y", mx.transitions.easing.Bounce.easeOut, what.begin,
what.end, what.time);/*這裡的what是為類型為MC的參數,調用what.begin等屬性.從這裡可以看出作者用的是AS1.0文法(如
他自己所說).*/
}
function easeDown(what) {
var begin = what._y;
var tabDown = new mx.transitions.Tween(what, "_y", mx.transitions.easing.Strong.easeIn, begin, what.
begin, what.time);
}
譯者按:要實現上面的效果,還要建立btnCnt個執行個體名為("tab"+i+"_mc")的功能表項目.