Flash游戏制作——《填色游戏》
大学软件技术学院
二维动画课程设计报告题目名称 Flash游戏制作——《填色游戏》
姓名玉清
专业数字媒体艺术
班级 08级1班
指导教师徐卓
二0一0年一月十五日
目录
目录 (2)
第一章游戏功能概述 (3)
第二章角色与场景设计 (4)
2.1 角色设计 (4)
2.2场景设计 (4)
第三章游戏功能设计与实现 (6)
3.1 模块一：取色功能 (6)
3.1.1主要功能及函数介绍 (6)
3.1.2 代码 (6)
3.2 模块二：辅助功能 (9)
3.2.1 简介 (9)
3.2.2 代码 (9)
第四章音乐的添加 (11)
第五章小结 (12)
第六章心得体会 (13)
致 (14)
参考文献 (15)
第一章游戏功能概述
填色游戏的主要功能是由游戏提供未涂色的图片，由玩家根据自己的喜好给空白图片添加上相应的颜色。游戏提供画笔，调色板，空白图片轮廓等，其中画笔跟随鼠标移动，用画笔提取调色盘中的颜色，然后填充在空白图片中，调色盘提供了红，绿，蓝，紫等十一种颜色，为玩家提供了巨大的选择空间，调色盘设置为可移动的，用画笔可以任意拖动调色盘的位置，游戏提供了六可爱的图片，供玩家游戏。我们还为按钮添加了声音，使游戏者在玩的过程中不至于太单调，此外，我们还为游戏添加了音乐，游戏者可以根据自己的喜好选择边玩游戏边听音乐，或者是没有音乐，可以任意控制音乐的播放，主界面如图1。
图1 主界面
第二章角色与场景设计
2.1 角色设计
主要角色是六空白图片轮廓，根据游戏需要，我分别从书本网络上搜集了一些简单漂亮的图片，然后根据图片分别绘制出相应角色，有小蘑菇，尾巴燃着火的小龙，福娃晶晶，目不转睛注视苹果的小狗，身着官服的九品芝麻官，还有可爱的小精灵。
其中小蘑菇如图2所示，福娃晶晶如图3所示，还有小精灵如图4所示，是我负责制作的。
图2 小蘑菇图3 福娃晶晶图4 小精灵根据游戏需要，绘制完所有角色之后，我们又将其按部分分割填充颜色，分别转化成元件，以便添加相应的侦听事件，方便填充颜色，有的甚至分割成二十多块，部分元件如图5。
图5 元件实例
2.2场景设计
游戏的主场景我们绘制了一个大象形的绘图板，为了使场景美观，我们又导入了一幅
位图图片作为背景衬在大象形画板的后面，主场景主要运用了暖色调，给人一种温馨愉悦的感觉。这些细小的地方均为我们两个人合作，具体效果如图5。
图5 场景图片
第三章游戏功能设计与实现
3.1 模块一：取色功能
3.1.1主要功能及函数介绍
本游戏的取色模块主要实现用画笔从调色板中提取颜色，取色之后再将其添加到目标区域，即画笔点击某块特定的区域将画笔的颜色添加到其中。游戏功能的实现主要运用了事件侦听和颜色设置函数，鼠标单击目标更改目标颜色，达到提取颜色和添加颜色的目的。
此项功能的实现主要运用了Transform类，每个显示对象都有一个transform属性，它是Transform类的实例，Transform类有一个colcrTransform属性，此属性又有一个ColorTransform类的实例，通过设置此实例的color属性可以改变可视对象的颜色。方法是先定义一个ColorTransform类的变量用来存储颜色，然后将相应的颜色值存储在变量中，要改变目标颜色时，将存储在刚刚定义的变量赋值给实例的transform.colorTransform属性即可。
3.1.2 代码
1.导入相应的类
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
2.分别给调色盘上的颜色按钮添加事件侦听和函数
pan.hei.addEventListener(MouseEvent.CLICK, makeHei);
//给黑色按钮（实例名pan.hei）添加事件侦听
pan.bai.addEventListener(MouseEvent.CLICK, makeBai);
pan.lv.addEventListener(MouseEvent.CLICK, makeLv);
//给绿色按钮（实例名pan.lv）添加事件侦听
pan.huang.addEventListener(MouseEvent.CLICK, makeHuang);
https://www.sodocs.net/doc/8217010399.html,n.addEventListener(MouseEvent.CLICK, makeLan);
pan.zi.addEventListener(MouseEvent.CLICK, makeZi);
//给紫色按钮（实例名pan.zi）添加事件侦听
pan.danlan.addEventListener(MouseEvent.CLICK, makeDanLan);
pan.hong.addEventListener(MouseEvent.CLICK,makehong);
pan.juhuang.addEventListener(MouseEvent.CLICK ,makejuhuang); //给橘黄色按钮（实例名pan.juhuang）添加事件侦听
pan.fenhong.addEventListener(MouseEvent.CLICK ,makefenhong); pan.shenlv.addEventListener(MouseEvent.CLICK ,makeshenlv);
3.单击颜色按钮时笔头的颜色变为按钮颜色
var colorInfo: = bi.bitou.transform.colorTransform;
//定义ColorTransform对象，用来保存产颜色
(1)笔头变成黑色函数
function makeHei(event:MouseEvent):void {
colorInfo.color = 0x000000;//将黑色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
function makeBai(event:MouseEvent):void {
colorInfo.color = 0xFFFFFF; //将白色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（2）笔头变成绿色函数
function makeLv(event:MouseEvent):void {
colorInfo.color = 0x00cc00; //将绿色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
(3) 笔头变成黄色函数
function makeHuang(event:MouseEvent):void {
colorInfo.color = 0xffff00; //将黄色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色}
(4) 笔头变成蓝色函数
function makeLan(event:MouseEvent):void {
colorInfo.color = 0x0000ff; //将蓝色保存在colorInfo中bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
(5) 笔头变成紫色函数
function makeZi(event:MouseEvent):void {
colorInfo.color = 0x9900ff; //将紫色保存在colorInfo中bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色}
(6) 笔头变成淡蓝色函数
function makeDanLan(event:MouseEvent):void {
colorInfo.color = 0x00ffff; //将淡蓝色保存在colorInfo中bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色}
(7) 笔头变成红色函数
function makehong(event:MouseEvent):void {
colorInfo.color = 0xff0000; //将红色保存在colorInfo中bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色}
(8) 笔头变成橘黄色函数
function makejuhuang(event:MouseEvent):void {
colorInfo.color = 0xff6600; //将橘黄色保存在colorInfo中bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色}
(9) 笔头变成粉红色函数
function makefenhong(event:MouseEvent):void {
colorInfo.color = 0xff00ff; //将粉红色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
(10) 笔头变成深绿色函数
function makeshenlv(event:MouseEvent):void {
colorInfo.color = 0x006600; //将深绿色保存在colorInfo中
bi.bitou.transform.colorTransform = colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
3.2 模块二：辅助功能
3.2.1 简介
通过用画笔拖动调色盘，来实现移动调色盘的位置；将调色盘中的颜色制作成按钮，用画笔点击不同的按钮，画笔提取不同的颜色。
3.2.2 代码
1. 下一按钮及声音
stop();
var myButton:button=new button();//定义一个button类的元件实例
xia.addEventListener(MouseEvent.CLICK,next2);//给下一按钮添加事件侦听
function next2(e:MouseEvent) {
gotoAndPlay(7);
myButton.play();//按钮声音播放
}
此部分代码完成的任务是，单击下一按钮，图片切换到下一，让玩者进行下一图片颜色的填充，单击按钮的同时触发声音事件。
2. 上一按钮及声音
shang.addEventListener(MouseEvent.CLICK,front1); //给上一按钮添加事件侦听
function front1(e:MouseEvent) {
gotoAndPlay(6);
myButton.play();//按钮声音播放
}
此部分代码完成的任务是，单击上一按钮，图片切换到上一，让玩者进行上一图片颜色的填充，单击按钮的同时触发声音事件。
3.隐藏画笔
bi.addEventListener(Event.ENTER_FRAME,moveBi);//给画笔（实例名bi）添加事件侦听function moveBi(e:Event) {
Mouse.hide();//鼠标隐藏
bi.x=mouseX+1;
bi.y=mouseY-7;//定义画笔（实例名bi）的位置坐标
}
此部分代码的作用是实现画笔跟随鼠标移动，隐藏鼠标并改变鼠标的位置，让鼠标刚好位于画笔头部，以便下面的操作。
4.调色盘的移动
pan.addEventListener(MouseEvent.MOUSE_DOWN,dragPan);
pan.addEventListener(MouseEvent.MOUSE_UP,stopDragPan);
//给调色盘（实例名pan）添加事件侦听
function dragPan(e:MouseEvent) {
Mouse.hide();//鼠标隐藏
pan.startDrag();
}//添加开始拖动函数
function stopDragPan(e:MouseEvent) {
Mouse.hide();//鼠标隐藏
pan.stopDrag();
}//添加停止拖动函数
此部分代码实现的是调色盘的拖动，在调色盘上添加事件侦听，然后添加的拖动函数，隐藏鼠标，画笔跟随鼠标移动。
第四章音乐的添加
导出的游戏，效果基本还算令人满意，然而游戏过程中没有声音，玩起来未免有点单调，我们又给游戏添加了声音来配合游戏，首先是按钮的声音，每次单击按钮都会有相应的声音配合，在前面的代码中已经介绍了。我添加了music按钮，并添加了事件侦听事件，让鼠标点击按钮时，播放预定的音乐。开始的Play 按钮，我添加了音乐，鼠标在按钮围时可以播放音乐，而鼠标移出按钮之后音乐播放停止。添加音乐使玩者在游戏过程中可以听音乐，从而达到游戏的放松与娱乐目的。游戏开头有点生硬缺乏活力，为了使游戏更吸引人，我们对片头部分进行了完善，添加了动画让Play按钮在鼠标移入时，进行左右摇摆的动画。
第五章小结
游戏制作过程中遇到很多问题，主要问题是：
画笔从调色盘中提取颜色之后笔头的颜色无法随之改变，解决方法是对每个按钮添加事件侦听，然后根据按钮颜色设置笔头的颜色，但是此法有个弊端就是无法提取笔头的颜色将其添加到目标区域中，我们试了很多函数但是还是无法提取到笔头的颜色，最后在老师的提醒下我们应用了事件侦听目标函数（e.target）最终解决了这个问题。
开始我们对所有单击目标添加了事件侦听事件，结果是无论单击哪一个元件实例，元件实例都会变色，甚至按钮的颜色都被改变了，经过反复尝试，我们将要添加颜色的实例部分重新命名为mi其中i为整数，然后对mi添加事件侦听，解决了这个问题。
第六章心得体会
通过这次的Flash游戏的设计制作，我学到了很多课本上没有的东西，对Flash ActionScript3.0也有了进一步深刻的认识，更学到了一些Flash游戏制作设计的宝贵经验。一个看似简单的小游戏凝聚了作者的很多心血。
在开始制作之前我们查阅了好多资料，包括从网上下载小游戏作为参考，最后我们选定了一个填色游戏，虽然我们下载了游戏的源文件，但是，源文件的代码是ActionScript2.0跟ActionScript3.0有这很大的不同，或者说基本上是完全不同的，因此，我们没有参考源文件的代码，直接根据游戏的功能，应用所学知识和现有资料重新编写代码，一部分一部分的添加修改和完善，最终终于完成了填色游戏的制作，尤其是在画笔颜色的提取和图形颜色的添加上，我更是费了不少的时间和心血，由一个颜色到多个颜色，由一个色块到多个色块，一点点慢慢完善修改，最终解决了所有的错误，达到了想要的效果。
然而，此次游戏制作，我最深的感触就是团队合作的重要，起初我对团队的理解就是每个人各自把自己的东西做完就行了，对合作的理解更是困难，然而这次的作品是我和王璐两个人合作完成的，这次的合作使我深刻体会了了一个团队该如何合作，来创造出更好的作品，虽然我们只是一个两个人的小团队，但是，有小才能有大，就像是我们编写代码，一个大的代码是由一个个小的代码组成的，而一个个小代码又必须互相配合才能组成这个有这强大功能的完善大程序。
致
在这一年的ActionScript3.0的学习中，我学到了很多以前甚至不曾接触过的东西，期间得到了老师和同学的许多帮助，他们教会了我许多东西，尤其是在专业学习中，课堂上老师耐心细致的讲解让我受益匪浅；课下，同学们也给与我许多无私的帮助，让我对所学知识有了更深刻的认识和理解。非常感老师和同学们的关心与帮助。
首先，非常要感我的指导老师，感她对我学习上细致的指导和帮助，无论什么时候，老师总是细心的讲解，认真的指导我们修改作品，帮助我们解决难题，给我们提了很多宝贵的意见和建议。在完成作品的过程中，我们遇到很多问题，老师多次提出的指导性、启发性的建议，提高了作品的整体水平，也使得课程设计报告结构更加紧凑和严密。
其次，我要感那些给我帮助和鼓励的同学们，在我因为一些失误心烦意乱无法静下心学习时，是她们鼓励我帮助我，让我有信心和耐心做完做好这一任务，正因为有了她们的帮助，我才能顺利地完成这一作品，正因为有了她们的帮助，我的作品才变得更加完美。
这一次的游戏动画设计，不但让我的作品水平有了一个很大的提高，而且让我对所学知识有了更系统的理解，让我的专业知识在运用中得到了丰富和提高，更让我感受到了老师和同学的关切之心，在此我向他们表示诚挚意。
感所有在课程设计过程中给予我帮助的人，感他们对我的帮助与支持。在这个过程中，我学到了很多的知识，取得了很大的进步，获得了人生难得的宝贵经验，你们！
参考文献
1.Flash ActionScript 3.0编程技术教程.朱治国，缪亮，艳丽编著.清华大学.2008年6月
2.Flash ActionScript
3.0从入门到精通.章精设,胡登涛著.清华大学.2008年10月
3. Flash ActionScript 3.0开发应用程序.亚飞著.电子工业.2008年6月
4. Flash/Flex ActionScript 3.0交互式开发详解.吕辉著. 电子工业.2008年1月
5. Flash ActionScript 3.0实训课堂.珀金斯著. 人民邮电.2008年11月
6. Flash ActionScript 3.0动画高级教程.彼得斯. 人民邮电.2010年1月
7.图形图像设计天才Flash3.0.人民交通. 电子工业.1999年10月
8.CD-R用多媒体学Flash编程技术- ActionScript 3.0.中电电子.2008年6月
9. Flash ActionScript 3.0.Game.Programming flash 3.0.刚著. 电子工业.2008年1月
10. Flash ActionScript 3.0动画教程.皮特斯著. 人民邮电.2008年4月
11. Flash ActionScript 3.0实用教程.金鹰教程著. 电子.2007年9月