Flash游戏设计.doc

1、*级信息管理与信息系统专业毕 业 设 计 论 文题 目：Flash游戏设计设 计 人： * 指导教员： *Flash游戏设计 摘要Flash是当今网络上最流行的动画制作工具，具有出色的图形处理能力和丰富的画面表现力，而优秀的交互性能又使它成为游戏制作的重要工具之一，目前网络上大量的优秀作品采用Flash制作。相对于其他常用的开发工具（例如Visual C+、Visual C#、Visual Basic、Delphi等），Flash技术门槛较低，只要经过短时间的学习就可以制作出简单的游戏。本文主要阐述通过运用Flash CS3软件设计与制作“打鸭子”游戏的过程，分析游戏的代码设计。关键词：Fla

2、sh ，ActionScriptFlash Game ProductionAbstract Autor* Tutour* Nowadays, Flash is the most popular cartoon-making tool on internet with excellent image-processing ability and abandunt expressive force. And with the function of great interaction it has become one of the most important game-making tools

3、. As is known, so far, large numbers of great works have been made by Flash. In contrast with other common developing tools (such as Visual C+,Visual C#,Visual Basic,Delphi,etc), Flash is easy to learn and handle, i.e. it takes less time to learn to produce the simple games with the software. This t

4、hesis stresses the process of making the “Duck-shooting Game” with application of Flash CS3. Key words: Flash ，ActionScript目 录第一章 绪论11.1前言11.2 Flash的历史11.3 ActionScript介绍21.4 Flash设计游戏的优势与弱点2第二章 “打鸭子”游戏设计42.1游戏简介及规则42.2打鸭子游戏素材42.2.1鸭子的头部绘画42.2.2鸭子的身体绘画52.2.3死鸭子的绘画62.2.4制作鸭子飞行动画62.2.5游戏场景的绘制92.2.6元件调

5、整12第三章 游戏的代码设计153.1Flash游戏的“鸭子”的类153.2 创建Flash游戏的文档类18结束语26致 谢27参考文献27III第一章 绪论1.1前言Flash是美国著名的多媒体软件公司Macromedia开发的矢量图形编辑和交互式动画制作软件。该软件的功能十分强大，在网页设计和多媒体制作等领域得到了广泛的应用，已经成为制作网络互动游戏的标准软件。Flash从Flash 40到Flash CS3，随着Flash技术的发展，Flash的功能越来越强大，使得制作较为复杂的互动游戏成为可能。由于Flash互动游戏能够满足网络媒体的传输需要，越来越多的传统游戏开发人员转为Flash用

6、户，广大闪客为了兴趣爱好也来制作Flash游戏娱己娱人，同时，商家把Flash互动游戏作为新产品推广和营销的重要手段。 1.2 Flash的历史Flash是一种交互式矢量多媒体技术，它的前身是Future Wave公司开发的Future Splash Animator，这是世界上第一个商用的矢量动画设计软件，当时Future Splash Animator最大的两个用户是微软和迪斯尼。出于在线交互动画的需要，Future Splash Animator提供了一些可执行的脚本指令与扩展接口来适应不同公司工业级动画制作流程和网路上的用户交互，这为Flash成为一款既具备开发能力又具备设计能力的与众

7、不同的软件奠定了基础。1996年11月，Macromedia公司收购了Future Wave公司，来完善自己当时的拳头产品Director，并在1997年6月推出了Flash2.0。1998年5月又推出了Flash3.0。但是这些早期版本的Flash所使用的都是Shockwave播放器。自1999年6月Macromedia推出Flash4.0以后，Flash4.0以后，Flash开始有了自己专用的播放器“Flash Player”，但仍然使用了原有的扩展名：.SWF(Shockwave Flash)。2000年8月Macromedia推出了Flash5.0，Flash5.0中的ActionSc

8、ript已有了长足的发展，并且开始了对XML和Smart Clip（智能影片剪辑）的支持。ActionScript的语法开始定位为发展成为一种完整的面向对象的语言，并且遵循ECNMAScript的标准，就像JavaScript那样。2002年3月Macromedia推出了Flash MX(也就是测试版中的6.0，后来为了配合MX产品线，正式命名为MX)。Flash6.0开始支持外部jpg和MP3的调入，同时也增加了更多的内建对象（例如直接的绘画控制），提供了对HTML文本的更精确的控制，并且引入了SetInterval超频帧的概念，同时改进了SWF文件的压缩技术。2003年8月Macromed

9、ia推出了Flash MX2004。Flash MX2004增加了许多新的功能，包括对移动设备和手机、Pocket PC的支持（以及像素字体的清晰显示）；支持对HTML文本中内嵌图像和SWF；FLV外部视频的支持；对Adobe PDF及其他文档的支持等。此外，数据绑定、Web服务和XML的预建数据连接器、项目经理、源代码控制等功能也得到了进一步完善。2005年8月Macromedia推出了Flash 8.01.新增及改进功能包括：滤镜效果、混合模式、Flash视频与新的编码技术实时位图处理，增强了与Javascript之间的通信能力、Mobile模拟器自定义缓冲、改进的面板管理功能及脚本助手等

10、。2007年3月，Flash CS3正式发布，新增功能包括：彩色边框、位图元件库项目对话框、滤镜复制和粘贴、复制和粘贴动画、将动画复制ActionScript 3.0、将动画转换为ActionScript、高级调试器、ActionScript 3.0的开发、高级QuickTime导出、省时编码工具等。1.3 ActionScript介绍 ActionScript是针对Adobe Flash Player运行环境的编程语言，它为Flash应用程序提供了强大的交互性和数据处理能力。ActionScript代码通常被编译器编译成“字节码格式”，字节码嵌入SWF文件，SWF文件由Flash Playe

11、r中的ActionScript虚拟机(AVM)执行。自Flash诞生以来，ActionScript就随着Flash的发展不断进步，早期的ActionScript语言主要用来控制帧的跳转和鼠标、键盘交互。Flash 5.0之后的ActionScript发展成为一种Prototype语言，语法接近Javascript，增加了XML和Smart Clip（智能影片剪辑）的支持，并且在后来的Flash MX中得到加强。Flash MX2004和Flash 8都采用了更优秀的ActionScript 2.0，遵循ECMAScript标准，支持变量检测和Class类语法，虽然此时的Classes仍然不是真

12、正意义上的“类”。随着Flex 2.0和Flash CS3的发布，ActionScript 3.0正式登上舞台。ActionScript 3.0提供了可靠的编程模型，脚本编写大大超越了早期版本的ActionScript。能够方便地创建拥有大型的数据集和面向对象的可重用代码库的高度复杂应用程序。采用新型虚拟机AVM2，实现了性能的改善。ActionScript 3.0代码的执行速度比旧式ActionScript代码快10倍。1.4 Flash设计游戏的优势与弱点优势： 1矢量图形绘制，放大不失真 2文件量小，适于网络传输 3跨平台、跨设备，具有良好的富媒体客户环境 4ActionScript 5

13、丰富的媒体支持功能，使产品更美观 6流式播放，下载速度快 7图形界面，易学易用 弱点： 1对于复杂图形，运算速度慢 2位图、三维图像及视频播放能力弱第二章 “打鸭子”游戏设计2.1游戏简介及规则进入游戏，初始时会有10颗子弹，会在下方的状态栏中显示出来，鸭子的数量也是10只，会从场景的左下角或者右下角飞出来，每隔一段时间会添加一只新鸭子到场景中，如果开枪击中鸭子，则在状态栏中显示为一个“”，如果没有击中则显示为一个“X”。直到10颗子弹都打完。鸭子被打中6只即可以过关，如少于6只游戏就结束。游戏会根据当前是第几关来计算鸭子出场的间隔还有鸭子的飞行速度，用这种方式来增加每一关的难度。这样过的关数

14、越多鸭子飞行速度越快，出场时间间隔也越短，难度也就越大。2.2打鸭子游戏素材2.2.1鸭子的头部绘画（1）现在开始为打鸭子游戏准备素材。因为游戏场景大约是500*400像素，所以鸭子只有100像素左右。首先从鸭子头部开始画，因为是卡通图像，可以直接画一个圆作为头部，填充为灰色，然后按下【Ctrl+G】作为一个组，如图2-1所示。图2-1（2）再画出鸭子的眼睛也是一个圆，填充为白色，按下【Ctrl+G】作为一个组，然后选中拖动到头部合适位置。鸭子的眼珠部分，把眼睛部分复制，然后用任意变形工具缩小即可，然后填充为黑色。再添加高光，同样用复制的方法，调整大小然后填充为白色即可，如图2-2所示。图2-

15、2（3）接下来我们绘制鸭子的嘴巴，同样可以用一个椭圆，然后用【选择工具】调整椭圆的形状，将它调整得略微向上翘，然后画出鸭子的嘴巴下半部分，再进行一下调整，然后为嘴巴填充一些颜色，填充成淡土黄色，再将不要的线条删掉，最后全部选中嘴巴，最后按下【Ctrl+G】作为一个组，移动到头部相应位置。鸭子的头部就画好了，如图2-3所示。图 2-32.2.2鸭子的身体绘画(1)使用钢笔工具绘制出大概的形状，然后将曲线封闭起来，调整一下形状，填充为灰色。再用【线条工具】绘制出腹部，调整线条曲度，填充为白色，删除多余线条。最后按下【Ctrl+G】 作为一个组。如图2-4和2-5所示。 图2-4 图2-5（2）下面

16、画鸭子的脚部，本身鸭子在游戏中很小，所以脚部不用画的很精细。使用【钢笔工具】画出轮廓，填充颜色。同样按下【Ctrl+G】 作为一个组，移动到相应位置，这样鸭子的脚部就画好了。如图2-6所示。图2-6(3)开始绘制鸭子的翅膀，同样使用钢笔工具，画出鸭子的翅膀及羽毛，封闭翅膀后填充颜色为灰色，删除多余的线条，最后按下【Ctrl+G】 作为一个组，如图2-7。然后调整好鸭子的身体位置。鸭子的另外一支翅膀用复制方式，任意变形即可得到，这样一只鸭子就全部画完了。如图2-8所示。 图2-7 图2-82.2.3死鸭子的绘画死鸭子的绘画只需要在前面基础上加以修改即可，将身体各部位进行变形调整即可。效果如图2-

17、9所示。图2-92.2.4制作鸭子飞行动画（1）首先选择鸭子，然后选择“转换为元件”命令或按F8键，将它创建为一个影片剪辑，取名为 mcDuck 如图2-10所示。 图2-10（2）选中鸭子的头部，也设置成一个影片剪辑。后将头部放入一个新的层中，新层取名为Head。同样我们把翅膀的各部分分别放入新的层中，取名为rightwing和leftwing，再把身体部分放入一个新的层中，新层取名为 body。如图2-11，然后将翅膀转换为图形元件，如图2-12所示。图2-11图2-12（3）调整各部分中心的位置，首先选中头部，使用任意变形工具，选择中间的圆点将它拖动到靠近脖子的部位，这样鸭子的头部就会以

18、这个部位为中心进行旋转，然后我们调整翅膀的中心位置，将翅膀的中心调至翅膀的根部。（4）现在我们制作鸭子眨眼的效果。首先选中头部进行编辑，然后选择鸭子的眼睛，将它剪切，随后新建一个图层，将它粘贴在原来的位置，然后在40帧的位置创建一个关键帧，在这里编辑眼睛，将不需要的地方删除，然后绘制一条线作为鸭子闭眼的效果，然后再创建几帧，这样就可以看见鸭子眨眼的效果了，如图2-13所示。图2-13（5）开始制作鸭子翅膀扇动动作，首先将body层放到leftwing层下面。然后选中其中的一个翅膀在第6帧的位置创建关键帧，再将翅膀用任意变形工具进行压扁和缩放调整，在第7帧位置创建关键帧，再将翅膀反转进行一定的调

19、整。在第11帧的位置进行拉伸，可以看到鸭子左侧翅膀扇动的效果，再为leftwing层中的关键帧创建补间动画，鸭子的翅膀落下后需要抬起，用相似的方法，然后在第20帧的位置复制第1帧翅膀的形状，然后创建补间动画。另一支翅膀用同样的方法即可完成。如图2-14所示。图2-14(6)退回到场景调整影片的帧频为24帧每秒，选择选择“测试影片”命令或按【Ctrl+Enter】组合键，现在可以看到影片的预览，鸭子一边在扇动翅膀一边在眨眼。如图2-15所示。图2-15（7）选择事先画好的死鸭子，按下【Ctrl+X】将它剪切，然后选中飞行状态的鸭子按F8，创建一个新的影片剪辑取名 Duck，进入编辑，保留第一帧，

20、在第二帧的位置创建关键帧，将内容删除，按【Ctrl+V】将死鸭子粘贴进来，这样通过移动帧可以看见鸭子的两种状态。最后在库中新建文件夹取名为 Ducks。将鸭子相关的素材全部放到这个文件夹中。现在游戏素材中的鸭子部分已经准好了。如图2-16所示。图2-162.2.5游戏场景的绘制(1)天空的绘制，将它调整为宽550，高400，位置 x：0，y：0，填充颜色类型为：线性。填充颜色为#3333FF和#66ccff。最后选中天空按下【Ctrl+G】 作为一个组。效果如图2-17所示。图2-17（2）云彩的绘制，首先将绘制的天空图层锁定，再新建一个图层，在新图层中绘制云彩。使用椭圆工具将颜色填充改为纯色

21、，颜色设为白色。而后画出一些不规则的且叠加的椭圆，然后删除不需要的线条即可。用同样的方法多绘制一些云彩。如图2-18所示。图2-18（3）山脉的绘制，使用钢笔工具随意画出一些线条，将曲线闭合使用线性填充颜色为绿色，然后将多余的部分删除即可。下面为山脉绘制倒影，将山脉复制后倒转调整它的颜色，渐变颜色为透明 Alpha 20%。 如图2-19所示。图2-19（4）草丛的绘制，同样使用钢笔工具画出草的形状，将曲线闭合使用纯色填充为绿色。再将草的线条平移填充另外一种颜色，将多余的部分删除。复制已经绘制好的草丛进行变形扭曲，创建一些不同形态的草丛。最后按下【Ctrl+G】 作为一个组将它们各自作为一个组

22、。随意放在不同位置。将草选中转换为图形元件，起名为“grass1”“grass2”等。最后为草丛绘制倒影，草丛的倒影与山脉的倒影方法基本相同。如图2-20所示。图2-20（5）最后将所有绘制好的场景放在同一层，同一帧下面。选择控制测试影片命令，得到如下效果，如图2-21图2-21(6)状态栏的绘制，使用矩型工具进行绘制，调整颜色为黑色渐变，开始位置透明度设置为70%，结束透明度设置为40%. 然后调整填充方向，删除两边线条，最后按下【Ctrl+G】 作为一个组。（7）绘制子弹与是否击中的标示，首先使用矩型工具绘制出子弹，将弹头设置为红色，弹体设置为黄色的渐变，调整一下大小放到状态栏中。接下来绘

23、制击中的标示，使用一个圆形，填充红色，边线设粗为白色。按下【Ctrl+G】 作为一个组，调整大小后放到状态栏中。未命中标示，就用矩型工具画一个X., 按下【Ctrl+G】 作为一个组，调整大小后放到状态栏中即可。如图2-22所示。 图2-22（8）枪准心的绘制，使用椭圆工具画出一个正圆，大小为16*16像素颜色为红色，选中圆的边线复制粘贴。然后使用任意变形工具进行缩放，这样绘制出一个同心圆，再使用矩型工具将两个形状对齐，让矩型变成一个“十”字，放到圆上，再将多余的部分删除，最后画一个十字线，放到画的圆中即可。将准心选中创建为影片剪辑“mcAim”，如图2-23所示。 图2-23（9）“开始游戏

24、”按钮的绘制 ，首先选用文本工具，填写“开始游戏”字样，调整字体的大小，然后使用基本矩型工具绘制一个矩型，大约100*24像素。调整属性为圆角矩型，填充为渐变浅蓝蓝色。再使用对齐工具将文字和矩型对齐。最后将图形转换为“按钮元件”，名称为“btStart”，如图2-24所示。 图2-242.2.6元件调整（1）选中子弹，将子弹设置成影片剪辑，取名“mcBullet”。选中击中标示，将击中标示设置成影片剪辑，取名“mcHit”。选中未击中标示，将未击中标示设置成影片剪辑，取名“mcLose”。这样就看到所有的元件都在库面板里了，如图2-25所示。图2-25（2）从场景中将元件删除，包括鸭子，子弹，

25、击中标示，未击中标示，准心。只保留一个开始按钮。然后在场景状态栏中添加文本框，选择动态文本，取名为“txtScore”用来记录打鸭子的得分。 再新建一个文本框，取名“txtlevel”，用来显示当前的关数。最后需要建立一个“静态文本”内容为“GameOver”将它制作成一个影片剪辑，取名“mcGameOver”如图2-26所示。图2-26（3）导入声音 选择“文件导入导入到库”然后从窗口中我们需要导入的声音，这样就可以在库面板中看到声音文件，现在为声音文件指定一个类，右键单击声音文件，选择“链接”打开“链接属性”面板，然后在“为ActionScript导出”这项勾选，修改类名为“Shoot”，

26、单击确定，如图2-27所示。因为不需要单独为“Shoot”类编写代码，所以可以让ActionScript自动生成一个类。 图2-27（4）为其他影片剪辑指定类型，首先右键单击mcAim文件，选择“链接”打开“链接属性”面板，然后在“为ActionScript导出”这项勾选，修改类名为“Aim”，单击确定，如图2-28所示。剩下的子弹，击中，未击中的修改方式同准心方法一样。图2-28第三章 游戏的代码设计3.1Flash游戏的“鸭子”的类首先到工作目录新建一个文件夹，起名为“classes”将以后所有“.as”文件放到这个文件夹中，然后新建一个ActionScript文件，这个文件将作为鸭子的类

27、 ，书写下列代码。package classesimport flash.display.MovieClip;import flash.events.*; /事件包public class Duck extends MovieClip /创建类，创建类名叫Duck从MovieClip里面派生private const WIDTH:Number = 550; /场景的宽为550private const HEIGHT:Number = 400; /场景的高为400private var _hspeed:Number; /鸭子水平方向速度private var _vspeed:Number; /垂

28、直private var _dir:int; /运动方向private var _live:Boolean; /生命private var _tmpY:Number; /鸭子在Y轴上的击中位置public var erasable:Boolean; static public var score:Number = 100; /规定鸭子得分public function Duck() /创建构造函数this.gotoAndStop(1); /在影片载入的时候将影片剪辑定位到第一帧dir = 1; this.live = true;addEventListener(Event.ENTER_FRAM

29、E,fly); /添加事件侦听器规定鸭子的运动方式，鸭子从场景的左下角或者右下脚起飞，然后沿着斜线向上飞行。如果碰到左边界或者右边界的时候会调转方向，因此需要一个fly方法，用它来执行鸭子的飞行动作。它的调用是用ENTER_FRAME这个事件来进行的，也就是说进入帧的时候调入这个事件，所以需要一个参数Event 。public function fly(e:Event):voidif(this.x WIDTH - this.width/2) /鸭子在Y轴位置大于（场景宽度本身宽dir = -1; 度/2），重新调转方向if(this.y 0) /如果水平方向速度0，则继续递减hspeed -=

30、 hspeed/10;this.x += hspeed * dir;if(this.y HEIGHT) /在Y轴方向位置超过场景大小，则把鸭子删除this.erasable = true;staticpublicfunctionbuildDuck(startX:Number,startY:Number,hspd:Number,vspd:Number):Duckvar duck:Duck = new Duck();duck.x = startX;duck.y = startY;duck.hspeed = hspd;duck.vspeed = vspd;return duck;public fun

31、ction set hspeed(value:Number):void_hspeed = value;public function get hspeed():Numberreturn _hspeed;public function set vspeed(value:Number):void_vspeed = value;public function get vspeed():Numberreturn _vspeed;public function set dir(value:int):void /注意：鸭子方向改变的同时也需要改变hespeed的朝向，可以设置dir属性来实现/_dir =

32、 value;this.scaleX = _dir * -1; public function get dir():intreturn _dir;public function set live(value:Boolean):void_live = value;if(_live = false) /在鸭子被击中的时候记录tmpY的值this._tmpY = this.y;this.removeEventListener(Event.ENTER_FRAME,fly); /删除鸭子的飞行动作this.addEventListener(Event.ENTER_FRAME,die); /增加鸭子的死亡

33、动作public function get live():Booleanreturn _live;3.2 创建Flash游戏的文档类（1）新建ActionScript文件，将程序放在classes包下，引入一些需要用到的包，并创建这个类，取名叫“GameDoc”，并打开duck1.fla文件修改文档类为“classes.GameDoc”。package classesimport flash.display.*;import flash.events.*;import flash.text.*;import flash.ui.Mouse;import flash.utils.Timer;imp

34、ort flash.media.Sound;public class GameDoc extends MovieClip public function GameDoc() (2)回到public class GameDoc extends MovieClip进行代码编写。 private const WIDTH:Number = 550; private const HEIGHT:Number = 400;private var arrDucks:Array = ; /设置保存鸭子数组private var arrBullets:Array = ; /设置保存子弹数组private var

35、arrRecord:Array = ; /记录是否击中目标private var arrFlags:Array = ; /记录是否击中标示private var crtLevel:int = 1;private var interval:int; / 记录鸭子出场间隔private var timer:Timer; /记录时间间隔private var hspeed:Number = 5; private var vspeed:Number = -1;private var bulletNum:int = 10; /子弹数量为10private var bulletCount:int = 0;

36、 /射出子弹数量，初始值为“0”private var totalscore:int = 0; private var remainNum:int = 0; /剩余鸭子的数量private var shotNum:int = 0;private var mcAim:MovieClip; /创建准心private var sndShoot:Sound; /创建声音（3）创建准心的实例，添加到场景中。准心初始时应被隐藏，并且“GameOver”影片剪辑也隐藏掉。创建单击开始时按钮调用的方法，首先将鼠标隐藏，将当前关设置为第一关。让准心可见，准心跟随鼠标移动。让开始按钮可见，并为开始按钮添加“事件侦

37、听器”public function GameDoc()mcAim = new Aim();stage.addChild(mcAim);mcAim.visible = false; /准心初始被隐藏mcGameOver.visible = false; /将GameOver影片剪辑设为隐藏sndShoot = new Shoot();btStart.addEventListener(MouseEvent.CLICK,startGame);private function startGame(e:MouseEvent):voidMouse.hide();crtLevel = 1;mcGameOv

38、er.visible = false;interval = 2000; /设置时间为200毫秒mcAim.visible = true; /让准心可见mcAim.startDrag(true); /让准心移动btStart.visible = false; /让开始按钮可见initLevel();（4）创建向场景中添加子弹的方法，利用循环for语句完成。子弹位置距场景左方大约20像素，以10个像素为间隔向右排列，在Y轴方向大约是离场景底部20像素。然后向子弹数组中添加。 private function createBullets():voidfor(var i:int = 0;i bulle

39、tNum; i+)var bullet:Bullet = new Bullet();bullet.x = 20 + 10*i;bullet.y = HEIGHT - 25;arrBullets.push(bullet);stage.addChild(bullet);（5）清除子弹的方法，如果数组中还有子弹，从场景中将子弹清除 private function clearBullets():voidif(arrBullets.length)for(var j:int = 0;j= bulletNum)return;sndShoot.play(); /插入枪声stage.removeChild(arrBulletsarrBullets.length-1); /将子弹排除从后往前删arrBullets.pop();for(var i:int = 0;iarrDucks.length;i+)var duck:Duck = arrDucksi as Duck;if(duck.live & duck.hitTestPoint(e.stageX,e.stageY,true)duck.live = false;arrRecordbulletCount = true;break;elsearrRecordbulletCount