1、目 录 一、 需求分析1.1开发背景 41.2项目目标41.3运行环境51.4项目任务书51.4.1 准备阶段51.4.2 设计制作阶段 51.4.3 修正并定型51.4.4 设计灵感来源 51.4.5 设计理念 6二、 技术路线2.1 总体方案 62.1.1 设计理念 62.1.2 设计内容62.2 详细设计72.2.1 进入界面的设计与操作72.2.2 填色界面的设计与操作922.2.3 结束界面的设计与操作122.2.4 代码的设置 14三、工程进度20四、测试报告214.1 阶段测试214.2 总体测试21五、个人小结223一、需求分析1.1 开发背景随着社会的不断进步，无论是国家政府
2、还是每个父母都很注重对儿童幼儿时期的培养。当今社会游戏本身就是一种娱乐方式。自有人类文明的时候，就有了游戏,可以说游戏就是人们生活娱乐的一部分。随着现代社会的不断进步，国家对教育方面的重视，游戏也在不断的发展并推广到教学方面上。它不仅能引起儿童的兴趣让儿童自主的去学习某些方面的内容知识，还可以让儿童在玩的气氛下更好的接触应该掌握的知识。填色小游戏可以让儿童接触到更多的色彩，从先辨识它们学起，到可以自己动手去选择自己知道的颜色，再到可以利用这些已经知道的颜色分别对其进行搭配。这样不断演变，让更多的儿童更好的认识颜色。在颜色搭配上有更多的收获。这样不仅发挥了游戏的作用同样也有点教育儿童的作用。填色
3、小游戏，顾名思义，即是对某种事物图片涂上颜色并对其进行颜料搭配的一种小游戏。它能充分发挥儿童想象力，从而将她们想象出来的色彩搭配运用到这个小游戏当中。它可以让儿童从先接触不同颜色和认识不同颜色开始。让他们逐渐懂得如何去搭配色彩，如何让这些色彩搭配得更好。不断去理解不同色彩搭配出来的效果，通过这样一个小游戏学会更多色彩搭配的技巧从而应用到实际生活中去。1.2 项目目的填色游戏将提供各式各样的方法和丰富多彩的材料，让儿童能在更好更丰富多彩的环境下去吸收并掌握颜色方面的知识。所以，填色小游戏的设计不应该只是单一的面或的图。为了吸引儿童去掌握颜色及色彩搭配方面的知识，图片应该丰富化。并能慢慢引导儿童去
4、尝试对不同颜色进行不同搭配。从而更好的掌握该方面的知识。设计中要解决的问题:4(1) 素材要充足（图片素材、声音素材等）(2) 游戏内容要充足（要有开始界面、还有游戏说明、游戏填色部分的界面等）(3) 游戏整个框架要美观简洁，更能吸引儿童，让儿童有动手的想法或欲望。(4) 充分利用选择工具、铅笔工具、橡皮擦工具勾勒自己所需的图。1.3 运行环境操作系统：Windows 98/Me/2000/XP屏幕分辨率：不小于 800600 像素CPU:奔腾 200MHz 以上屏幕色深：不低于 16 位色内存：64MB 以上声音回放设备：16 位以上声卡1.4 项目任务书1.4.1 准备阶段：对填色游戏先有
5、一定的理解，确定游戏的内容。上网查找自己所需要的图片跟声音素材。构思好自己要设计的填色游戏的主框架。1.4.2 设计制作阶段：全部都准备充足后。利用 flash8.0 软件开始制作填色游戏。先设计填色游戏的第一个页面（用丰富的色彩当背景，添加些文本吸引儿童点击进入游戏） 。接着是主框架和其他部分。在设计游戏中相应的导入所查找好的资料素材，充分利用选择工具、铅笔工具和橡皮擦工具绘制自己所要的场景图片。并对相应的动作编写代码。1.4.3 修正并定型 填色游戏设计完成后，不断的修正。让游戏的进入界面更完善、填色内容更加丰富化。最终填色游戏的设计定型。51.4.4 设计灵感来源设计灵感来源：灵感来源于
6、网络上的一个填色小游戏。在此设计中选用的都是动漫卡通类的图，儿童时期，动漫卡通类的图对她们来说更具吸引力，而且用卡通图让儿童来进行填色，最终的效果也会更加生动有趣。背景图的选用：背景图的主要部分就是那些画笔，很适合这次的主题填色游戏。1.4.5 设计理念设计理念：本游戏主要是想让儿童通过对不同色彩以及身边某些事物色彩的认识，在此基础上对不同的图片进行不同的色彩搭配。好让儿童在色彩方面能更好的掌握并利用到生活中去。相信从小培养他们对色彩的理解跟如何去搭配那些颜色对他们将来肯定是有用的。让他们通过该游戏培养对色彩搭配方面的兴趣，同时也培养他们自己的创新能力。通过这样一个小游戏搭配出一套属于自己的色
7、彩搭配的风格。二、技术路线2.1 总体方案2.1.1 设计理念设计理念：本游戏主要是想让儿童通过对不同色彩以及身边某些事物色彩的认识，在此基础上对不同的图片进行不同的色彩搭配。好让儿童在色彩方面能更好的掌握并利用到生活中去。相信从小培养他们对色彩的理解跟如何去搭配那些颜色对他们将来肯定是有用的。让他们通过该游戏培养对色彩搭配方面的兴趣，同时也培养他们自己的创新能力。通过这样一个小游戏搭配出一套属于自己的色彩搭配的风格。2.1.2 设计内容游戏的主要界面分别为：进入界面、主要填色的界面、结束界面。进入第一界面的设计：用层次丰富的色彩当背景，这样对儿童更具吸引力。用文本工具填写文字，文字起引导作用
8、，引导儿童点击进入游戏的第二界面。进入第二界面的设计：主要通过飞动的蝴蝶让整个界面更丰富生动，同样也起到更吸引儿童的作用。游戏说明部分则可以让儿童明白如何去玩这个填色6游戏。主要填色界面：绘画了 4 幅比较生动有趣的图，儿童可以通过自己在生活事物中对颜色的理解从而来选择颜色填涂，并不断让图片的颜色看起来搭配得更好。游戏结束的界面的设计：设置了个重播按钮，在儿童结束游戏后还可以点击重玩，而不是通过重新打开游戏来再次进行游戏。填色盘跟画笔：使填色画面更加生动有趣，利用代码将鼠标隐藏就只出现画笔的模样点击调色盘选择所要选的颜料对图片进行填色。每个小部分，组合起来就形成了个生动有趣的填色游戏。 2.2
9、 详细设计2.2.1 进入界面的设计与制作打开 flash8.0 软件，新建一个文档，画布大小设置为 550*400 像素.设置画布背景颜色为#CC6633.并将图层命名为“调色盘” 。点击“插入”“新建元件” ，类型为影片剪辑并命名为“加载背景” 。进入影片剪辑，用矩形工具绘制一个矩形，无笔触颜色，填充颜色为#339900。回到场景 1，在图层“调色盘”第一帧插入关键帧，将影片剪辑“加载背景”拉入到主场景中，调整大小跟画布大小一样，且刚好覆盖住画布背景颜色。如图 1 所示：图 1再新建一个影片剪辑名为“开始界面” 。在此影片剪辑中的第一帧插入关键帧并用静态文本在下方输入文字“亲爱的小朋友们，
10、自己动手让自己的生活更加多姿多彩，生动有趣吧！” 。在此影片剪辑的第 16 帧处插入关键帧，将此静态文本移动到上面刚好处位置。创建动画补间。插入帧延长播放时间。回到主场景，在图层“调色盘”第二帧插入关键帧，将影片剪辑“开始界面”拉入到画布下方。如图 2 所示：7图 2新建一图层，命名为“笔” 。 点击“插入”“新建元件” ，类型为影片剪辑并命名为“画笔” 。利用“线条工具”跟“选择工具”绘制一个画笔，将笔头部分跟笔杆还有中间部分分开来画，并对起进行色彩填充。并将笔头部分选中也转化成影片剪辑并命名为“笔头” ，同样在影片剪辑“画笔”中也选中笔头将其影片剪辑实例名称名为“bitou” 。再新建一个
11、影片剪辑名为“颜料” ，将图片素材导入影片剪辑“颜料”中，用橡皮擦工具擦掉多余部分，且用椭圆工具，笔触颜色为无分别绘制出白、浅蓝、粉红、深蓝、黄、绿、黑、红等 8 种颜色。如图 3 所示：图 3在图层“笔”的第一帧插入关键帧，将影片剪辑“颜料”和“画笔”分别拉入到舞台中，并放好位置。在舞台中将“画笔“的实例名称名为“bi” 。将“颜料”实例名为“tiaosepan” 。用静态文本输入文字“让你的生活更加多姿多彩” ；并对其设置滤镜投影。在此图层第二帧插入关键帧，导入库按钮 bubble 2 8orange 到画布的右下方。如图 4 所示：图 4分别在图层“笔”和“调色盘”第三帧处插入空白关键帧
12、。2.2.2 填色界面的设计与制作新建一图层名为“背景图”并将其拉直图层“调色盘”下方。在图层“背景图”第四帧处插入关键帧，将背景图导入到舞台。如图 5 所示：图 5再新建一图层名为“填色游戏” 在图层“背景图”上面。也同样在第四帧处插入关键帧。用静态文本分本输入文字“原创：测控 1001”跟“填色游戏” 。新建一个影片剪辑名为“蝴蝶” 。在此影片剪辑中导入蝴蝶图片，连续插入关键帧，用变形工具让蝴蝶变形从而制造蝴蝶飞的效果。回到场景中，同样在图层9“填色游戏”第四帧处将蝴蝶影片剪辑拉入到合适位置。再新建一个图层名为“翻页”在图层“填色游戏”上面。在第四帧处插入关键帧，用静态文本分别输入文字“开
13、始游戏”跟“游戏说明” 。新建按钮元件名为“开始” 。用矩形绘制一个按钮。填充色随意。回到主场景，将按钮拉入 2次到主场景，大小分别覆盖住“开始游戏”和“游戏说明”文本。并将此按钮元件的 alpha 值调至 0.新建一个影片剪辑名为“游戏说明” 。在此影片剪辑中不断插入关键帧直至最后输完以下文本“画笔点击调色盘，选择你要的颜色，点击图中你要填涂的地方既可。 ”回到主场景，在图层“背景图”第五帧插入关键帧，将影片剪辑“游戏说明”拉入至舞台，并移至画布右上角。分别在图层“翻页”跟“填色游戏”第五帧处插入关键帧。在图层“笔”跟“调色盘”第四第五帧插入空白关键帧。建立一个图形文件名为“牛” ，在此元件
14、中导入找好的图片素材“牛.jpg” ，将其分离并用橡皮擦工具擦掉多余部分。填充颜色为白色。将每部分分别转化成影片剪辑。且分别命名为牛 1 到牛 8.回到主场景中，在图层“填色游戏”的第六帧处插入关键帧。并将图形元件“牛”拉入至舞台。放好位置。再将影片剪辑牛 1 至牛 7 分别拉入至舞台。跟图形元件“牛”很好的融合。且每个影片剪辑部分的实例名称从图 1 到图 6 相互对应。如图 6 所示：图 610再新建图形元件名为“小女孩 1”。在此图形元件中导入相应的图片素材。用如上相同办法将小女孩 1 的各部分填充色分别转化为影片剪辑。并命名为女孩 1 至女孩 12。回到主场景，在图层“填色游戏”第七帧处
15、插入关键帧。用相同的办法，将图形元件“小女孩 1”和它的各个部分的影片剪辑在舞台中很好的融合，且每个部分的影片剪辑在场景中的实例名称也相互对应的从女孩 1 到女孩 12。如图 7 所示：图 7用如上相同办法分别新建图形元件“兔子”和图形元件“小女孩 2”.也用11如上方法将它们各部分填充色转化为影片剪辑。分别为兔子 1 到兔子 14.跟girl1 到 girl13.回到主场景。在图层“填色游戏”第八帧插入关键帧。拉入图形元件“兔子”跟其各个部分的影片剪辑并很好的融合。在图层“填色游戏”第九帧处插入关键帧。拉入图形元件“小女孩 2”跟其各个部分的影片剪辑。并将其很好的融合。分别如图 8 及图 9
16、 所示：图 8图 92.2.3 结束界面的设计与制作在图层“翻页”中。在第六帧插入关键帧，在画布右下角输入文本“下一张” ，并将按钮元件“开始”拉入到舞台且覆盖住文本“下一张” ，调整其alpha 值为 0.在此图层第七帧插入关键帧，用同样的方法添加文本“上一张”并拉入透明按钮。第八帧跟第九帧都跟第七帧一样。在第十帧插入关键帧。输入静态文本“游戏结束咯” 。设置其滤镜为投影跟发光。在下方输入文本“重玩”，并将按钮元件“开始”也拉入到舞台并覆盖在文本“重玩”上，且调整其alpha 值为 0。如图 10 所示：12图 10在图层“笔”的第六帧到第十帧分别插入关键帧。在图层“调色盘”的第六帧插入关键
17、帧，插入新建元件制作 8 个分别名为色彩 1 到色彩 8 的 8 个按钮。颜色也分别为黄、红、黑、绿、深蓝、浅蓝、白、粉。回到场景中，在此第六帧处分别将 8 个按钮拉入到舞台。如图 11 所示：图 11且按它们的色彩将它们在舞台中的实例名称命名为“huang、hong、hei、lu、lan、lan2、bai、fen。在此图层第七到第十帧分别插入关键帧。在图层“填色游戏”的第十帧处插入空白关键帧。图层“背景图”从第六到第十帧都插入关键帧。132.2.4 代码的设置接着导入声音素材名为 my_sound、my_sound2、my_sound3.接着就是主要用到的代码来实现填色的功能。 在图层“笔”
18、上添加一图层名为“AS” 。在此图层第二帧右击添加动作。代码如下：stop();/停止/在此图层第四帧添加动作代码为：stop();onMouseMove = function () this.bi._x = _xmouse;this.bi._y = _ymouse;Mouse.show();updateAfterEvent();/停止，并出现鼠标/在此图层第五帧添加动作代码为：stop();/停止/在此图层第六帧添加动作代码为：stop();tiaosepan.onPress = function() startDrag(tiaosepan);tiaosepan.onRelease = fu
19、nction() stopDrag();onEnterFrame = function () hong._x = tiaosepan._x-32;hong._y = tiaosepan._y-12;hei._x = tiaosepan._x+41;hei._y = tiaosepan._y+7;lu._x = tiaosepan._x+40;lu._y = tiaosepan._y-20;huang._x = tiaosepan._x+15;huang._y = tiaosepan._y-33;14lan._x = tiaosepan._x-10;lan._y = tiaosepan._y-3
20、8;fen._x = tiaosepan._x-35;fen._y = tiaosepan._y-35;lan2._x = tiaosepan._x-59;lan2._y = tiaosepan._y-22;bai._x = tiaosepan._x-56;bai._y = tiaosepan._y+7;/设置这些不同颜色的按钮的位置/onMouseMove = function () this.bi._x = _xmouse;this.bi._y = _ymouse;Mouse.hide();updateAfterEvent();/隐藏鼠标，使其变成画笔形状/var my_sound3:So
21、und = new Sound();my_sound3.attachSound(“fanye“);/ my_sound3 声音跟随翻页事件/var my_sound2:Sound = new Sound();my_sound2.attachSound(“xuanse“);/ my_sound2 声音跟随选色事件/var mycolor;hong.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFF0000;my_color.setRGB(mycolor);my_sound2.start();/点
22、击调色盘的“hong”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/hei.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x000000;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“hei”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/15lu.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor =
23、0x00FF00;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“lu”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/huang.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFFFF00;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“huang”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/lan.onPress = functio
24、n() var my_color:Color = new Color(bi.bitou);mycolor = 0x0033FF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“lan”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/fen.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFF33FF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“fen”颜色,将新
25、的颜色赋值于 bitou,声音 my_sound2 跟随事件/lan2.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x00FFFF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“lan2”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟16随事件/bai.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFFFFFF;my_c
26、olor.setRGB(mycolor);my_sound2.start();/点击调色盘的“bai”颜色,将新的颜色赋值于 bitou,声音 my_sound2 跟随事件/var my_sound:Sound = new Sound();my_sound.attachSound(“tianse“);for (var i = 0; i=19; i+) this“tu“+i.onPress = function() var my_color:Color = new Color(this);my_color.setRGB(mycolor);my_sound.start();/点击颜料盘，将颜色赋值
27、给被点中的牛的影片剪辑元件并跟随声音my_sound/在此图层第七帧添加动作代码为：stop();for (var i = 0; i=19; i+) this“女孩“+i.onPress = function() var my_color:Color = new Color(this);my_color.setRGB(mycolor);my_sound.start();/点击颜料盘，将颜色赋值给被点中的女孩的影片剪辑元件并跟随声音my_sound/在此图层第八帧添加动作代码为：stop();for (var i = 0; i=16; i+) this“兔子“+i.onPress = funct
28、ion() var my_color:Color = new Color(this);my_color.setRGB(mycolor);17my_sound.start();/点击颜料盘，将颜色赋值给被点中的兔子的影片剪辑元件并跟随声音my_sound/在此图层第九帧添加动作代码为：stop();for (var i = 0; i=16; i+) this“小女孩“+i.onPress = function() var my_color:Color = new Color(this);my_color.setRGB(mycolor);my_sound.start();/点击颜料盘，将颜色赋值给
29、被点中的小女孩的影片剪辑元件并跟随声音my_sound/在此图层第十帧添加动作代码为：stop();onMouseMove = function () Mouse.show();updateAfterEvent();/停止；出现鼠标/回到主场景，点击图层“笔”第二帧，再点击库按钮“Enter”添加动作代码：on (release) gotoAndPlay(4);/点击按钮跳转到第四帧开始播放/点击图层“翻页”的第四帧，再点击开始游戏的透明按钮添加动作代码：on (release) gotoAndPlay(6);/点击按钮跳转到第六帧开始播放/同样在这一帧给游戏说明的透明按钮添加动作代码：on
30、(release) gotoAndPlay(5);/点击按钮跳转到第五帧开始播放/再在此图层的第五帧为开始游戏的透明按钮再添加动作代码：18on (release) gotoAndPlay(6);/点击按钮跳转到第六帧开始播放/也在第五帧为游戏说明的透明按钮再添加动作代码：on (release) gotoAndPlay(5);stop();/点击按钮跳转到第五帧开始播放/在此图层第六帧处点击下一张的透明按钮为此添加动作代码：on (release) my_sound3.start();gotoAndStop(7);/点击按钮，出现声音 my_sound3 并跳转播放到第七帧停止/在此图层第七
31、帧处点击上一张的透明按钮为此添加动作代码on (release) my_sound3.start();gotoAndStop(6);/点击按钮，出现声音 my_sound3 并跳转播放到第六帧停止/在第七帧再选择下一张的透明按钮添加动作代码：on (release) my_sound3.start();gotoAndStop(8);/点击按钮，出现声音 my_sound3 并跳转播放到第八帧停止/在第八帧处点击上一张的透明按钮添加动作代码：on (release) my_sound3.start();gotoAndStop(7);/点击按钮，出现声音 my_sound3 并跳转播放到第七帧停止
32、/在第八帧处点击下一张的透明按钮添加动作代码：on (release) my_sound3.start();gotoAndStop(9);/点击按钮，出现声音 my_sound3 并跳转播放到第九帧停止/在第九帧处点击上一张的透明按钮添加动作代码：19on (release) my_sound3.start();gotoAndStop(8);/点击按钮，出现声音 my_sound3 并跳转播放到第八帧处停止/在第九帧处点击下一张的透明按钮添加动作代码：on (release) my_sound3.start();gotoAndStop(10);/点击按钮，出现声音 my_sound3 并跳转播
33、放到第十帧处停止/在第十帧处点击重玩的透明按钮添加动作代码：on (release) my_sound3.start();gotoAndPlay(1);/点击按钮，出现声音 my_sound3 并跳转到第一帧开始播放/ 三、工程进度时间 计划完成的时间 实际完成情况2012 年 5 月 5 日经组内商讨修改了原来的主题并最终确定了本次程序开发的主题：Flash 教育小游戏填色游戏。如期完成2012 年 5 月 6 日5 月 9 日了解 Flash8.0 的运行环境，制作项目任务书。详细分为：进入 如期完成20界面、填色界面、结束界面的设计和操作。并进行合理的分工。2012 年 5 月 10 日
34、5 月 21 日对开发的游戏做最后的测试，在测试中不断修改、改进使本游戏更合理，更富有人性化，达到本次程序开发的预期目的。如期完成2012 年 5 月 22 日5 月 28 日针对本次软件开发做个人总结，编写软件基础程序设计书如期完成四、测试报告4.1 阶段测试我们在开发程序的过程中，在进入界面、填色界面、结束界面的设计后，都针对每一阶段进行运行测试，并不断修改，不断改进。4.2 总体测试在本次软件开发的最后阶段，我们对本游戏做了最后的总体检测，使其更加合理，更富有人性化，达到本次程序开发的预期目的。让游戏的进入界面更完善、填色内容更加丰富化。21五、个人小结在确定项目主题时，我们小组三人商量
35、了很久后，把最初的否定了，换做现在这个项目主题，并由项目组中一名女生负责创意设计，准备所需素材。然后三人共同协商、学习，并逐步完成项目，再进行测试调试等工作。在这次大实验中我们小组认识到：虽然这次设计只是一个小小的填色游戏，但却可以让孩子在儿童时期就培养他们对颜色搭配方面的兴趣。再进行无数次搭配后加深对颜色搭配的感悟和理解，让他们将所学的运用到今后的实际生活当中。在整个填色游戏的制作过程中让我们深切的体会到了团队协作的重要性。我们小组三人分别负责了软件制作的不同部分,这使我们更加懂得了如何去运用flash 面板中的那些工具以及某些代码的书写，而且让我们在鼠绘方面得到了很大的提高，在这过程当中也碰到了些困难。当然，最后都得到及时的解决，并顺利的完成了整个填色游戏的制作。通过这次设计作业，使我们对 flash 这门生动有趣的学科有了更深刻的认识，并对 flash 实际制作有了较大的提高。在制作中遇到不少困难，我们自己也查找大量资料，翻阅相关书籍帮助自己解决困难。 在这次的实践中，我们进步了很多也明白了很多。我们懂得了如何自己发现问题再自己去寻找资料解决问题，凭借自己所学的知识去解决问题后的那种感觉也是令人难忘的。
