1、Flash游戏制作填色游戏青岛大学软件技术学院二维动画课程设计报告题目名称 Flash游戏整理填色游戏姓 名 杨玉清 专 业 数字媒体艺术 班 级 08级1班 指导教师 徐卓 二0一0年一月十五日 课程设计任务书 一、目的：本次课程设计的目的是通过使用Flash ActionScript 3.0编程技术整理一个Flash小游戏或交互场景动画，使学生在巩固本学期Flash ActionScript编程技术和上一学期Flash动画整理的基础上，进一步培养学生的动画整理能力和编程技术，学会应用所学知识整理交互场景动画和Flash小游戏，积累整理flash动画和游戏的经验，巩固课程所学的理论知识，为以
2、后工作打下基础。二、要求：每位同学从所给题目中选择一个作为本次课程设计的主题，使用Flash ActionScript 3.0整理一个小游戏或交互场景动画，设计要求如下：1.作品主题积极向上，内容健康完整；2.作品中的游戏主角或场景须为自己独立创作，并自己编写程序完成游戏或场景功能；3.作品中要充分利用所学知识进行整理，功能相对完整，运行流畅，画面美观，形式生动活泼，观赏性实用性强；4.撰写不少于3000字的报告，报告结构合理，语句通顺，能够说明整理过程和原理。5.同时上交作品文件（SWF及FLA文件两种格式）和课程设计报告。三、时间与地点：时间：2010.1.52010.1.15；上午8：0
3、011：30；下午13：3015：30地点：西3#实验楼204四、进度计划：1月4日 选题1月5日 搜集资料，确定选题1月6日 编写剧本1月7-8日 设计分镜台本并准备素材绘制主要角色及场景1月11日 动画整理1月12-14 编写程序及测试完善1月15日 撰写报告第一章 游戏功能概述填色游戏的主要功能是由游戏提供未涂色的图片，由玩家根据自己的喜好给空白图片添加上相应的颜色。游戏提供画笔，调色板，空白图片轮廓等，其中画笔跟随鼠标移动，用画笔提取调色盘中的颜色，然后填充在空白图片中，调色盘提供了红，绿，蓝，紫等十一种颜色，为玩家提供了巨大的选择空间，调色盘设置为可移动的，用画笔可以任意拖动调色盘的
4、位置，游戏提供了六张可爱的图片，供玩家游戏。我们还为按钮添加了声音，使游戏者在玩的过程中不至于太单调，此外，我们还为游戏添加了音乐，游戏者可以根据自己的喜好选择边玩游戏边听音乐，或者是没有音乐，可以任意控制音乐的播放，主界面如图1。 图1 主界面第二章 角色与场景设计2.1 角色设计主要角色是六张空白图片轮廓，根据游戏需要，我分别从书本网络上搜集了一些简单漂亮的图片，然后根据图片分别绘制出相应角色，有小蘑菇，尾巴燃着火的小龙，福娃晶晶，目不转睛注视苹果的小狗，身着官服的九品芝麻官，还有可爱的小精灵。其中小蘑菇如图2所示，福娃晶晶如图3所示，还有小精灵如图4所示，是我负责整理的。 图2 小蘑菇
5、图3 福娃晶晶 图4 小精灵根据游戏需要，绘制完所有角色之后，我们又将其按部分分割填充颜色，分别转化成元件，以便添加相应的侦听事件，方便填充颜色，有的甚至分割成二十多块，部分元件如图5。图5 元件实例2.2场景设计游戏的主场景我们绘制了一个大象形的绘图板，为了使场景美观，我们又导入了一幅位图图片作为背景衬在大象形画板的后面，主场景主要运用了暖色调，给人一种温馨愉悦的感觉。这些细小的地方均为我们两个人合作，具体效果如图5。图5 场景图片第三章 游戏功能设计与实现3.1 模块一：取色功能3.1.1主要功能及函数介绍本游戏的取色模块主要实现用画笔从调色板中提取颜色，取色之后再将其添加到目标区域，即画
6、笔点击某块特定的区域将画笔的颜色添加到其中。游戏功能的实现主要运用了事件侦听和颜色设置函数，鼠标单击目标更改目标颜色，达到提取颜色和添加颜色的目的。此项功能的实现主要运用了Transform类，每个显示对象都有一个transform属性，它是Transform类的实例，Transform类有一个colcrTransform属性，此属性又有一个ColorTransform类的实例，通过设置此实例的color属性可以改变可视对象的颜色。方法是先定义一个ColorTransform类的变量用来存储颜色，然后将相应的颜色值存储在变量中，要改变目标颜色时，将存储在刚刚定义的变量赋值给实例的transfo
7、rm.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, makeL
8、v);/给绿色按钮（实例名pan.lv）添加事件侦听pan.huang.addEventListener(MouseEvent.CLICK, makeHuang);pan.lan.addEventListener(MouseEvent.CLICK, makeLan);pan.zi.addEventListener(MouseEvent.CLICK, makeZi);/给紫色按钮（实例名pan.zi）添加事件侦听pan.danlan.addEventListener(MouseEvent.CLICK, makeDanLan);pan.hong.addEventListener(MouseEven
9、t.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;/定义C
10、olorTransform对象，用来保存产颜色(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.transf
11、orm.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 co
12、lorInfo.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）的颜色改为colorInf
13、o的颜色 (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.tran
14、sform.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
15、):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中 b
