Flash 8实训教程-游戏制作入门678

第1章永远得不到的礼物1.1Flash8的基本界面和操作知识1.2ActionScript的输入和运行1.3游戏说明1.4游戏制作1.5重点与难点详解

1.1Flash 8的基本界面和操作知识

在开始制作游戏前，先来简单认识一下Flash8的工作界面，如图1-1所示。图1-1图中，在标题栏下方是菜单栏。菜单栏下方一般是时间轴窗口，其右侧是时间轴。在时间轴上，每一个小格子代表了一帧。帧分为两类：普通帧和关键帧。

在时间轴窗口的左侧是图层信息。

图层下方是关于图层操作的按钮。

1.2ActionScript的输入和运行

ActionScript有三种用法：为时间轴中的关键帧添加脚本、为影片剪辑元件实例添加脚本、为按钮添加脚本。

1．为时间轴中的关键帧添加脚本

(1)单击需要添加脚本的关键帧。

(2)按F9键打开〖动作〗浮动面板。

(3)向ActionScript输入框中输入所需要的语句。

(4)添加完所需语句后，再次按F9键即可关闭〖动作〗浮动面板。

2．为影片剪辑元件实例添加脚本

(1)确定舞台上有需要添加ActionScript的影片剪辑(打开本书配套光盘中第一章\源文件\示例文件1.fla，舞台上摆放了一个影片剪辑)。

(2)选中需要添加ActionScript语句的影片剪辑。

(3)按F9键打开〖动作〗浮动面板。

(4)向ActionScript输入框中输入所需要的语句。

(5)添加完所需语句后，再次按F9键即可关闭〖动作〗浮动面板。

3．为按钮添加脚本

(1)确定舞台上有需要添加ActionScript的按钮(打开本书配套光盘中第一章\源文件\示例文件2.fla，舞台上摆放了一个按钮)。

(2)选中需要添加ActionScript语句的按钮。

(3)按F9键打开〖动作〗浮动面板。

(4)向ActionScript输入框中输入所需要的语句。

(5)添加完所需语句后，再次按F9键即可关闭〖动作〗浮动面板。在〖动作〗浮动面板(见图1-2)中，左侧是ActionScript语言参考，在其中我们可以按类或按字母顺序找到我们所需要的函数、语句；右侧的空白处即为ActionScript语句的输入框。图1-2 1.3游戏说明

Flash中的按钮有四种状态，它们分别是〖弹起〗、〖指针经过〗、〖按下〗、〖点击〗。其中，〖弹起〗一般是指对按钮不作任何操作时按钮的状态；〖指针经过〗是指把鼠标的光标移动到按钮上时按钮的状态；〖按下〗是指在按钮上单击鼠标左键但还没有放手时按钮的状态；〖点击〗是指在按钮上单击了鼠标左键放手后的按钮状态。〖点击〗这一状态是不可见的，在以后的游戏中，常常用这一状态来实现隐形按钮。这四种状态中的内容可以完全相同，也可以各不相同。〖弹起〗和〖指针经过〗是最常用的按钮状态，常常用它来实现动画按钮以及一些其它功能。本游戏的原理就是当把鼠标移动到一个按钮上的时候，按钮就开始在舞台的宽和高的范围中随机找到一个(x,y)坐标，并把自己移动到那个随机坐标上去，从而实现按不到按钮的效果。 1.4游戏制作

1．设置电影属性

(1)单击〖属性〗浮动面板旁向右的箭头，打开〖属性〗浮动面板(见图1-3)。单击〖属性〗浮动面板中的〖大小〗按钮或直接按快捷键Ctrl+J调出〖文档属性〗对话框(见图1-4)，在对话框中设置整个Flash文件的〖宽〗为“500 px”，〖高〗为“400 px”，px即像素单位。图1-3图1-4

(2)在〖文档属性〗对话框中，单击〖背景颜色〗旁边的颜色框，在弹出的颜色选择框中选择一种你喜欢的颜色作为舞台背景色，也就是动画的背景色。

(3)在〖文档属性〗对话框中，设置〖帧频〗为“12”fps。

(4)单击〖文档属性〗对话框的〖确定〗按钮，完成对整个电影基本属性的设置，回到舞台。

(5)按Ctrl+S键或者选择菜单命令〖文件〗→〖保存〗保存文件，在出现的〖另存为〗对话框中，设置文件保存的路径和文件名。

2．按钮元件“礼物btn”的制作

(1)选择菜单命令〖插入〗→〖新建元件〗或者使用快捷键Ctrl+F8调出〖创建新元件〗对话框(见图1-5)。图1-5

(2)在〖创建新元件〗对话框中定义元件的〖名称〗为“礼物btn”，其〖类型〗为“按钮”，单击〖确定〗，自动进入按钮的编辑状态(见图1-6)。图1-6图1-7

Webdings、Windings、Wingdings2、Windings3等都是相当普遍常见的图形式字符，多利用它们可以节省用户不少自行绘制图标的时间，尤其当用户没有压力感应笔与压力感应板时，使用鼠标绘制精巧的图形，往往显得格外不易。这几种字体是IE浏览器附赠的，如果用户装有IE4或以上版本的话，应该自然就会装进去这几种字体。用户在IE、Flash、Photoshop等应用软件里，都可以很方便地利用它。这几种字体大小写字母所对应的图形也有所不同，见表1-1。表1-1常用图形字符一览表续表

(5)在舞台的中央点击鼠标，出现一个框，并有光标闪烁。这个框的右上角有一个空心的圆圈，表明这是一个静态文本框。输入小写字母e，此时的舞台上就出现了礼物。

(6)在舞台空白处单击，退出字符的编辑状态。

(7)在工具箱中选择挑选工具，选中字符，按Ctrl+B键打散字符。

(8)在不取消选择的情况下，直接按Ctrl+G键组合。

(9)在〖属性〗浮动面板中，调整x坐标和y坐标，使礼物的左上角和按钮的原点重合(见图1-8)。图1-8

(10)选中〖点击〗帧，按F5键将〖经过〗、〖按下〗和〖点击〗帧定义为普通帧。

