flash mx.transitions.Tween類可以實(shí)現(xiàn)類似補(bǔ)間動畫的效果。要使用Tween類,首先還是將它導(dǎo)入:
import mx.transitions.Tween;
然后用new Tween()方法即可實(shí)現(xiàn)。New Tween()方法格式:
new Tween(要應(yīng)用補(bǔ)間的MC,要應(yīng)用補(bǔ)間的MC的屬性,緩動效果,屬性的初始值,屬性的結(jié)束值,補(bǔ)間的長度,補(bǔ)間長度的類型)
下面介紹一下new Tween()方法的參數(shù):
要應(yīng)用補(bǔ)間的MC:這個(gè)就是要應(yīng)用補(bǔ)間的MC羅。
要應(yīng)用補(bǔ)間的MC的屬性:補(bǔ)間動畫實(shí)際就是用一定的時(shí)間改變對象的屬性,比如位移就是改變_x或_y屬性,還有其它的如_xscal、_alpha等。這里就是指這些屬性的名稱。
緩動效果:在上一節(jié)我們已經(jīng)介紹了。
屬性的初始值:比如要用補(bǔ)間的是_x屬性,我們要建立對象從舞臺左邊移到右邊的補(bǔ)間動畫,那么_x的初始值就應(yīng)很小,比如0,10,50等,即對象在舞臺左邊時(shí)的_x值。
屬性的結(jié)束值:補(bǔ)間結(jié)束時(shí)屬性的值,比如對象移到舞臺右邊時(shí)的_x的值。
補(bǔ)間的長度:可以有兩種表示方式:秒或幀,但這里只是一個(gè)數(shù)值,是用秒還是用幀來計(jì)算補(bǔ)間由后面一個(gè)參數(shù)來決定。
補(bǔ)間長度的類型:決定是用秒還是用幀來計(jì)算補(bǔ)間,如果為true則用秒來計(jì)算,如果為false則用幀來計(jì)算。
下面我們來制作我們的第一個(gè)補(bǔ)間動畫,讓一個(gè)小球從舞臺的左邊移到右邊:
畫一個(gè)球吧,轉(zhuǎn)換為MC,實(shí)例名稱為:ball_mc.
打開幀動作面板,輸入如下代碼: import mx.transitions.Tween;
import mx.transitions.easing.*; //因?yàn)樵谟玫骄弰有Ч?,所以將緩動類也?dǎo)入
new Tween(ball_mc, "_x", None.easeNone, 20,500,3,true);
復(fù)制代碼
測試影片,小球?qū)淖筮叄?0像數(shù)處)移到右邊(500像素處),用時(shí)3秒。
上面這個(gè)效果沒有用緩動效果,我們回憶一下上一節(jié)介紹的緩動效果,似乎有一個(gè)叫Regular的緩動類,它將實(shí)現(xiàn)減慢的效果,我們給它調(diào)用easeIn方法,即在補(bǔ)間開始時(shí)減慢,這樣是不是就實(shí)現(xiàn)了從慢到快的效果呢?將代碼改成下面的: import mx.transitions.Tween;
import mx.transitions.easing.*;
new Tween(ball_mc, "_x",Regular.easeIn, 20,500,40,false);
復(fù)制代碼
測試影片,我們看到小球由慢到快從左邊移到右邊。在這段代碼中,改變了三個(gè)參數(shù),一個(gè)是緩動效果,一個(gè)是補(bǔ)間長度用了40,再一個(gè)就長度類型用了false,這樣這個(gè)補(bǔ)間長度不再是3秒,而是40幀。
onMotionFinished事件:Tween類的onMotionFinished事件在補(bǔ)間動畫完成時(shí)調(diào)用。在后面來練習(xí)它的用法。
continueTo() 方法:繼續(xù)執(zhí)行補(bǔ)間動畫,它以原補(bǔ)間動畫屬性的結(jié)束值作為開始值。這個(gè)方法重新指定結(jié)束值和補(bǔ)間長度。也就是說在原補(bǔ)間動畫的結(jié)束點(diǎn)上重新開始新的動畫。
利用上面的事件和方法可使動畫往返運(yùn)動。
將代碼改為下面的: import mx.transitions.Tween;
import mx.transitions.easing.*;
vae mytween:Tween = new Tween(ball_mc, "_alpha",Nonse.easeNonse, 0,100,3,true);
mytween. onMotionFinished = function(){
mytween. continueTo(0,3)
}
復(fù)制代碼
測試影片,你會看到小球淡入然后又淡出的過程。
這段代碼,我們做透明度的補(bǔ)間動畫,使透明度用3秒時(shí)間從0變?yōu)?00,當(dāng)補(bǔ)間結(jié)束時(shí),調(diào)用onMotionFinished事件代碼,用continueTo(0,3)方法又用3秒時(shí)間將透明度由100(剛才補(bǔ)間的結(jié)束值)變?yōu)?。因?yàn)橐{(diào)用Tween的事件和方法,所以我們聲明了一個(gè)Tween類mytween,這一點(diǎn)也與上面的代碼不一樣。
yoyo()方法:
上面的代碼雖然實(shí)現(xiàn)了,透明度由0到100,然后又從100回到0的動畫,但回到0后,動畫就停止了。我們常常需要不停的往返運(yùn)動,比如閃爍的星星,跳動的心臟等。那么Tween類為我們提供了yoyo()方法,這個(gè)方法在補(bǔ)間結(jié)束時(shí),將初始值變?yōu)榻Y(jié)束值,將結(jié)束值變?yōu)槌跏贾担俅芜M(jìn)行補(bǔ)間,如此往返永不停止。
記得一個(gè)紅星跳動的表情嗎?我們現(xiàn)在來制作它:
畫一個(gè)紅星,轉(zhuǎn)換為MC,實(shí)例名稱為:hx_mc.
幀動作代碼: import mx.transitions.Tween;
import mx.transitions.easing.*;
var mytween:Tween = new Tween(hx_mc, "_xscale",Nonse.easeNonse, 80,100,0.5,true);
mytween.onMotionFinished = function(){
mytween.yoyo()
}
復(fù)制代碼
測試影片,我們看到了一個(gè)跳動的紅星。看到這個(gè)效果,我突然發(fā)現(xiàn),如果把紅星換成一只蝴蝶,那不就讓蝴蝶飛起來了嗎?
這個(gè)例子應(yīng)用補(bǔ)間的屬性是_xscale.
下面我們來制用一個(gè)彈性菜單的練習(xí),完成本節(jié)上面的動畫:
首先來做彈性菜單,做4個(gè)MC,比較簡單,畫一個(gè)黃色的矩形,如果你高興,當(dāng)然可以用其它顏色,在矩形上面放一個(gè)靜態(tài)文本,內(nèi)容分別是:“加速滾動的球”,“閃爍的星”,“跳動的紅心”,“飛動的蝴蝶”。
有兩點(diǎn)要注意:1.將字打散(兩次),因?yàn)槲谋究蛟诜糯髸r(shí)會保持長寬比例,而我們彈出菜單時(shí)只需要改變高度,所以必須將文本打散。
2.因?yàn)椴藛问窍蛳聫楅_(增加高度),因此,元件必須上對齊。即上邊與十字對齊。
3.矩形的高度為20,如果你的高度不是20,那么下面的代碼就要作相應(yīng)改變。
4個(gè)元件做好后,將它們拖到舞臺上,放好。實(shí)例名稱為: cd1,cd2,cd3,cd4
然后打開幀動作面板,輸入如下代碼: import mx.transitions.Tween;
import mx.transitions.easing.*;
var cdtween:Tween;
function tc(cd) {
cdtween = new Tween(cd, "_height",Bounce.easeOut, 20,60,2,true);
}
cd1.onRollOver = function(){
tc(this);
}
cd1.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd2.onRollOver = function(){
tc(this);
}
cd2.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd3.onRollOver = function(){
tc(this);
}
cd3.onRollOut = function(){
cdtween.continueTo(20,1);
}
cd4.onRollOver = function(){
tc(this);
}
cd4.onRollOut = function(){
cdtween.continueTo(20,1);
}
復(fù)制代碼
測試影片,一個(gè)彈性菜單就做好了。
以前我們說過,如果要多次使用的代碼,最好做成函數(shù),彈出菜單的代碼在4個(gè)菜單項(xiàng)上都要調(diào)用,所以我們將它做成函數(shù)tc.這個(gè)函數(shù),用Tween類使菜單MC,的高度在2秒內(nèi)由20變成60,達(dá)到彈出的效果,緩動則菜用了Bounce.easeOut,在菜單展開后產(chǎn)生一個(gè)彈跳的效果。在函數(shù)外聲明Tween對象:var cdtween:Tween;是為了在鼠標(biāo)移出菜單時(shí)能夠調(diào)用它。
接下來的代碼是,在鼠標(biāo)移動菜單上時(shí),調(diào)用tc 使菜單彈出。在鼠標(biāo)移出菜單時(shí),調(diào)用Tween類的continueTo()方法,使菜單收回去。
接下來用上面介紹的內(nèi)容,做4個(gè)MC,分別是,一個(gè)加速運(yùn)動的小球,一個(gè)閃爍的星,一個(gè)跳動的紅心,一個(gè)飛動的蝴蝶。在庫中點(diǎn)右鍵,打開連接面板,為這4個(gè)MC取標(biāo)識名:ballmc(小球),xingmc(星),hxmc(紅心),hdmc(蝴蝶)。
回到主場景,打開幀動作面板,接著上面的代碼,在每個(gè)菜單項(xiàng)上,添加點(diǎn)擊加載相應(yīng)mc的命令。 cd1.onRelease = function(){
attachMovie("ballmc","ball_mc",1)
ball_mc._y =200;
}
cd2.onRelease = function(){
attachMovie("hxmc","hx_mc",1)
hx_mc._y = 200;
hx_mc._x =260;
}
cd3.onRelease = function(){
attachMovie("xingmc","xing_mc",1)
xing_mc._x = 260;
xing_mc._y =200;
}
cd4.onRelease = function(){
attachMovie("hdmc","hd_mc",1)
hd_mc._x = 260;
hd_mc._y =200;
}
復(fù)制代碼
OK,試試吧。