当前位置: 首页 > 图文教程 > Flash动画 > Flash动画制作 > Flash教程:通过实例学习AS(二):小狗追骨头

Flash动画制作
Flash5键盘鼠标应用(二)
Freehand和Flash的结合应用(4)
Flash5 有声音的三眼狼(二)
Freehand和Flash的结合应用(7)
Freehand和Flash的结合应用(10)
Freehand和Flash的结合应用(12)
Flash5 位移操作(二)
Flash5制作水波倒影效果(二)
Flash5任意两点间随机画线(三)
Flash 神奇遮罩之原理篇(3)
Flash 神奇遮罩之动态篇
Flash 神奇遮罩之图片篇(1)
Flash MX 视频导入功能详解(5)
利用Flash MX模板制作XML动态菜单(1)
用动作脚本动态创建和控制文本框 (6)
FW MX和Flash MX的亲密合作(2)
FW MX和Flash MX的亲密合作(5)
Flash中音量和左右声道平衡的控制(2)
Flash MX的AS绘图和时间控制 下
Flash5 有声音的三眼狼(四)

Flash动画制作 中的 Flash教程:通过实例学习AS(二):小狗追骨头


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-22   浏览: 265 ::
收藏到网摘: n/a

先看看效果(用鼠标去拖动骨头看效果)

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

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

用黄色填充。

  新建图形元件,取名狗前腿,画图如:

 然后是新建图形元件,取名狗后腿,如图:

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

在第1、3层插入关键帧,在第2层第3帧插入帧,将第3帧按下图摆好:

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

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

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

首先我们点小狗,打开属性面板,为小狗实例取名为: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,所以我们只介绍AS2中怎样写,至于AS3中怎样写,可以参考我在论坛中发表的“初识 AS3.0”一帖。

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

事件名称 = 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;

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

  xg._x += dx;


xg._y += dy;

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

startDrag()

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

 mc.statDrag();

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

stopDrag()

停止拖动的意思,如:

 mc.stopDrag();

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

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

_rotation属性


这个属性可设置对象的旋转度,如:

mc._rotation = 45;

这时mc会旋转45度。

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

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

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,大功告成,把你的佳作帖在后面吧。