Flash教程：通过实例学习AS（二）——小狗追骨头 (1)

【 tulaoshi.com - FLASH 】

本文由 sanbos 原创，转载请保留此信息！

先看看效果（用鼠标去拖动骨头看效果）

[1] 200806/12927_2.html'>[2] 200806/12927_3.html'>[3] 200806/12927_2.html'>下一页

　　这其实就是一个鼠标跟随效果，大家都会做的，不过我的的目的不是做一个效果，而是学习AS,所以还是先介绍一下本例所要用到的AS知识。算了，这一例我们边做练习边来介绍AS。

　　小狗追骨头，那先来画一只小狗，新建一图形元件，取名狗身，象不好听样哈，那随你高兴罗。用直线工具画出狗身，如图：

用黄色填充。

　　新建图形元件，取名狗前腿，画图如：

　然后是新建图形元件，取名狗后腿，如图：

下面，新建影片剪辑元件，取名小狗，也可以叫“娜娜”，建三个图层１、２、３层分别取名为正面腿、身子、背面腿，将图形元件狗身，拖入第２层，居中放好。然后将前腿　、后腿图形元件拖入第１层，再将前腿、后腿拖入第３层。第帧按下图摆好：

在第１、３层插入关键帧，在第２层第３帧插入帧，将第３帧按下图摆好：

然后在各层第６帧插入帧。这样一只跑动的小狗就做好了。接下来做一根骨头：

新建一影片剪辑，取名骨头，然后画一根骨头吧。如图：

好了，准备工作做完了，我们现在开始组装，简单得很，回到主场景，将小狗和骨头拖到场景中就行了。

200806/12927.html'>上一页  200806/12927.html'>[1] [2] 200806/12927_3.html'>[3] 200806/12927_3.html'>下一页

首先我们点小狗，打开属性面板，为小狗实例取名为：xg,然后点中骨头为骨头实例取名为：ggt,ggt是什么意思？笨，狗骨头啊，为什么叫狗骨头？而不直接叫骨头，这是狗的骨头麻，所以就叫狗骨头。其实不是这样的，如果取名叫骨头，那么拼音就是gt，你取来试试，一定会出错的，取个名也会出错？是的，下面我们就介绍本例的第一个AS知识：

AS中对象的命名

　在AS 中我们给变量，对象取名字的时候，要遵循一定规则，比如必须是下划线或英文字母开头等，另外AS固有的关键字是不能使用的。有些字是AS拥有商标权的，注册了的，所以你就不能用，不然法庭上见。比如_x,_y,this,if,stop,play........等等，还有很多,我们编写AS时可以看到这些关键字都以蓝色显示。这里顺便介绍一个技巧，当你的代码运行时出现错误，而你又不知道出在什么地方时，你可以看看，如果代码中的关键字不是蓝色，那么你肯定输错了。你可以取这些关键字之外的任何名字：ABCD，阿猫阿狗，清风飘飘都行。很不幸的是，我们刚刚想用的“gt"就是AS的关键字，在早期的flash中它是大于符号，现在多用“"取代了它。

接下来，我们来介一个十分重要的概念：

事件

在所有的面向对象的编程语言中，事件是最重要的概念。在AS中也是如此，因为我们所有的代码都要通过事件来驱动，它才执行。总会有一些事情发生，我们的命令才会执行。这些发生的事情我们就将之称为事件。实际上它的意思就是，当什么什么的时候，就做什么什么。举个例子来说，我们要让灯亮，就一定要先发生一件事情，按下开关。当按下开关的时候，灯就亮了。那么按下开关就是一个事件。我们在AS中也有很多事件，如点击元件时，鼠标移动时等。那么怎样写事件代码呢？这里要注意在 AS3中和AS2事件代码是不一样的，因为多数人都还在用AS2，所以我们只介绍AS２中怎样写，至于AS3中怎样写，可以参考我在论坛中发表的“初识 AS3.0”一帖。

在AS２中，代码可以写在元件上如影片剪辑或按钮中，也可以写在帧动作中，事件的代码写在这两个地方是不一样的，先看看在帧动作中写代码，格式：

事件名称　＝　function (){

要执行的语句；

}

如果要写在元件中，就应该这样写：

on (事件名称)　{

　　　　要执行的语句；

}

下面我们介绍本例中要用到的三个事件，进一步地了解事件。

onMouseMove事件

　　onMouseMove事件是在当鼠标移动时发生，当我们场景中移动鼠标时，就会触发本事件。这个事件只能用到帧动作中。看个例子：大家可以将下面的代码，复制到第一帧看看。

　　　　onMouseMove = function () {

trace(“鼠标移动了“)；//trace是输出括号中的内容。

　　　　　　}

　　好，我们测试影片，移动鼠标就会弹出一个消息框，上面有“鼠标移动了”几个字。

press事件

　这个事件是当按下鼠标键，还没放开的时候发生。这个事件用到元件上，如果要用到帧上，就要用，onPress.看个例子，我们在场景中放上一个影片剪辑，然后点中它，单击右键，打开动作面板，就可以写代码了：

