动画预载的制作方法

动画预载的制作方法(1) 用 Flash 创作出来的动画作品被称为网络动画，作品最终是要发布到网上 给观众欣赏的。在网上观看动画作品时，由于作品的体积和网速限制，需要装 载一段时间才能开始播放，如果没有下载动画的预载画面，页面一片空白没有 任何提示，多数观赏者不会有足够的耐心面对空白的网页继续等待，因此需要 在作品前面做一个动画预载的等待画面。Flash 中的动画预载也就是人们常常 提到的 Loading，动画预载的画面可以使观赏者了解等待作品需要的时间或下 载进度等，有些作品的 Loading 还体现了作品的风格或内容简介，使观赏者预 先知道作品的特色，从而专心等待预载结束来欣赏作品。 1. 简单动画预载画面的制作方法 动画预载与制作 MTV 一样，根据每个人的喜好和风格的不同，做出来的画 面也各具特色，从动画预载的难易程度和创意风格来看分为简单型、精确型、 风趣型、个性型和实用型五大类，下面我们来分别介绍。 本例通过学习 MTV 作品中的动画预载制作过程，来掌握一种简单实用预载 画面的制作方法。 本例采用的是增加一个动画预载的场景，它不会影响主动画的制作流程和 进度。制作的过程比较简单，只显示预载进度条和百分比，把作品中的主人翁 和主要场景作为预载显示画面，通过按钮来控制动画的播放和返回。 图 13-5-1 动画预载的播放画面 （1）增加动画预载的场景 在 Flash 中打开 MTV 的作品文件。执行【窗口】|【设计面板】|【场景】 命令（快捷键 Shift+F2），打开【场景】面板，如图 13-5-2 所示。 图 13-5-2 【场景】面板 在【场景】面板中，单击【添加场景】按钮 ，添加【场景 2】，这个【 场景 2】就是我们用来制作动画预载的场景，如图 13-5-3 所示。 图 13-5-3 增加【场景 2】 双击【场景 2】，将场景重新命名为“动画预载”，用鼠标拖动【动画预载 】场景到【场景 1】的上放，释放鼠标，使【动画预载】位于【场景 1】的上方 ，如图 13-5-4 所示。 图 13-5-4 改变场景顺序 说明：动画是按照场景从上到下的先后顺序来播放的，我 们 首先要播放【动画预载】的场景， 所以要拖动它到最上面。 （2）创建动画预载需要的图层 添加完【动画预载】场景后，切换到【动画预载】场景的舞台上，新建 4 个图层并重新命名，如图 13-5-5 所示。 图 13-5-5 动画预载的图层结构 （3）添加控制层的动作脚本语句 步骤 1 添加帧标签 选中【action 控制】图层的第 1 帧，打开【属性】面板，在其中定义帧标 签名称为 play，如图 13-5-6 所示。 图 13-5-6 加上帧标签 步骤 2 添加第 1 帧的动作脚本语句 选中【action 控制】图层的第 1 帧，在【动作】面板中设置动作脚本： total = _root.getBytesTotal(); loaded = _root.getBytesLoaded(); load = int(loaded/total*100); loadtxt = “loading“+load+“%“; _root.进度条.gotoAndStop(load); 以上程序代码的具体功能详细解释如下： total = _root.getBytesTotal();/ 将影片总字节数赋值给 total 变量。 利用“getBytesTotal()”函数能获取影片的总字节数。 loaded = _root.getBytesLoaded();/ 将影片已经下载的字节数赋值给 loade d 变量。 利用“getBytesLoaded()”函数能获取影片已经下载的字节数。 load = int(loaded/total*100); / 取整计算已下载的百分比并赋值给变 量 load。 利用“int（）”函数能将括号里面的数值四舍五入为整数，“loaded/tot al*100”是“影片已经下载的字节数”除以“影片的总字节数”再乘以“100” ，也就是已经下载的百分比。 loadtxt = “loading“+load+“%“;/ 把已下载的百分比赋值给动态文本变 量 loadtxt。 “loadtxt”是我们下面要制作的一个动态文本框的变量名字，“=”号后 面是它将要显示的内容，“loading“”是“字符串”，将显示在动态文本的最 前面，两个“+”在这里是“字符串连接符”，“load”是上条语句的变量名， 它的值就是已经下载的百分比。 _root.进度条.gotoAndStop(load); /进度条影片剪辑按百分比的值跳转 到相应的帧上。 “进度条”是我们下面要做的进度条的影片剪辑的实例名称。 步骤 3 添加第 6 帧的动作脚本语句 选中【action 控制】图层的第 6 帧，按 F6 键，插入一个关键帧。在【动作 】面板中设置动作脚本： if (loaded = total) gotoAndStop(6); else gotoAndPlay(“play“); 以上程序代码的具体功能详细解释如下： if (loaded = total) gotoAndStop(6); 如果影片已经下载的字节数和总字节数相等就跳转到 6 帧并停止。 注意这里是“=”，而不是“=”，不要输错，否则就不能起到动画预载的 作用了。 else gotoAndPlay(“play“); 否则跳转到标签名“play”的帧上，也就是继续下载的意思。 完成以上步骤后，可以先锁定【action 控制】图层。 （4）完成进度条的动画内容 步骤 1 创建进度条影片剪辑元件 新建一个名为“进度条”的影片剪辑元件。在这个元件的编辑场景中，创 建一个进度条动画，这是一个渐变矩形从左向右慢慢拉长的动画，详见 Flash 源文件。动画完成的图层结构如图 13-5-7 所示。 图 13-5-7 创建动画的图层结构 步骤 2 完成【进度条】图层的动画设置 切换到【动画预载】的场景，选中【进度条】图层的第 1 帧，将【库】中 的“进度条”元件拖放到舞台的合适位置，在【属性】面板中定义这个元件的 实例名称为“进度条”。 选中【进度条】图层的第 6 帧，按 F5 键，延长图层中的帧，完成后锁定【 进度条】图层，如图 13-5-8 所示。 图 13-5-8 图层结构 （5）创建显示百分比的动态文本和控制按钮 步骤 1 创建动态文本 选中【百分比】图层的第 1 帧，用【文本工具】创建一个动态文本对象。 选择这个动态文本对象，打开【属性】面板，在【变量】的文本框中输入“loa dtxt”，相关参数设置如图 13-5-9 所示。 图 13-5-9 动态文本设置 选中【百分比】图层的第 6 帧，按 F5 键，延长图层中的帧。 步骤 2 添加播放按钮 选中【控制按钮】图层的第 6 帧，按 F6 键插入一个关键帧。将【库】面板 中已经做好的“播放按钮”按钮元件，拖放到舞台的右下角合适的位置上。 单击选中舞台上的“播放按钮”按钮元件，打开【动作】面板，设置动作 脚本语句： on (release) /按下并释放按钮时，执行以下的语句 gotoAndPlay(“场景 1“, 1); /跳转到场景 1 的第 1 帧并开始播放 这里的“场景 1”是 MTV 的主动画的场景名称，如果是多场景动画应该是最 先播放的动画场景的名称，在添加“播放按钮”的动作语句时，根据作品中的 实际场景名称填写。在动画结尾如果要加上一个“返回按钮”，按钮的设置方 法相同，只是跳转到相应的帧上即可。 这时的图层结构如图 13-5-10 所示。 图 13-5-10 图层结构 第三节 动画预载的制作方法(3) （6）加载画面的设置 步骤 1 将预载动画加入到场景中 选中【加载动画】图层的第 1 帧，打开【库】面板。选择 MTV 主动画有代 表性的背景画面，拖放到舞台合适的位置。可以根据作品的风格和设计思路， 反复观察测试，直到效果满意为止。本例中添加作品的“雪山背景”图形元件 和“人物”的影片剪辑，如图 13-5-11 所示。 图 13-5-11 加载动画的安排 步骤 2 统一动画预载和整体作品的风格 为了使整个作品的风格和动画预载的画面统一，把【场景 1】主动画里面的 遮片和文字信息拷贝并粘贴到【动画预载】的场景，调整图层的上下顺序，完 成后的图层结构如图 13-5-12 所示。 图 13-5-12 加载动画的图层结构 至此，本实例制作完毕。执行【控制】【测试影片】命令（快捷键 Ctrl+ Enter），动画开始播放了。因为动画预载应在网络中应用，受网速限制，需要 装载一段时间才能开始播放动画，而在本地测试的时候，动画预载会在瞬间加 载完毕，效果很不明显。可以用模拟网络下载来观测动画预载的全过程。执行 【视图】菜单中的【模拟下载】命令，现在就可以慢慢的欣赏动画预载的全过 程了，如图 13-5-13 所示。 图 13-5-13 模拟动画预载的效果 说明：在没有执行【控制】【测试影片】命令时，【视图】菜单 下是没有【模拟下载】选项的 ，实际上执行两次 Ctrl+Enter命令， 就可以模拟动画预载 的全过程了。 2精确动画预载画面的制作方法 对于熟悉动作脚本语言的朋友，可以用动作脚本来完成精确的动画预载， 下面我们制作一个精确显示预载参数的实例。 本例中的动画预载画面显示的相关参数有：下载的总字节数，已经下载的 字节数，剩余的字节数，下载的百分比和下载的总时间，已经下载的时间，剩 余的时间还有下载的速度。 实例效果如图 13-5-14 所示。 图 13-5-14 精确动画预载的播放画面 第三节 动画预载的制作方法(4) （1）创建背景和说明文字 步骤 1 创建背景 新建一个 Flash 文档。 重新命名【图层 1】的名称为【背景】。设计一个与【舞台】同样大小的背 景，并转换为“背景”图形元件。选中第 6 帧，按键盘上的 F5 键，延长图层中 的帧。然后锁定【背景】图层，如图 13-5-15 所示。 图 13-5-15 精确动画预载的背景 步骤 2 创建说明文字 新增【静态文本】图层。在舞台上输入文本，如图 13-5-16 所示。这些文 字的格式根据你的喜好任意确定。 图 13-5-16 静态文本的设置 （2）动态文本的设置 步骤 1 创建动态文本 新增【动态文本】图层。选择【文本工具】，在静态文本“下载的总数” 的右边拖出一个大小合适的文本框，打开【属性】面板，设置“文本类型”为 【动态文本】。在【变量】文本框中输入“totaltxt”，为“下载的总数”的 动态文本框设置一个变量，相关参数设置如图 13-5-17 所示。 图 13-5-17 动态文本的参数设置 步骤 2 创建其它动态文本 用上面同样的方法，在对应的“静态文本”的右边拖出其他 7 个动态文本 ，相关的属性设置同第一个动态文本框，唯一不同的就是“变量名称”。“已 经下载数”右边动态文本框的变量名称为“loadedtxt”，“剩余下载数”动态 文本框对应的变量名称为“Surplustxt”，“下载百分比”动态文本框对应的 变量名称为“loadtxt”，“下载总时间”动态文本框对应的变量名称为“allt imetxt”，“已用的时间” 动态文本框对应的变量名称为“timetxt”，“剩 余的时间”动态文本框对应的变量名称为“Surplustimetxt”，“下载的速度 ”动态文本框对应的变量名称为“Speedtxt”。 如图 13-5-18 所示，设置完后锁定【动态文本】图层。 图 13-5-18 动态文本的设置 第三节 动画预载的制作方法(5) （3）添加进度条和控制按钮 步骤 1 添加进度条 创建一个名称为“进度条”的影片剪辑元件，具体效果与前面例子中的进 度条相似，你可以参看本实例的 Flash 源文件。 切换到主场景，从【库】面板中将“进度条”元件拖放到舞台下边的位置 ，然后在【属性】面板中定义实例的名称为“jindutiao”。 步骤 2 添加控制按钮 新增【控制按钮】图层，选中【控制按钮】图层的第 6 帧，按键盘上的 F6 键插入一个关键帧。从【库】面板中拖放一个按钮元件到这个关键帧上。选择 按钮，在【动作】面板中设置动作脚本： on (release) /当按下并释放按钮时，执行后面的语句 gotoAndPlay(“场景 2“, 1);/跳转到场景 2 的第 1 帧并开始播放 说明：这里的“场景 2”是我们将要制作的主动画的场景名称，在设置控制按钮的动作脚 本语句时，根据作品的实际场 景名称进行设置。 （4）控制图层的设置 步骤 1 创建控制图层 新增【AS 控制】图层。选中【AS 控制】图层的第 1 帧，定义这帧的帧标签 名为“play”。 步骤 2 添加第一帧的动作脚本语句 选中【AS 控制】图层的第 1 帧，在【动作】面板中设置动作脚本： total=_root.getBytesTotal();/ 将影片总字节数赋值给 total 变量，用 “getBytesTotal()”函数能获取影片的总字节数。 totaltxt=int(total /1024)+“k“;/ 取整下载的总字节数赋值给动态文本 变量 totaltxt loaded=_root.getBytesLoaded();/ 将影片已经下载的字节数赋值给 load ed 变量 loadedtxt=int(loaded /1024)+“k“;/取整已下载字节数赋值给动态文本 变量 loadedtxt Surplus=total-loaded; /获取影片剩余的字节数 Surplustxt=int(Surplus/1024)+“k“;/取整剩余的数值赋值给动态文本变 量 Surplustxt load=int(loaded /total * 100); / 取整计算已下载的百分比并赋值给 变量 load loadtxt=load + “%“;/ 把已下载的百分比的值赋值给动态文本变量 loadt xt time=getTimer();/获取影片下载的时间 timetxt=int(time/1000)+“s“;/取整计算下载的时间的值赋值给动态文本 变量 timetxt speed=loaded/time; /获取影片下