FLASH交互动画设计

1、文档来源为：从网络收集整理.word版本可编辑.欢迎下载支持FLASH交互动画设计一、总体设计1. 游戏总体概况本实验为FLASH交互动画之卡通游戏“接宝石”。移动小盆接上面落下来的物体，落下的不同物体代表其特定的分值。加分暂无上限，减分暂无下限，时间限制为20秒。2. 游戏界面及流程【图1】游戏初始界面【图1】为游戏初始界面，红宝石、蓝宝石、炸弹、钻石分别为排成一横线的旋转体。若按帮助，则出现【图2】游戏规则界面。【图2】游戏规则界面【图2】表明接到的物体所代表的分值：炸弹（-6分）、蓝宝石（+2分）、红宝石（+3分）、钻石（+8分）。若在【图1】游戏初始界面按开始则进入【图3】游戏界面。【

2、图3】游戏界面初始状态分数为 0，剩余时间为20秒，游戏开始后，移动小盆接上面落下的物体，炸弹（-6分）、蓝宝石（+2分）、红宝石（+3分）、钻石（+8分）。当剩余时间显示为 0时，游 戏结束，分数栏显示不再变化，界面自动转到如下【图4】选择界面。【图4】选择界面若按继续，则进入【图3】游戏界面，开始新一轮的游戏；若按 退出，则退到【图1】 游戏初始界面。二、详细设计1. 创建新文档新建一个Avcti on Script 2.0空白文档，在其属性栏设置文档大小为600像素X 400像素。2. 元件的准备（1）创建影片剪辑 创建名为“计分器”的影片剪辑元件创建两个图层，自上而下分别命名为acti

3、on ”和文本”。“文本”图层上的操作： 输入静态文字“分数”，在“文本”图层第 1帧拖曳出一个文 本框，将其【属性】中的【文本类型】设置为“动态文本”，【变量】设置为“ txt ”，在该图层的第2帧处插入帧。得到结果如下图：“action ”图层上的操作：在该层第1帧，输入动作语句：txt=_root.score; 创建名为“计时器”的影片剪辑元件创建两个图层，自上而下分别命名为“Action ”和“文本”。“文本”图层上的操作： 输入静态文字“剩余时间”，在“文本”图层第 1帧拖曳出一 个文本框，将其【属性】中的【文本类型】设置为“动态文本”，【变量】设置为“ txt ”，在该图层的第2帧

4、处插入帧。得到结果如下图：并将“文本”层延长至第3帧。“Action ”图层上的操作：分别在1，2， 3帧上插入空白关键帧，然后在Action的第13帧分别输入代码：第1帧代码：now = new Date();startTime = no w.getTime();hasTime = 20;txt = hasTime;b第2帧代码：now = new Date();tempTime = no w.getTime();txt = hasTime - Math.ro un d(tempTime-startTime)/1000);if (txt = 0)_root.gotoA ndStop(e nd

5、); this.stop();第3帧代码：gotoA ndplay(_curre ntframe-1);if (_curre ntframe=O)gotoA ndplay(2); 创建名为“所有下落物”的影片剪辑a. 创建图形元件bomb、“blue ”、“red ”、“diamond”，从左到右分别如下所示：b. 创建名为“炸弹”的影片剪辑，在其编辑状态下，将图形元件“ bomb从【库】中拖至其时间轴的第1帧，在第1帧创建补间动画。第18帧插入关键帧，然后在第117帧之间 单击任意一帧，在其【属性】面板，设置【旋转】为逆时针/顺时针，圈数为1圈。在第18帧添加动作代码“ gotoAndpla

6、y; ”。用相同方法制作名为“ blue ”、“red ”、“diamond”三个 影片剪辑。将这四个影片剪辑设置为不同的时间轴长度。c. 创建名为“所有下落物”的影片剪辑，在其编辑状态下制作逐帧动画，第14帧分别为“炸弹”、“蓝宝石”、“红宝石”、“钻石”的实例，如下所示： 创建名为“下落”的影片剪辑设置两个图层，分别命名为“Actio ns ”、“下落物”。“下落物”图层的操作：将影片剪辑“所有下落物”拖曳至其“下落物”图层第 1帧的舞台上，并在该图层第 3帧插入帧。选中“所有下落物”对象，在【属性】-【实例名称】命名为“ allthings ”。“ Actio ns ”图层的操作：在该图

