Tween类,在推出FlashMX时就出现了,允许您轻松地在舞台上移动、缩放和淡入淡出影片剪辑。实质是用于添加AS过渡动画,使用非常的方便。
Tween类的使用:
Tween类算是一个外部类,所以使用前应先导入:
import
mx.transitions.Tween;
Tween类中easing方法的导入:用easing.*打开整个包,所有方法也都被载入了
import
mx.transitions.easing.*;
Tween类构造函数中各参数介绍
function Tween(obj, prop, func, begin, finish, duration,
useSeconds)
{
//
代码……
}
obj(实例名) Tween 实例的目标影片剪辑对象。
prop(属性) obj的属性的字符串名称。
func(效果) 缓动效果的缓动方法。
begin(开始) 属性的开始值。
finish(结束)
属性的结束值。
duration(时间)
一个数字,指示补间动画的时间长度。
useSeconds(使用秒) 一个布尔值,如果该值为
true,则指示使用秒,如果为 false,则使用帧。
例如:
new Tween(mc, "_x",
Back.easeInOut, mc._x, 300, 4, true);
缓动效果(func参数):
Back
过渡范围外扩展动画一次,以产生从其范围外回拉的效果。
Bounce
过渡范围的弹跳效果。弹跳数与持续时间相关,持续时间越长,弹跳数越多。
Elastic
超出过渡范围的弹性效果。弹性量不受持续时间影响。
Regular
较慢的运动。加速效果、减速效果或这两种效果。
Strong 较慢的运动。此效果类似于 Regular
缓动类,但它更明显。
None
无任何减速或加速效果的运动。此过渡也称为线性过渡。
这六种缓动计算类的每一种都有三个缓动方法,下表中描述了这些缓动方法:
easeIn 在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
easeNone 指明不使用缓动计算。只在 None
缓动类中提供。
看到这儿,是不是有点儿晕,呵呵,理论就是这样。Tween类的本质实际上就是把对象的属性从Begin(开始)变化到Finish(结束),并加以特效。没关系,下面做个实例,让理论实践相结合,注意对照上面的参数
实例1:控制小球
思路:点击鼠标后,小球向所点击位置移动并带有缓动效果;
步骤1:
绘制一个小球,保存为影片剪辑,放到舞台中,实例名为"ball"
步骤2:
加入AS代码(注释部分:请大家进行替换试试效果):
import
mx.transitions.Tween;
import mx.transitions.easing.*;
//导入Tween类及方法
_root.onMouseDown
= function() {
new Tween(ball, "_x",
Back.easeInOut, ball._x, _xmouse, 3, true);
new Tween(ball, "_y", Bounce.easeInOut, ball._y,
_ymouse, 3, true);
//------------------------------------------------------------------
//new Tween(ball, "_x", Strong.easeInOut,
ball._x, _xmouse, 3, true);
//new Tween(ball, "_y", Elastic.easeInOut,
ball._y, _ymouse, 3, true);
//------------------------------------------------------------------
//new Tween(ball, "_x", Elastic.easeInOut,
ball._x, _xmouse, 3, true);
//new Tween(ball, "_y", Elastic.easeInOut,
ball._y, _ymouse, 3, true);
//效果还有很多,朋友们发挥主观能动性自行开发...
...
};
//通过这个实例我们发现,即使_x和_y给予不同的缓动效果小球都可以准确地到达指定位置,只是过程不同而已。
实例2:飞入菜单
思路:1.初始化时把mc放到舞台外,这样才能出现飞入效果;
2.初始化时把mc的_yscale缩小,为放大效果做准备。
步骤1:
随便画些什么,保存为影片剪辑,放在舞台中心,实例名为"mc";
再绘制两个按钮在舞台中,实例名分别为"in_btn","out_btn";
步骤2:
加入AS代码(注释的new
Tween()部分请大家可替换后试试效果):
import
mx.transitions.Tween;
import mx.transitions.easing.*;
//导入Tween类及其方法
mc._x = 1000;
mc._yscale = 10;
//设置mc的初始位置和高度
in_btn.onRelease = function() {
//飞入效果
new Tween(mc, "_yscale",
Bounce.easeOut, mc._yscale, 100, 4, true);
//mc._yscale放大到100
new Tween(mc, "_x",
Back.easeOut, mc._x, Stage.width/2, 5, true);
//mc._x移动到舞台宽度的一半(即舞台中心)
//new Tween(mc, "_x", Bounce.easeOut, mc._x,
Stage.width/2, 5, true);
//new Tween(mc, "_x", Elastic.easeOut, mc._x,
Stage.width/2, 5, true);
//new Tween(mc, "_x", Regular.easeOut, mc._x,
Stage.width/2, 5, true);
//new Tween(mc, "_x", Strong.easeOut, mc._x,
Stage.width/2, 5, true);
//new Tween(mc, "_x", None.easeNone, mc._x,
Stage.width/2, 5, true);
};
out_btn.onRelease = function() {
//飞出效果
new Tween(mc, "_yscale",
Bounce.easeIn, mc._yscale, 50, 3, true);
//mc._yscale缩小到50
new Tween(mc, "_x",
Elastic.easeIn, mc._x, -1000, 5, true);
//mc._x移动到-1000(即舞台外部)
//new Tween(mc, "_x", Bounce.easeOut, mc._x,
-1000, 5, true);
//new Tween(mc, "_x", Elastic.easeOut, mc._x,
-1000, 5, true);
//new Tween(mc, "_x", Regular.easeOut, mc._x,
-1000, 5, true);
//new Tween(mc, "_x", Strong.easeOut, mc._x,
-1000, 5, true);
//new Tween(mc, "_x", None.easeNone, mc._x,
-1000, 5, true);
};
Flash充电1:new Tween()参数解析
Flash充电2:六类缓动效果的easeOut方法演示