更上层楼,酷炫FlashWeb──Loading:下载进度更明白
数码时尚
通常我们看到的FlashWeb页面载入的Loading效果是单一闪动的文本或图片,如果将载入动画的大小、加载字节数、载入进度都显示出来岂不是更加一目了然(图1)?
实现这种效果,只需要简单的5步。
Step1:更改文档属性:运行Flash MX,按“Ctrl+J”打开“Document Properties(文档设置)”对话框,更改当前文档大小为550×200px,并设定“Background(背景色)”为#003366(图2)。
Step2:Loading场景的选择:执行菜单“Modify/Scene”命令打开场景设置对话框,单击“Add Scene”按钮增加一个场景,并分别命名这两个场景为“Loading”、“main”。点击“Loading”场景,进入该场景编辑状态。
解说:制作Loading预载Flash动画,最好是设置两个场景,一个作为Loading效果场景,一个用做动画播放的主场景。
Step3:“Loading”场景制作:在原有层基础上,点击时间线面板上的“Insert Layer”按钮,再添加两个层,然后将三个层分别命名为“Actions、bh、text”。点击“text”层第1帧,选择工具箱中“Text Tool”工具,在第1帧中添加三个文本标签“载入文件大小(KB)、载入字节数(Byte)、下载量(%)”并在这三个文本标签后添加三个空文本标签,作为动态文本框(图3)。
解说:动态文本框是用来显示文本标签数据的,和文本标签不同的是,它需要设定一个变量,用来在以后设置动作时调用这个变量而显示相应数值。
分别在“Properties”里更改这三个动态文本框的Var值为“filekb、loadkb、loadper”(图4),并更改其属性为“Input Text”,最后点击“text”层第3帧,按F5键插入空白关键帧。
Step4:绘制载入状态条:用快捷键“Ctrl+F8”打开“Creat New Symbol”对话框,创建一个“MovieClip”,并进入场景编辑。选择工具箱中的“Rectangle Tool”工具,并设置填充颜色为#FF0000,在编辑区域画一个红色长方形,返回主场景。选择“bh”层,使用“Text Tool”工具,在该层第1帧输入文字“Loading…”,再选择“Rectangle Tool”工具在其下方绘制一个白色长方形。最后用快捷键“Ctrl+L”打开“Library”库,将刚才绘制的红色状态条拖放到白色长方形上。更改Properties面板中的Instance Name属性为cfx(图5)。最后点击“bh”层第3帧,按F5键插入空白关键帧。
Step5:设置动作:右键单击“Actions”层第1帧,执行Actions命令打开Actions对话框,切换到Expert Mode模式,输入如下代码:
filekb=this.getBytestotal();
loadkb=Math.round(filekb/1024);
解说:使用getBytestotal()函数获取文件字节数,然后将字节数转化为KB单位。
在该层第2帧处按F6键插入关键帧,在动作中输入如下代码:
loadkb=this.getBytesloaded();
loadper=Math.round((loadkb/filekb)*100);
cfx._xscale=loadper;
解说:使用getBytesloaded()函数获得已下载的字节数,并通过四舍五入取得下载百分比,从而使状态条按百分比横向缩放,实现状态改变。
在该层第3帧按F6键插入关键帧,在动作中输入如下代码:
if (bfb<100) {gotoAndPlay("loading", 2);}
else
{gotoAndPlay("main", 1);}
这样,我们就完成了带详细进度显示的Loading场景的制作过程,只需要在“main”场景中加入主体动作过程就可以了。




