动画预载的制作方法.docx

动画预载的制作方法.docx

《动画预载的制作方法.docx》由会员分享，可在线阅读，更多相关《动画预载的制作方法.docx（15页珍藏版）》请在冰豆网上搜索。

动画预载的制作方法

动画预载的制作方法

（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（）;//将影片已经下载的字节数赋值给loaded变量。

利用“getBytesLoaded（）”函数能获取影片已经下载的字节数。

load=int（loaded/total*100）;//取整计算已下载的百分比并赋值给变量load。

利用“int（）”函数能将括号里面的数值四舍五入为整数，“loaded/total*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帧，用【文本工具】创建一个动态文本对象。

选择这个动态文本对象，打开【属性】面板，在【变量】的文本框中输入“loadtxt”，相关参数设置如图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”，“下载总时间”动态文本框对应的变量名称为“alltimetxt”，“已用的时间”动态文本框对应的变量名称为“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（）;//将影片已经下载的字节数赋值给loaded变量

loadedtxt=int（loaded/1024）+"k";//取整已下载字节数赋值给动态文本变量loadedtxt

Surplus=total-loaded;//获取影片剩余的字节数

Surplustxt=int（Surplus/1024）+"k";//取整剩余的数值赋值给动态文本变量Surplustxt

load=int（loaded/total*100）;//取整计算已下载的百分比并赋值给变量load

loadtxt=load+"%";//把已下载的百分比的值赋值给动态文本变量loadtxt

time=getTimer（）;//获取影片下载的时间

timetxt=int（time/1000）+"s";//取整计算下载的时间的值赋值给动态文本变量timetxt

speed=loaded/time;//获取影片下载的速度

Speedtxt=int（speed）+"k/s";//取整计算下载的速度的值赋值给动态文本变量Speedtxt

Surplustime=Surplus/speed;//获取影片下载的剩余的时间

Surplustimetxt=int（Surplustime/1000）+"s";//取整计算影片下载剩余的时间赋值给动态文本变量Surplustimetxt

alltime=total/speed;//获取影片下载一共需要的时间

alltimetxt=int（alltime/1000）+"s";//取整计算下载时间赋值给动态文本量alltimetxt

_root.jindutiao.gotoAndStop（load）;//进度条影片剪辑按百分比值跳转到相应的帧上

步骤3添加第6帧的动作脚本语句

选中【AS控制】图层的第6帧，按键盘上的F7键，插入一个空白关键帧。

选中第6帧，打开【动作】面板，设置动作脚本：

if（loaded==total）{

gotoAndStop（6）;//如果影片已经下载的字节数和总字节数相等就跳转到6帧并停止

}else{

gotoAndPlay（"play"）;//否则跳转到标签名为“play”的帧上，也就是继续下载

}

至此，精确动画预载画面就制作完成了，为了测试精确动画预载的显示效果，我们可以再创建简单的带有音乐的动画内容，然后定义按钮控制动画的开始播放。

具体制作这里不再详述，你可以参看配套光盘上的实例源文件。