Actionscript Animation简明教程

郑重声明：本教程源于keith peters的新书making things move的新书介绍，经本人实验整理并对大部分内容进行了扩展讲解，发表在webstudio上。如需转载。请联系本站。

Actionscript animation简明教程

本教程节选自的未正式出版的新书making things move的新书介绍。主要内容是关于速度，加速度，弹性，缓动，摩擦力，重力等内容，这里没有非常详尽的内容，如果你想知道更详尽的内容，可以预定购买作者的新书making things move…相信一定是一本好书。引用keith peters的话就是你一定不要直接将代码粘过来用，只有理解了它的应用，才能运用自如。在本教程中本人对大部分内容进行了扩展讲解。希望对于初学或中级用户有所帮助，由于多年没有研究过数学物理，难免有误，希望多多指正。

1．速度

物体的运动都是沿着一定的方向，以恒定或是加速度的方式的运动的。在FALSH中要使物体以一个恒定的速度运动，就需要我们在每一帧不断的累加恒定的速度。这里面我们使用一种帧的循环的方式，来使物体不断的累加恒定的速度，以达到目的地。对于帧的循环方式大致上有三种，一种是使用代码onEnterFrame，一种是使用setInterval,另一种就是使用二到三帧来达到循环，如果你对这三种方式不太熟，请查看帮助来学习。

在x轴方向的速度我们定义为vx,方向是向右，如果向左只要设为负值就可以。
例如：
代码：

代码:

