flash游戏制作的设计与实现-基于Flash技术的动画设计

基于Flash技术的动画设计实现

——模拟神州六号的发射过程制作

 

 

［摘要］  神六发射成功，不仅是中国的骄傲，也是每个炎黄子孙的骄傲。本文以Flash动画形式展现了神州六号的发射全过程，涉及素材选取、动画制作、测试发布等环节的操作实现。

［关键字］  动画；设计

 

[Abstract] Absolute being six shoot successfully, not only is a Chinese pride, but also is each pride of descendant with yellow. This text emerged the blast-off whole process of the absolute being state No.6 with the Flash animation form, involving the material selection, the animation creation, test to release the operation realization of wait the link.

[Keyword] animation; design

Flash是Macromedia公司出品的，用在互联网上的，动态的，可实现互动的Shockwave。它的优点是体积小，可边下载边播放。Flash虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScript，用户也可作出互动性很强的动画来。

本文选用“神州六号”如何实现发射过程系统模块为设计总体，详细介绍从“打开发射塔”→“开始点火升空”→“助推器分离”→“1、2级分离”→“整流罩分离”→“展开太阳翼进入轨道”的整个制作过程。

从整体上讲，完成一个简单的Flash对一般的“闪客”来说是一件非常简单的事情，但是完成一个漂亮的动画设计，不是每个“闪客”都能完成的事情。它需要完成一系列的工作，如下：

（1）素材准备。我们从互联网上搜集跟该动画相关的素材，然后用图片处理软件进行加工，并处理成自己需要的素材。

（2）音乐。音乐可以说是动画中一个不可缺少的元素，给动画加入恰当的音乐，能给动画增添不少色彩。

（3）必要的工具。如笔、纸，用于绘制草图。

3.1 设计目标

从选题→创意→结构化分析→素材准备→动画分解制作→动画组合→动画程序编写，全面考虑作品的创造力、交互式、原创性、趣味性、功能性、技术性、积极性、相关性等。设计动画时如果兼顾以上知识点，主可延伸至互联网供大家分享。

设计流程如图1所示。

 

 

3.3 开发平台

动画采用Flash 8进行设计，以Photoshop CS3和Dreamweaver 8作为动画辅助制作软件。选用Photoshop CS3主要完成相关图片（素材）的处理（制作），选用Dreamweaver 8主要完成如何将制作成功的动画嵌入到网页中去。

4.1 设计步骤

1. 首页设计

基本上许多动画都会制作一个首页面，即第一个页面，这也是给浏览者的第一印象。用户通常会根据动画的一个页面来判断该动画的类型，以及对该动画的制作质量进行评价。所以这里我们也制作一个宣传页面，并且设置比较久的停留时间。需要注意的是，在动画停留的过程中可尝试让动画中要显示的内容逐步以动画形式显示出来，从而达到动静结合的效果。

（1）制作背景。依次单击“插入”|“新建元件”，弹出“创建新元件”对话框，选择“图形”选项，然后单击“确定”按钮。

（2）选择渐变工具，绘制如图2所示的图形效果。

（3）导入素材。单击“文件”|“导入”|“导入到库”，将会弹出“选择导入文件到库”对话框，在此对话框中，选择需要导入的火箭素材文件。然后打开“窗口”|“库”面板，并选中刚导入的文件，拖动到场景中。

（4）在动画的上、下、左、右增加4个黑色边框，在上边框中加入“神州六号的发射过程”，在下边框中加入“动画制作者：XiaoFan”。

2. 模块设计

新建一个图层，重命名为fanshe，在第271帧处右击，插入一个“普通帧”。导入神州6号的发射塔素材，并拖到场景中，同时在左上角输入文字“第1步：打开发射塔”，效果如图3所示。

在第340帧中插入一个关键帧，选择发射塔元件，在属性面板中选择“颜色”|Alpha选项，值设为100%，并用变形工具适当将其放大，将第270帧发射塔元件的Alpha值设置为0%。完成发射塔元件从无到有、从远到近的过程制作。

在第341帧中插入一个普通帧，导入发射塔元件2，在第370帧插入一个关键帧，并将发射塔元件2往右移动一段距离并右击，在弹出的菜单中选择“创建补间动画”选项。最终的效果如图4所示。

根据第1步模块的设计，模仿制作其他模块。

3. 尾页设计

通常来说，动画的最后页面也是非常重要的，这标志着一个动画即将制作完毕。

在第996帧中插入一个普通帧，导入相关的素材，并用文字工具输入自己喜欢的文字，效果如图5所示。

4.2 编程代码

动画设计时，要进行以下两部分编程：

（1）第1部分就是当影片播放之后，自动停止动画的播放。选择第996帧，单击“动作-帧”面板，依次单击“+”|“全局函数”|“时间轴控制”|stop。

（2）第2部分就是当影片自动停止播放之后，如果需要重新开始播放，则需要先制作一个按钮，然后再在这个按钮上面加入相应的程序即可。选中图5中的“重放”按钮并添加下面的程序：

4.3 结合在网页中

想把动画发布到互联网上，就需要嵌入到Web网页中，虽然Flash 8自带了这个功能，但是通常非常单调，所以需要使用Dreamweaver 8进行美化。其简单操作步骤如下：

（1）启动Dreamweaver 8，并新建一个文件，然后执行“插入”|“表格”命令，插入一个2行1列、边框值为空的表格。在属性栏设置表格的对齐方式为“居中对齐”。

（2）选择“插入”|“媒体”|Flash，在弹出的“选择文件”对话框中，选择该动画文件保存的地址。

（3）保存并预览动画，如图6所示。

制作一个吸引浏览者的Flash作品，必须要有丰富的想象力，只有敢于想象，才能制作出优秀的Flash作品，只有选题新颖、赋予新意的作品才能让浏览者驻足。

[1] 王珂. Flash MX 2004 中文版应用程序培训教程[M]. 北京：电子工业出版社，2004.

[2] 吴涛. Flash MX 2004 ActionScript动画设计[M]. 北京：科学出版社，2005.

源程序完整光盘一张。

通过这次毕业设计，让我在原有的基础上有了进一步的提高，且学会了Flash的更多知识。在此非常感谢担任动画技术设计课题的指导老师XXX老师，谢谢他对我们的精心指导与帮助。其次，感谢我们这个组中的每一个组员的努力，因为大家的努力，才有今天的成果。