(11)点击时间轴处的〖场景1〗，返回主场景(见图1-9)。图1-9

3．添加ActionScript

(1)观察〖库〗浮动面板是否已经打开，如果没有打开，选择菜单命令〖窗口〗→〖库〗或者使用快捷键Ctrl+L调出它(见图1-10)。图1-10

(2)从〖库〗浮动面板中将按钮元件“礼物btn”拖拽到舞台中央。

(3)在选中〖礼物btn〗为舞台上的实例的状态下，在属性面板中，将这个实例名设置为“gg”(见图1-11)。图1-11

(4)在选中按钮的情况下，选择菜单命令〖窗口〗→〖动作〗或按F9键调出动作面板。

(5)在动作面板中为按钮添加如下ActionScript语句：

4．测试执行电影

(1)按Ctrl+Enter键执行电影。

注意，此时存放本Flash源文件的文件夹中，增加了一个与源文件同名的swf文件。在制作游戏过程中，如果我们对源文件有任何修改，按Ctrl+Enter键执行电影，Flash都会自动生成新的swf动画文件，然后再执行这个动画文件。在进一步的制作中，如果动画有多个场景，就可进行单独场景测试，测试时还会生成单独场景的swf文件。

(2)选择菜单命令〖文件〗→〖发布设置〗，打开〖发布设置〗对话框(见图1-12)，在这个对话框中，可以设置最终成品的放置文件夹。图1-12

(3)选择菜单命令〖文件〗→〖发布〗，将电影发布为swf文件，就可以将生成的swf文件作为邮件的附件发送了。一个完成的动画只需要swf文件就可以观看了。

用发布设置+发布生成的swf文件与我们直接按Ctrl+Enter键后生成的swf文件并没有不同。区别在于用这种方法，我们对发布的结果可以有多种多样的控制，如单击〖发布设置〗对话框中的〖Flash〗标签，其中对生成的动画有很多的设置，见图1-13。图1-13

1.5重点与难点详解

首先要注意，在计算机编程语言中，分大小写敏感和大小写不敏感两种语言。所谓大小写敏感，指的是当把一个单词用大写字母写出来和用小写字母写出来时是有不同含义的。

在一般计算机编程语言中，都会有一些单词用于做固定的语句、函数名等等，这些单词叫做关键字。

除了关键字外，还有一些字母数字组合是我们自己起的名字，用来在程序中存放数据，我们称其为变量。我们在起变量名的时候要注意，一般不用中文字符作为变量名的一部分，也不能在变量名中出现如*、&、% 等特殊符号及空格。变量名可以是字母+数字组成，如Text1、TimeOfToday等。使用〖选择工具〗选中舞台上的礼物，按F9键打开控制面板，将on(press,rollOver,dragOver)语句右边的小括号删除，点击上方的〖语法检查〗按钮，检查是否有语法错误，此时会出现一个错误提示对话框以及自动弹出〖输出〗面板，如图1-14所示。图1-14

作业与练习

1．依照本例，制作一个“永远得不到的礼物”动画。

2．在本例的基础上，制作一个恶作剧动画，内容充分发挥原创精神。

3．试删除或修改ActionScript中的符号和变量，看看会出现什么样的错误。

挑战与提高

1．将本例中的变量名、元件名、实例名按惯例修改。

2．本例中，礼物在躲避时，会超出我们的舞台，如何才能让礼物永远跑不出舞台呢？

提示与解答

1．可按“重点与难点详解”部分对变量的说明修改相关内容。

2．本例中的礼物宽度为50.1个像素，高为52.1个像素，因为我们在制作的时候，使礼物的左上角与中心的十字对齐，所以，当把这个礼物放在(x,y)坐标上的时候，其实是把它的左上角放在(x,y)这个坐标。在运行中，它的坐标值是根据舞台的宽和高生成的随机值，x坐标是random(500)，就可能是0～499；y坐标是random(400)，就可能是0～399。当(x,y)取值为(0,0)时，礼物与舞台的左上角重合(见图1-15)。当x坐标超过450的时候，礼物的宽度+x坐标就超过了舞台的宽度，礼物就有一部分跑到舞台外边去了。高度y坐标也有这种情况出现。例如，当随机产生的(x,y)坐标为(460,380)时，礼物的位置见图1-16。图1-15图1-16要解决这个问题，我们只要限制x坐标+礼物的宽度<=舞台的宽度，y坐标+礼物的高度<=舞台的高度即可，也就是x坐标<=舞台的宽度－礼物的宽度，y坐标<=舞台的高度－礼物的高度。

将本例中的：

movex=random(500);

movey=random(400);

改为

movex=random(500 －50);

movey=random(400 －52);

这样，我们的礼物就再也不会跑到舞台外边去了。这里，所减的50和52分别是礼物元件的宽和高。如果希望这段程序可以用于别的元件，这个值要根据元件的高和宽进行修改。如果不希望修改，我们可以让Flash自动读出元件的宽和高。同样，如果改变了舞台大小，就要修改500和400和两个值，如果不希望修改，也可以让Flash自动读出舞台的宽和高。这两句语句修改如下：

movex=random(Stage.width-_root.gg._width);

movey=random(Stage.height-_root.gg._height);

虽然上述方法复杂一些，但在换一个元件、修改一下舞台大小的时候就显得方便了。

通过本例的学习，一步一步地做，就能够完成第一个Flash小游戏。其中，ActionScript程序段中，我们用到了一些难于理解的内容，将在后面的游戏中逐步说明。第2章石头、剪刀、布2.1游戏说明2.2制作基本元件2.3判断输赢2.4游戏美化 2.1游戏说明

“石头、剪刀、布”这个游戏，是我们儿时最熟悉的。它的游戏规则是“石头赢剪刀、剪刀赢布，布赢石头”。本游戏是用户和计算机之间的对阵，由用户点击出拳，而计算机则随机出拳。我们将用1代表石头，2代表剪刀，3代表布。当我们点击一个按钮以出拳的时候，首先是手的姿势要变化，然后再判断是计算机赢还是我们赢，最后计算分数。