vx=5; onEnterFrame=function(){ my_mc._x+=vx;//你也可以写成my_mc._x=my_mc._x+vx; }

演示:a0001.swf

我们发现MC以恒定为5的速度向右移动，如果想要它向左移，只要将vx设为负值即可。

通过上面的代码我们可以变通一下，如果想使小球上下移动，可以设置y轴上移动。代码如下：

代码:

vy=5; onEnterFrame=function(){ my_mc._y+=vy;//你也可以写成my_mc._y=my_mc._y+vy; }

这里就不再做演示了。你可以自已试一下，看看你是否理解了。

下面，我们再变通一下，在物理中有一个概念叫合速度，也就是x轴和y轴方向上的合速度。下面我们就来看一下，你可能已经知道了我在说什么。下面来看一下代码：最好你能在看下面代码之前自已写出来。

代码：

代码:

vx=5; vy=5; onEnterFrame=function(){ my_mc._x+=vx; my_mc._y+=vy; }

演示：a0002.swf


演示发现它已经沿着x,y合速度的方向移动了。是不是决得很容易。J这里我用的vx,vy都是5，也就是说合速度的方向是45度，当然你可以让vx,vy为不同的值，会有不同的速度也会沿不同的方向移动，如果反向，自然设置vx,vy为负值即可。

上面的学习如果你认为很容易，那下面这段相信对你也不会有问题，刚才我们说到当设置vx,vy都相同时，它是以45度的合速度方向运动的。虽然设置不同的值可以代表不同的方向。但这种方法很不科学。我们可以动用我们的数学知识，来让物体按我们指定的特定的角度移动。这里需要复习一下我们的数学知识。
（1） 弧度：弧度=角度*PI/180;
（2） 角度：角度=弧度*180/PI；
如果以指定的角度运动。那么这时的速度累加相当于沿着半径的方向。最终目的点是到达沿着半径方向的某一点。由于是合速度，我们需要定义一个统一个合速度以方便我们将x和y 轴上的速度分解出来为vx,vy。我们定义为speed;
那么在x轴方向上的速度应为：vx=Math.cos(radians)*speed;在y轴上的速度应为vy=Math.sin(radians)*speed;

代码：

代码:

speed=10; angle=15; radians=angle*Math.PI/180; onEnterFrame=function(){ vx=Math.cos(radians)*speed; vy=Math.sin(radians)*speed; my_mc._x+=vx; my_mc._y+=vy; }

演示：a0003.swf

通过演示你已经发现小球已经沿着15度的方向移动了。这样angle相当是一个接口参数，你可以任意的对小球的方向进行控制。

2．加速度
经过上面的学习已经对速度应用有了一些了解，下面我们看一下加速度。在物理中的加速度有一个公式如：vt=vo+at在FLASH中应用基本上与些公式类似，只是省去了一些细节如时间。细分析时间并没有省去，而是通过时间轴来代替了。这里我们加速度为ax,那么在x轴上速度一般写成vx=vx+ax,简写成vx+=ax;我们把初速度设为0;

代码：

代码:

ax=0.2; vx=0; onEnterframe=function(){ vx+=ax; my_mc._x+=vx; }

演示：a0004.swf


那么同样道理，我们需要变通一下，另外个人的一点小观点，要善于提出问题，并努力想办法自已去解决，有助于你快速的学习进步。我们在y轴也加上加速度。
代码：

代码:

ax=0.2; ay=0.1; vx=0; vy=0; onEnterFrame=function(){ vx+=ax; vy+=ay; my_mc._x+=vx; my_mc._y+=vy; }

演示：a0005.swf


通过演示我们发现小球已沿着合速度方向加速运行，现在问题又来了，如何使我们能按指定的角度加速运行呢。这个就当一个小作业吧。看你是否理解了它的应用。你可以结合前面的例子试一下。

3．重力

重力实际上就是加速度，但它有一个特殊性是只做用在y轴上，这里我们把重力定义成grav,与上面的加速度类似。
代码：

代码:

grav=0.5 vy=0; onEnterFrame=function(){ vy+=garv; my_mc._y+=vy; }

演示：a0006.swf


4.弹性

弹性，一般是指物体接触到到某个边界，所进行的回弹，在FLASH中，我们需要做的是设置好边界，以及物体回弹的方向。那么如何确定它回弹的方向呢，我们设定一个边界，当小球超出边界时小球回弹，也就是方向改变了。以x轴为例应为：vx*=-1;实际上你可能发现它实际上就是vx=-vx;

代码：

代码:

//设定边界 top=0; left=0; right=400; bottom=300; vx=10; vy=10; onEnterFram=function(){ my_mc._x+=vx; my_mc._y+=vy; //下面代码检测小球是否到达边界，如果已到边界，重设小球的正确做坐，并使其回弹， if(my_mc._x+my_mc._width/2>right){ my_mc._x=right-my_mc._width/2; vx*=-1; } if(my_mc._x-my_mc._width/2<left){ my_mc._x=left+mc_mc._width/2; vx*=-1; } if(my_mc._y-my_mc._height/2<top){ my_mc._y=top+my_mc._height/2; vy*=-1; } if(my_mc._y+my_mc._height/2>bottom){ my_mc._y=bottom-my_mc._height/2; vy*=-1; } }

演示：a0007.swf


通过演示我们发现小球在碰到边界会不断的回弹。
*注意：上面代码中的my_mc._x,my_mc._y的坐标都是指my_mc的中心点，也就是说my_mc的注册点在中心，如果你在制作过程中发现与本演示不同，那一定是你的my_mc注册点没有在中心上。

弹性中的能量损失

在上面的例子，小球在回弹时我们设定当碰到边界时直接回弹，也就是vx*=-1;并没有能量的损失，但在现实生活中，小球在回弹时要有一定的能量损失，其中还要有重力加速度的影响，通过上面的例子我们可以得出结论，当回弹速度设为1时无能量损失，其中的负号只是代表方向，当小于1时会产生能量损失，也就是我们通常说的摩擦，如：vx*=-0.8;同时不要忘了在现实生活小球还会受重力加速度的影响。

代码：

代码:

top=0; left=0; right=400; bottom=300; //设定重力加速度变量garv garv=.5; vx = 10; vy = 10; onEnterFrame = function () { //y轴方向的加速度 vy+=garv; my_mc._x += vx; my_mc._y += vy; if(my_mc._x+my_mc._width/2>right){ my_mc._x=right-my_mc._width/2; vx*=-0.8; } if(my_mc._x-my_mc._width/2<left){ my_mc._x=left+my_mc._width/2; vx*=-0.8; } if(my_mc._y-my_mc._height/2<top){ my_mc._y=top+my_mc._height/2; vy*=-0.8; } if(my_mc._y+my_mc._height/2>bottom){ my_mc._y=bottom-my_mc._height/2; vy*=-0.8; } };

演示：a0008.swf


5.摩擦力

摩擦力的应用相对比较简单，我们需要定义一个摩擦系数，通常它的值为小于1,然后将它与速度相乘，也就是前面在弹性时所提到的能量损失。
代码：

代码:

fraction=0.95; vx=10; vy=10; onEnterFrame=function(){ vx*=fraction; vy*=fraction; my_mc._x+=vx; my_mc._y+=vy; }

演示：a0009.swf


6．拖动与抛

拖动与抛实际是与上面的例子的结合应用，这里只是说明如何与上面相结合使用。在本例中我们想要在拖动小球的小球停止运动，松开或抛出时小球继续运动，在制作之前，我们先看一下基础知识：
要点：拖动我们使用方法startDrag(),同时要禁止小球运动，当拖动时要注意小球的运动速度变化，松开时，使用方法stopDrag(),同时重置速度，然后小球继续运动。

代码：

代码:

top=0; left=0; right=400; bottom=300; garv=.5; vx = 10; vy = 10; onEnterFrame = function () { //设定如果没有拖动则小球正常进行带有能量损失的弹性运动 if(!dragging){ vy+=garv; my_mc._x += vx; my_mc._y += vy; if(my_mc._x+my_mc._width/2>right){ my_mc._x=right-my_mc._width/2; vx*=-0.8; } if(my_mc._x-my_mc._width/2<left){ my_mc._x=left+my_mc._width/2; vx*=-0.8; } if(my_mc._y-my_mc._height/2<top){ my_mc._y=top+my_mc._height/2; vy*=-0.8; } if(my_mc._y+my_mc._height/2>bottom){ my_mc._y=bottom-my_mc._height/2; vy*=-0.8; } //如果有拖动，则此时速度发生了变化，需要记录下最后my_mc的位置和当前my_mc的位置，两者的差为当前的速度。 }else{ vx=my_mc._x-oldx; vy=my_mc._y-oldy; oldx=my_mc._x; oldy=my_mc._y; } }; my_mc.onPress=function(){ this.startDrag(); dragging=true; } my_mc.onRelease=function(){ this.stopDrag(); dragging=false; }

演示：a0010.swf


7.easing缓动

简单的easing方式，需要我们选择目的地，然后以摩擦的形式达到目的点。这就是easing.如果想要更复杂的easing方式，可以参看www.robertpenner.com，当然你也可以使用现在网站各种各样的类。或是使用mm自带的transition类或是tween类。

代码：

代码:

targetx = 200; targety = 150; onEnterFrame = function () { dx=targetx-my_mc._x; dy=targety-my_mc._y; my_mc._x+=dx*.3; my_mc._y+=dy*.3; };

演示：a0011.swf


8．Spring弹簧

spring非常类似于easing，但它的效果比easing更cool。一般的方法为定义一个目标点，计算出到它的距离，加速度为距离与摩擦系数的积，同时还需要使用摩擦。

代码：

代码:

var targetx = 200; var targety = 150; fraction = .9; vx = 0; vy = 0; onEnterFrame = function () { if (!dragging) { //起始点与目标地点的距离 dx = targetx-my_mc._x; dy = targety-my_mc._y; //加速度 vx += dx*.3; vy += dy*.3; //加入摩擦 vx *= fraction; vy *= fraction; my_mc._x += vx; my_mc._y += vy; } }; my_mc.onPress = function() { this.startDrag(); dragging = true; }; my_mc.onRelease=function() { this.stopDrag(); dragging = false; };

演示：a0012.swf


spring 与鼠标相连

下面我们要对spring 进行一下简单的扩展，我们可以将目标地点设为光标的坐标值，同时可以使用drawing api用画线的方式将其相连起来。
代码：

代码:

var targetx = 200; var targety = 150; fraction = .9; vx = 0; vy = 0; onEnterFrame = function () { dx = _xmouse-my_mc._x; dy = _ymouse-my_mc._y; vx += dx*.3; vy += dy*.3; vx *= fraction; vy *= fraction; my_mc._x += vx; my_mc._y += vy; //画线与mouse相连 clear(); lineStyle(1,0,100); moveTo(_xmouse,_ymouse); lineTo(my_mc._x,my_mc._y); };

演示：a0013.swf


现在我们在变通一下，小球在自然界中是有重力的。加上重力看看什么效果。一个小作业，你试一下。

Spring 链

最后我们来一个稍微难一点的，是上面例子的一个扩展，如果你对上一个例子有了一定的理解，这个对你来说是不成问题的。上面的例子是跟随着光标，如果是链的话。那么第二个小球就应跟随第一个小球，依次类推。如果这个你难做出来。相信这种类型的菜单对你来说就不成问题了。J
代码：

代码:

fraction = .7; grav=20; my_mc.vx = 0; my_mc.vy = 0; my_mc1.vx = 0; my_mc1.vy = 0; my_mc2.vx = 0; my_mc2.vy = 0; onEnterFrame = function () { clear(); lineStyle(1, 0, 100); moveTo(_xmouse, _ymouse); spring(my_mc, _xmouse, _ymouse); spring(my_mc1, my_mc._x, my_mc._y); spring(my_mc2, my_mc1._x, my_mc1._y); }; function spring(mc, x, y) { dx = x-mc._x; dy = y-mc._y; mc.vx += dx*.3; mc.vy += dy*.3; mc.vy += grav; mc.vx *= fraction; mc.vy *= fraction; mc._x += mc.vx; mc._y += mc.vy; lineTo(mc._x, mc._y); }

演示：a0014.swf



总结：上面的教程看起来都是一些简单的东西，但它确确实实是一些好的框架，你可无限的发挥你的想象和创意，只要在这个框架之中添加一些元素或是代码。写这篇教程的目的主要是针对初级和中级的用户。目的是使大家意识到其实许多表面看起来复杂的东西，实际上都隐藏着相对复杂的简单，前提条件是你的思路一定要清晰。最后。仍要引用keith peters话。不要直接下载源文件或是直接粘贴代码。最好的方式是理解。才能发挥自如。如果你想知道更多更详细的内容。请访问keith peters的网站.或是去预定keith peters的新书making things move…相信对于desinger来说一定是一本好书。

---最后：如果你认为本教程对你有用。请您抽出一秒钟时间，点击右上方的google广告为本站捐助，以使本站不断扩充带宽和空间，谢谢合作。---