《Flash 8实训教程-游戏制作入门》第6章 打靶游戏

第6章打靶游戏6.1游戏说明6.2元件准备6.3让靶动起来6.4让靶随机地动起来 6.1游戏说明

本游戏通过制作异形按钮组成靶圈，当单击按钮时，进行是否击中的判断和处理。同时，更改鼠标的光标，以使光标看起来像瞄准器，并通过移动靶子来增加游戏的难度。本章给出移动靶子的两种方案，一种是通过沿引导线移动靶子，一种是通过ActionScript随机取值的方法来让靶子随机运动。第二种随机移动靶子的原理可以运用在许多不同的场合。 6.2元件准备

6.2.1游戏制作

1．制作靶圈

(1)新建Flash文件，动画的尺寸设置为800×600。

(2)按Ctrl+F8键新建一个元件，设置〖类型〗为“按钮”，〖名称〗为“circle1”。

(3)进入按钮编辑界面后，单击图层1的〖弹起〗帧，使用〖椭圆工具〗，在〖属性〗面板中将〖笔触颜色〗设置为“无”，将〖填充颜色〗设置为“绿色”，按住Shift键绘制一个正圆。

(4)使用〖选择工具〗单击圆以选中，在〖属性〗面板中设置〖宽〗和〖高〗均为“200”，将正圆的位置设置为“－100，－100”。这样，圆心与小十字标记即可重合。

(5)选择〖椭圆工具〗，将〖笔触颜色〗设置为“无”，〖填充颜色〗设置为“黄色”，按住Shift键再绘制正圆。在保持小圆选中的状态下，将正圆的大小调整为〖宽〗和〖高〗均为“160”像素，位置设置为“－80，－80”，让小圆与大圆的中心对齐(见图6-1)。图6-1

(6)使用〖选择工具〗，单击两个圆外的空白区域，取消对圆的选择。

(7)继续使用〖选择工具〗，选择内圆，按键盘上的Delete键删除内圆，大圆内部就被掏空了，成为一个圆环(见图6-2)。图6-2

(8)选择〖工具箱〗中的〖墨水瓶工具〗，在〖属性〗面板中选择〖颜色〗为“深绿色”，单击环形，给环形添加边线。

(9)使用〖选择工具〗在圆环的外围拖动，以同时选定圆环和它的边框，按Ctrl+G键将它们群组为一个对象。

(10)将图层1重新命名为“圆环”。

(11)新建一个层，命名为“文本”。

(12)使用〖文本工具〗分别在圆环的上、下、左、右标注上分值“1”。

(13)按Ctrl+K键打开〖对齐〗面板,按住Shift键,同时选择上下两个分值,在〖对齐〗面板中选择“水平中齐”；按住Shift键，同时选择左右两个分值，在〖对齐〗面板中选择“垂直中齐”(见图6-3)。

(14)点击“文本”层和“圆环”层的〖点击〗帧，按F5键生成普通帧。

(15)点击场景1，返回主时间轴。图6-3

(16)按照步骤(2)～(14)制作其它靶圈。靶圈的名称分别是“circle2”、“circle3”、“circle4”、“circle5”。靶圈的大小依次为：外圈直径160像素，颜色为黄色，内圈直径120像素；外圈直径120像素，颜色为绿色，内圈直径80像素；外圈直径80像素，颜色为黄色，内圈直径40像素；最里面是一个直径为40像素的圆，不再是环形，颜色为绿色。靶圈上的分数依次为2、3、4、5。圆环的颜色以绿黄相间的方式分布。

(17)如果所有的步骤正确，现在在库里将会有五个按钮元件(见图6-4)，而舞台上则应该什么都没有。图6-4

2．制作瞄准器

(1)按Ctrl+F8键，在〖新建元件〗对话框中，选择〖类型〗为“影片剪辑”，设置〖名称〗为“gun”。

(2)单击第1帧以选中。

(3)选择〖线条工具〗，在〖属性〗面板中选择〖笔触高度〗(线条的宽度)为“2”，〖笔触样式〗为“实线”，〖端点〗为“圆形”，在舞台上绘制一条竖线。

(4)使用〖选择工具〗选择此竖线，在属性面板中，调整它的〖宽〗为“0”，〖高〗为“5”。位置〖x〗为“0”，〖y〗为“－8”。

(5)使用〖选择工具〗选择竖线，按Ctrl+C键复制竖线，按Ctrl+V键将其粘贴到舞台上。调整此竖线位置〖x〗为“0”，〖y〗为“3”。

(6)使用〖线条工具〗绘制一条横线。由于此时所需的设置与刚才一样，只要继续使用刚才的设置就可以了。在〖属性〗面板中设置横线的〖宽〗为“5”，〖高〗为“0”，位置设置〖x〗为“-8”，〖y〗为“0”。