2.2制作基本元件

2.2.1游戏制作

1．建立“手”的影片剪辑

(1)打开Flash并建立新的空白文件，本例中，我们就使用Flash默认的舞台大小：550像素(宽)×400像素(高)。

(2)将配套光盘中的素材(“\第二章\素材\0291.EPS”)拖到Photoshop中打开，会弹出一个窗口(见图2-1)，在窗口中设置〖模式〗为“RGB颜色”，〖分辨率〗为“72”(像素/英寸)，设置〖宽度〗和〖高度〗的单位为“像素”。单击〖确定〗按钮，打开素材。

(3)按Ctrl+A键全选素材内容，按Ctrl+C键可复制内容。图2-1

(8)按照打开第一张素材的方法在Photsohop中打开配套光盘中的素材(第二章\素材\0294.EPS)并复制。

(9)在图层“手”的第2帧处单击鼠标右键，选择〖插入空白关键帧〗。

(10)单击新建的空白关键帧，按Ctrl+V键，将刚才复制的“剪刀”粘贴进来。

(11)点击〖绘图纸外观〗按钮。通常情况下，Flash在舞台中一次只能显示动画序列的单个帧。使用绘图纸外观功能后，就可以在舞台中一次查看两个或多个帧。当前帧的内容用全彩色显示，其它帧的内容以半透明显示，这样看起来，好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时只能编辑当前帧的内容。这时在时间轴上方出现一对带圈的方括号，在方括号内的所有帧都显示出来。我们可以拖动两端的方括号来设置显示的范围。选择〖任意变形工具〗，对比“拳头”的大小和角度，调整“剪刀”的大小和角度(见图2-2)。图2-2

(12)按照打开第一张素材的方法在Photoshop中打开配套光盘中的素材(\第二章\素材\0295.EPS)并复制。

(13)在图层“手”的第3帧处插入空白关键帧，并按Ctrl+V键粘贴上一步复制的“布”，同“剪刀”那样，对比“拳头”和“剪刀”的大小和角度，调整“布”的大小和角度。

(14)单击〖插入图层〗按钮，新建一个图层并双击此图层名，将名称改为“Action”。

(15)在“action”图层的第1帧处，按F9键打开〖动作〗面板，输入ActionScript语句：stop():。

(16)单击时间轴上方的〖场景1〗，返回主时间轴，完成建立“手”这个影片剪辑。

2．建立“石头”、“剪刀”、“布”按钮

(1)按Ctrl+F8键创建新元件，在弹出的窗口中将元件〖名称〗设为“stone_btn”，〖类型〗设为“按钮”。

(2)选中按钮的〖弹起〗帧，在舞台上输入文字“石头”。

(3)使用〖选择工具〗选中文字，在〖属性〗面板中调整〖字体大小〗和〖颜色〗，调整完毕后，按两次Ctrl+B键将文字打散，在保持文字被选中的状态下，再按Ctrl+G键将之组合。

(4)单击按钮的〖点击〗帧，然后按F5键，在〖指针经过〗帧、〖按下〗和〖点击〗帧中插入普通帧。

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

(6)如上述步骤，再建立“剪刀”、“布”两个按钮。

3．制作自己所出的手势

(1)按Ctrl+L键打开〖库〗面板。

(2)从〖库〗面板中，将“hand_mc”影片剪辑拖放到舞台中，在下方的〖属性〗面板中，将此实例的名称设置为“myhand”(见图2-3)。图2-3图2-4

(4)双击图层1的名称，将图层1改名为“all”。

(5)单击〖插入图层〗按钮，新建一个图层，再双击名称，将层命名为“action”。

(6)单击“action”图层的第一帧，选中它，按F9键，打开〖动作〗面板，输入ActionScript语句：stop();。

(7)按F9键，关闭〖动作〗面板，回到主时间轴。选择“all”层，点击第一帧，我们可以看到选中了舞台上的所有对象，包括所有的按钮和“hand_mc”的实例myhand。所有被选中的对象外均有一个蓝色线的矩形框来表示被选中。

(8)单击舞台上的“石头”按钮，在选中它的前提下，按F9键，在〖动作〗面板中输入以下ActionScript语句：

on(release){

_root.myGo=1;

_root.myhand.gotoAndStop(_root.myGo);

}

(9)拖动鼠标，全选中语句，按Ctrl+C键复制语句；按F9键关闭〖动作〗面板。

(10)分别选中“剪刀”、“布”按钮，按F9键，打开〖动作〗面板，按Ctrl+V键粘贴语句，并把_root.myGo等号右边的数分别改为2和3。

(11)按Ctrl+Enter键播放电影，单击不同的按钮，可发现“手”随着按的按钮不同而变化手势。

4．制作电脑所出的手势

(1)从〖库〗面板中拖出一个“hand_mc”影片剪辑的实例到舞台上，在下方的〖属性〗面板中，将这个实例命名为“computerHand”。

(2)选择〖任意变形工具〗调整这个实例的大小和角度，和myhand这个实例形成对阵的样子(见图2-5)。图2-5

(3)选择“石头”按钮，按F9键调出〖动作〗面板，在原有的ActionScript后，再加入两行语句：

_puterGo=random(3)+1;

_puterHand.gotoAndStop(_puterGo);

(4)同样，在“剪刀”、“布”按钮的ActionScript中，也加入同样的两行语句。

(5)按Ctrl+Enter键播放电影，点击不同的按钮查看效果。2.2.2重点与难点详解

在本例中，myGo和computerGo是两个我们创造的变量，用来记录当前我们出了什么手势而计算机又出了什么手势。在它们之前都加了_root，表明这两个变量都是主时间轴下的变量，也就是各个不同的影片剪辑、按钮都可以得到和修改它们的值。

gotoAndStop语句的格式如下：

影片剪辑.gotoAndStop(帧)

它的作用是命令主时间轴或是影片剪辑播放括号中的某个特定的数字或标签所指定的帧停止播放。在本例中，我们在这个语句前面加上需要控制的影片剪辑的实例名称来指定到底是哪个影片剪辑的第几帧。在Flash中，帧的编号是从1开始的，而random()函数生成的随机数是从0开始的。为了解决这个问题，我们给random()生成的随机数加上一个1，从而得到随机的帧编号。

