第四章 多媒体网站初级应用实例

我们说过，Flash制作的多媒体网站是Flash动画制作的精髓，也是Flash动画最为广泛的用途。在Flash出现以前，网站设计是静态的和Gif动画的天下。当然还有Java和JavaScript等众多软件。但这些软件的应用范围并不广泛。网络带宽也是影响网络多媒体发展的一个瓶径。但Flash出现了。它带给网络全新的意义，带给网络互动的媒体，使网络交互多媒体成为可能，成为现实。三年前当我们浏览国外的网站榜评时，还主要是停留在一些平面设计作品上，但是现在国外的榜评已经拥有了很多的互动多媒体动画网站。Flash发展的速度由此可见。IE浏览器在6.0版本中已经内置了Flash Player播放器，似乎在预示着网站制作的发展道路。让我们一起来领略互动的魅力。

4.1Loading预载动画程序设计

Loading网页预载程序是网页动画中的一个关键，因为即便是Flash生成的文件很小，但是制作出的大型动画对于使用调制解调器的用户速度还是需要解决的。如果没有一个预载的过程，只怕动画观看起来也不会很流畅。特别是在动画中加入了大量的声音和图像的动画没有了Loading将不会流畅的展现在我们眼前。
在此之前先学习一下在这章将要出现的属性与函数。如果由于例中使用了没有接触过的函数和属性，请先照例制作，等在以后的章节中学习了相关的其它函数后回过头来再看的话，就会完全明白例子中的作用。
◆ _framesloaded
_framesloaded是电影剪辑的属性，用来获取电影剪辑中的已经下载的帧数，当然大部的应用于电影剪辑的属性都可以应用于整部动画。此属性只能用来获取。
if(_root.mc._framesloaded>100){
_root.gotoandplay(1)
}
此例子在普通模式下输入将成为：
if(getproperty("_root.mc",_framesloaded)>100){
gotoandplay(1)
}
普通模式中对属性的获取将使用getproperty函数，但此函数在新的.语法的使用中并非最佳，在以下的例子中将不再引用。此例中以获得电影剪辑已经下载的帧数大于100时，开始返回场景重新播放。这也是在网站制作中一个比较典型的例子，很多的电影剪辑因为体积问题，在“流”式播放过程中不会很流畅。而下例将是一个错误的例子。
_root.mc._framesloaded=100;
_root.gotoandplay(1);
在编程中将不允许对_framesloaded属性进行赋值，如果你想当下载的帧数等于100时根目录开始回放的话，请按下例制作。
if(_root.mc._framesloaded=100){
_root.gotoandplay(1);
}
◆ _totalframes
_totalframes属性是用来获取电影剪辑实体的总帧数。也可以用来获取动画的总帧数。在下例中会看到它的用法。
i=_root.mc._totalframes;
if(_root.cuttentframes=i);
_root.stop();
}
程序中将电影剪辑实体的总帧数赋值赋予了变量i，而当主场景的动画播放指针播放到与电影剪辑中的总帧数相同的数目时，动画停止播放。此属性同样为非赋值属性。
◆ ifFramesloaded
ifFramesloaded函数也是用来获取已经下载的帧数的，与_framesloaded不同的是它用于一个简单的行为来描述已下载的帧数。而且此函数似乎是专为Loading设计，它位于Basic Actions指令集，指令名称为If Frames Is Loaded。以下实例将构成一个最为简单的Loading。
ifFrameLoaded(_totalframes){
gotoandplay(3);
}else{
gotoandplay(1);
}
将此程序加于影片的第二帧，可用于所有动画的预载技术。意思为当装入的帧数为总帧数时开始播放第三帧，如果不然，播放第一帧。在Flash5以后开始使用更多的函数和属性，所以此函数不推荐使用。
◆ getBytesLoaded()
getBytesLoaded()为获取电影剪辑实体的已下载字节数，如果是外部动画将返回动画的总字节数。GetBytesLoaded用于更加精确的Loading设计，因为它并不像_framesloaded属性是获取影片的总帧数，而是以字节做为单位获取。如果说动画的最后一帧将是一个大型的图像或是声音角色的话，哪么_framesloaded所获得的百分比将不准确，getBytesLoaded有效的弥补了此方面的不足。例：
i=_root.getBytesTotal();
if(_root.getBytesLoaded()>=1000000){
n=_root.getBytesLoaded();
if(n<=i/4){
_root.stop();
trace "下载了1M，还不到四分之一，动画太大，下载时间会很长，是否继续？"
}
}
此句的意思为当动画下载到1MB时，比较是否已经下载了动画的四分之一，如果是，停止动画的播放，在调试窗口显示“下载了1M，..."等字符串，根据动画中的其他行为判断是否继续播放。此例的另一特点是，停止的地方如果有插入电影剪辑的话，电影剪辑将不会停止播放。也可以通过动态文本显示已经下载的文字数，假设在动画的主场景中有一个变量名为text的动态文本变量，哪么例：
_root.text=_root.getBytesLoaded();
if(_root.getBytesLoaded()>=_root.getBytesTotal()){
gotoandplay(3);
}else{
gotoandplay(1);
}
动态文本框会动态显示已经下载的字节数为观众服务。观众也会了解在动画的下载过程中动态的进度了。
◆ getBytesTotal()
getBytesTotal()函数是用来获取动画或是电影剪辑的总字节数，当然我们可以通过对文件的大小来观察动画的总字节数，但对于网络上使用浏览器的观众来说，动态显示文件大小是很有必要的。还有，如果想观察动画中电影剪辑的体积就只有靠getBytesTotal()函数了。
If(_root.getBytesTotal()>=1000000){
_root.stop();
}
这个程序的意思是当动画的总字节超过1M时停止动画播放。
◆ gettimer()
gettimer()函数用来获取电影剪辑或是动画的已经播放时间数，此函数并不仅仅应用于Loading的制作，在今后的学习过程中还会接触到它。在Flash5的对动画播放时间的控制上会有gettimer()函数大显身手的舞台。但gettimer()函数获取的时间是以毫秒做为计算单位的，一般在程序制作过程中还会对它除以一千来取得秒，这样更加符合对于时间播放程序的显示。假设动画中有一个text的动态文本框变量。例：
text=gettimer()/1000;
通过帧循环或是其它的诛如OnClipEvent(enterframe)等行为的控制会动态的显示动画播放的时间过程。又例如：
text=gettimer()/1000;
if(text>=10){
gotoandstop(3);
}else{
gotoandplay(1);
}
假设此程序位于动画的主场景的第二帧。那么当开始播放10秒钟之后才会正式开始播放，不然只会在第一帧与第二帧之间循环。