(7)使用〖选择工具〗选择步骤(6)绘制的竖线，按Ctrl+C键进行复制，按Ctrl+V键将其粘贴到舞台上。调整此竖线的位置〖x〗为“3”，〖y〗为“0”。图6-5图6-6

(9)单击此图层的第4帧，单击鼠标右键，在弹出的快捷菜单中选择〖插入关键帧〗。

(10)保持第4帧被选中，使用〖选择工具〗在十字的周围拖动，全选十字形瞄准器，在〖属性面板〗中，将〖笔触高度〗设置为“1”。

(11)单击第8帧以选中，按F5键插入普通帧。最后时间轴应如图6-6所示。

(12)点击〖场景1〗，返回主时间轴。

(13)从〖库〗中拖出“gun”影片剪辑放在舞台上，按Ctrl+Enter键运行动画以查看效果。

(14)查看完毕，从舞台上删除“gun”影片剪辑的实例。

3．制作目标靶

(1)按Ctrl+F8键，在〖新建元件〗对话框中，选择〖类型〗为“影片剪辑”，〖名称〗为“target”。

(2)进入影片剪辑的编辑界面后，将第一层命名为“target”。

(3)从库中将5个靶环按钮依次拖入。

(4)使用〖选择工具〗在靶环外拖动以全选所有靶圈。打开〖对齐〗面板，在面板中选择“垂直中齐”和“水平中齐”。

(5)在保持选中的状态下，在〖属性〗面板设置〖x〗为“－100”，〖y〗也为“－100”(见图6-7)。对于靶面上数字对不齐的，可以单击该环，以进入该环的编辑状态，移动数字到合适位置。单击时间轴上的“target”，回到目标靶的编辑界面。

(6)新建层，改名为action。单击第1帧以选中，按F9键，调出〖动作〗面板，输入以下语句：

stop();图6-7

4．建立主时间轴动画

(1)点击场景1，返回主时间轴。

(2)将主时间轴的图层1改名为“target”，单击第1帧以选中，从〖库〗中将target元件拖入，在〖属性〗面板中将此元件的〖实例名称〗设置为“mytarget”。

(3)单击target层的第2帧以选中，单击鼠标右键，在弹出的快捷菜单中选择〖插入关键帧〗。

(4)新建层，命名为“gun”，单击此层的第1帧以选中，从〖库〗中将gun元件拖入，并在〖属性〗面板中将此元件的〖实例名称〗设置为“mygun”。

(5)单击gun层的第2帧以选中，单击鼠标右键，在弹出的快捷菜单中选择〖插入空白关键帧〗。

(9)保持当前层为“info”层，单击第2帧，再单击鼠标右键，在弹出的快捷菜单中选择〖插入关键帧〗。

(10)保持当前帧为info层的第2帧，从〖公用库〗中找一个按钮拖放到舞台上，例程使用的是“buttonroundeddouble”类的“roundeddoublepeach”。

(11)双击按钮，修改它的Text为“Replay”。

(12)单击场景1，返回主时间轴。

(13)新建层，命名为“action”，单击第1帧以选中，按F9键调出〖动作〗面板，输入如下语句：

TotalScore=0;

PlayTimes=0;

CurrentScore=0;

startDrag("/mygun",true);

Mouse.hide();

stop();

(14)按Ctrl+Enter键运行动画，查看效果。

5．修改目标靶影片剪辑

(1)双击靶影片剪辑，进入编辑界面。

(2)选择最外圈的按钮，按F9键调出〖动作〗面板，输入以下代码：

on(release){

_root.TotalScore=_root.TotalScore+1;

_root.PlayTimes=_root.PlayTimes+1;

_root.CurrentScore=1;

if(_root.PlayTimes==10){

_root.gotoAndStop(2);

}

}

(3)拖动鼠标全选代码，按Ctrl+C键进行复制。

(4)依次选择剩下的四个按钮，分别按F9键调出〖动作〗面板，按Ctrl+V键粘贴代码。将“_root.TotalScore=_root.TotalScore+1”语句中的“1”依照按钮上的分值分别改为“2”、“3”、“4”、“5”。

(5)按Ctrl+Enter键运行动画，查看效果。6.2.2重点与难点详解

本例中，三个动态文本框放在主时间轴上，所以，后面可以通过_root.TotalScore这样的形式来进行调用。如果将动态文本框不慎放入影片剪辑中，调用起来就很麻烦了。

