趣味Loading设计
这样的Loading看起来还是死板吗?你还想要一些趣味性?其实Loading制作也可以加入很多的趣味性来。下例是一个老鼠的Motion运动动画的Loading。当下载20%时,老鼠的运动速度开始加快,以后第下载20%,老鼠的速度就加快一些,直到下载结束。
步骤一、先打开第一个Loading实例。我们的这个实例还是在第一小节中的哪个简易Loading改进而来的。
步骤二、选择Insert|New Symbol命令新建一个Movie Clip电影剪辑,进入剪辑编辑区域。选择Window|Common Library打开共享库面板,把Mouse拖入编辑区。

图4-13 共享库面板中的老鼠图像
步骤三、先来制作一个老鼠的Motion动画,在第一帧处将老鼠图像拖至X坐标-300,Y坐标-30处,如果不够精确可以使用Info面板来调整。如图4-14所示。

图4-14 精确调整物体位置
步骤四、然后在第42帧处按F6键插入一个关键帧。
步骤五、在时间轴的第20帧处按F6键插入一个关键帧,调整老鼠的位置为X坐标300,Y坐标-30。
步骤六、在第21帧处插入一个关键帧,用Modify|Transform|Flip Horizontal命令使老鼠水平翻转。
步骤七、在第41帧处按F6键插入一个关键帧,调整老鼠的位置X坐标-300,Y坐标-30。全选所有帧点鼠标右键选Create Motion Tween。建立一个Motion动画。整个动画的过程如图4-15所示。

图4-15 老鼠的运动过程
步骤八、在第42帧处双击打开Action面板。双击 Basic Action指令中的Goto语句,使动画跳转到第一帧。
步骤九、全选所有帧,执行鼠标右键命令Copy Frame,在第43帧处,执行鼠标右键命令Paste Frame。在第43帧的地方复制了一遍动画过程。
步骤十、调整复制的动画的长度,使之只有30帧的总长度,其它各关键帧做相应的改变。
步骤十一、在最后一个关键帧双击打开Action面板。使用Goto指令,把Frame栏中的1改为43。如图4-16。

图4-16 实现帧的复制
步骤十二、这样做的用意是让第1帧到第42帧形成一个循环,这个循的速度比较慢,第43帧到第70帧实现一个循环。速度稍稍快了一点。
步骤十三、利用同样的方法从第71到第90制作一个循环,从第91到第105制作一个循环。从第106到第116制作一个循环。
步骤十四、回到场景,打开Window|Library命令,打开库面板。把老鼠动画拖到场景中,X坐标270,Y坐标300的位置。
步骤十五、然后打开Instance面板,当老鼠动画成为选定状态时,在Instance面板的Name项中输入mouse。为老鼠动画起分身名称为mouse
步骤十六、在场景第二帧打开Action面板。你可以看到我们前面制作的程序。
步骤十七、使第三行else行为选定状态。然后选择指令区的Action指令集中的if项。可以看到if命令出现在了else行的下面。在参数输入框中输入代码(_framesloaded/_totalframes)*100>20,

图4-17 if指令的输入框
步骤十八、单击Actions指令集中的evaluate指令,加入一个空行。
步骤十九、在输入框内输入指令_root.mouse.gotoandplay(43)。如图4-18所示。

图4-18 evaluate加入一个空行
步骤二十、用鼠标单选_root.mouse.gotoandplay(43)下面的一行,此行只有一个}括号。
步骤二十一、单击if指令,输入代码(_framesloaded/_totalframes)*100>40。
步骤二十二、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(71)。
步骤二十三、单击此行下面的}括号行。然后继续单击if指令,输入代码(_framesloaded/_totalframes)*100>60。
步骤二十四、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(91)。
步骤二十五、单击此行下面的}括号行,然后单击if指令,输入代码(_framesloaded/_totalframes)*100>80。
步骤二十六、单击evaluate加入一个空行,输入代码_root.mouse.gotoandplay(106)。完成整个程序行如图4-19。