7、层的前3帆插入空白关键帧，分别输入以下代码：第1帧代码：var plusScore;/声明变量plusScorek = Math.ra ndom();/k为01之间的随机数if (k0.5) /如果随机数小于0.5allth in gs.gotoA ndStop(1);/设置的角色播放第1帧（炸弹）plusScore = -6;/炸弹分数设为-6 else if (k0.7) /如果随机数在0.50.7之间allth in gs.gotoA ndStop(2);/设置的角色播放第2帧（蓝宝石）plusScore = 2;/蓝宝石分数设为2else if (k4OO) /this.removeM

8、ovieClip(); /随机决定对象出现的x轴坐标坐标均为-40对象y的坐标布顿增加，增量即速度如果y坐标大于400,则表示已经跑出舞台删除该影片剪辑else if (this._y=350) / disX = Math.abs(this._x-_root.pe n._x);/if (disX60) /_root.score += plusScore;/this.removeMovieClip();/如果y小于350且下一次大于 350计算两个对象之间的距离如果距离小于60，表明接到了对象总分加上接到的对象自身的分数然后删掉该对象第3帧代码:gotoA ndPlay(_curre ntfra

9、me -1);对名为“下落”的影片剪辑执行【链接】命令，在【链接属性】输入标识符“wuti 创建名分别为“接宝石”、“盆”的影片剪辑在“接宝石”剪辑中设置渐变文字“接宝石”；在“接宝石”剪辑中绘制盆图形。(2)创建按钮分别创建名为“开始”、“帮助”、“继续”、“退出”、“返回”的按钮。以“开始”按钮为 例，在“弹起”帧插入关键帧，绘制按钮图形，在“点击”帧上插入关键帧。3. 主场景的制作在主时间轴上设置 5个图层，分别命名为 Actio ns、计时计分、盆、butto ns和bg。 时间轴第1帧上的操作：a. “bg”层：绘制渐变色背景，将“钻石”、“炸弹”、“接宝石”影片剪辑到舞台上的合适位

10、置；b. “buttons ”层：设置两个按钮“开始”、“帮助”，并分别添加动作代码：4文档来源为：从网络收集整理.word版本可编辑.文档来源为 :从网络收集整理 .word 版本可编辑 .欢迎下载支持【开始】按钮动作代码：on(release)gotoAndplay(2);【帮助】按钮动作代码：on(release)gotoAndstop(6);得到效果如下： 时间轴第 2 帧上的操作：a“bg”层：保持渐变背景，去掉其余对象，且延续至第5帧；b. “盆”层 : 添加“盆”影片剪辑，实例名称命名为“ pen”；c. “计时计分”层 ： 添加“计分器” 、“计时器”两个元件。 时间轴第 3,

11、4 帧上的操作：第 3 帧和第 4 帧在舞台对象上均与第 2 帧相同。 时间轴第 5 帧上的操作：“ buttons ”层： 添加两个按钮“继续” 、“退出”，并分别添加动作代码： 【继续】按钮动作代码：on(release)gotoAndplay(2);【退出】按钮动作代码：on(release)gotoAndplay(1); 时间轴第 6 帧上的操作：a“ bg”层：添加“炸弹”、“蓝宝石”、“红宝石”和“钻石”4个影片剪辑和一些文字;b. “ buttons ”层： 制作“返回”按钮。添加【返回】按钮动作代码：on(release)gotoAndplay(1); Actio ns层上各帧

12、操作：第15帧分别插入空白关键帧，然后为第14帧分别添加代码：第1帧代码：stop();第 2 帧代码：startDrag(pen,true,50,350,550,350);mcDepth = 0;score = 0;第 3 帧代码：if(Math.random()0.2)_root.attachMovie(wuti,s+mcDepth,mcDepth); mcDepth+;第 4 帧代码：gotoAndplay(_currentframe-1);选中 Actions 图层的第 5 帧，在属性栏添加帧标签“ end”。4. 测试影片三、开放实验小结一直觉得FLASH设计是一件高难度的工作，对于结构完整故事情节丰富以及功能完善的 FLASH来说，工作复杂程度难以想象。如今，通过对flash简单交互动画的制作，使我对FLASH 制作有了新的认识。在FLASH小游戏的制作过程中，我对基本工具和功能有了深刻的了解，许多词，如“关 键帧”、“逐帧动画”、“遮罩动画”等进行了一定的实践。经过这样一个简单小游戏的制作， 我发现小小的实践能启示我一步一步学到应该掌握的 基础知识。 对实例的制作， 我学会了整理简单项目的制作逻辑。 在这里编码语言的理解非常 重要，此时我看到 C语言等的学习体现出了一定优势。遇到错误时，根据所学的语言知识， 我能够