FLASH交互动画设计.doc

开 放 实 验 报 告 开放实验名称： FLASH交互动画设计 学 生 学 号： 学 生 姓 名： 学生所在班级： 指 导 教 师： 2009 至 2010 年第 一 学期 一、总体设计 1.游戏总体概况 本实验为FLASH交互动画之——卡通游戏“接宝石”。移动小盆接上面落下来的物体，落下的不同物体代表其特定的分值。加分暂无上限，减分暂无下限，时间限制为20秒。 2.游戏界面及流程 【图1】游戏初始界面 【图1】为游戏初始界面，红宝石、蓝宝石、炸弹、钻石分别为排成一横线的旋转体。 若按[帮助]，则出现【图2】游戏规则界面。 【图2】游戏规则界面 【图2】表明接到的物体所代表的分值：炸弹（-6分）、蓝宝石（+2分）、红宝石（+3分）、钻石（+8分）。 若在【图1】游戏初始界面按[开始]则进入【图3】游戏界面。 【图3】游戏界面 初始状态分数为0，剩余时间为20秒，游戏开始后，移动小盆接上面落下的物体，炸弹（-6分）、蓝宝石（+2分）、红宝石（+3分）、钻石（+8分）。当剩余时间显示为0时，游戏结束，分数栏显示不再变化，界面自动转到如下【图4】选择界面。 【图4】选择界面 若按[继续]，则进入【图3】游戏界面，开始新一轮的游戏；若按[退出]，则退到【图1】游戏初始界面。 二、详细设计 1. 创建新文档 新建一个AvctionScript 2.0空白文档，在其属性栏设置文档大小为600像素╳400像素。 2. 元件的准备 （1）创建影片剪辑 ①创建名为“计分器”的影片剪辑元件 创建两个图层，自上而下分别命名为“action”和“文本”。 “文本”图层上的操作：输入静态文字“分数”，在“文本”图层第1帧拖曳出一个文本框，将其【属性】中的【文本类型】设置为“动态文本”，【变量】设置为“txt”，在该图层的第2帧处插入帧。得到结果如下图： “action”图层上的操作：在该层第1帧，输入动作语句：txt=_root.score; ②创建名为“计时器”的影片剪辑元件 创建两个图层，自上而下分别命名为“Action”和“文本”。 “文本”图层上的操作：输入静态文字“剩余时间”，在“文本”图层第1帧拖曳出一个文本框，将其【属性】中的【文本类型】设置为“动态文本”，【变量】设置为“txt”，在该图层的第2帧处插入帧。得到结果如下图： 并将“文本”层延长至第3帧。 “Action”图层上的操作：分别在1，2，3帧上插入空白关键帧，然后在Action的第1~3帧分别输入代码： 第1帧代码： now = new Date(); startTime = now.getTime(); hasTime = 20; txt = hasTime;b 第2帧代码： now = new Date(); tempTime = now.getTime(); txt = hasTime - Math.round(((tempTime-startTime)/1000)); if (txt == 0){ _root.gotoAndStop(end); this.stop(); } 第3帧代码： gotoAndplay(_currentframe-1); if (_currentframe==0) gotoAndplay(2); ③创建名为“所有下落物”的影片剪辑 a.创建图形元件“bomb”、“blue”、“red”、“diamond”，从左到右分别如下所示： b.创建名为“炸弹”的影片剪辑，在其编辑状态下，将图形元件“bomb”从【库】中拖至其时间轴的第1帧，在第1帧创建补间动画。第18帧插入关键帧，然后在第1~17帧之间单击任意一帧，在其【属性】面板，设置【旋转】为逆时针/顺时针，圈数为1圈。在第18帧添加动作代码“gotoAndplay;”。用相同方法制作名为“blue”、“red”、“diamond”三个影片剪辑。将这四个影片剪辑设置为不同的时间轴长度。 c.创建名为“所有下落物”的影片剪辑，在其编辑状态下制作逐帧动画，第1~4帧分别为“炸弹”、“蓝宝石”、“红宝石”、“钻石”的实例,如下所示： ④创建名为“下落”的影片剪辑 设置两个图层，分别命名为“Actions”、“下落物”。 “下落物”图层的操作：将影片剪辑“所有下落物”拖曳至其“下落物”图层第1帧的舞台上，并在该图层第3帧插入帧。选中“所有下落物”对象，在【属性】-【实例名称】命名为“all