刚开始学习flash的人对flash中的进度条都充满了好奇,经常有人问 进度条怎么编写的问题。
在这里,我对进度条的编写作了一些总结,希望对有需求的朋友有所帮助,特别是那些初学者,希望他们在读完这篇文章后有所收获。当然,对那些高手来说未必没有一点用处,也许会有些意外收获哟。
注意:具体问题具体分析,并不保证所有情况下都适用
言归正传,从最简单的开始
所谓最简单的其实就是摆放那里的一个假的进度条,你可以作一个mc后者直接在贞里画,把它放在动画的最前面就行了,哈哈没想到吧,其实这种方法在早期swf文件比较小的情况下,确实是个不错的选择,但随着flash技术的发展,以及swf文件体积的大增,这种方法基本上已经被弃用。这里就当是一个小插曲让大家放松一下,其实做进度条没什么难的,接下来我们正是开始用as编写进度条。
首先我们来学习一下单一flash文件内部加载进度条的制作:
0,将要加载进度条的文件打开
1,将所有放置元件的的层在时间轴上的贞,向后移两贞(当然如果你没有做其他的动画,就直接插入两个关键贞就完了)
2,在{dy}贞处放置进度条元件,在这里我们是用一个名为preloader的mc(一个长方形的元件,记住注册点在左,或左上角);
3,在{dy}贞处添加代码
var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal();
prelaoder._xscale = amountLoaded*100;//进度条的宽度
//当然你也可以在这里加一些动态文本之类的标示白分别什么的,在此不再赘述
4,在第二贞处加如下代码
if(_root.getBytesLoaded() == _root.getBytesTotal()){
gotoAndPlay(3);//播放结束,继续后面动画
}else{
gotoAndPlay(1);//播放未结束,继续回{dy}贞
}
到此,{dy}种用代码加载进度条的方法就完成了,很简单吧。
让我们继续往下讲,
{dy}种方法这么简单,为什么还要继续说别的方法呢?这里我们就要说到上一种方法的缺点了
问题出现了:如果在舞台上添加了组件或其他延展类(具体问题具体分析),前面的方法将不起作用。
解决办法:将组件连接属性中的{dy}贞导出取消,发布选项中选导出从第2贞,将组件放在第二贞(或有命名的贞)
并在第二贞加上stop();(注意 本文没有特别说明是所有脚本都是写在单独的as层,即写在贞上);
在{dy}贞加代码,
this.onEnterFrame = function(){
var amount:Number = this.getBytesLoaded()/this.getBytesTotal()*100;
preloader._xscale = amount;
}
if(amount == 100){
this.gotoAndPlay(2);//如果是命名的贞,则改成此贞
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键打开动作脚本编辑窗口,输入以下代码 :
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的{zd0}值只能为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();
}
}