《Flash 8实训教程-游戏制作入门》第4章 填色游戏

第4章填色游戏4.1游戏说明4.2准备阶段4.3完成游戏4.4制作下载进度提示 4.1游戏说明

填色游戏适合3～6岁的小朋友玩，它可以训练小朋友对色彩的认识和理解。同时，这个小游戏也可以用于做配色示范，以及用于设计等方面。用Flash制作填色游戏，原理是把图片可涂色区域做成独立的影片剪辑，然后通过设置影片剪辑的颜色属性来达到涂色的目的。制作Flash涂色游戏，难点就在于制作可涂色区域，需要花费不少功夫。下面让我们一起来做一个填色游戏吧。 4.2准备阶段

4.2.1游戏制作

1．准备所需填色图片

(1)新建一个Flash文件，设置它的宽和高分别为550像素和400像素。

(2)准备一张矢量图。本例所准备的是一张AI格式的矢量图(本书配套光盘中第四章\素材\蝴蝶.ai)，这张图最好用AdobeIllustrator软件打开。如果系统没有安装这个软件，也可以用Photoshop打开。不过，正如前面的章节中学习过，用Photoshop打开会把矢量图片转成位图图片，效果就没有直接用矢量图那么好。(如果安装了CorelDraw软件，就可以使用CDR为后缀名的矢量图；也可以是其它格式的矢量图，只要有相应的软件打开它。)打开后单击图形部分，全部内容即被选中，见图4-1。图4-1

(3)按Ctrl+C键进行复制，转换到Flash窗口后，再按Ctrl+V键粘贴。粘贴到舞台上的蝴蝶为一个组。保持蝴蝶被选中的状态，按Ctrl+B键打散蝴蝶。

(4)单击舞台上的空白处，取消选择蝴蝶。

2．制作所需填色部件

(1)使用〖选择工具〗，单击蝴蝶左边触角，在〖属性〗面板中设置它的〖填充颜色〗为“白色”。

(2)保持蝴蝶左边触角被选中，在〖工具箱〗中选择〖墨水瓶工具〗，在工具箱的下半部将〖笔触颜色〗设置为“黑色”，单击蝴蝶的左边触角，即可给这个区域加上黑色的轮廓线。

(3)保持选中的情况下，按F8键，在弹出的〖转换元件〗对话框中，设置〖名称〗为“part1_fill”，〖类型〗为“影片剪辑”。注意，此时转换为影片剪辑的只是形状的填充部分，轮廊线没有含在影片剪辑中，所以，一旦转换为影片剪辑后就不要再移动了，否则轮廓线和填充区域就会对不上。

(4)换用选择工具选择蝴蝶的其它部分，按(1)～(3)的步骤将它们都转换为影片剪辑，依次命名为part2_fill、part3_fill…… 完成后效果如图4-2所示。图4-2

(5)如果找不到满意的矢量图片，就只能用位图图片做样稿或者自己画。下面，我们来试试如何用位图图片进行制作。

(6)新建Flash动画，设置宽和高分别为550和400。

(7)选择〖文件〗→〖导入〗→〖导入到舞台…〗，选择配套光盘中所提供的素材图片(第四章\素材\house.jpg)。

(8)用〖选择工具〗单击导入的图片以选中，在〖属性〗面板中，将〖宽〗和〖高〗旁边的小锁锁上，确保图片按比例缩放。在高度中输入“400”后回车，宽度也自动变为“400”。

(9)将图片拖放到适当的位置，单击该图层的小锁对应的黑点以锁定图层。

(10)新建一个层，保证新建的层在原层上方。

(11)选择〖线条工具〗，在属性面板中设置〖笔触颜色〗为“红色”(以方便绘图)，〖笔触高度〗为“3”。在需要的地方先拖动鼠标画一条直线，按Ctrl键，鼠标移动到直线中间，鼠标形状变为黑色的箭头旁有一条小曲线，此时拖动鼠标，可以指挥直线变成我们所需要的曲线，将其放大到400%的效果显示，如图4-3所示。图4-3

(12)接着这个接点再画下一段，并调整为曲线。这样一段一段地将小旗的轮廊勾画出来，见图4-4。图4-4