本例中，我们用到了“startDrag("/mygun",true);”方法。这个方法在前面的例子中已经用过，是以“startDrag(this);”方式来使用的。本例中，"/mygun"表示主时间轴下名为mygun的实例。所以，前面在将gun这个影片剪辑拖到舞台上后，一定要把它的实例名设置为mygun。

startDrag中使用了“Mouse.hide();”方法。 作业与练习

按照本例，制作基本元件和基本代码。

挑战与提高

1．能否将环添加到10个？

2．能否在一个游戏完毕后，按“Replay”按钮重新开始？

3．游戏完毕后，显示总分时，鼠标的光标消失了，怎样才能对准按钮呢？ 提示与解答

1．将环添加到10个的基本步骤和添加到5个是一样的，关键是要把环做得小一点，这样，靶才不会太大。

2．游戏完毕后按“Replay”按钮重新开始是我们上一节试做过的。除了让动画跳回第1帧外，我们还应该将几个计分变量清零，才能保证动画再次执行。

3．我们在第1帧用Mouse.hide()隐藏了鼠标指针，第2帧就没有mygun实例了，所以鼠标就看不到了。解决问题的方法是在第2帧添加ActionScript语句Mouse.show()。请把这个语句添加到适当的位置。

6.3让 靶 动 起 来

6.3.1游戏制作

1．建立引导层

(1)打开上一节完成的Flash文件，另存为一个新的文件，后面的改动都在新的文件中进行的。

(2)选择主时间轴的“target”层，单击层下方的〖添加运动引导层〗按钮，建立一个引导层，见图6-8。图6-8

2．让靶圈沿路径运动

(1)使用〖选择工具〗，注意要让〖工具箱〗下方的〖选项〗中〖贴紧至对象〗按钮选中。拖动mytarget影片剪辑，当影片剪辑的中心接近曲线的时候，会感觉到就像有个小磁铁在线上，把影片剪辑轻轻地吸过去那样，附着到曲线的一端(见图6-9)。图6-9

(2)选择“target”层的第2帧，拖动mytarget影片剪辑，附着到曲线的另一端。

(3)保持当前层为“target”层，拖动第2帧到第60帧处。

(4)单击引导层的第60帧，按F5键，为引导层建立普通帧。

(5)单击“target”层的第1帧到第60帧之间的任一帧，在〖属性〗面板的〖补间〗选项中选择“动画”。此时，主时间轴“target”层的第1帧到第60帧变成淡紫色，有一个箭头贯穿，就说明我们成功地建立了动画补间，见图6-10。图6-10

(6)将“info”层的第二帧拖到第61帧。

(7)选择“gun”层的第60帧，按F5键生成普通帧。

(8)选择“action层的第1帧，按F9键调出〖动作〗面板，去掉最后一句“stop();”按F9键返回主场景。

(9)选择“action”层的第60帧，单击鼠标右键，在弹出的快捷菜单中选择〖插入空白关键帧〗。按F9键，调出〖动作〗面板，输入语句“gotoAndPlay(2);”。

(10)双击mytarget，进入编辑。选择最外圈，按F9键调出〖动作〗面板，将if语句中的“_root.gotoAndStop(2);”改成“_root.gotoAndStop(61);”。

(11)依次选中其它靶圈，做同样修改。

(12)再次按Ctrl+Enter键运行动画，观察效果。6.3.2重点与难点详解

在target层我们建立了动画补间。补间的意思是，在补间动画的开始帧和结束帧之间的所有帧由Flash自动计算填补，而不用手工一帧帧制作效果。我们可以尝试点击target层第1帧和第60帧之间的帧来查看Flash自动计算的效果，见图6-11。图6-11在FlashMX中，要制作动画补间的层上只能有一个对象。并且这个对象必须是影片剪辑、按钮、图形这些元件，或者是基本图形进行了群组操作，再或者是一个导入的位图。如果超过一个对象，在设置动画补间的时候，就会看见帧变成淡紫色，但其中的箭头线变成了虚线，此时执行补间，很可能达不到预期的效果。

在上面的步骤中，补间动画层上方还有一个引导层。引导层在Flash动画制作中有两个作用，其中一个作用就是如本例所示，作为运动引导层。

引导层的第二个作用是让其它层上的对象与在引导层上创建的对象对齐。 作业与练习

请完成本例制作。 挑战与提高

1．请尝试使用几条不同的路径，让靶连续地运动起来，并且速度越来越快。

2．尝试每条路径为一关，每关有十次机会，玩十次后提示是否要进入下一关。

3．尝试使每一关靶只能重复出现三次，如果三次以内没有打中十次，就输掉游戏；如果打中了十次就可以通关。 提示与解答

1．可以通过设置路径的复杂度来调整路径的长度。即路径绕的圈数越多，路径越长，在固定帧数的情况下，自然运行得越快。路径和路径之间的转换可以通过设置关键帧来

