Flash游戏制作《填色游戏》.docx
《Flash游戏制作《填色游戏》.docx》由会员分享，可在线阅读，更多相关《Flash游戏制作《填色游戏》.docx（12页珍藏版）》请在冰豆网上搜索。
Flash游戏制作《填色游戏》
青岛大学软件技术学院
二维动画课程设计报告
题目名称Flash游戏整理——《填色游戏》
姓名杨玉清
专业数字媒体艺术
班级08级1班
指导教师徐卓
二0一0年一月十五日
课程设计任务书
一、目的：
本次课程设计的目的是通过使用FlashActionScript3.0编程技术整理一个Flash小游戏或交互场景动画，使学生在巩固本学期FlashActionScript编程技术和上一学期Flash动画整理的基础上，进一步培养学生的动画整理能力和编程技术，学会应用所学知识整理交互场景动画和Flash小游戏，积累整理flash动画和游戏的经验，巩固课程所学的理论知识，为以后工作打下基础。
二、要求：
每位同学从所给题目中选择一个作为本次课程设计的主题，使用FlashActionScript3.0整理一个小游戏或交互场景动画，设计要求如下：
1.作品主题积极向上，内容健康完整；
2.作品中的游戏主角或场景须为自己独立创作，并自己编写程序完成游戏或场景功能；
3.作品中要充分利用所学知识进行整理，功能相对完整，运行流畅，画面美观，形式生动活泼，观赏性实用性强；
4.撰写不少于3000字的报告，报告结构合理，语句通顺，能够说明整理过程和原理。
5.同时上交作品文件（SWF及FLA文件两种格式）和课程设计报告。
三、时间与地点：
时间：
2010.1.5—2010.1.15；上午8：
00—11：
30；下午13：
30—15：
30
地点：
西3#实验楼204
四、进度计划：
1月4日选题
1月5日搜集资料，确定选题
1月6日编写剧本
1月7-8日设计分镜台本并准备素材绘制主要角色及场景
1月11日动画整理
1月12-14编写程序及测试完善
1月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.导入相应的类
importflash.events.MouseEvent;
importflash.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）;
pan.lan.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.单击颜色按钮时笔头的颜色变为按钮颜色
varcolorInfo:
=bi.bitou.transform.colorTransform;
//定义ColorTransform对象，用来保存产颜色
（1）笔头变成黑色函数
functionmakeHei（event:
MouseEvent）:
void{
colorInfo.color=0x000000;//将黑色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
functionmakeBai（event:
MouseEvent）:
void{
colorInfo.color=0xFFFFFF;//将白色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（2）笔头变成绿色函数
functionmakeLv（event:
MouseEvent）:
void{
colorInfo.color=0x00cc00;//将绿色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（3）笔头变成黄色函数
functionmakeHuang（event:
MouseEvent）:
void{
colorInfo.color=0xffff00;//将黄色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（4）笔头变成蓝色函数
functionmakeLan（event:
MouseEvent）:
void{
colorInfo.color=0x0000ff;//将蓝色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（5）笔头变成紫色函数
functionmakeZi（event:
MouseEvent）:
void{
colorInfo.color=0x9900ff;//将紫色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（6）笔头变成淡蓝色函数
functionmakeDanLan（event:
MouseEvent）:
void{
colorInfo.color=0x00ffff;//将淡蓝色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（7）笔头变成红色函数
functionmakehong（event:
MouseEvent）:
void{
colorInfo.color=0xff0000;//将红色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（8）笔头变成橘黄色函数
functionmakejuhuang（event:
MouseEvent）:
void{
colorInfo.color=0xff6600;//将橘黄色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（9）笔头变成粉红色函数
functionmakefenhong（event:
MouseEvent）:
void{
colorInfo.color=0xff00ff;//将粉红色保存在colorInfo中
bi.bitou.transform.colorTransform=colorInfo;
//将笔头（实例名bi.bitou）的颜色改为colorInfo的颜色
}
（10）笔头变成深绿色函数
functionmakeshenlv（event:
MouseEvent）:
void{
colorInfo.color=0x006600;//将深绿色保存在colorInfo中
b
升级会员 