您当前的位置是:首页-flash as2.0

Flash中Tween类的简介

【发表于】:2011/4/4 20:56:00  已被访问:406次
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<btnCnt; 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")的菜单项.
编辑:汕尾网站建设
 
上下篇: Flash As2.0 一些必记函数 as2.0遍历xml子元素

最新推荐信息