-
十月 16
看过Flash的人都会见过,有很多Flash在显示前都会有个读取进度条,这是因为如果Flash的体积比较大的话,下载需要一些时间,为了不至于让观看者等待,就放一个下载进度来告诉我们还有多久可以播放。这的确是个贴心的设计,但是现实中,进度条可不是这么好做的,我们今天就来说说这个Loading的问题。
Flash中常用的有2中进度加载方式。第一种非常简单,就是用一个swf去加载另一个swf。比如说我们有一个主Flash叫main.swf,然后有一个Load.swf,只要在Load.swf中写入如下代码即可下载main.swf播放:
var request:URLRequest = new URLRequest("main.swf"); var loader:Loader = new Loader(); loader.load(request); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);//这个是加载过程事件 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);//这个是加载完毕事件 function loadProgress(event:ProgressEvent):void { var percentLoaded:Number = event.bytesLoaded/event.bytesTotal ;//计算加载百分比,当前的加载字节除以总字节 percentLoaded = Math.round(percentLoaded * 100);//转换为百分比 trace("Loading: "+percentLoaded+"%"); } function loadComplete(event:Event):void { trace("Complete"); loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadProgress);//移除加载过程监听 loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadComplete);//移除加载完毕监听 addChild(loader);//加载完毕显示到舞台 }
上面这段代码就很好的解决了加载main.swf显示进度的问题。
当然,这个不是我们今天的重点,我们今天重点说说单个swf文件显示进度的问题。
比如说有个1.5MB的swf,如何显示下载进度呢?这里我们要补一个常识,也许很多人都知道,那就是Flash必须下载完一帧以后才会显示这一帧的内容,但是实际中往往很多人没有真正理解,下面我们就具体说一说。
既然是下载完一帧才能显示,那制作Loading就必须至少有2帧,第一帧下载完后,开始显示进度,但是很多时候,我们发现实际中并没有显示,而我们也确确实实用了2帧,这个时候,我们就要检查第一帧的大小了。
有很多时候制作者不注意,第一帧很大,比如有1.2MB,第二针很小,0.3MB,这样,由于是下载完第一帧后才显示进度,等下载完这1.3MB,就什么都晚了,所以,我们必须要让第一帧尽可能的小。
这里需要Debug版本的Flash Player来作为我们的辅助工具,如下图所示,选择菜单 视图->数据流图标:
这里,我们可以发现,红色方框内显示的就是第一帧的大小,1248K,红色圆圈部分表示帧选择,这里选择第一帧。第一帧如此的大,怪不得不会显示Loading,等显示Loading了,影片也基本下载完毕了,这样,Loading就是去了意义。
我们看看同样的第二帧的情况:
第二帧只有9B,几乎是瞬间就下载完毕。
所以,我们要做的就是让第一帧尽可能的小,把所有的数据都移到第二帧上去,可是,该怎么做呢?
Flash IDE中,选择文件->发布设置->Flash,选择脚本设置:
把 “导出帧中的类” 设置到第二帧,然后保存确定。
这样一来,我们就把所有的数据都放到第二帧了,第一帧就会大大减少:
如上图,第一帧已经由原来的1248K变为119K,为什么是119K是因为我的第一帧加载了一个背景Loading图片,所以大了一点,如果没有任何元件的话会小很多,只有十几K。
这样,当第一帧下载完毕就可以显示下载进度了,我们直接在第一帧上写代码:
stop();//这句不要忘了,否则下载完了就直接跳到第二帧了 root.loaderInfo.addEventListener(ProgressEvent.PROGRESS,loadProgress,false,0,true) root.loaderInfo.addEventListener(Event.COMPLETE,init,false,0,true) function loadProgress(e:ProgressEvent):void{ //加载过程中会调用此函数 //e.bytesLoaded/e.bytesTotal分别是已经加载字节跟总字节 //需要显示进度可以在这里操作 lotxt.text=String(int(e.bytesLoaded/e.bytesTotal*100))+"%"; //lotxt是舞台上的一个动态文本,用来显示下载百分比 } function init(e:Event):void{ //加载完成,我们跳到第二帧进行播放 gotoAndStop(2); }
这样,第一帧下载完毕后就会显示下载进度条,直到全部下载完毕跳转到第二帧播放,第二帧就可以正式开始影片了。


◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
1楼 夏沙男人
2楼 夏沙男人
3楼 tttsvj