2022年flash填色游戏案例教程 .pdf





《2022年flash填色游戏案例教程 .pdf》由会员分享,可在线阅读,更多相关《2022年flash填色游戏案例教程 .pdf(20页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、flash 填色游戏案例教程 关键词flash 填色游戏 教程名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 20 页 - - - - - - - - - 目录1. 引言 . . 11.1 填色小游戏概述 . . 11.2 设计意义 . . 12. 设计分析 . . 12.1 设计中要解决的问题. 12.2 需求分析 . 22.3 设计流程 . 22.3.1 准备阶段 . . 22.3.2 设计制作阶段 . . 22.3.3 修正并定型 . . 23. 创意说明 . .
2、33.1 设计灵感来源 . 33.2 设计理念 . 34. 设计内容 . . 34.1 游戏的主要界面概述 . . 34.2 进入界面 . . 34.3 主要填色的界面 . . 44.4 结束界面 . . 45. 设计过程与方法 . . 45.1 进入界面的设计与制作. 45.2 填色界面的设计与制作. 65.3 结束界面的设计与制作. 10 5.4 代码的设置 . 11 结论. . 错误!未定义书签。致谢语 . . 错误!未定义书签。参考文献 . . 17 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - -
3、- - - - - 第 2 页,共 20 页 - - - - - - - - - - 1 - 1. 引言1.1 填色小游戏概述填色小游戏, 顾名思义,即是对某种事物图片涂上颜色并对其进行颜料搭配的一种小游戏。 它能充分发挥儿童想象力, 从而将她们想象出来的色彩搭配运用到这个小游戏当中。 它可以让儿童从先接触不同颜色和认识不同颜色开始。让他们逐渐懂得如何去搭配色彩, 如何让这些色彩搭配得更好。 不断去理解不同色彩搭配出来的效果,通过这样一个小游戏学会更多色彩搭配的技巧从而应用到实际生活中去。1.2 设计意义虽然这次设计只是一个小小的填色游戏,但却可以让孩子在儿童时期就培养他们对颜色搭配方面的兴趣
4、。再进行无数次搭配后加深对颜色搭配的感悟和理解。让他们将所学的运用到今后的实际生活当中。2. 设计分析2.1 设计中要解决的问题填色游戏将提供各式各样的方法和丰富多彩的材料,让儿童能在更好更丰富多彩的环境下去吸收并掌握颜色方面的知识。所以,填色小游戏的设计不应该只是单一的面或的图。 为了吸引儿童去掌握颜色及色彩搭配方面的知识,图片应该丰富化。并能慢慢引导儿童去尝试对不同颜色进行不同搭配。从而更好的掌握该方面的知识。设计中要解决的问题 : (1) 素材要充足(图片素材、声音素材等)(2) 游戏内容要充足 (要有开始界面、 还有游戏说明、 游戏填色部分的界面等)(3) 游戏整个框架要美观简洁, 更
5、能吸引儿童,让儿童有动手的想法或欲望。(4) 充分利用选择工具、铅笔工具、橡皮擦工具勾勒自己所需的图。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 20 页 - - - - - - - - - - 2 - 2.2 需求分析随着社会的不断进步, 无论是国家政府还是每个父母都很注重对儿童幼儿时期的培养。 当今社会游戏本身就是一种娱乐方式。自有人类文明的时候, 就有了游戏, 可以说游戏就是人们生活娱乐的一部分。随着现代社会的不断进步,国家对教育方面的重视, 游戏也在不断的发展
6、并推广到教学方面上。它不仅能引起儿童的兴趣让儿童自主的去学习某些方面的内容知识,还可以让儿童在玩的气氛下更好的接触应该掌握的知识。填色小游戏可以让儿童接触到更多的色彩,从先辨识它们学起, 到可以自己动手去选择自己知道的颜色, 再到可以利用这些已经知道的颜色分别对其进行搭配。这样不断演变,让更多的儿童更好的认识颜色。 在颜色搭配上有更多的收获。这样不仅发挥了游戏的作用同样也有点教育儿童的作用。2.3 设计流程2.3.1准备阶段:对填色游戏先有一定的理解, 确定游戏的内容。 上网查找自己所需要的图片跟声音素材。构思好自己要设计的填色游戏的主框架。2.3.2设计制作阶段:全部都准备充足后。利用fla
7、sh8.0软件开始制作填色游戏。先设计填色游戏的第一个页面(用丰富的色彩当背景,添加些文本吸引儿童点击进入游戏)。接着是主框架和其他部分。 在设计游戏中相应的导入所查找好的资料素材,充分利用选择工具、 铅笔工具和橡皮擦工具绘制自己所要的场景图片。并对相应的动作编写代码。2.3.3修正并定型填色游戏设计完成后, 不断的修正。 让游戏的进入界面更完善、 填色内容更加丰富化。最终填色游戏的设计定型。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 20 页 - - - - - -
8、 - - - - 3 - 3. 创意说明3.1 设计灵感来源设计灵感来源: 灵感来源于网络上的一个填色小游戏。在此设计中选用的都是动漫卡通类的图, 儿童时期, 动漫卡通类的图对她们来说更具吸引力,而且用卡通图让儿童来进行填色, 最终的效果也会更加生动有趣。背景图的选用: 背景图的主要部分就是那些画笔,很适合这次的主题填色游戏。3.2 设计理念设计理念:本游戏主要是想让儿童通过对不同色彩以及身边某些事物色彩的认识,在此基础上对不同的图片进行不同的色彩搭配。好让儿童在色彩方面能更好的掌握并利用到生活中去。 相信从小培养他们对色彩的理解跟如何去搭配那些颜色对他们将来肯定是有用的。让他们通过该游戏培养
9、对色彩搭配方面的兴趣,同时也培养他们自己的创新能力。 通过这样一个小游戏搭配出一套属于自己的色彩搭配的风格。4. 设计内容4.1 游戏的主要界面概述游戏的主要界面分别为:进入界面、主要填色的界面、结束界面。4.2 进入界面进入第一界面的设计:用层次丰富的色彩当背景,这样对儿童更具吸引力。用文本工具填写文字,文字起引导作用,引导儿童点击进入游戏的第二界面。进入第二界面的设计: 主要通过飞动的蝴蝶让整个界面更丰富生动,同样也起到更吸引儿童的作用。游戏说明部分则可以让儿童明白如何去玩这个填色游戏。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -
10、 - - 名师精心整理 - - - - - - - 第 5 页,共 20 页 - - - - - - - - - - 4 - 4.3 主要填色的界面主要填色界面: 绘画了 4 幅比较生动有趣的图, 儿童可以通过自己在生活事物中对颜色的理解从而来选择颜色填涂,并不断让图片的颜色看起来搭配得更好。4.4 结束界面游戏结束的界面的设计: 设置了个重播按钮, 在儿童结束游戏后还可以点击重玩,而不是通过重新打开游戏来再次进行游戏。填色盘跟画笔: 使填色画面更加生动有趣, 利用代码将鼠标隐藏就只出现画笔的模样点击调色盘选择所要选的颜料对图片进行填色。每个小部分,组合起来就形成了个生动有趣的填色游戏。5.
11、设计过程与方法5.1 进入界面的设计与制作打开 flash8.0软件,新建一个文档, 画布大小设置为550*400 像素. 设置画布背景颜色为 #CC6633. 并将图层命名为 “调色盘”。点击“插入”“新建元件”,类型为影片剪辑并命名为“加载背景” 。进入影片剪辑,用矩形工具绘制一个矩形,无笔触颜色,填充颜色为#339900。回到场景1,在图层“调色盘”第一帧插入关键帧,将影片剪辑“加载背景”拉入到主场景中,调整大小跟画布大小一样,且刚好覆盖住画布背景颜色。如图5.1 所示:图 5.1 再新建一个影片剪辑名为 “开始界面”。在此影片剪辑中的第一帧插入关键名师资料总结 - - -精品资料欢迎下
12、载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 20 页 - - - - - - - - - - 5 - 帧并用静态文本在下方输入文字“亲爱的小朋友们,自己动手让自己的生活更加多姿多彩, 生动有趣吧!” 。在此影片剪辑的第 16 帧处插入关键帧, 将此静态文本移动到上面刚好处位置。创建动画补间。插入帧延长播放时间。回到主场景,在图层“调色盘”第二帧插入关键帧,将影片剪辑“开始界面”拉入到画布下方。如图 5.2 所示:图 5.2 新建一图层,命名为“笔” 。 点击“插入”“新建元件” ,类型为影片剪辑并命名为“
13、画笔”。利用“线条工具”跟“选择工具”绘制一个画笔,将笔头部分跟笔杆还有中间部分分开来画,并对起进行色彩填充。 并将笔头部分选中也转化成影片剪辑并命名为“笔头” ,同样在影片剪辑“画笔”中也选中笔头将其影片剪辑实例名称名为“bitou ” 。再新建一个影片剪辑名为“颜料” ,将图片素材导入影片剪辑“颜料”中,用橡皮擦工具擦掉多余部分, 且用椭圆工具, 笔触颜色为无分别绘制出白、 浅蓝、粉红、深蓝、黄、绿、黑、红等8 种颜色。如图 5.3 所示:图 5.3 在图层“笔”的第一帧插入关键帧,将影片剪辑“颜料”和“画笔”分别拉入到舞台中,并放好位置。在舞台中将“画笔“的实例名称名为“bi ” 。将“
14、颜料”实例名为“ tiaosepan ” 。用静态文本输入文字“让你的生活更加多姿多彩”;名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 20 页 - - - - - - - - - - 6 - 并对其设置滤镜投影。在此图层第二帧插入关键帧,导入库按钮bubble 2 orange 到画布的右下方。如图5.4 所示:图 5.4 分别在图层“笔”和“调色盘”第三帧处插入空白关键帧。5.2 填色界面的设计与制作新建一图层名为“背景图”并将其拉直图层“调色盘”下方。在图层“背景
15、图”第四帧处插入关键帧,将背景图导入到舞台。如图5.5 所示:图 5.5 再新建一图层名为“填色游戏”在图层“背景图”上面。也同样在第四帧处插入关键帧。用静态文本分本输入文字“原创:薛小妹”跟“填色游戏”。新建一个影片剪辑名为 “蝴蝶” 。在此影片剪辑中导入蝴蝶图片,连续插入关键帧,用变形工具让蝴蝶变形从而制造蝴蝶飞的效果。回到场景中, 同样在图层 “填色游戏”第四帧处将蝴蝶影片剪辑拉入到合适位置。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页,共 20 页 - - - -
16、- - - - - - 7 - 再新建一个图层名为“翻页”在图层“填色游戏”上面。在第四帧处插入关键帧,用静态文本分别输入文字“开始游戏”跟“游戏说明”。新建按钮元件名为“开始”。用矩形绘制一个按钮。填充色随意。回到主场景,将按钮拉入2 次到主场景,大小分别覆盖住“开始游戏”和“游戏说明”文本。并将此按钮元件的 alpha 值调至 0. 如图 5.6 所示: ( )图 5.6 新建一个影片剪辑名为“游戏说明” 。在此影片剪辑中不断插入关键帧直至最后输完以下文本 “画笔点击调色盘, 选择你要的颜色, 点击图中你要填涂的地方既可。 ”回到主场景,在图层“背景图”第五帧插入关键帧,将影片剪辑“游戏说
17、明”拉入至舞台,并移至画布右上角。如图5.7 所示:图 5.7 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页,共 20 页 - - - - - - - - - - 8 - 分别在图层“翻页”跟“填色游戏”第五帧处插入关键帧。在图层“笔”跟“调色盘”第四第五帧插入空白关键帧。建立一个图形文件名为“牛” ,在此元件中导入找好的图片素材“牛.jpg ” ,将其分离并用橡皮擦工具擦掉多余部分。填充颜色为白色。 将每部分分别转化成影片剪辑。且分别命名为牛1 到牛 8. 回到主场景中,
18、在图层“填色游戏”的第六帧处插入关键帧。并将图形元件“牛”拉入至舞台。放好位置。再将影片剪辑牛 1 至牛 7 分别拉入至舞台。跟图形元件“牛”很好的融合。且每个影片剪辑部分的实例名称从图1 到图 8 相互对应。如图 5.8 所示:图 5.8 再新建图形元件名为“小女孩1” 。在此图形元件中导入相应的图片素材。用如上相同办法将小女孩1 的各部分填充色分别转化为影片剪辑。并命名为女孩1 至女孩 12。回到主场景,在图层“填色游戏”第七帧处插入关键帧。用相同的办法,将图形元件“小女孩 1”和它的各个部分的影片剪辑在舞台中很好的融合,且每个部分的影片剪辑在场景中的实例名称也相互对应的从女孩1 到女孩
19、12。如图 5.9 所示:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页,共 20 页 - - - - - - - - - - 9 - 图 5.9 用如上相同办法分别新建图形元件“兔子”和图形元件“小女孩2”. 也用如上方法将它们各部分填充色转化为影片剪辑。分别为兔子 1到兔子 14. 跟 girl1到 girl13.回到主场景。在图层“填色游戏”第八帧插入关键帧。拉入图形元件“兔子”跟其各个部分的影片剪辑并很好的融合。在图层“填色游戏”第九帧处插入关键帧。拉入图形元件“小
20、女孩2”跟其各个部分的影片剪辑。并将其很好的融合。分别如图5.10 及图 5.11 所示:图 5.10 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页,共 20 页 - - - - - - - - - - 10 - 图 5.11 5.3 结束界面的设计与制作在图层“翻页”中。在第六帧插入关键帧, 在画布右下角输入文本 “下一张”,并将按钮元件“开始”拉入到舞台且覆盖住文本“下一张”,调整其 alpha 值为0. 在此图层第七帧插入关键帧, 用同样的方法添加文本 “上一张”
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年flash填色游戏案例教程 2022 flash 游戏 案例 教程

限制150内