作业与练习

完成本例的各个元件及其所需的代码。

挑战与提高

1．试制作“棒子、老虎、鸡、虫子”游戏所需的元件及其所需的代码。

2．试制作骰子游戏所需的元件及其所需代码。

提示与解答

制作“棒子、老虎、鸡、虫子”游戏及骰子游戏与本例相差无几，关键有以下几点：

第一，在制作第一个元件时，需要4帧或6帧而不是本例的3帧。

第二，要增加1个或3个按钮。

第三，在random()产生随机数时，不能再沿用random(3)，而是需要用random(4)或random(6)才能产生4个或6个随机数。

同时，我们可以充分利用网络的优势，搜索“棒子”、“老虎”、“鸡”、“虫子”的图片。对于骰子，我们可以尝试用Photoshop去绘制，或者甚至可以用Word绘制后粘贴到

Flash中。 2.3判断输赢

2.3.1游戏制作

1．制作显示变量

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

(2)选择“all”层，单击第一帧并选中。在〖工具箱〗中选择〖文本工具〗，拖动鼠标，在舞台上画一个矩形框(注意，不是像上一节那样在舞台上单击一下)。

(3)在保持文本框被选中的情况下，在下方的〖属性〗面板中选择〖文本类型〗为“动态文本”，在〖变量〗栏中，输入变量名为“resulttext”；设置文本的字体和大小(见图2-6)。图2-6

2．输入判断输赢的程序

(1)单击主时间轴的action层以选中该层，单击该层的第1帧以选中。按F9键，打开〖动作〗控制面板，在原有的ActionScript后面加上以下语句：

resultText="";

functioncheckResult(p,c)

{

switch(p)

{

case1:

if(p==c) {

_root.resulttext="打平！";

}

elseif(c==2)

{

_root.resulttext="你赢啦！";

}

else

{

_root.resulttext="你输啦!";

}

break; case2:

if(p==c)

{

_root.resulttext="打平!";

}

elseif(c==3)

{

_root.resulttext="你赢啦!";

}

else

{

_root.resulttext="你输啦!";

} break;

case3:

if(p==c)

{

_root.resulttext="打平!";

}

elseif(c==1)

{

_root.resulttext="你赢啦！";

} ese

{

_root.resulttext="你输啦！";

}

break;

default:

break;

}

}

(2)按F9键以关闭〖动作〗面板，返回舞台。

(3)在舞台上单击“石头”按钮以选中它，然后按F9键，再次打开〖动作〗面板，此时，在原来“石头”按钮的ActionScript最后一行，按回车，并输入以下语句：

_root.checkResult(_root.myGo,_puterGo);

(4)以相同的方法，在“剪刀”和“布”按钮的ActionScript中加入同样的语句。

(5)按Ctrl+Enter键查看结果。2.3.2重点与难点详解

在判断输赢的函数中，我们用到了两个主要语句if语句和switch语句，下面来详细学习这两个语句。

1．If语句

判断语句if语句的基本格式如下：

if(条件){语句(或语句组); }

if语句是一个程序控制语句，它可以控制我们执行程序中语句的顺序。它的基本格式的含义是：如果括号中的条件为真，那就执行花括号所括起来的一个或一组语句；如果条件不为真，那就直接执行花括号外的语句。我们用图2-7来表示它的执行原理。图2-7

if语句的第二种格式：

if(条件){

语句1(语句组1)

}

else{

语句2(语句组2)

}

这种格式的含义是：如果条件为真，执行第一组语句；否则，也就是条件为假时，执行第二组语句(见图2-8)。图2-8

if语句的第三种格式，是在判断了一个条件后，在这个条件不成立的条件下，再判断第二个条件成立还是不成立。if语句的格式可以写成：

if(条件1){

语句1(语句组1)

}

elseif(条件2){

语句2(语句组2)

}

else{

语句3(语句组3)

}

这种格式的示意图如图2-9所示。图2-9

2．switch语句

switch语句也是一个程序控制语句，它比if语句具有更多的分支。它的格式是这样的：

switch(表达式){

case条件1:

语句(语句组)

break;

case条件2:

语句(语句组)

break;

…

case条件n:

语句(语句组)

break;

Default:

语句(语句组)

break;

}

它的含义是先求出switch关键字后面括号中的表达式的值，然后根据不同的表达式的值执行不同的语句或语句组。如果一个条件都不符合，就执行default后的语句(见图2-10)。图2-10

作业与练习

按照本例，完成“剪刀、石头、布”的判断输赢部分。

挑战与提高

1．试将本例中的switch语句改写为if语句。

2．试将本例中的if语句改写为switch语句。

3．试将“手”影片剪辑中的“石头”、“剪刀”、“布”顺序调整为“剪刀”、“石头”、“布”，再重写本例的ActionScript语句。

4．试制作“棒子、老虎、鸡、虫”游戏。

5．试制作骰子比大小游戏。

提示与解答

1．本例中的switch语句可以由以下语句代替：

if(p==1){

if(p==c){

_root.resulttext="打平！";

}

elseif(c==2){

_root.resulttext="你赢啦！";

}

else{

_root.resulttext="你输啦!";

}

}

elseif(p==2){

if(p==c){

_root.resulttext="打平!";

}

elseif(c==3){

_root.resulttext="你赢啦!";

}

else{

_root.resulttext="你输啦!";

}

}

else{

if(p==c){

_root.resulttext="打平!";

}

elseif(c==1){

_root.resulttext="你赢啦！";

}

else{

_root.resulttext="你输啦！";

}

}

2．本例中的if语句可以由以下语句代替：