图4-19 完整的趣味下载程序内容
步骤二十七、动画上传测试。
程序解读:
在整个程序行内容方面加入了一个if判断的指令。判断当动画下载到20%时,老鼠动画剪辑将跳转到第43帧,而43帧的内容是比前一循环速度加快的动画。当动画下载到40%时,老鼠动画剪辑跳转到第71帧。每一次速度都比上一次的要快,这是一个嵌套的判断指令。
知识要点:
在这个动画实例中,我们做到了让电影剪辑随着if判断来播放。这个功能在网站的动画演示当中相当多见,通常交互和动态的内容演示都是通过if判断来完成的。第一个简易的Loading其实就是做预载动画的内核。学会了制作Loading你还可以把这样的内容加入到网站的演示当中去。比方说判断分身名为MC1的电影剪辑播放到了什么程度,来动态的改变MC2的播放内容。
精确的Loading设计
上述的哪个Loading程序有一些比较简单,虽然它已经达到了预载的效果,但是对于要求比较高的朋友可能就不能满足了。哪么请看图4-8,这个预载动画将使用到比较多的函数,使动画预载看起来更加的人性化。

图4-8 高级的Loading程序界面
制作过程:
步骤一、打开刚才我们设计的Loading动画。这个Loading程序将是在上述Loading的基础上修改而成的。
步骤二、使用文字工具,并且使用Window|Panels|Character命令,打开Character字符面板,将字号设置为25,字色为黑色。如图4-9所示。

图4-9 Character面板的设置
步骤三、将文字按图4-8这样式输入在界面里。然后打开Window|Panels|Align命令,打开Align对齐面板。
步骤四、使用其中的对齐方式将文字对齐成图4-8之样式。
步骤五、点击文字工具,在总字节的文字后面用鼠标拖出一个文本框,注意用调节点调节文本框的宽度。然后打开Window|Panels|Text Options命令打开Text Options文本属性面板,在下拉菜单中选择Dynamic Text打开动态文本设置框。
步骤六、在动态文本框的Variable项输入这个文本框的变量为zbye,如图4-10所示。

图4-10 动态文本面板中设置动态文本变量
步骤七、用同样的方法在绘制七个动态文本框在各字符的后面。已经下载字节后面的字段变量为yby,总帧数的为zfrm,已下载帧数的是yfrm,需要的时间后面变量名为xtim,已用时间的为ytim,在进度条下方的下载进度变量为yload。
步骤八、设置完毕开始进行程序设计。打开第二帧的Action面板,你可以看到我们刚才设计的程序。在这个程序中有很多的内容无需改变,只要再添加一些程序就可以了。
步骤九、我们将Setproperty("_root.loading",_xscale,(_framesloaded/_totalframes)*100这句用鼠标拖动上移一行,在指定区的Actions指令集中选择Set Variable指令。
步骤十、在打开的变量输入框中,Variable项填写总帧数的字段变量zby,在Value栏中输入代码_root.getbytestotal(),勾选后面的Expression单选框。

图4-11 变量输入框
步骤十一、用同样的方法输入其它变量。yby=_root.getbytesloaded()。
步骤十二、zfrm = _root._totalframes。
步骤十三、yfrm = _root._framesloaded。
步骤十四、ytim=gettime()/1000 + "秒"。
步骤十五、xtim = int(zby-yby)/yby*tim) + "秒"。
步骤十六、yload = _framesloaded/_totalframes*100。
步骤十七、整个程序输入结束。对照参考图4-12。

图4-12 高级Loading的完整程序
程序解读:
这前几行程序基本上不用解读,哪些都是Action中所拥有的函数,只要将本章开始时的函数学习好,把它们赋值给变量就可以了。
第十行,用了一个表达式来获得了还需要的时间变量值。总字节减去已经下载的字节的值除以已下载的字节再乘以已经使用的时间。
第十一行,用已经下载的帧数除以总帧数再乘以100得到下载进度,其实这行程序还可以变化为yfrm/zfrm*100。
知识要点:
高级Loading其实制作起来也并不复杂,你可以通过对函数的了解来做到。另外这里有一个概念,getbytesloaded和另外几个函数都是Movie Clip的函数,为什么也可以在场景中使用呢?其实你可以把场景看成是一个大的Movie Clip,很多电影剪辑的函数都可以使用在场景中,包括gettimer()。而动态文本变量正是去显示这些函数的数值的,其实在Loading中还有一个概念,就是利用帧循环也可以达到循环效果,与一般的编程不同的是Flash可以使用帧循环去达到一些效果,有时候因为帧循环的时间特性,做出的循环比用while等循环语句构造出更加意想不到的效果。学习好这些函数正是高级Loading制作的关键。