　　　on(press) {

trace(“你点下了鼠标”);

}

如果要把代码放到帧动作中，这样写（假如影片剪辑的实例名是mc）

mc.onPress = function () {

trace(“你点下了鼠标”);

}

release事件

　　这个事件是当按下鼠标键，然后放开的时候发生。与press区别是，press是按下没放开时，而release是放开时发生的。同样release是写在原件上的，要写在帧动作上，请用onRelease，用法与press相同。

现在我们来分析一下，要让小狗去追骨头，实际就是让小狗和骨头的距离缩小就行。元件在场景中的位置是同其_x,_y属性决定的，只要缩小两个元件的_x,_y属性差距，两个元件就靠近了。所以我们先算出两元件_x,_y的差距：

　　var dx,dy:Number;

dx =( ggt._x – xg._x)/20;

dy = (ggt._y – xg._y)/20;

为什么要除以２０呢？因为我要的效果是小狗去追骨头，而不是一步就追上，所以我们给它除以２０，就是说要追２０步才能追上，所以这个除２０实际就是控制小狗追骨头的速度的，除的数字赿大tuLaoShi.com，速度就赿慢。下面的代码是让小狗去追骨头：

　　xg._x += dx;

xg._y += dy;

+=符号在上一次的实例中我们已经介绍了，这两句就好理解了。那么什么时候去追骨头呢？上面我们说了，这些命令都是要在一个事件发生时才能执行的。我们把它们放在鼠标移动时去执行。就是说当我们在场景中移动鼠标时，小狗就去追骨头。即然是追骨头，那么骨头就应该动才是，怎样动呢？当然是用鼠标去拖动，请看下面两个语句：

startDrag()

这个语句的意思是拖动，使用这句后元件将随着鼠标的移动而移动。如：

　mc.statDrag();

这时移动鼠标时就会将mc拖动走。

stopDrag()

停止拖动的意思，如：

　mc.stopDrag();

这时移动鼠标，mc不再被拖动了。

通过上面的知识，我们似乎已解决了，小狗追骨头的问题，当鼠标移动时，将拖动骨头，而这时，小狗也会以去追骨头了，不过有个问题，小狗的移动是_x,_y的增减，而小狗的方向是不会改变的，这就有可以出现，小狗用背或肚皮去追骨头，甚至会倒退着去追骨头，这不符合常理，我们应该想办法让小狗的头始终对着骨头，这就要求要改变小狗的方向，这时我们就会用到下面的属性：

_rotation属性

这个属性可设置对象的旋转度，如：

mc._rotation = 45;

这时mc会旋转４５度。

那么怎样才能让小狗的头随着骨头旋转呢？我们来看一个图：

从图上看，小狗和骨头间形成了一个角，很显然，我们保持这个角度，就能保持小狗的方向。在保持这个角度，我首先来认识一个函数。

atan2()

在上一个实例练习中，我们说到了Math这个顶级类，它里面包含了很多数学相关的东西。atan2就是其中的一个。atan2()可以返回一个点与x轴的夹角。语法是这样的：

Math.atan2(y,x)请注意，这里点的坐标是y在前，x在后，跟一般的相反。这样我们就可以算出小狗和骨头跟x轴的夹角：

　　如小狗的夹角：Math.atan2(xg._y,xg._x)

如果让小狗旋转与骨头和小狗跟X轴的夹角差，小狗不就对着骨头了吗？象这样写：

　xg._rotation = Math.atan2(dy,dx)

行吗，管它的，试试看，结果不行。

对了，atan2()得出的度数是弧度，我们要让小狗旋转的是角度，问题是不是出在这呢？

角度与弧度的转换

在AS中计算常常是用弧度，而我们直观操作又常常用到角度，因此，就会常常用用到角度现弧度转换的问题。这个不想说太多，记住下面两个公式就行了。

　　角度　＝　弧度 * 180/Math.PI

弧度　= 角度　* Math.PI/180

我们将　xg._rotation = Math.atan2(dy,dx)　转换成角度就成为：

　　　　　xg._rotation = Math.atan2(dy,dx) * 180/Math.PI;

再试一下，没想到成功了。

好了，看起来本例中的所有问题都解决了，下面我们写代码。在上面，我们已经将小狗和骨头放到场景中，并分别将实例命名为xg,ggt,现在新建一层，命名为action,在第一帧的动作面板中写上如下代码：

var dx,dy:Number ;

var dz;

onMouseMove = function () {

dx = (ggt._x - xg._x)/20;

dy = (ggt._y - xg._y)/20;

dz = Math.atan2(dy,dx)*180/Math.PI;

xg._x += dx;

xg._y += dy;

xg._rotation = dz;

}

上面的代码不需要解释了吧。然后，点击骨头，打开动作面板，写下如下代码：

on(press) {

this.startDrag();

}

on(release) {

stopDrag();

}

ok,大功告成，把你的佳作帖在后面吧。

与本文相关讨论请到这里与作者交流：http://bbs./viewthread.php?tid=164833

200806/12927_2.html'>上一页  200806/12927.html'>[1] 200806/12927_2.html'>[2] [3]