switch(p){

case1:

switch(c){

case1:

_root.resulttext="打平！";

break;

case2:

_root.resulttext="你赢啦！";

break;

case3:

_root.resulttext="你输啦!";

break;

default:

break;

}

break;

case2:

switch(c){

case1:

_root.resulttext="你输啦!";

break;

case2:

_root.resulttext="打平！";

break;

case3:

_root.resulttext="你赢啦！";

break;

default:

break;

}

break;

case3:

switch(c){

case1:

_root.resulttext="你赢啦！";

break;

case2:

_root.resulttext="你输啦!";

break;

case3:

_root.resulttext="打平！";

break;

default:

break;

}

break;

default:

break;

}

3．调整了帧的顺序后，需要修改两个地方。一个是按下按钮后，每个按钮所对应的_root.MyGo值应该发生变化；第二个是在判断输赢时，条件发生变化后，判断的结果应该有所不同。

4．制作“棒子、老虎、鸡、虫”游戏，规则是“棒子打老虎，老虎吃鸡，鸡吃虫，虫啃棒子”。其它情况两者相遇都为“打平”，如“棒子”遇到“鸡”，“老虎”遇到“虫”等。在比较的时候，最好使用switch语句进行嵌套。如果用if语句，嵌套过程会过于复杂。

5．骰子游戏只需要一个按钮。当开始后，无论是自己的骰子还是计算机的骰子均为随机生成，然后比较两个骰子点数的大小来分出输赢。在制作基本元件的时候要制作六帧，除此之外，在比较的时候，此游戏比“剪刀、石头、布”游戏和“棒子、老虎、鸡、虫”游戏要简单得多。只需比较两个数的大小即可分出输赢。用一个if语句即可完成骰子游戏。 2.4游戏美化

2.4.1游戏制作

1．调整按钮

(1)打开上节的半成品。

(2)双击舞台上的“石头”按钮，进入按钮的编辑界面。此时的界面跟我们新建按钮时的界面不太一样：可以看到整个舞台上的所有对象，只是它们都成为半透明的了；只有“石头”按钮是以原来的颜色显示。这样，我们可以清楚地看到所编辑的对象在舞台上的位置及与其它对象相互配合的结果。

(3)单击〖点击〗帧，选取它，再按F6键，将它转为关键帧。

(4)保持选中〖点击〗帧，在舞台上，运用〖矩形工具〗，在舞台上字的周围拖动，画一个与“石头”两个字大小相仿的矩形。

(5)在保持矩形被选中的情况下，在〖属性〗面板(见图2-11)中单击矩形的〖笔触颜色〗框右下方的向下小三角，在弹出的〖颜色设置〗对话框(见图2-12)的右上角，选择无色标记，即可将〖笔触颜色〗设置为“无色”；〖填充颜色〗随意选择。图2-11图2-12

(6)单击〖场景1〗，退出按钮编辑状态，回到舞台。

(7)再次运行，观察效果。现在是不是好按多了呢？这种技巧在Flash动画制作过程中是经常用到的。

2．美化按钮

1)方案一

(1)再次双击舞台上的“石头”按钮，进入按钮编辑界面。

(2)单击〖指针经过〗帧并选中，按F6键，将它转为关键帧。

(3)用〖选择工具〗选择文本，按Ctrl+C键复制，按Ctrl+Shift+V键原地粘贴，按Ctrl+B键打散，在〖属性〗面板中把〖填充颜色〗改成淡灰色。再按Ctrl+G键重新组合。按键盘上的向右箭头键1～3次，再按键盘上的向上箭头1～3次。

(4)单击场景1，退出按钮编辑状态，回到舞台。

(5)再次运行，观察效果。现在，当鼠标经过时，按钮就会发生变化了。

(6)其它按钮也参照步骤(1)～(4)修改。

2)方案二

(1)选择菜单命令〖窗口〗→〖公用库〗→〖按钮〗，在〖按钮〗面板中找到自己喜欢的按钮，把它拖出来放在场景中，如本例选择“buttonsbubble2”里的“bubble2blue”。不同的Flash版本所带的公用库有所不同，大家在制作的时候需要注意(见图2-13)。图2-13

(2)由于现在按钮上显示的是“Enter”，我们双击舞台上的按钮，进入按钮编辑界面。选择“text”层，点击该层的小锁标记，将此层解锁(见图2-14)。对于已经完成的层，点击小锁进行锁定，可以避免在后面的操作中，不小心触及已经完成的层。我们在制作过程中也应该养成好习惯，一旦暂时不需要改动某层，就单击小锁对应的位置，即可锁定该层。图2-14

(3)单击“text”层的〖弹起〗帧，选择文本工具，在“Enter”处单击，改成“石头”。

(4)单击〖场景1〗，退出按钮编辑状态，回到舞台。

(5)选择原来的“石头”按钮，按F9键，打开〖动作〗面板。按Ctrl+A键全选，Ctrl+C键复制。

(6)单击〖场景1〗，退出按钮编辑状态，回到舞台。

(7)选择新的“石头”按钮，按F9键，打开〖动作〗面板，按Ctrl+V键粘贴刚才复制的内容。

(8)重复步骤(1)～(7)，把原来的三个按钮都换成统一的形式。

3．统计分数和次数

在上一节中对输赢进行了判断，现在，我们就要加入对于分数和游戏次数的统计。

(1)在主场景中，单击“all”层以选中，单击第1帧以选中。选择〖文本工具〗，在舞台上添加提示文字：“您的积分：”，并将其打散、组合。

(2)在提示文字右边添加动态文本框，将变量设置为score。

(3)在“您的积分：”文本下方，添加提示文字：“您共玩了：盘”。

(4)在此提示文字右边添加动态文本框，将变量设置为gameCount。

(5)单击选择action层的第1帧，按F9键调出〖动作〗面板，在原程序段之前添加以下两行语句：

score=0;

gameCount=0;

(6)在FunctioncheckResult中，根据输赢判断的结果，在“_root.resultText="你赢啦！";”语句后面，按回车，添加“_root.score=_root.score+10;”在“_root.resultText="你输啦!";”语句后面，按回车，添加“_root.score=_root.score-10;”。

(7)按F9键关闭〖动作〗面板返回主场景。

(8)单击选择“石头”按钮，按F9键调出〖动作〗面板，在花括号内的程序段最后加上一句“_root.gameCount=_root.gameCount+1;”。

