flash加载进度条

七彩焰阳

flash加载进度条

　　刚开始学习flash的人对flash中的进度条都充满了好奇，经常有人问    进度条怎么编写的问题。
　　在这里，我对进度条的编写作了一些总结，希望对有需求的朋友有所帮助，特别是那些初学者，希望他们在读完这篇文章后有所收获。当然，对那些高手来说未必没有一点用处，也许会有些意外收获哟。

　　注意：具体问题具体分析，并不保证所有情况下都适用

　　言归正传，从最简单的开始
　　所谓最简单的其实就是摆放那里的一个假的进度条，你可以作一个mc后者直接在贞里画，把它放在动画的最前面就行了，哈哈没想到吧，其实这种方法在早期swf文件比较小的情况下，确实是个不错的选择，但随着flash技术的发展，以及swf文件体积的大增，这种方法基本上已经被弃用。这里就当是一个小插曲让大家放松一下，其实做进度条没什么难的，接下来我们正是开始用as编写进度条。

　　首先我们来学习一下单一flash文件内部加载进度条的制作：

　　0，将要加载进度条的文件打开
　　1，将所有放置元件的的层在时间轴上的贞，向后移两贞（当然如果你没有做其他的动画，就直接插入两个关键贞就完了）
　　2，在第一贞处放置进度条元件，在这里我们是用一个名为preloader的mc（一个长方形的元件，记住注册点在左，或左上角）;
　　3,在第一贞处添加代码

1. var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal();
   
2. prelaoder._xscale = amountLoaded*100;//进度条的宽度

复制代码

　　//当然你也可以在这里加一些动态文本之类的标示白分别什么的，在此不再赘述
　　4，在第二贞处加如下代码

1. if(_root.getBytesLoaded() == _root.getBytesTotal()){
   
2.           gotoAndPlay(3);//播放结束，继续后面动画
   
3. }else{
   
4.           gotoAndPlay(1);//播放未结束，继续回第一贞
   
5. }
   

复制代码

　　到此，第一种用代码加载进度条的方法就完成了，很简单吧。

　　让我们继续往下讲，
　　第一种方法这么简单，为什么还要继续说别的方法呢？这里我们就要说到上一种方法的缺点了

　　问题出现了：如果在舞台上添加了组件或其他延展类（具体问题具体分析），前面的方法将不起作用。

