flash游戏多媒体课设

武汉理工大学华夏学院
课程设计报告书
课程名称：《多媒体技术应用》课程设计
题目：flash游戏的设计与制作
系名：信息工程系
专业班级：计算机1102班
姓名：夏俊
学号： 10210410210
指导教师:张玉蓉
2012年 6 月 29日
课程设计任务书
学生姓名：夏俊专业班级：计算机1102
指导教师：张玉蓉工作单位：信息工程系
设计题目：**flash游戏的设计与制作
初始条件：
要求较全面地理解、掌握和综合运用所学的多媒体方面的理论知识，会用photoshop进行图片处理，会用flash制作简单动画，以及用flash制作简单的游戏。

要求完成的主要任务：
用flash设计制作简单的游戏，比如拼图游戏，走迷宫等游戏，以及相关文档的制作。

要求有明确的主题，内容健康向上，互动性强，声形并茂，有较强的动态的视觉特效。

主要任务：
1. 完成整个游戏的设计及制作；经教师检查及答辩；
2. 写出规范的课程设计说明书，课程设计报告采取统一格式；详细叙述设计的主要内容以
及设计的具体思路，在报告中要有个人总结和心得。

3. 课程设计结束后交设计说明书等文档，设计作品以姓名命名，并以班集体为单位刻盘。

4. 文档雷同者按不及格处理；
设计报告撰写格式要求：
要求层次清楚、整洁规范、不得相互抄袭，凡正文内容有整段完全相同者一律以抄袭论处。

设计报告正文字数不少于0.2万字（不包括附录）。

第1级（章）题序和题名用黑体三号字，第2级（目）题序和题名用黑体小四号字，第3级（条）题序和题名用黑体小四号字，正文内容用宋体五号字(英文用新罗马体)，多倍行距1.25。

报告内容一律使用A4打印纸计算机打印，页码在页下居中标明。

必须使用国家公布的规范字。

页面设置：上空2.5 cm，下空2.0 cm，左空2.5 cm，右空2.0cm（左装订）。

插图图面要整齐、美观，插图应与正文呼应，不能脱节。

每幅插图应有图序与图题，图序编号要连续，图序与图题间空一格且要放在插图下方居中处。

时间安排：
2012年6月25日布置课程设计任务；讲述设计目的、内容、时间安排与本次课程设计的
要求查阅资料，学生进行分析及总体设计，理清设计思路；
2012年6月 26日-28日按设计要求，查阅资料；进行设计及制作；
2012年6月 29日提交课程设计报告及相关文档。

指导教师签字：2012年 6 月25日
系主任签字：2012年6月25日
目录
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)
1 设计需求
1.1设计思想
我曾经在电脑上看到过很多用flash制作的游戏，这样的游戏简单精炼，有很好的互动性，我觉得可以利用在多媒体课程上学到的知识以及在课外上查阅资料来自己完成这个游戏的制作。

设计的思想就是让玩家先看整体图片的外观，等待玩家准备好了，就可以点击“Game Start”开始游戏，这个游戏的难度由玩家自己设置，可以把图片分割成不同的等份（最少是3*3，最多是8*8）若是玩家觉得游戏难度或者是任何的因素导致自己不想继续，可以点击“重新开始按钮”，继续新的游戏，游戏成功完成，界面会出现“你就是神的存在的”的字样，并提示你可以继续游戏。

1.2基本的界面介绍
整体完成之后的界面如图所示。

图1-1 游戏整体界面
图像下面的左侧是游戏提示信息“想证明自己是神的存在就开始游戏”，中间是“难度：4*4”，右边是一个按钮“Game Start”。

2 设计步骤
2.1素材的导入
单击【文件】->【导入】->【导入到库】，弹出【导入对话框】，如图2-1所示。

图2-1 把图片导入的库中
2.2背景的设计
步骤01 单击【插入】->【新建元件】菜单项，弹出【创建新元件】对话框，如图所示。

图2-2 新建元件
步骤02 在【名称】文本框中输入新元件的名称。

步骤03 在【类型】区域中选出【影片剪辑】，然后按下确定按钮即可。

步骤04 在这里要用到组的地方，组是将多个元件编好程序在一起，组就是一个函数。

文档大小是“560*420”，背景是黑色，用“平滑的铅笔工具”绘制出波浪形的背景，如图所示。

图2—3 背景界面
2.3按钮元件的设计
在这里一共有三个按钮，分别是“Game Start”“Game Again”“难度的调整”。

步骤01 首先新建三个按钮元件，分别命名为“开始游戏”，“再玩一遍”，“调整数字”。