(9)把同样的语句加到“剪刀”、“布”按钮的ActionScript中去。

(10)返回主场景，运行查看效果。

4．添加背景

一个完整的游戏，界面的美化工作是必不可少的。我们这个游戏相对简单，再美化一下背景即可。

1)方案一

(1)在主场景创建一个新层，将它改名为“背景”，并将它拖动到所有层的下面(见图2-15)。图2-15

(2)将上两层锁定，以免影响到上两层。

(3)选择矩形工具，将〖笔触颜色〗设为“无色”，〖填充颜色〗任意，画一个与舞台同等大小的矩形，或者比舞台略小。可以通过〖属性〗面板控制矩形的大小与位置。

(4)在保持矩形选中的情况下，在〖属性〗面板中选择〖填充颜色〗，在弹出的颜色面板中，选择最底层的渐变(见图2-16)。图2-16

(5)选择〖窗口〗菜单中的〖混色器〗命令，或者按Shift+F9键调出〖混色器〗面板(见图2-17)。在下方的横条下，在小砝码形的游标处单击，然后在上方的方块处选择颜色，在方块的右侧条中选择颜色的深浅，即可对首尾两个游标设置不同的颜色。图2-17图2-18

2)方案二

(1)在网上找一张合适的背景图(也可使用配套光盘中第二章\素材\背景.jpg)。

(2)如方案一中就骤(1)那样新建一个图层并命名为“背景”。

(3)选择〖文件〗菜单中的〖导入〗→〖导入到舞台

……〗，选择找好的背景图并导入。

