天津理工大学
中环信息学院
课程设计报告
—《二维动画制作》
设计题目： ************
学 号： ********
系 别： 计算机工程系
专业班级： ****专业 **** 级 * 班
姓 名： *****
指导教师： 张 鹏
成 绩：
学 期： 2015～2016学年第一学期
2015年 ** 月 ** 日
2
课程设计任务书
学生姓名： *** 专业班级： ************
指导教师： 张 鹏 工作单位： 计算机工程系
设计题目：******flash游戏的设计与制作
初始条件：
要求较全面地理解、掌握和综合运用所学的Flash方面的理论知识，用flash AS3.0制作简单的游戏。
要求完成的主要任务：
用flash设计制作简单的游戏，比如拼图游戏，走迷宫等游戏，以及相关文档的制作。要求有明确的主题，内容健康向上，互动性强，声形并茂，有较强的动态的视觉特效。
主要任务：
1. 完成整个游戏的设计及制作；经教师检查及答辩；
2. 写出规范的课程设计说明书，课程设计报告采取统一格式；详细叙述设计的主要内容以及设计的具体思路，在报告中要有个人总结和心得。
3. 课程设计结束后交设计说明书等文档，设计作品以姓名命名，并以班集体为单位刻盘。
4. 文档雷同者按不及格处理；
设计报告撰写格式要求：
要求层次清楚、整洁规范、不得相互抄袭，凡正文内容有整段完全相同者一律以抄袭论处。设计报告正文字数不少于2千字（不包括附录）。
第1级（章）题序和题名用黑体三号字，第2级（目）题序和题名用黑体四号字，第3级（条）题序和题名用黑体小四号字，正文内容用宋体小四号字(英文用新罗马体)，多倍行距1.25。报告内容一律使用A4打印纸计算机打印，页码在页下居中标明。必须使用国家公布的规范字。
页面设置：上空2.5 cm，下空2.0 cm，左空2.5 cm，右空2.0cm（左装订）。
插图图面要整齐、美观，插图应与正文呼应，不能脱节。每幅插图应有图序与图题，图序编号要连续，图序与图题间空一格且要放在插图下方居中处。
时间安排：
2015年12月15日 布置课程设计任务；讲述设计目的、内容、时间安排与本次课程设计的要求查阅资料，学生进行分析及总体设计，理清设计思路；
2015年12月 17日-2016年1月5日 按设计要求，查阅资料；进行设计及制作；
2016年1月5日 提交课程设计报告及相关文档。
3
目录
1 设计需求„„„„„„„„„„„„„„„„„„„„4
1.1设计思想………………………………………………………………………4
1.2基本的界面介绍………………………………………………………………4
2 设计步骤„„„„„„„„„„„„„„„„„„„„5
2.1素材的导入……………………………………………………………………5
2.2背景的设计……………………………………………………………………5
2.3按钮元件的设计………………………………………………………………6
2.4拼图素材的设计………………………………………………………………7
2.5输入动作的代码………………………………………………………………8
2.6导入音乐………………………………………………………………………15
3 设计心得和总结体会„„„„„„„„„„„„„„15
4 答辩环节„„„„„„„„„„„„„„„„„„„15
4
1 设计需求
1.1设计思想
我曾经在电脑上看到过很多用flash制作的游戏，这样的游戏简单精炼，有很好的互动性，我觉得可以利用在多媒体课程上学到的知识以及在课外上查阅资料来自己完成这个游戏的制作。设计的思想就是让玩家先看整体图片的外观，等待玩家准备好了，就可以点击“Game Start”开始游戏，这个游戏的难度由玩家自己设置，可以把图片分割成不同的等份（最少是3*3，最多是8*8）若是玩家觉得游戏难度或者是任何的因素导致自己不想继续，可以点击“重新开始按钮”，继续新的游戏，游戏成功完成，界面会出现“你就是神的存在的”的字样，并提示你可以继续游戏。
1.2基本的界面介绍
整体完成之后的界面如图所示。
图1-1 游戏整体界面
图像下面的左侧是游戏提示信息“想证明自己是神的存在就开始游戏”，中间是“难度：4*4”，右边是一个按钮“Game Start”。
5
2 设计步骤
2.1素材的导入
单击【文件】->【导入】->【导入到库】，弹出【导入对话框】，如图2-1所示。
图2-1 把图片导入的库中
2.2背景的设计
步骤01 单击【插入】->【新建元件】菜单项，弹出【创建新元件】对话框，如图所示。
图2-2 新建元件
步骤02 在【名称】文本框中输入新元件的名称。
步骤03 在【类型】区域中选出【影片剪辑】，然后按下确定按钮即可。
6 步骤04 在这里要用到组的地方，组是将多个元件编好程序在一起，组就是一个函数。文档大小是“560*420”，背景是黑色，用“平滑的铅笔工具”绘制出波浪形的背景，如图所示。
图2—3 背景界面
2.3按钮元件的设计
在这里一共有三个按钮，分别是“Game Start”“Game Again”“难度的调整”。
步骤01 首先新建三个按钮元件，分别命名为“开始游戏”，“再玩一遍”，“调整数字”。
步骤02 首先进入“调整数字”的元件，绘制一个小的三角形，填充色是“橙黄”，在“指针经过”和“按下”分辨添加关键帧，并将颜色改成“金黄”和“棕黄”。三角形如图所示。
图2-4 三角形绘制
步骤03 在“点击”处添加关键帧，绘制成一个“橙黄”矩形。状态图如图所示。
图2-5 矩形绘制
7 图2-6 “调整数字”按钮的不同时期的四个状态
步骤04 接着进入“开始游戏”的元件，绘制一个四角平滑的矩形，在弹起状态中将颜色类型变为“线性”，颜色面板中的调整如图所示。
图2-7 在弹起状态中将颜色如图配置
步骤05 在“指针经过”状态，将颜色进行更改，颜色面板中的调整如图所示。
图2-8 在指针经过状态中将颜色如图配置。
步骤05 在“按下”状态，将颜色恢复到“弹起状态”就行了。
步骤06 新建一个图层，在“按下”状态中添加文字“Game Start”，“开始”按钮的状态图如图所示。
图2-9 “开始游戏”按钮的不同时期的三个状态
步骤09 接着进入“再玩一遍”元件，操作方法跟“开始游戏”的大致相同，
8 就是在新建图层的时候把文本改成“Game Again”即可。
2.4拼图素材的设计
步骤01 新建两个“影片剪辑”元件，分别命名为“拼图素材”和“游戏开始提示信息”。
步骤02 接着进入“拼图素材”元件，首先把你想要给玩家拼图的素材一帧一帧拖拽到舞台。一共有12个关键帧。
步骤03 新建一个图层，在图层的第一帧上输入语句stop（）；在第12帧上按F5延续。状态图如图所示。
图2-10 “拼图素材”的状态图
步骤04 接着进入“游戏开始提示信息”元件，在第一帧输入文本“想证明自己是神一般的存在就开始游戏”的字样，在第七帧插入关键帧，并输入“你就是神一般的存在”，延续到第15帧，这两个字样如图所示。
图2-11 游戏开始提示信息”
图2-12 游戏成功之后的提示信息
步骤05 新建一个图层，在第一帧输入语句stop（）；在第七帧插入关键帧，延续到第15帧。状态图如图所示。
图2-13 游戏开始提示信息的状态图
2.5输入动作的代码
这个游戏的关键部分就是代码的补充，能不能完成游戏，就要看代码是不是严密，这时新建两个文件，分别是“PuzzleDocument”和“Tile”,打开的界面如图
9
图2-14 代码输入位置
PuzzleDocument文件中的源代码
package classes{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextField;
//import flash.ui.Mouse;
//import flash.geom.*;
import flash.display.SimpleButton;
public class PuzzleDocument extends MovieClip {
//各行各列拼图数量,拼图碎片总数=col*col
private var col:uint;
private var totalTiles:uint;
//画矩形
private var rectCanvas:Rectangle;
//临时存放拼图的矩形
private var rectTemp:Rectangle;
//拼图碎片宽度
private var tileWidth:Number;
//拼图碎片高度
private var tileHeight:Number;
//拼图碎片数组
private var aTiles:Array=[];
//拼图的位图数据
private var bmpData:BitmapData;
//拼图位图
private var bmpMap:Bitmap;
//存放位图和拼图碎片的工作区
private var scene:Sprite=new Sprite();
//存放拼图分割线的Sprite
private var lineSprite:Sprite;