步骤02 首先进入“调整数字”的元件，绘制一个小的三角形，填充色是“橙黄”，在“指针经过”和“按下”分辨添加关键帧，并将颜色改成“金黄”和“棕黄”。

三角形如图所示。

图2-4 三角形绘制
步骤03 在“点击”处添加关键帧，绘制成一个“橙黄”矩形。

状态图如图所示。

图2-5 矩形绘制
图2-6 “调整数字”按钮的不同时期的四个状态
步骤04 接着进入“开始游戏”的元件，绘制一个四角平滑的矩形，在弹起状态中将颜色类型变为“线性”，颜色面板中的调整如图所示。

图2-7 在弹起状态中将颜色如图配置
步骤05 在“指针经过”状态，将颜色进行更改，颜色面板中的调整如图所示。

图2-8 在指针经过状态中将颜色如图配置。

步骤05 在“按下”状态，将颜色恢复到“弹起状态”就行了。

步骤06 新建一个图层，在“按下”状态中添加文字“Game Start”，“开始”按钮的状态图如图所示。

图2-9 “开始游戏”按钮的不同时期的三个状态
步骤09 接着进入“再玩一遍”元件，操作方法跟“开始游戏”的大致相同，
就是在新建图层的时候把文本改成“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”,打开的界面如图
图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;
//存放了几张图片的mc
private var mc:SrcImg;
public function PuzzleDocument() {
col=4;
rectCanvas=new Rectangle(5,15,360,360);
rectTemp=new Rectangle(375,15,180,360);
txtTileNum.text=col+"X"+col;
mc=new SrcImg();
mc.stop();
scene=new Sprite();
addChild(scene);
//交换工作区的游戏信息深度，不交换的话后后面文字提示就在游戏区域的下面了
//swapChildren(mc,mcGameInfo);
swapChildren(scene,mcGameInfo);
bmpData=new BitmapData(mc.width,mc.height);
bmpData.draw(mc,new Matrix());
//使用位图数据创建位图对象
bmpMap=new Bitmap(bmpData);
bmpMap.x=rectCanvas.x;
bmpMap.y=rectCanvas.y;
scene.addChild(bmpMap);
//添加[开始游戏]，[再玩一边]按钮的事件侦听器
this.btnStart.addEventListener(MouseEvent.CLICK,btnStart_ClickHan dler);
this.btnReplay.addEventListener(MouseEvent.CLICK,btnReplay_ClickH andler);
this.btnPlus.addEventListener(MouseEvent.CLICK,btnPlus_ClickHandl er);
this.btnMinus.addEventListener(MouseEvent.CLICK,btnMinus_ClickHan dler);
}
//清除所有拼图碎片
private function clearTiles():void{
for(var i:uint=0; i<aTiles.length; i++){
scene.removeChild(aTiles[i]);
}
aTiles=[];
}
//初始化拼图分割线
private function initArea():void{
lineSprite=new Sprite();
lineSprite.graphics.lineStyle(1,0x000000,.2);
for(var i:uint=0; i<col-1; i++){
//横向分割线
lineSprite.graphics.moveTo(rectCanvas.x,rectCanvas.y+tileHeight*( i+1));
lineSprite.graphics.lineTo(rectCanvas.x+rectCanvas.width,rectCanv as.y+tileHeight*(i+1));
//纵向分割线
lineSprite.graphics.moveTo(rectCanvas.x+tileWidth*(i+1),rectCanva s.y);
lineSprite.graphics.lineTo(rectCanvas.x+tileWidth*(i+1),rectCanva s.y+rectCanvas.height);
}
addChild(lineSprite);
}
//初始化拼图碎片
private function initTiles():void{
//隐藏原始位图
bmpMap.visible=false;
clearTiles();
for(var i:uint=0; i<col; i++){
for(var j:uint=0; j<col; j++){
var tile:Tile=new Tile(tileWidth,tileHeight);
//从位图数据复制相应的像素到拼图碎片
tile.bmpTile.bitmapData.copyPixels(bmpData,new Rectangle(j*tileWidth,i*tileHeight,tileWidth,tileHeight),new
Point(0,0));
//设置拼图碎片序号
tile.index=i*col+j;
//拼图碎片可拖曳
tile.dragable=true;
//把碎片放置在临时区域
tile.x=rectTemp.x+(rectTemp.width-tileWidth)*Math.random();
tile.y=rectTemp.y+(rectTemp.height-tileHeight)*Math.random();
//添加碎片的拖曳事件
tile.addEventListener(MouseEvent.MOUSE_DOWN,dragTile,false);
tile.addEventListener(MouseEvent.MOUSE_UP,stopDragTile,false);
//添加到数组
aTiles.push(tile);
scene.addChild(tile);
}
}
}
//[开始游戏]按钮方法
private function btnStart_ClickHandler(e:MouseEvent):void{ //计算碎片宽度
tileWidth=rectCanvas.width/col;
//计算碎片高度
tileHeight=rectCanvas.height/col;
//计算碎片总数
totalTiles=col*col;
mc.visible=false;
//隐藏游戏信息所在的影片剪辑
mcGameInfo.visible=false;
//隐藏[开始游戏]按钮
btnStart.visible=false;
//显示[再玩一边]按钮
btnReplay.visible=true;
//初始化分割线
initArea();
//初始化碎片
initTiles();
}
//[再玩一边]按钮方法
private function btnReplay_ClickHandler(e:MouseEvent):void{ mc.visible=true;
mcGameInfo.visible=false;
mc.gotoAndStop(Math.ceil(Math.random()*mc.totalFrames));
removeChild(lineSprite);
bmpData=null;
bmpData=new BitmapData(mc.width,mc.height);
bmpData.draw(mc,new Matrix());
bmpMap.bitmapData.copyPixels(bmpData,new
Rectangle(0,0,rectCanvas.width,rectCanvas.height),new Point(0,0));
bmpMap.visible=true;
btnStart.visible=true;
btnReplay.visible=false;
clearTiles();
}
//[增加碎片]按钮方法
private function btnPlus_ClickHandler(e:MouseEvent):void{ if(col<8){
col++;
}
txtTileNum.text=col+"X"+col;
}
//[减少碎片]按钮方法
private function btnMinus_ClickHandler(e:MouseEvent):void{ if(col>3){
col--;
}
txtTileNum.text=col+"X"+col;
}
//拖曳碎片方法
private function dragTile(e:MouseEvent):void{
var tile:Tile=Tile(e.currentTarget);
if(tile.dragable){
scene.setChildIndex(tile,scene.numChildren-1);
tile.startDrag();
}
}
//停止拖曳碎片方法
private function stopDragTile(e:MouseEvent):void{
//捕获鼠标事件的目标对象
var tile:Tile=Tile(e.currentTarget);
//释放拖曳
tile.stopDrag();
//计算被拖曳的碎片在场景中的正确位置
var
targetX:Number=tile.index%col*tileWidth+tileWidth/2+rectCanvas.x;
var
targetY:Number=Math.floor(tile.index/col)*tileHeight+tileHeight/2+rec tCanvas.y;
var targetPoint:Point=new Point(targetX,targetY);
//计算释放拖曳时鼠标位置
var mousePoint:Point=new Point(e.stageX,e.stageY);
//判断以上两个位置是否足够接近，如果距离小于碎片宽度的一半，表示释放位置正确
if(Point.distance(mousePoint,targetPoint)<tileWidth/2){
//如果单击的是已经摆放正确的碎片，就直接返回，不操作
if(!tile.dragable){
return;
}
//不能继续拖曳
tile.dragable=false;
//放置到底层
scene.setChildIndex(tile,1);
tile.x=targetX-tileWidth/2;
tile.y=targetY-tileHeight/2;
totalTiles--;
if(totalTiles==0){
mcGameInfo.visible=true;
totalTiles=col*col;
mcGameInfo.gotoAndStop("Success");
}
}
}
}
}
Tile文件的源代码
package classes{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
public class Tile extends Sprite {
public var bmpTile:Bitmap; //存放拼图碎片图象的位图对象
public var index:uint; //拼图碎片序号
public var dragable:Boolean; //是否可拖曳
public function Tile(w:Number,h:Number) {
bmpTile=new Bitmap();
bmpTile.bitmapData=new BitmapData(w,h); //创建给定大小的位图数据
this.addChild(bmpTile);
}
}
}
2.6导入音乐
在主场景中新建一个图层，在第一帧中将库中的音乐导入即可。

3 设计心得和总结体会
设计心得：这次的课程设计让我受益匪浅，让我不仅巩固了在课堂上学到的知识，还让我自己创造了喜欢的作品，最深刻的一点是让我明白flash也可以添加像软件一样的添加很多的代码，用代码的功能进行实现。

这次也好好的考量了我的编程水平，但是在这个过程中，我发现了很多自己的不足，比如在调试代码的过程中，我是很难发现代码的错误，让我明白自己在这个方面还是有很大的缺陷。

我觉得老师上课讲的东西下课之后一定要好好的复习，否则连基本的功能都不能实现。

总结体会：要是想要精通一门技术，就必须下很多的功夫来实践，不能粗糙的完成，否则只是敷衍了事，是不能完成任务的，我想要看看自己完成的实力，或者是自己的极限在哪里。

4 答辩环节
签名：
年6月29日。