　　解决办法：将组件连接属性中的第一贞导出取消，发布选项中选导出从第2贞，将组件放在第二贞（或有命名的贞）
并在第二贞加上stop();(注意 本文没有特别说明是所有脚本都是写在单独的as层，即写在贞上）；

　　在第一贞加代码，

1. this.onEnterFrame = function(){
   
2. var amount:Number = this.getBytesLoaded()/this.getBytesTotal()*100;
   
3. preloader._xscale = amount;
   
4. }
   
5. if(amount == 100){
   
6. this.gotoAndPlay(2);//如果是命名的贞，则改成此贞
   
7. delete this.onEnterFrame

复制代码

;


　　flash加载进度条

　　网络中的swf影片是可以实现边下载边播放的，由于受到当前网络传输的制约，对于大容量的影片，这种实时播放并不理想。为避免受众尴尬的等待，flash制作人员往往设计一个加载(loading)的画面，等影片的全部字节下载到本地后再播放，从而保证影片的播放质量.
步骤:
　　1.打开Flash MX 2004，选择矩形工具，在主场景中画出下一个只有边框有矩形，本例该矩形大小为350*16像素。
　　2.再在主场景中仍用矩形工具画出一个只有填充而无边框的矩形，并按F8键将其转换为影片剪辑（注：其注册点一定要选在该矩形的最左侧），其实例名为bar 。本例该矩形大小为345*11像素。
　　3.将上述两矩形在主场景中排列好，使边框矩形嵌套填充矩形。
　　4.在上述两矩形旁边用文字工具拖出一动态文本框，其变量名为bar_per。

　　至此，准备工作就绪，即建立了两矩形框和一动态文本框，下面准备编写代码。

　　5.在主场景中，新建一层，选中该层第1帧，按F9键打开动作脚本编辑窗口，输入以下代码 ：

1. this.onLoad=function(){
   
2. myBytesTotal=_root.getBytesTotal();
   
3. }
   
4. this.onLoad();
   
5. this.onEnterFrame=function()
   
6. {
   
7. myBytesLoaded=_root.getBytesLoaded();
   
8. bar_xscale=myBytesLoaded/myBytesTotal*100;
   
9. percent=Math.round(bar_xscale);
   
10. this.bar._xscale=bar_xscale;
    
11. this.bar_per=percent+"%";
    
12. if(myBytesLoaded==myBytesTotal){
    
13. delete this.onEnterFrame;
    
14. _root.nextFrame();
    
15. }else{
    
16. this.stop();
    
17. }
    
18. }

复制代码

　　6.从主场景时间轴第2帧起制作你的flash影片。

　　注解:
　　①


this.onLoad=function(){
myBytesTotal=_root.getBytesTotal();
}
　　此段代码是指,当影片剪辑(本例指两矩形和一动态文本框所存在的主场景)加载时,读取主时间轴存在的所有元素的总字节数并赋值给变量myBytesTotal。

　　②





this.onLoad();
flash事件处理函数MovieClip.onLoad=function(){…}有些奇怪,其中设置的代码，若不在后面加上this.onLoad()
这些代码并不能执行，因此加上这一句以便这些代码得以执行。
　　③
myBytesLoaded=_root.getBytesLoaded();//读取主时间轴存在的所有元素已加载的字节数,并将其赋值给变量myBytesLoaded。④

bar_xscale=myBytesLoaded/myBytesTotal*100;//将myBytesTotal折算成100时，
myBytesLoaded所得到的折算值赋给变量bar_xscale，
以便给主场景中bar的_xscale赋值（_xscale的最大值只能为100），这里用到了初等数学的比例计算。
　　⑤

percent=Math.round(bar_xscale);//将变量bar_xscale的值取整后赋给变量percent，以便显示的百分比不带小数。
}拓展：
　　1.“下载速度”的代码设计
①在主场景中用文字工具拖出有适当宽度的动态文本框，并设其变量名为rate 。
②在主场景代码层第1帧this.onEnterFrame=function(){}代码体if语句前追加如下代码：

1. t=getTimer();
   
2. rate= "下载速度：" + Math.round(myBytesLoaded/t * 100)/100 + " K/s";

复制代码

　　2.“已用时间和剩余时间”的代码设计
①在主场景中用文字工具拖出有适当宽度的动态文本框，并设其变量名为mytimes 。
②在主场景代码层第1帧this.onEnterFrame=function(){}代码体if语句前追加如下代码：




timeLoaded=Math.round(t/1000);
timeRemain=Math.round(timeLoaded*(myBytesTotal-myBytesLoaded)/myBytesLoaded);
timeRemain=Math.round(timeRemain/60)+":"+Math.round(timeRemain%60);
timeLoaded=Math.round(timeLoaded/60)+":"+Math.round(timeLoaded%60);
mytimes="已用时间"+timeLoaded+" "+"剩余时间"+timeRemain; 注：若“下载速度”的代码没有设计，则上述代码前应追加代码 t=getTimer();
拓展后主场景代码层第1帧的全部代码如下：

1. this.onLoad=function(){
   
2. myBytesTotal=_root.getBytesTotal();
   
3. }
   
4. this.onLoad();
   
5. this.onEnterFrame=function(){
   
6. myBytesLoaded=_root.getBytesLoaded();
   
7. bar_xscale=myBytesLoaded/myBytesTotal*100;
   
8. percent=Math.round(bar_xscale);
   
9. this.bar._xscale=bar_xscale;
   
10. this.bar_per=percent+"%";
    
11. t=getTimer();
    
12. rate= "下载速度：" + Math.round(myBytesLoaded/t * 100)/100 + " K/s";
    
13. timeLoaded=Math.round(t/1000);
    
14. timeRemain=Math.round(timeLoaded*(myBytesTotal-myBytesLoaded)/myBytesLoaded);
    
15. timeRemain=Math.round(timeRemain/60)+":"+Math.round(timeRemain%60);
    
16. timeLoaded=Math.round(timeLoaded/60)+":"+Math.round(timeLoaded%60);
    
17. mytimes="已用时间"+timeLoaded+" "+"剩余时间"+timeRemain;
    
18. if(myBytesLoaded==myBytesTotal){
    
19. delete this.onEnterFrame;
    
20. _root.nextFrame();
    
21. }else{
    
22. this.stop();
    
23. }
    
24. }

复制代码

ffgg

我来看看！谢谢