4.1.1 一个简单的Loading

一个简单的Loading制作并不需要很高深的编程基础，而且大部份设计人员开始学习Flash脚本编程时都是从Loading开始学起的。也是因为制作Loading对于动画传播方面起着至关重要的作用。(此实例在光盘范例\ch4\4-1.fla)
步骤一、打开Flash5，新建一个文件。在影片的默认设置中背景色是白色的，动画将以每秒十二帧的速度播放，这些你可以通过点击Modify|Movie命令打开Movie Properties对话框观察到。如图4-1所示。但是实践告诉我们，使用影片默认设置制作的动画，在网上浏览时，并不能很流畅，所以设计人员一般喜欢把默认的每秒12帧更改的高一点，这样就可以在发布了以后观看到比较流畅的动画了。

图4-1 Movie Properties对话框

步骤二、在影片的第一帧，使用Window|Panels|Stroke命令打开Stroke笔触面板，将笔触的宽点拉杆拉到3，如图4-2所示。

图4-2 用Stroke面板改变笔触粗细

步骤三、点击绘图面板中的方形绘图工具。在绘图面板Colors项上面的油漆桶工具中把色彩选为红色。然后在场景中绘制出一个长方形，如图4-3所示。

图4-3 绘制一个长方形进度条

步骤四、在编辑区内用鼠标点击长方形的红色处，你会发现色彩出现了很多小麻点，已经处于了被选取状态。
步骤五、点击Insert|Convert to Symbol，将红色长方形转换为符号，在随后打开的Symbol Properties对话框中的Name输入框输入符号的名称为Loading。然后选择Movie Clip电影剪辑项，点击OK。
步骤六、现在点击红色长方形你会发现它已经不再出现小麻点了，而是出现了一个蓝色的外框，因为它已经是一个符号了。现在选Window|Panels|Instance命令打开Instance实例面板。
步骤七、在面板中的Name项中输入名称Loading，为这个符号取了一个分身名称。如图4-4所示。

图4-4 为进度条符号取分身名称

步骤八、在时间轴的第二帧按F6键，插入一个关键帧。
步骤九、用鼠标双击此帧打开帧的Action面板。我们要开始制作预载动画的程序了。
步骤十、双击Action面板左边的指令里的Actions项，在打开的指令里选择if，用鼠标又击，if指令出现在编辑区了。
步骤十一、在Action面板的下半部份参数输入区里Condition输入栏中输入代码_framesloaded>=_totalframes。如图4-5所示。

图4-5 在if指令参数框内输入代码

步骤十二、然后点击指令区的Basic Actions命令集里的goto指令，在随后的参数输入框内的Frame栏目中输入数字3。如图4-6所示。

图4-6 goto指令的参数输入栏

步骤十三、然后点击 Actions指令集中的else项。
步骤十四、再次点击goto指令，这回不用更改帧序列数字了。
步骤十五、点击Action指令集的Setproperty指令，选择Properties下拉框中的_xscale属性，然后在Target输入栏中输入“_root.loading"，点选后面的Expression单选框项目。
步骤十六、在Value输入栏中输入代码(_framesloaded/_totalframes)*100，点选后面的Expression单选框。

图4-7 Setproper指令参数输入框

步骤十七、指令已经输入完毕了。接下来开始在第三帧后面制作你的动画，然后发布，上传，观看。你也可以打开Control|Debug Movie测试电影，在随后打开的浏览窗口中使用Debug菜单中的模拟下载速度来测试。
程序解读：
第1-2行中if(_framesloaded>=_totalframes)句的意思是当已经下载的帧数大于等于影片的总帧数时，跳转到第三帧开始播放。
第3-5行，如果下载的帧数小于总帧数的话，跳转到第一帧播放。并且安装分身名称为loading的电影剪辑的长度属性，使它的长度成为已经下载的帧数除以总帧数再乘100。
知识要点：
Loading制作很多设计人员喜欢使用帧行为，其实用很多的功能都可以实现Loading制作。本例中使用(_framesloaded/_totalframes)*100的表达式来制作进度条的宽度。其它Loading制作方法不管是用下载时间函数还是用下载字节函数，但下载数除以总数乘以100的表达式基本上是没什么变化的了。

4.1.2 精确的Loading设计

上述的哪个Loading程序有一些比较简单，虽然它已经达到了预载的效果，但是对于要求比较高的朋友可能就不能满足了。哪么请看图4-8，这个预载动画将使用到比较多的函数，使动画预载看起来更加的人性化。(此实例在光盘范例\ch4\4-2.fla)

图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制作的关键。

出处：蓝色理想
责任编辑：蓝色

上一页 下一页 4.1.3 - 趣味Loading设计

◎进入论坛Flash专栏版块参加讨论