Flash 8实训教程—游戏制作入门第4章填色游戏.ppt

第4章 填色游戏 4.1 游 戏 说 明　　填色游戏适合3～6岁的小朋友玩，它可以训练小朋友对色彩的认识和理解。同时，这个小游戏也可以用于做配色示范，以及用于设计等方面。用Flash制作填色游戏，原理是把图片可涂色区域做成独立的影片剪辑，然后通过设置影片剪辑的颜色属性来达到涂色的目的。制作Flash涂色游戏，难点就在于制作可涂色区域，需要花费不少功夫。下面让我们一起来做一个填色游戏吧。 4.2 准 备 阶 段4.2.1 游戏制作　　1．准备所需填色图片　　(1) 新建一个Flash文件，设置它的宽和高分别为550像素和400像素。　　(2) 准备一张矢量图。本例所准备的是一张AI格式的矢量图(本书配套光盘中第四章\素材\蝴蝶.ai)，这张图最好用Adobe Illustrator软件打开。如果系统没有安装这个软件，也可以用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) 新建一个图层