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 设计理念 6 2.1.2 设计内容6 2.2 详细设计7 2.2.1 进入界面的设计与操作7 2.2.2 填色界面的设计与操作9 2.2.3 结束界面的设计与操作122.2.4代码的设置 14三、工程进度20四、测试报告214.1阶段测试214.2 总体测试21五、个人小结22一、需求分析1.1开发背景随着社会的
2、不断进步，无论是国家政府还是每个父母都很注重对儿童幼儿时期的培养。当今社会游戏本身就是一种娱乐方式。自有人类文明的时候，就有了游戏,可以说游戏就是人们生活娱乐的一部分。随着现代社会的不断进步，国家对教育方面的重视，游戏也在不断的发展并推广到教学方面上。它不仅能引起儿童的兴趣让儿童自主的去学习某些方面的内容知识，还可以让儿童在玩的气氛下更好的接触应该掌握的知识。填色小游戏可以让儿童接触到更多的色彩，从先辨识它们学起，到可以自己动手去选择自己知道的颜色，再到可以利用这些已经知道的颜色分别对其进行搭配。这样不断演变，让更多的儿童更好的认识颜色。在颜色搭配上有更多的收获。这样不仅发挥了游戏的作用同样也
3、有点教育儿童的作用。填色小游戏，顾名思义，即是对某种事物图片涂上颜色并对其进行颜料搭配的一种小游戏。它能充分发挥儿童想象力，从而将她们想象出来的色彩搭配运用到这个小游戏当中。它可以让儿童从先接触不同颜色和认识不同颜色开始。让他们逐渐懂得如何去搭配色彩，如何让这些色彩搭配得更好。不断去理解不同色彩搭配出来的效果，通过这样一个小游戏学会更多色彩搭配的技巧从而应用到实际生活中去。1.2项目目的填色游戏将提供各式各样的方法和丰富多彩的材料，让儿童能在更好更丰富多彩的环境下去吸收并掌握颜色方面的知识。所以，填色小游戏的设计不应该只是单一的面或的图。为了吸引儿童去掌握颜色及色彩搭配方面的知识，图片应该丰富
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修正并定型 填色游戏设计完成后，不断的修正。让游戏的进入界面更完善、填色内容更加丰富化。最终填色游戏的设计定型。1.4.4设计灵感来源设计灵感来源：灵感来源于网络上的一
6、个填色小游戏。在此设计中选用的都是动漫卡通类的图，儿童时期，动漫卡通类的图对她们来说更具吸引力，而且用卡通图让儿童来进行填色，最终的效果也会更加生动有趣。背景图的选用：背景图的主要部分就是那些画笔，很适合这次的主题填色游戏。1.4.5 设计理念设计理念：本游戏主要是想让儿童通过对不同色彩以及身边某些事物色彩的认识，在此基础上对不同的图片进行不同的色彩搭配。好让儿童在色彩方面能更好的掌握并利用到生活中去。相信从小培养他们对色彩的理解跟如何去搭配那些颜色对他们将来肯定是有用的。让他们通过该游戏培养对色彩搭配方面的兴趣，同时也培养他们自己的创新能力。通过这样一个小游戏搭配出一套属于自己的色彩搭配的风
7、格。二、技术路线2.1 总体方案2.1.1 设计理念 设计理念：本游戏主要是想让儿童通过对不同色彩以及身边某些事物色彩的认识，在此基础上对不同的图片进行不同的色彩搭配。好让儿童在色彩方面能更好的掌握并利用到生活中去。相信从小培养他们对色彩的理解跟如何去搭配那些颜色对他们将来肯定是有用的。让他们通过该游戏培养对色彩搭配方面的兴趣，同时也培养他们自己的创新能力。通过这样一个小游戏搭配出一套属于自己的色彩搭配的风格。 2.1.2 设计内容 游戏的主要界面分别为：进入界面、主要填色的界面、结束界面。进入第一界面的设计：用层次丰富的色彩当背景，这样对儿童更具吸引力。用文本工具填写文字，文字起引导作用，引
8、导儿童点击进入游戏的第二界面。进入第二界面的设计：主要通过飞动的蝴蝶让整个界面更丰富生动，同样也起到更吸引儿童的作用。游戏说明部分则可以让儿童明白如何去玩这个填色游戏。主要填色界面：绘画了4幅比较生动有趣的图，儿童可以通过自己在生活事物中对颜色的理解从而来选择颜色填涂，并不断让图片的颜色看起来搭配得更好。游戏结束的界面的设计：设置了个重播按钮，在儿童结束游戏后还可以点击重玩，而不是通过重新打开游戏来再次进行游戏。填色盘跟画笔：使填色画面更加生动有趣，利用代码将鼠标隐藏就只出现画笔的模样点击调色盘选择所要选的颜料对图片进行填色。每个小部分，组合起来就形成了个生动有趣的填色游戏。 2.2 详细设计
9、2.2.1进入界面的设计与制作 打开flash8.0软件，新建一个文档，画布大小设置为550*400像素.设置画布背景颜色为#CC6633.并将图层命名为“调色盘”。点击“插入”“新建元件”，类型为影片剪辑并命名为“加载背景”。进入影片剪辑，用矩形工具绘制一个矩形，无笔触颜色，填充颜色为#339900。回到场景1，在图层“调色盘”第一帧插入关键帧，将影片剪辑“加载背景”拉入到主场景中，调整大小跟画布大小一样，且刚好覆盖住画布背景颜色。如图1所示： 图1再新建一个影片剪辑名为“开始界面”。在此影片剪辑中的第一帧插入关键帧并用静态文本在下方输入文字“亲爱的小朋友们，自己动手让自己的生活更加多姿多彩
10、，生动有趣吧！”。在此影片剪辑的第16帧处插入关键帧，将此静态文本移动到上面刚好处位置。创建动画补间。插入帧延长播放时间。回到主场景，在图层“调色盘”第二帧插入关键帧，将影片剪辑“开始界面”拉入到画布下方。如图2所示：图2新建一图层，命名为“笔”。 点击“插入”“新建元件”，类型为影片剪辑并命名为“画笔”。利用“线条工具”跟“选择工具”绘制一个画笔，将笔头部分跟笔杆还有中间部分分开来画，并对起进行色彩填充。并将笔头部分选中也转化成影片剪辑并命名为“笔头”，同样在影片剪辑“画笔”中也选中笔头将其影片剪辑实例名称名为“bitou”。再新建一个影片剪辑名为“颜料”，将图片素材导入影片剪辑“颜料”中，
11、用橡皮擦工具擦掉多余部分，且用椭圆工具，笔触颜色为无分别绘制出白、浅蓝、粉红、深蓝、黄、绿、黑、红等8种颜色。如图3所示：图3在图层“笔”的第一帧插入关键帧，将影片剪辑“颜料”和“画笔”分别拉入到舞台中，并放好位置。在舞台中将“画笔“的实例名称名为“bi”。将“颜料”实例名为“tiaosepan”。用静态文本输入文字“让你的生活更加多姿多彩”；并对其设置滤镜投影。在此图层第二帧插入关键帧，导入库按钮bubble 2 orange到画布的右下方。如图4所示：图4分别在图层“笔”和“调色盘”第三帧处插入空白关键帧。 2.2.2 填色界面的设计与制作 新建一图层名为“背景图”并将其拉直图层“调色盘”
12、下方。在图层“背景图”第四帧处插入关键帧，将背景图导入到舞台。如图5所示： 图5再新建一图层名为“填色游戏” 在图层“背景图”上面。也同样在第四帧处插入关键帧。用静态文本分本输入文字“原创：测控1001”跟“填色游戏”。新建一个影片剪辑名为“蝴蝶”。在此影片剪辑中导入蝴蝶图片，连续插入关键帧，用变形工具让蝴蝶变形从而制造蝴蝶飞的效果。回到场景中，同样在图层“填色游戏”第四帧处将蝴蝶影片剪辑拉入到合适位置。再新建一个图层名为“翻页”在图层“填色游戏”上面。在第四帧处插入关键帧，用静态文本分别输入文字“开始游戏”跟“游戏说明”。新建按钮元件名为“开始”。用矩形绘制一个按钮。填充色随意。回到主场景，
13、将按钮拉入2次到主场景，大小分别覆盖住“开始游戏”和“游戏说明”文本。并将此按钮元件的alpha值调至0.新建一个影片剪辑名为“游戏说明”。在此影片剪辑中不断插入关键帧直至最后输完以下文本“画笔点击调色盘，选择你要的颜色，点击图中你要填涂的地方既可。”回到主场景，在图层“背景图”第五帧插入关键帧，将影片剪辑“游戏说明”拉入至舞台，并移至画布右上角。分别在图层“翻页”跟“填色游戏”第五帧处插入关键帧。在图层“笔”跟“调色盘”第四第五帧插入空白关键帧。建立一个图形文件名为“牛”，在此元件中导入找好的图片素材“牛.jpg”，将其分离并用橡皮擦工具擦掉多余部分。填充颜色为白色。将每部分分别转化成影片剪
14、辑。且分别命名为牛1到牛8.回到主场景中，在图层“填色游戏”的第六帧处插入关键帧。并将图形元件“牛”拉入至舞台。放好位置。再将影片剪辑牛1至牛7分别拉入至舞台。跟图形元件“牛”很好的融合。且每个影片剪辑部分的实例名称从图1到图6相互对应。如图6所示： 图6再新建图形元件名为“小女孩1”。在此图形元件中导入相应的图片素材。用如上相同办法将小女孩1的各部分填充色分别转化为影片剪辑。并命名为女孩1至女孩12。回到主场景，在图层“填色游戏”第七帧处插入关键帧。用相同的办法，将图形元件“小女孩1”和它的各个部分的影片剪辑在舞台中很好的融合，且每个部分的影片剪辑在场景中的实例名称也相互对应的从女孩1到女孩
15、12。如图7所示： 图7用如上相同办法分别新建图形元件“兔子”和图形元件“小女孩2”.也用如上方法将它们各部分填充色转化为影片剪辑。分别为兔子1到兔子14.跟girl1到girl13.回到主场景。在图层“填色游戏”第八帧插入关键帧。拉入图形元件“兔子”跟其各个部分的影片剪辑并很好的融合。在图层“填色游戏”第九帧处插入关键帧。拉入图形元件“小女孩2”跟其各个部分的影片剪辑。并将其很好的融合。分别如图8及图9所示：图8图9 2.2.3 结束界面的设计与制作 在图层“翻页”中。在第六帧插入关键帧，在画布右下角输入文本“下一张”，并将按钮元件“开始”拉入到舞台且覆盖住文本“下一张”，调整其alpha值
16、为0.在此图层第七帧插入关键帧，用同样的方法添加文本“上一张”并拉入透明按钮。第八帧跟第九帧都跟第七帧一样。在第十帧插入关键帧。输入静态文本“游戏结束咯”。设置其滤镜为投影跟发光。在下方输入文本“重玩”，并将按钮元件“开始”也拉入到舞台并覆盖在文本“重玩”上，且调整其alpha值为0。如图10所示：图10在图层“笔”的第六帧到第十帧分别插入关键帧。在图层“调色盘”的第六帧插入关键帧，插入新建元件制作8个分别名为色彩1到色彩8的8个按钮。颜色也分别为黄、红、黑、绿、深蓝、浅蓝、白、粉。回到场景中，在此第六帧处分别将8个按钮拉入到舞台。如图11所示：图11且按它们的色彩将它们在舞台中的实例名称命名
17、为“huang、hong、hei、lu、lan、lan2、bai、fen。在此图层第七到第十帧分别插入关键帧。在图层“填色游戏”的第十帧处插入空白关键帧。图层“背景图”从第六到第十帧都插入关键帧。2.2.4 代码的设置接着导入声音素材名为my_sound、my_sound2、my_sound3.接着就是主要用到的代码来实现填色的功能。 在图层“笔”上添加一图层名为“AS”。在此图层第二帧右击添加动作。代码如下：stop();/停止/在此图层第四帧添加动作代码为：stop();onMouseMove = function () this.bi._x = _xmouse;this.bi._y =
18、_ymouse;Mouse.show();updateAfterEvent();/停止，并出现鼠标/在此图层第五帧添加动作代码为：stop();/停止/在此图层第六帧添加动作代码为：stop();tiaosepan.onPress = function() startDrag(tiaosepan);tiaosepan.onRelease = function() stopDrag();onEnterFrame = function () hong._x = tiaosepan._x-32;hong._y = tiaosepan._y-12;hei._x = tiaosepan._x+41;he
19、i._y = tiaosepan._y+7;lu._x = tiaosepan._x+40;lu._y = tiaosepan._y-20;huang._x = tiaosepan._x+15;huang._y = tiaosepan._y-33;lan._x = tiaosepan._x-10;lan._y = tiaosepan._y-38;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
20、;bai._y = tiaosepan._y+7;/设置这些不同颜色的按钮的位置/onMouseMove = function () this.bi._x = _xmouse;this.bi._y = _ymouse;Mouse.hide();updateAfterEvent();/隐藏鼠标，使其变成画笔形状/var my_sound3:Sound = new Sound();my_sound3.attachSound(fanye);/ my_sound3声音跟随翻页事件/var my_sound2:Sound = new Sound();my_sound2.attachSound(xuans
21、e);/ my_sound2声音跟随选色事件/var mycolor;hong.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFF0000;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“hong”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/hei.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x000000;my_co
22、lor.setRGB(mycolor);my_sound2.start();/点击调色盘的“hei”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/lu.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x00FF00;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“lu”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/huang.onPress = function() var my_color:Color
23、= new Color(bi.bitou);mycolor = 0xFFFF00;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“huang”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/lan.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x0033FF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“lan”颜色,将新的颜色赋值于bitou,声音my_sound2跟
24、随事件/fen.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFF33FF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“fen”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/lan2.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0x00FFFF;my_color.setRGB(mycolor);my_sound2.st
25、art();/点击调色盘的“lan2”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/bai.onPress = function() var my_color:Color = new Color(bi.bitou);mycolor = 0xFFFFFF;my_color.setRGB(mycolor);my_sound2.start();/点击调色盘的“bai”颜色,将新的颜色赋值于bitou,声音my_sound2跟随事件/var my_sound:Sound = new Sound();my_sound.attachSound(tianse);for (var i =
26、0; i=19; i+) thistu+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=19; i+) this女孩+i.onPress = function() var my_color:Color = new Color(this);my_color.setRGB(mycolor)
27、;my_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();/点击颜料盘，将颜色赋值给被点中的兔子的影片剪辑元件并跟随声音my_sound/在此图层第九帧添加动作代码为：stop();for (var i = 0; i=16; i
28、+) this小女孩+i.onPress = function() var my_color:Color = new Color(this);my_color.setRGB(mycolor);my_sound.start();/点击颜料盘，将颜色赋值给被点中的小女孩的影片剪辑元件并跟随声音my_sound/在此图层第十帧添加动作代码为：stop();onMouseMove = function () Mouse.show();updateAfterEvent();/停止；出现鼠标/ 回到主场景，点击图层“笔”第二帧，再点击库按钮“Enter”添加动作代码：on (release) gotoAn
29、dPlay(4);/点击按钮跳转到第四帧开始播放/点击图层“翻页”的第四帧，再点击开始游戏的透明按钮添加动作代码：on (release) gotoAndPlay(6);/点击按钮跳转到第六帧开始播放/同样在这一帧给游戏说明的透明按钮添加动作代码：on (release) gotoAndPlay(5);/点击按钮跳转到第五帧开始播放/再在此图层的第五帧为开始游戏的透明按钮再添加动作代码：on (release) gotoAndPlay(6);/点击按钮跳转到第六帧开始播放/也在第五帧为游戏说明的透明按钮再添加动作代码：on (release) gotoAndPlay(5);stop();/点击按钮跳转到第五帧开始播放/在此图层第六帧处点击下一张的透明按钮为此添加动作代码：on (release) my_sound3.start();gotoAndStop(7);/点击按钮，出现声音my_sound3并跳转播放到第七帧停止/在此图层第七帧处点击上一张的透明按钮为此添加动作代码on (release) my_sound3.start();gotoAndStop(6);/点击按钮，出现声音my_sound3并跳转播放到第六帧停止/在第七帧再选择下一张的透明按钮添加动作代
