制作Flash Loading 加载进度条

所属分类: 网页制作 / Flash 阅读数: 385
收藏 0 赞 0 分享
复制代码 代码如下:

前言:网络中的swf影片是可以实现边下载边播放的,由于受到当前网络传输的制约,对于大容量的影片,这种实时播放并不理想。为避免受众尴尬的等待,flash制作人员往往设计一个加载(loading)的画面,等影片的全部字节下载到本地后再播放,从而保证影片的播放质量.本文将介绍一种较为标准的loading制作方法。


步骤:
1.打开Flash MX 2004,选择矩形工具,在主场景中画出下一个只有边框有矩形,本例该矩形大小为350*16像素。
2.再在主场景中仍用矩形工具画出一个只有填充而无边框的矩形,并按F8键将其转换为影片剪辑(注:其注册点一定要选在该矩形的最左侧),其实例名为bar 。本例该矩形大小为345*11像素。
3.将上述两矩形在主场景中排列好,使边框矩形嵌套填充矩形。
4.在上述两矩形旁边用文字工具拖出一动态文本框,其变量名为bar_per。

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

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

this.onLoad=function(){ 
myBytesTotal=_root.getBytesTotal(); 

this.onLoad(); 
this.onEnterFrame=function(){ 
myBytesLoaded=_root.getBytesLoaded(); 
bar_xscale=myBytesLoaded/myBytesTotal*100; 
percent=Math.round(bar_xscale); 
this.bar._xscale=bar_xscale; 
this.bar_per=percent+"%"; 

if(myBytesLoaded==myBytesTotal){ 
delete this.onEnterFrame; 
_root.nextFrame(); 
}else{ 
this.stop(); 

}
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语句前追加如下代码:
t=getTimer();
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帧的全部代码如下:


this.onLoad=function(){ 
myBytesTotal=_root.getBytesTotal(); 

this.onLoad(); 
this.onEnterFrame=function(){ 
myBytesLoaded=_root.getBytesLoaded(); 
bar_xscale=myBytesLoaded/myBytesTotal*100; 
percent=Math.round(bar_xscale); 
this.bar._xscale=bar_xscale; 
this.bar_per=percent+"%"; 

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

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; 

if(myBytesLoaded==myBytesTotal){ 
delete this.onEnterFrame; 
_root.nextFrame(); 
}else{ 
this.stop(); 

}
更多精彩内容其他人还在看

AS3中的反射(速记) 分析

详细了解AS3的反射,请google相关文章,这里只是速记一下
收藏 0 赞 0 分享

flash与asp/php/asp.net通信的方法第1/3页

flash与后台程序通信
收藏 0 赞 0 分享

火山动态文本滚动条V5[AS3版]

功能说明:本版滚动条除了继续保持体积小(小于2K),界面容易修改,资源占用率小的优势外,主要有以下几点改进: 1,使用AS3编写。 2,宽高动态指定。 3,增加滚动条背景点击事件。 4,消除了鼠标滚轮无法同时准确控制多个文本框的重大BUG。
收藏 0 赞 0 分享

AS打造的复制粘贴等功能类

真不错漂亮大方的flash复制粘贴剪切等效果
收藏 0 赞 0 分享

关于类、私有属性与继承的理解

学习FLASH的时间也不短了,但总觉得还有很多的东西在等我去弄清楚。而且有很多东西也是搞得似懂非懂。在这里,把类、私有属性跟继承的理解讲一下。也希望大家能无私补充,以臻佳景。
收藏 0 赞 0 分享

FLASH自动判断域名然后转向等操作

FLASH自动判断域名,如果不是你的域名,然后干什么你来定吧! 首先说一下FLASH自已可以干什么!FLASH他可以判断自已在哪个路径下面,例如:
收藏 0 赞 0 分享

Flex程序开发心得小结

和Flash的开发环境相比,Flex提供的组件库确实很诱人,但由于功能太全面,导致程序的体积大,有时候使用不当,可能会影响程序运行效率。
收藏 0 赞 0 分享

关于FLASH与XML交互应用中的理解

关于XML在FLASH中的应用,以前写过几篇。也收集了几篇来自网络的。不过,都是一些非常简单而常用的。在这里,我把XML的其他相关说明总结一下。有不足之处,希望大家能相互补充。只为了一个共同的目的:共同提高。
收藏 0 赞 0 分享

Flash Event写法

flash下event事件驱动方法
收藏 0 赞 0 分享

AS3自写类整理笔记 ClassLoader类第1/2页

在用flash做项目的时候,把一些元件,通过设置链接类,然后使用这个类,通过getClass方法即可把这个素材拿下来
收藏 0 赞 0 分享
查看更多