实现。

2．在本例完成的情况下，只需添加关键帧，添加指向下一帧的按钮，并对关键帧添加“stop();”语句即可。

3．我们可以考虑设置一个变量记录靶子沿路径走过的次数，并在所有帧的最后添加一个显示失败信息的帧；可以在路径的最后一帧添加ActionScript语句，让变量增加1，并且判断变量是否已经超过了3，同时射中次数还不到10，就直接跳到最后显示失败信息的帧；如果还未到3次或刚超过3次，而射中次数已经到了10，就跳到停止询问是否要玩下一关的帧处。

6.4让靶随机地动起来

6.4.1游戏制作

(1)回到第一次完成时两帧的状态(见图6-12)。图6-12

(2)单击action层的第2帧，按住shift键，单击“target”层的第2帧，以选择主时间轴所有层的第2帧。

(3)在保持选中的状态下，将所有帧拖动到第3帧。

(4)在action层的第2帧中单击F6键，建立关键帧，按F9键并输入以下语句：

(5)单击“action”层的第1帧，去掉最后的“stop();”语句。

(6)单击“action”层的第3帧，将其中语句修改为“stop();”。按F9键关闭〖动作〗面板。

(7)单击“target”层的第1帧以选中mytarget元件。双击进入target影片剪辑的编辑界面，将target元件的circle1按钮选中，按F9键进入〖动作〗面板，将if语句中的内容修改为“_root.gotoAndPlay(3);”。

(8)依次选中circle2～circle5按钮，按F9键，将其中if语句的内容均修改为“_root.gotoAndPlay(3);”。

(9)按Ctrl+Enter键运行动画，查看效果。6.4.2重点与难点详解

本节示例看上去比前一节简单了许多，但本节所用的ActionScript中涉及了多个比较难以理解的语句，下面我们来仔细分析。

首先，复习一下在第2章里学习过的函数的定义。本例中，定义了函数moverandomly()。这个函数中只有两个语句，就是让x和y通过语句random(Stage.width)和random(Stage.height)分别得到一个舞台宽度范围内的随机值和舞台高度范围内的随机值。x和y所代表的就是我们移动靶子朝随机方向移动的目标。下面，我们调用了一个setInterval函数。它的基本格式是这样的：

setInterval(函数名，时间间隔，[，参数1，参数2，…，参数n])

其中函数名是一个调用Flash带有的或是自定义的函数名。在本例中，使用的是自定义的函数moverandomly。时间间隔是指隔多少时间去调用一次函数，单位是毫秒。在本例中，每隔1500毫秒重新确定靶子所要飞向的目标。后面的参数是用于把值传递给函数的参数。因为本例中的函数并不带参数，所以我们只使用最基本的格式。

setInterval函数就像在电脑上装了一个闹钟，当我们观看动画的时候，该函数会每隔一个固定的时间提醒我们或者动画去做一些事情。本例中，当闹钟响的时候，我们给靶子一个新的目标，让它改向这个目标飞去；当闹钟没响的时候，靶子就按原先的目标继续飞行。

如何让靶子朝目标飞过去呢？这就是下面一个语句在起作用：

onEnterFrame=function(){…}要特别留意这个语句的用法。这个语句的作用是以Flash动画设置的帧频来重复调用function后花括号中的内容。例如本例中帧频为12f/s，因此每1/12秒就会调用花括号中的语句。每隔1/12秒做什么呢？首先，我们需计算出靶子到目标之间的方向差别。这个差别，由靶子到目标点的连线的倾斜程度来表示。通过算出目标点到靶子中心的y方向的差比上目标点到靶子中心的x方向上的差，就得到了角度的正切值。然后求出这个正切值的反正切函数，就得出角度值 a。而每1/12秒靶子飞行的距离由v来决定。当前的v为10，也就是说，每1/12秒可以走10个像素。此时，靶子的中心坐标为：用cosa

乘以v就可以得出x方向上的变化，用sina

乘以v就可以得出y方向上的变化。最后，在原来的mytarget._x和mytarget._y的基础上加上x和y方向的变化，就可以得出靶子中心新的坐标值，见图6-13。图6-13 作业与练习

按本例步骤，制作随机路线的飞行靶。 挑战与提高

1．可否给游戏设置几关，每一关的速度都有所提高？

2．可否设置不管游戏者玩多少局，每射击10次后速度都会自动调快一挡？

3．可否设置不管游戏者玩多少局、射击多少次，当分数超过一定限制时，速度都会自动调快一挡？(如分数超过100，速度调快一挡；分数超过200，速度再调快一挡。)

4．游戏在执行时，有时会出现靶子在原地抖动的现