(13)画完一个封闭的形状后，对于不满意的地方，选择〖部分选择工具〗单击曲线，此时，曲线上显示出许多方形的小点，这些点我们叫做“节点”。再单击其中一个节点，在节点两边出现两条直线，我们把这两条直线叫“手柄”(见图4-5(a)。注意，只有我们画了曲线的情况下才会出现手柄，如果是直线，两端的点就不会有手柄(见图4-5(b)。如果直线连接着曲线，就只会在曲线那一半有手柄而直线这一半没有手柄(见图4-5(c)。拖动手柄可以改变曲线弯曲的程度和方向。拖动节点，可以调整它的位置，从而也达到改变曲线的目的。图4-5图4-6

(15)单击此图层的第1帧，以全选轮廊和填充，在〖属性面板〗中设置〖笔触颜色〗为黑色，把小旗的轮廓线改为黑色。

(16)使用〖选择工具〗，单击白色部分以选中。按F8键调出〖转换为元件〗对话框。在对话框中，将此元件的〖名称〗设置为“flag_fill”，〖类型〗设置为“影片剪辑”。

(17)单击此层对应小锁的黑点以锁定。

(18)新建一个图层，在此图层上以类似的方法分别勾出墙、遮阳棚、门、窗等部件，并都用步骤(10)、(11)的方法，把它们转换成元件。

3．制作颜色块

(1)选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“无”，〖填充颜色〗为“白色”(其它颜色亦可)，并在舞台外灰色的地方按住Shift键，绘制一个正方形。

(2)使用〖选择工具〗选中矩形，在〖属性〗面板中设置它的〖高〗和〖宽〗均为“10”。

(3)在保持矩形被选中的情况下，按F8键，在〖转换为元件〗对话框中设置类型为“影片剪辑”，〖名称〗为“square_mc”；并在〖属性〗面板中，设置该影片剪辑的〖实例名称〗为“square”。

4．制作样本颜色块

(1)新建图层，将层命名为“text”。

(2)使用〖文本工具〗，在〖属性〗面板中设置〖文本类型〗为“静态文本”，〖文本(填充)颜色〗为“黑色”；在舞台上输入“当前颜色：”(见图4-7)。再按Ctrl+B键两次进行打散，按Ctrl+G键进行组合。图4-7

(3)使用〖矩形工具〗，在〖工具箱〗的下半部设置〖笔触颜色〗为“无”，〖填充颜色〗为黑色，画一个稍大的矩形。

(4)使用〖选择工具〗单击矩形以选中，然后按F8键，将矩形转换为影片剪辑，〖名称〗设为“sample_mc”。

(5)在〖属性〗面板中设置它的〖实例名称〗为“sample”。4.2.2重点与难点详解

1．〖钢笔工具〗

〖钢笔工具〗可用于绘制直线。只需要在直线起始处单击一下，再到直线结束处单击一下，即可画出一条直线。如果在画线的时候按住Shift键，可强制画出45°或90°的线；不断地单击就可以画出连续的线段；在结束处双击，即可完成折线的绘制。如果钢笔回到起始点时，会在钢笔旁出现一个小圆圈，此时单击起始点，即可完成一条封闭线的绘制，并且，如果设置了填充颜色，就会自动填充，成为一个形状，而不是只有轮廓线。

〖钢笔工具〗也可以绘制曲线。使用钢笔工具在舞台上单击，按住鼠标左键沿着曲线的走向拖动，则会出现一个手柄，再到下一个点单击，就能绘制出一条曲线。如图4-8中，在第一个点处，鼠标是往箭头所示方向拖动的。

〖钢笔工具〗还可以在曲线上添加节点。只需要将钢笔工具移到曲线上，它的旁边出现一个小小的加号时，单击曲线就可以添加节点了。注意，对于直线段我们是无法添加节点的。将钢笔工具移到两条曲线段中间点时，钢笔工具旁就会出现一个小角，此时单击节点，会把节点两边的曲线在此节点处变为直线，把节点变成角点。图4-8

2．〖选择工具〗

使用〖选择工具〗单击曲线，可以选中曲线。当移动选择工具到线的端点处时，选择工具旁边就会出现直角，此时，可以移动曲线的端点，从而也会引起曲线的曲度、长度等的变化。如果将选择工具移动到曲线旁，选择工具旁边出现一条小曲线的时候，拖动鼠标，就可以把直线段变成曲线段，也可以改变曲线的曲率。

3．〖部分选取工具〗

使用〖部分选取工具〗单击曲线时，可以显示曲线上的所有节点。此时，再用部分选取工具单击节点，可以出现调整手柄，通过拖动手柄，可以改变曲线的弯曲情况，而拖动节点，可以改变节点位置。

4．〖线条工具〗

〖线条工具〗的使用在本例中已有说明，在此不再赘述。

本例中，勾画完成后，使用填充工具却无法填充颜色，这往往是因为在勾画的时候，线和线之间没有连起来，从而最终没有构成一条封闭曲线而造成的。如图4-9所示，两个端点相隔较远。解决的办法是把图放大，找到没有连起来的两条线段，把两条线段的端点用部分选取工具拖到一起，再对线条围起的部分进行填充即可(见图4-10)。图4-9图4-10 作业与练习

用所提供的矢量素材制作填色游戏的部件。

挑战与提高

用所提供的位图素材制作填色游戏的部件。 4.3完成游戏

4.3.1游戏制作

1．生成颜色块

(1)打开上节完成的Flash源文件。

(2)新建一个层，并将它命名为“action”；将原来的图层1命名为“content”。

(3)单击action层的第1帧，按F9键调出〖动作〗面板，并输入以下语句：

for(i=0;i<40;i++){

duplicateMovieClip("square","square"+i,i+10);

_root["square"+i]._x=540;

_root["square"+i]._y=i*10;

r=random(256);

g=random(256);

b=random(256);

squarecolor=newColor(_root["square"+i]);

squarecolor.setRGB(r<<16|g<<8|b);

}

(4)按Ctrl+Enter键运行动画查看效果，在屏幕的右侧生成了一列不同颜色的方块，见图4-11。图4-11

2．完成方块颜色与部件颜色的关联

(1)关闭运行窗口，按F9键关闭〖动作〗窗口。

(2)使用〖选择工具〗，在舞台上选中square_mc的实例square，按F9键调出〖动作〗面板，在面板中输入以下语句：

on(press){

tempcolor=newColor(this);

_root.currentcolor=tempcolor.getRGB();

}

(3)按F9键关闭〖动作〗面板。

(4)使用〖选择工具〗，在舞台上选中part1_fill的实例，按F9键调出〖动作〗面板，在面板中输入以下语句：

on(press){

partcolor=newColor(this);

partcolor.setRGB(_root.currentcolor);

}

(5)再次按Ctrl+Enter键运行。点击颜色方块中的一个，然后点击蝴蝶的左触角，触角的颜色就变成刚才选中的颜色了。

(6)关闭运行窗口。

(7)复制步骤(4)所输入的语句，依次选择蝴蝶的其它部件，打开〖动作〗面板，粘贴复制的语句。

(8)完成后按Ctrl+Enter键运行。我们可以点击不同的颜色给蝴蝶上色，每次运行，得到的颜色方块各不相同，蝴蝶的色彩就可以千变万化了，见图4-12。图4-124.3.2重点与难点详解

本例中大量地运用了setRGB和getRGB方法。

setRGB方法的格式是：影片剪辑的颜色对象.setRGB(颜色值),如语句squarecolor.setRGB(r<<16|g<<8|b);”。setColor所需的颜色值格式是：0xRRGGBB。其中，0x表示这是一个十六进制数；RR、GG和BB均包含两个十六进制数字，这些数字指定每个颜色成分的偏移量，RR、GG、BB每一位上可以是0～9的数字或a～f的字母。如：0xff0000表示的是红色，0x00ff00表示的是绿色，0x0000ff表示的是蓝色

……

getRGB方法是没有参数的，它的调用形式是：影片剪辑的颜色对象.getRGB()。在本例中，我们取得小方块的颜色值后，就把这个颜色值赋给变量_root.currentcolor，该变量即现在的颜色值。同时，也把样本颜色设置为当前颜色值。 作业与练习

按照本例完成游戏的制作。 挑战与提高

是否能按规律生成颜色方块呢？如生成Flash的调色板颜色(见图4-13)。图4-13 提示与解答

观察第一排三个6×6方块的RR值，发现它们分别为00、33、66，第二排6×6三个方块的RR值分别为99、CC、FF。观察每个6×6方块，发现横向的GG值在变化，纵向的BB值在变化，变化的规律同样是00、33、66、99、CC、FF。这些值之间均相差十六进制数33，转换为十进制数即51。据此，我们可以编写出生成调色板的如下代码：

i=0;

for(r=0;r<256;r+=51){

for(g=0;g<256;g+=51){

for(b=0;b<256;b+=51){

squarecolor=newColor(_root["square"+i]);

squarecolor.setRGB(r<<16|g<<8|b);

i++;

}

}

}生成的调色板现在是放在舞台的左上角。大家可以调整蝴蝶的位置或者修改代码，调整调色板的位置(见图4-14)。图4-14

4.4制作下载进度提示

4.4.1简易进度提示

(1)打开上节制作完成的动画，并另存为一个新的文件。下面的修改都在新的文件中进行。

(2)点击action层的第1帧，按住shift键，单击content层的第1帧，选中所有层的第1帧，用鼠标拖动这几个帧到第3帧，如图4-15所示。图4-15

(3)单击text层的第1帧，使用〖文本工具〗在〖属性〗面板中选择自己喜欢的文本颜色，在舞台上输入“Loading…”字样。

(4)使用〖选择工具〗选择文本，按Ctrl+B键两次以打散文字。在保持文字被选中的状态下按Ctrl+G键组合文字。

(5)使用〖文本工具〗，在上述字样的下方拖动，建立一个动态文本框。在〖属性〗面板中设置动态文本框对应的〖变量〗为“percentFinished”。

(6)使用〖文本工具〗，在动态文本框的右侧输入静态文本“%”，同样按Ctrl+B键进行打散，按Ctrl+G键进行组合。

(7)圈选动态文本框和百分号，调出〖对齐〗面板，在〖对齐〗面板中选择“底部对齐”。

(8)单击action层的第2帧，按F6键，把这一帧也转为空白关键帧。

(9)保持当前帧为action层的第2帧，按F9键调出〖动作〗面板，在面板中输入以下语句：

percentFinished=Math.floor(_framesloaded/_totalframes*100);

if(_framesloaded==_totalframes){

gotoAndPlay(3);

}else{

gotoAndPlay(1);

}

(10)单击action层的第3帧，修改原有的ActionScript代码，在代码开头处输入语句“stop();”。

(11)按Ctrl+Enter键测试动画。我们发现，动画直接停留在了第3帧。原因是由于我们的动画是在本地，下载时间极短，基本上可以忽略不计。若要查看进度效果，则在动画播放器窗口选择菜单命令〖视图〗→〖下载设置〗→〖14.4(1.2KB/s)〗(见图4-16)。为了更好地体现进度的效果，我们选择了最小的模拟带宽。图4-16

(12)在此窗口再按Ctrl+Enter键，看到“Loading…”字样在屏幕上停留了片刻，然后才显示第3帧的内容，表示制作成功。

(13)此时显示进度的百分数只有33%，这是因为动画帧数太少，这样计算不太合理。帧数较多时可以比较准确。

(14)再次按Ctrl+Enter键测试动画，并在播放窗口中按Ctrl+Enter键查看下载效果。这一次，百分数可以流畅地变动了。4.4.2制作有进度条的进度提示

(1)打开上例所制作的Flash文件。

(2)单击text层的第1帧，选择〖矩形工具〗，在〖属性〗面板中设置〖笔触颜色〗为“黑色”，〖笔触高度〗为“2”，〖笔触样式〗为“实线”，〖填充颜色〗为红色，然后在舞台上绘制一个矩形。

(3)使用〖选择工具〗圈选矩形及其边框，在〖属性〗面板中设置其〖宽〗为“200”，〖高〗为“10”，并将矩形移动到适当的位置。

(4)在空白处点击以取消选择，再单击矩形中的红色填充部分。按F8键，调出〖转换为元件〗对话框，在此对话框中，设置元件〖名称〗为“bar_mc”，〖类型〗为“影片剪辑”。在舞台上设置此元件的〖实例名称〗为“bar”。

(5)双击bar_mc，进入影片剪辑的编辑界面。

(6)单击图层1的第100帧，按F6键生成关键帧。

(7)单击图层1的第1帧以选中。使用〖选择工具〗单击矩形，在〖属性〗面板中设置〖宽〗为“1”。

(8)在第1帧到第100帧中任何一帧单击，在〖属性〗面板中的〖补间〗选项中选择“形状”以生成形状补间。此时，第1帧到第100帧都变成绿色，表示形状补间制作成功。

(9)按Enter键，看到矩形逐渐变长。

(10)单击时间轴上方的“场景1”，回到主时间轴。

(11)点击action层的第2帧，按F9键调出〖动作〗面板，修改语句为：

percentFinished=Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);

if(percentFinished==100){

gotoAndPlay(3);

}else{

bar.gotoAndStop(percentFinished);

gotoAndPlay(1);

}

(12)按Ctrl+Enter键测试影片，并再按一次Ctrl+Enter键以观察进度条效果，如图4-17所示。图4-174.4.3纯ActionScript制作进度条

(1)打开上一节完成的Flash文件，另存为一个新的文件，我们在新文件中进行修改。

(2)点击action层的第1帧，再按住Shift键单击content层的第1帧，以全选各层的第1帧。

(3)拖动所有帧，移动到第2帧，如图4-18所示。图4-18

(5)单击action层的第2帧，在原来的程序开头加入语句“stop();”。

(6)按Ctrl+Enter键运行动画，再按Ctrl+Enter键查看进度条效果，如图4-19所示。图4-194.4.4重点与难点详解

本节制作了三种进度显示，其中，第一种是比较简单而粗陋的；第二种是比较常用的做法；而第三种使用纯ActionScript，有助于减小Flash动画的尺寸(不用再做一个影片剪辑)。

在第一种方法中，涉及到_framesloaded系统变量记录整个动画已经下载的帧数，_totalframes系统变量记录整个动画的全部帧数。

第二种方法其实比第一种方法多使用了一个影片剪辑，这个100帧的影片剪辑是从1像素逐渐延伸到200像素。当停在其中一帧时，该影片剪辑中的矩形就是相应的长度。第三种方法中，我们使用了Flash的高级绘图语句：

bar.beginFill(0xFF0000,100);

bar.moveTo(0,0);

bar.lineTo(barWidth,0);

bar.