(4)图片导入后，在〖属性〗面板中调整其大小。将〖宽〗设置为“550”后，〖高〗只有389.5了。点击〖属性〗面板宽、高旁边的小锁(见图2-19，小锁消失，此时再设置〖高〗为“400”即可。图2-19

(5)点击“背景”层小锁对应的位置，将背景层锁定。

(6)将“all”层解除锁定，调整界面上各项内容的位置。

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

在计算游戏所得分数和盘数时，我们用到了“_root.score

=_root.score+10”形式的语句，这样的语句在ActionScript中是一种最基本的使用方法。它的意思是取出_root.score变量里面的数，加上10后，再放回_root.score变量中去。

因此，我们每按一次按钮，次数都在原来的基础上增加1，赢了的话，分数在原来的基础上增加10分；输了的话，分数在原来的基础上减去10分。

作业与练习

1．请按本例美化完成“石头、剪刀、布”游戏。

2．请尝试将每输赢一次增加或减少的分数改为3分。

挑战与提高

“_root.gameCount=_root.gameCount+1”语句我们是添加在按钮上的，其实，把它添加在主场景action层的ActionScript中也是可以的。那么，能不能把它改成在action层里计算次数呢？

提示与解答

要做到“挑战与提高”中的要求，首先，我们把按钮中的“_root.gameCount=_root.gameCount+1”语句删除。然后，我们在action层的ActionScript中switch语句里每个case结束前的break语句之前，添加这一句代码即可，形如：

switch(p){

case1:

…

_root.gameCount=_root.gameCount+1;

break;第3章拼图游戏3.1游戏说明3.2打乱拼图3.3拼图的移动和判断3.4拼图完成的判断和界面美化 3.1游戏说明

本游戏是一个简单的拼图游戏。所有拼图的图片均为规则的正方形，而非常见的拼图那样有不规则的形状。所有图片在舞台上平铺，通过拖动图块到它应该在的位置，实现将图块放到正确的位置上；而将原来占据该位置的图块自动切换到所拖动图块原来的位置上。当所有图块均放置到正确位置时，表明拼图正确完成。

3.2打乱拼图

3.2.1游戏制作

1．初期准备工作

(1)准备一张位图图片(本书配套光盘中第三章\素材\3-1.jpg)，图片尺寸为1024×768像素或者800×600像素。由于目前普遍使用的电脑显示器屏幕的长宽比例一般为4∶3，因此，使用这一比例的图片在屏幕上显示时，给人的视觉感受会比较和谐。图3-1

(2)使用图片处理软件处理图片。本例中使用AdobePhotoshop，选择菜单命令〖图像〗→〖图像大小〗，在弹出的〖图像大小〗对话框中(见图3-1)，将图片的〖分辨率〗设置为“72”(像素/英寸)，〖宽度〗改为“400”(像素)，〖高度〗自动变为“300”(像素)。

(3)打开Flash，新建一个空白Flash文件，将动画文件的大小设置为400×300像素。

(4)在图像处理软件中按Ctrl+A键全选图像，按Ctrl+C键复制，再回到Flash中按Ctrl+V键进行粘贴；或者在Flash中选择菜单命令〖文件〗→〖导入〗→〖导入到舞台…〗，然后选择需要导入的图片即可。

(5)如果图片与舞台没有重合，则在〖属性〗控制面板中将图片的位置〖x〗和〖y〗均设置为“0”。

2．制作基本元件

(1)保持刚才导入的图片被选中(图片外会有一个灰色的框)，按F8键，在〖转换为元件〗对话框中，将〖类型〗设置为“影片剪辑”，〖名称〗设置为“big_mc”。现在可以将舞台上的图片实例删去，库中元件不受影响。

(2)使用〖矩形工具〗，在〖属性〗控制面板中将〖笔触颜色〗设置为“无色”，〖填充颜色〗设置为任意颜色，在舞台上画一个矩形。

(3)保持矩形选中的状态，按F8键将它转换为影片剪辑，〖名称〗为“mask_mc”，并将舞台上的实例删去，保留库中的元件。

(4)按Ctrl+F8键，在〖创建新元件〗对话框中，选择〖类型〗为“影片剪辑”，〖名称〗为“block_mc”。确定后，自动进入“block_mc”的编辑界面。

(5)调出〖库〗面板，将“big_mc”影片剪辑拖动到舞台上，在〖属性〗控制面板中，设置〖x〗和〖y〗为“0”，〖实例名称〗为“img”。

(6)将图层1重新命名为“大图”。

(7)新建层，拖动此层放置于“大图”层的上方，并将层命名为“遮罩”。

(8)在〖库〗控制面板中，拖出“mask_mc”影片剪辑放到此层上。在〖属性〗控制面板中，将这个实例的〖x〗和〖y〗均设置为“0”，〖实例名称〗设置为“mask”。

(9)单击“遮罩”层以选中，在“遮罩”层单击右键，在弹出的快捷菜单中选择〖遮罩层〗。两个图层变成图3-2所示的形式。

(10)单击场景1，返回主场景。图3-2

3．打碎图片并随机摆放

(1)从〖库〗面板中拖出“block_mc”影片剪辑，将它放到舞台白色区域外面的灰色区域中。

(2)在〖属性〗控制面板中，将此“block_mc”影片剪辑的〖实例名称〗设置为“tu”。

(3)新建层，命名为“action”。

(4)选择第1帧，按F9键，插入如下ActionScript语句：

weizhi=Array(1,2,3,4,5,6,7,8,9,10,11,12);

PieceLeft=12;

ax=0;

ay=0;

for(c=0;c<12;c++){

(5)效果如图3-3所示。图3-33.2.2重点与难点详解

在开始编程前，我们首先要把图片分成为横向4块，纵向3块，也就是一共分成为12块，然后再给这12块分别编号(见图3-4)。

开始编程时，使用一个数组变量weizhi来记住在没打乱图片顺序之前的各块图块。那么，什么是数组呢？我们可以把数组看成是一列火车，其中每一节车厢放着一个数字。我们是通过语句“weizhi=Array(1,2,3,4,5,6,7,8,9,10,11,12);”来给数组赋值的。通过“weizhi[0]，weizhi[1]，…”的形式来访问每一节“车厢”中的数字。可以这么说，0号车厢中放着数字1，1号车厢中放着数字2，……，11号车厢中放着数字12。特别要注意的是，车厢编号是从0开始的。图3-4在本例中，一开始有十二节车厢，顺序放入1～12这几个数。我们用PiecesLeft变量来保存当前还未生成的片数，即还未被取走的车厢总数。

用一个for语句来依次生成1～12号图块。for语句是一个循环语句，它的格式如下：

for(初始值；结束条件；步长){

语句1；

语句2；

…

语句n；

}

for语句的执行流程如图3-5所示。图3-5一旦取出车厢中的数字后，我们要把该列车厢从整列火车中摘除，以免出现重复的车厢。所以，我们使用数组对象的splice方法。“weizhi.splice(t,1);”表示在weizhi这个数组中的第t个位置开始，移除1个车厢。摘除车厢后，要把剩余的车厢数减1，所有在t后面的车厢编号自动往前移1号。按照前面的假设，如果t=5，在摘除车厢后，weizhi中的内容就变成(1,2,3,4,5,7,8,9,10,11,12)，如果下一次生成的t还是等于5，那么5号车厢中的数字就变为7(车厢是从0开始编号的)，见图3-6。图3-6一旦知道当前图块应该放到哪个位置后，我们就要生成这个图块。首先，使用“duplicateMovieClip(this.tu,"a"+c,c+10);”方法把tu这个图块的实例复制一份，这些实例的名称是a1～a12，层次依次为11～22。然后，我们通过移动“图块”影片剪辑中的“大图”影片剪辑实例img来制作不同的图块。图3-7模拟了如何通过移动img来实现不同的图块，注意，方框代表遮罩的位置，也就是真正图块所显示的范围。当真正图块没有移动而大图移动的时候，所显示的内容就发生了变化。请比较图3-7两个方框中的内容。图3-7

作业与练习

请在网上找一张合适的图片，并在Flash中用本节的方法将它打乱。

挑战与提高

能不能将一张500×400像素的图片分成5行4列并打乱呢？

提示与解答

要将一张500×400像素的图片分成5行4列，每个图块的大小还是100×100像素，制作基本元件的过程不需要作任何改变。

需要改变的是ActionScript语句。而且，数组中的内容就不只是12个，而是应该有20个了，所有计算条件都要进行适当的修改。循环次数也由12次增加到20次。

3.3拼图的移动和判断

3.3.1游戏制作

1．使拼图图块可由鼠标拖动

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

(2)在主时间轴中，选择“block_mc”影片剪辑的实例tu，按F9键调出〖动作〗编辑面板。

(3)在〖动作〗面板中输入以下语句段，进行变量初始化：

onClipEvent(load){

vari=0;

}图3-8

2．判断并互换图块

(1)仍然保持tu影片剪辑的实例被选中的状态，按F9键调出〖动作〗面板。

(2)将鼠标松开后需执行的内容修改为如下语句：

on(release){

stopDrag();

i=0;

tag=0;

for(v=0;v<12;v++){

if(_x<_root["a"+v]._x+50and_x>_root["a"+v]._x-50and_y<_root["a"+v]._y+50and_y>_root["a"+v]._y-50and_root["a"+v]._name!=this._name){

(3)按Ctrl+Enter键运行影片。现在，只要拖动图块到一个地方，松开鼠标左键，两块图片就可以互换位置了。3.3.2重点与难点详解

在tu这个“block_mc”影片剪辑的实例上，使用了onClipEvent(load)事件，这个事件的含义是当在动画中加载“block_mc”影片剪辑的时候，就执行花括号中的语句。上一节中，我们让动画每一个位置都复制一个tu，每复制一个tu，就是把“block_mc”影片剪辑又加载了一次，所以，每复制一个tu，就会执行一次onClipEvent的花括号中的语句。而花括号中的语句就只有一个“vari=0;”语句，首先定义了一个变量i，然后给这个i赋值为0。i变量用来记录图块是否正在被移动中。当i等于0的时候，表示该图块并没有被移动。对于每个“图块”影片剪辑的实例都有一个属于它自己的i，如a1.i、a2.i、…、a12.i。当在某一块“block_mc”影片剪辑的实例上按下鼠标左键时，首先用x1和y1两个变量记住当前实例的位置，然后把i设置为1，表示开始拖动这个实例。接着，用“this.swapDepths(100);”方法把当前实例的深度与深度为100的实例进行深度交换。如果深度100处没有其它实例，则当前实例的深度被设置为100，以让它在所有其它实例上方。最后，使用startDrag(this)方法，令本实例跟随鼠标移动。

在Flash中，用深度概念来决定对象和对象重叠时，深度值小的在下方，深度值大的在上方。我们用图3-9来表示结果。图3-9当松开鼠标时，首先要做的就是用stopDrag()来停止本实例继续随鼠标移动，并且设置表示是否正在被拖动的变量i为0，然后判断这块图块被放在哪里。由于我们并不能并且没必要总是精确地去放置图块，因此希望当图块放置到靠近某一范围时，就认为是与该范围最接近的图块位置。判断的标准是，当图块有超过1/4的面积与另一个图块重叠时，就认为该图块应该与重叠的图块交换位置。“_x<_root["a"+v]._x+50and_x>_root["a"+v]._x-50and_y<_root["a"+v]._y+50and_y>_root["a"+v]._y-50and_root["a"+v]._name!=this._name”这个判断条件，给每一个图块画出了一个区域，当正在被拖动的图块的原点进入这一区域时，重叠的面积就超过了1/4,见图3-10。图3-10

作业与练习

按照本例完成图片的拖动和互换。

挑战与提高

1．试记录一共交换了几步。

2．试制作5×4块的拼图的图片拖动和互换。提示与解答现在仅有这个变量是没有意义的，因为没有结果显示。我们将在下一节中，通过显示结果帧、增加动态文本框以显示这个变量。

2．在上一节完成的将图片打散成5×4块的基础上修改本例，只要把本例代码中涉及的“12”替换为“20”即可完成。

3.4拼图完成的判断和界面美化

3.4.1游戏制作

1．拼图的完成判断

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

(2)在主时间轴图层1的第2帧处单击鼠标右键，在弹出的快捷菜单中，选择〖创建空白关键帧〗。

(3)在主场景action图层的第2帧处也创建空白关键帧。按F9键，调出〖动作〗面板，在其中输入语句“stop();”后，按F9键关闭〖动作〗面板。

(4)单击主时间轴图层1的第1帧，选择放在舞台外的“block_mc”影片剪辑实例tu。按F9键，调出〖动作〗面板。(6)按F9键关闭〖动作〗面板。

2．制作完成界面

(1)将图层1改名为“内容”，单击第2帧，将“big_mc”影片剪辑拖到舞台上，并选择〖任意变形工具〗，将这个影片剪辑适当缩小并放于合适的位置。

(2)用〖文本工具〗输入“聪明！！”，并按两次Ctrl+B键将文字打散，在保持选中的状态下，按Ctrl+G键重新组合。

(3)打开〖公用库〗，从中拖出一个按钮，放在合适的位置。本例中，选择“buttonsoval”类别中的“ovalgray”按钮。

(4)双击按钮，进入按钮编辑界面。选择“text”图层，点击它旁边的小锁以解锁。选择〖文本工具〗，将文字改为“再玩一次”(见图3-11)。图3-11

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

(6)选择刚才的按钮，按F9键，编辑按钮的ActionScript，输入如下语句：

on(release){

_root.gotoAndPlay(1);

}

(7)添加新层，双击新层的名称，改名为“背景”，并将新层拖动到最底层。

(8)保持选中“背景”层，导入一张图片(配套光盘中第三章\素材\background.jpg)作为背景。3.4.2重点与难点详解

在判断是否完成拼图时，我们又使用了一个变量来计算处于正确位置的图块数：RightPiece。每次松开鼠标后，在上节的位置判断后，均要判断当前有多少个图块放置在正确的位置上。当正确的图块数为12时，意味着所有的图块都已经放在正确的位置上了。此时，需要将所有图块清除，因为上节关于深度的内容中提到，如果不将这些图块清除，进入第2帧后，所有生成的图块的深度均比人工设置的深度高，会挡住舞台上现有的文字、图片和按钮。清除图块时我们使用了语句“removeMovieClip(_root["a"+p]);”。

removeMovieClip方法的调用格式如下：

removeMovieClip(影片剪辑名)

或

影片剪辑名.removeMovieClip();

本例中我们使用的是第一种调用形式，作用是移除由attachMovie方法或duplicate-MovieClip方法所建立的影片剪辑。

跳转到第2帧时我们使用了语句“_root.gotoAndStop(2);”。

作业与练习

完成上一节的拼图游戏。

挑战与提高

1．完成5×4块的拼图游戏。

2．将4×3块的拼图游戏设置为第一关，完成后进入第二关5×4块的拼图游戏。

3．计算分数，计分规则是每一关有一个总分，再减去通过该关所用的步数。

提示与解答

1．在前两节完成的“挑战与提高”部分的题目基础上，修改判断列数的部分为以下语句并替换“12”为“20”即可。

if(t>=15){

t=t－15;

}

if(t>=10){

t=t－10;

}

if(t>=5){

t=t－5;

}

2．设置不同的关数时，可以把前面做好的5×4的游戏复制到第3，4帧。在4×3游戏的所有层中的第3、4帧都添加空白关键帧，打开5×4游戏，选择所有层的所有帧，单击鼠标右键，在弹出的快捷菜单中选择〖复制帧〗，然后回到4×3游戏中，单击第一层的第3帧以选中，再单击鼠标右键，在弹出的快捷菜单中选择〖粘贴帧〗。注意，由于Flash中元件的名称不能重复，如果4×3游戏和5×4游戏元件用的名称相同，在复制的时候就会出现对话框要求替换，此时不能选择替换，而是要将5×4游戏中的元件名称全部改成与4×3中不同的元件名称后，才能复制。在第一关的最后一帧，也就是第2帧，要增加一个按钮“进入下一关”。单击此按钮，应该自动跳转到第3帧。

3．增加一个变量，如叫Steps，用于记录每一关所用的步数，将计数语句放在图块的点击事件处理中，每执行一步即加1。再设置一个记录每一关分数的变量数组，如“Section[1]=50;Section[2]=100;”等。第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)新建一个图层，在此图层上以类似的