返回首页

Flash加载进度条制作教程

时间:2010-07-06 15:06来源:betway必威官网www.etsupport.net 编辑:麦田守望者

在这里,我对进度条的编写作了一些总结,希望对有需求的朋友有所帮助,特别是那些初学者,希望他们在读完这篇文章后有所收获。当然,对那些高手来说未必没有一点用处,也许会有些意外收获哟。

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

言归正传,从最简单的开始

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

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

0,将要加载进度条的文件打开

1,将所有放置元件的的层在时间轴上的贞,向后移两贞(当然如果你没有做其他的动画,就直接插入两个关键贞就完了)

2,在第一贞处放置进度条元件,在这里我们是用一个名为preloader的mc(一个长方形的元件,记住注册点在左,或左上角);

3,在第一贞处添加代码

var amountLoaded:Number = _root.getBytesLoaded()/_root.getBytesTotal();

prelaoder._xscale = amountLoaded*100;//进度条的宽度

//当然你也可以在这里加一些动态文本之类的标示白分别什么的,在此不再赘述

4,在第二贞处加如下代码

if(_root.getBytesLoaded() == _root.getBytesTotal()){

          gotoAndPlay(3);//播放结束,继续后面动画

}else{

          gotoAndPlay(1);//播放未结束,继续回第一贞

}

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

让我们继续往下讲,

第一种方法这么简单,为什么还要继续说别的方法呢?这里我们就要说到上一种方法的缺点了

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

解决办法:将组件连接属性中的第一贞导出取消,发布选项中选导出从第2贞,将组件放在第二贞(或有命名的贞)

并在第二贞加上stop();(注意 本文没有特别说明是所有脚本都是写在单独的as层,即写在贞上);

在第一贞加代码,

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的最大值只能为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();

}

}

顶一下
(0)
0%
踩一下
(0)
0%
标签(Tag):FLASH FLASH实例教程 flash教程 flash实例
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片