初探Actionscript在swish中的运用（实例+源码）

学习swish这么多时间，感觉他强于用最简单的手法能做出比较棒的效果，但是他在Actionscript（简称as）方面的资源就太少了。我就在这里讲讲自己在这方面的学习心得。主要内容是关于速度，加速度，弹性，摩擦力，重力等内容，由于多年没有研究过数学物理，难免有误，希望多多指正。
1．速度

物体的运动都是沿着一定的方向，以恒定或是加速度的方式的运动的。在FALSH中要使物体以一个恒定的速度运动，就需要我们在每一帧不断的累加恒定的速度。这里面我们使用一种帧的循环的方式，来使物体不断的累加恒定的速度，以达到目的地。对于帧的循环方式使用代码是onEnterFrame。首先在swish中建立新影片（400*300）下面所有讲的例子都是如此。新建精灵my_mc，精灵中画一个球。在精灵my_mc中写入代码：

onLoad () { vx=5;//导入函数 } onEnterFrame() { _x=_x+vx; //小球mc在x轴上的速度，可用vx来调节 if (_x>400) { _x =0;//用一个条件语句来判断小球如果在x轴上大于400（可根据需要来调节），就回到x=0这个位置 } }

演示：

我们发现MC以恒定为5的速度向右移动，如果想要它向左移，只要将vx设为负值即可。通过上面的代码我们可以变通一下，如果想使小球上下移动，可以设置y轴上移动。代码如下：

onLoad () { vy=5;//导入函数 } onEnterFrame() { _y=_y+vy; //小球mc在x轴上的速度，可用vy来调节 if (_y>300) { _y =0;//用一个条件语句来判断小球如果在y轴上大于300（可根据需要来调节），就回到y=0这个位置 } }

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

onLoad () { vx=5;   vy=5; } onEnterFrame() { _x+=vx;   _y+=vy; if (_x>400) { _x = 0; _y=0;//同样是框定小球的运动范围 } }

演示：

演示发现它已经沿着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;

代码：（精灵中）

onLoad () { speed=10;   angle=15;   radians=angle*Math.PI/180; } onEnterFrame() { vx=Math.cos(radians)*speed;   vy=Math.sin(radians)*speed;   _x+=vx;   _y+=vy;   if (_x>400) {     _x=0;     _y=0; } }

演示：

通过演示你已经发现小球已经沿着15度的方向移动了，好像和上面差不多。但是这里有一个angle相当是一个接口参数，你可以任意的对小球的方向进行控制。
2．加速度
经过上面的学习已经对速度应用有了一些了解，下面我们看一下加速度。在物理中的加速度有一个公式如：vt=vo+at在swish中应用基本上与这些公式类似，只是省去了一些细节如时间。细分析时间并没有省去，而是通过时间轴来代替了。这里我们加速度为ax,那么在x轴上速度一般写成vx=vx+ax,简写成vx+=ax;我们把初速度设为0;

代码：（精灵中）

onLoad () { ax=0.2;   vx=0; } onEnterFrame() { vx+=ax;   _x+=vx;   if (_x>400) {     _x=0;//限定小球的运动范围     } if (vx>30) {     vx=0;//限定小球的加速度     } }

演示：

3．重力

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

onLoad () { garv=0.5; vy=0;   } onEnterFrame() { vy+=garv;   _y+=vy;   if (_y>300) {_y=0; } if (vy>30) {vy=0;//重力加速度限定 } }

演示：

4.弹性

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

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

演示：

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

弹性中的能量损失

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

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

按钮代码：

on (press) {         tellTarget (mc) {_x=0;     _y=0;         vx = 10;     vy = 10;             }     }

演示：




5.摩擦力

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

onLoad () {     fraction=0.95;   vx=10;   vy=10;   } onEnterFrame() { vx*=fraction;   vy*=fraction;   _x+=vx;   _y+=vy;   if (_y>300) {_x=40; _y=40; } if (vx<0.1) { vx=10; vy=10;//最低速度限定 }     }

演示：


6．拖动与抛

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

代码：（注意：这里由于要用到实时主场景坐标，代码写在精灵中就不行了，一定要写在主场景中，精灵的名字一定要和代码中的一致，我用的是my_mc）

onLoad () {     top=0;     left=0;     right=400;     bottom=300;     garv=.5;     vx = 10;     vy = 10;     dragging=0; } onEnterFrame() {     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() {         startDragUnlocked(this);     dragging=true; };     my_mc.onRelease = function() {         stopDrag();         dragging=false;     };     my_mc.onreleaseOutside = function() {         stopDrag();         dragging=false;     }; }

演示：
导出后能鼠标拖动
7．Spring弹簧

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

代码：（主场景中）

onLoad () { targetx = 200;   targety = 150;   fraction = .9;   vx = 0;   vy = 0;   dragging=0} onEnterFrame() { 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() {       startDragUnlocked(this);     dragging = true;   };   my_mc.onRelease=function() {       stopDrag();       dragging = false;   };}

演示：

做好的效果要导出之后才能看出来。
spring 与鼠标相连

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

onLoad () { fraction = 0.9;   vx = 0;   vy = 0; } onEnterFrame() { 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);   }

演示：

Spring 链

最后我们来一个稍微难一点的，是上面例子的一个扩展，如果你对上一个例子有了一定的理解，这个对你来说是不成问题的。上面的例子是跟随着光标，如果是链的话。那么第二个小球就应跟随第一个小球，依次类推。如果这个你难做出来。相信这种类型的菜单对你来说就不成问题了。 三个小球对应三个精灵名字分别为：my_mc、my_mc1、my_mc2。
代码：（主场景中）

onLoad () { 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() { 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);   }

演示：

总结：上面的教程看起来都是一些简单的东西，但它确确实实是一些好的框架，你可无限的发挥你的想象和创意，只要在这个框架之中添加一些元素或是代码。写这篇教程的目的主要是针对初级和中级的用户。目的是使大家意识到其实许多表面看起来复杂的东西，实际上都隐藏着相对复杂的简单，前提条件是你的思路一定要清晰。当作抛砖引玉吧！如果还是不会的话等我把源文件打包后，大家看源文件吧。也可以把碰到的问题提出来。

小球控制.rar
(2007-07-20 10:04:08, Size: 17.3 KB, Downloads: 12)