案例9--不要在加载时面对苍白的屏幕

谁都不愿意在加载时看着一片空白的屏幕，于是在网络应用中常常使用到加载进度条、预加载图片等手法来让用户知道你后台正在加载中。
      对于进度条的制作，相信大家都从案例一中学习过了，但是却不知道怎么把这样子的进度条应用到实际开发中去。我写教程的目的就是给出各种实用的案例让列位仙家明白在实际开发中如何把学到的知识灵活运用起来，好的，今天咱们就来看看怎么用这进度条吧。
      首先，我使用教程一制作出来的进度条swf文件（我采用的是圆形布局的读取动画哦），把它放在我工程目录下，再利用AS中的嵌入标签语句将此swf嵌入进来，记住，所有写有Embed标签的资源都将会在编译时被嵌入flash，会增加编译结果swf的大小，但是该资源不需要在运行时被读取，无需等待，它将会立即显示出来，对于一个进度条来说，我们需要把它嵌在flash中，在flash读取过程中用户将会立即看到进度条在旋转。给出源码：

1. package
2. {
3.         import flash.display.Loader;
4.         import flash.display.MovieClip;
5.         import flash.display.Sprite;
6.         import flash.events.Event;
7.         import flash.net.URLRequest;
8.         
9.                 [SWF(backgroundColor="0xffffff")]
10.         public class indeterminateBar extends Sprite
11.         {
12.                 [Embed(source="LoadingProcessBar.swf")]
13.                 private var loadingProgressClass:Class;
14.                 private var loadingProgressMC:MovieClip;
15.                 private var loader:Loader;
16.                 
17.                 public function indeterminateBar()
18.                 {
19.                         init();
20.                 }
21.                 
22.                 private function init():void{
23.                         loader = new Loader();
24.                         loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
25.                         loader.load( new URLRequest("http://www.flash8.net/uploadflash/61/flash8net_60902.swf" ) );
26.                         loadingProgressMC = new loadingProgressClass();
27.                         addChild( loadingProgressMC );
28.                 }
29.                 
30.                 private function onComplete(event:Event):void{
31.                         removeChild( loadingProgressMC );
32.                         addChild( loader );
33.                 }
34.         }
35. }

复制代码

一开始我们把进度条资源嵌在loadingProgressClass这个类上，到用的时候就可以直接使用new关键字来创建一个MovieClip的实例了（对于带时间轴的swf文件一般new出来的实例类型为MovieClip，对于.jpg, .png等图片文件，new出来的实例类型一般为BitMap类型）。对于Loader的使用，我在这里不会多提，各位道友可以在很多地方找到关于它的介绍以及用法，这里需要提到的一个关键点在于，我们监听了Loader的COMPLETE事件，它将在Loader加载资源完成时被抛出，当我们监听到此事件时就表示加载已完成了，就可以移去我们之前添加到舞台上的进度条并把加载好资源的Loader添加上去，很简单吧？
运行结果应该是这样子的：
<ignore_js_op> 
     刚才我们做的是称为不确定型进度条（indeterminate Progress Bar ），这种进度条在读取时用户看不到读取了百分之几，只能看到一个圈圈在转或是某个动画在放啥的。现在为大家介绍一下确定型进度条的制作方式。
     对于确定型进度条，它的外观就可以弄得简单些，一般就直接用一根长条就可以了，所以我们先简单地创建一个自定义进度条类：
CustomProgressBar：

1. package
2. {
3.         import flash.display.Sprite;
4.         
5.                 [SWF(backgroundColor="0xffffff")]
6.         public class CustomProgressBar extends Sprite
7.         {
8.                 private var _progressView:Sprite;
9.                 private var _width:Number;
10.                 private var _height:Number;
11.                 
12.                 public function CustomProgressBar( width:Number = 100, height:Number = 20 )
13.                 {
14.                         super();
15.                         _width = width;
16.                         _height = height;
17.                         initView( );
18.                 }
19.                 
20.                 public function update( loadedPercent:Number ):void{
21.                         _progressView.width = _width * loadedPercent;
22.                 }
23.                 
24.                 private function initView( ):void{
25.                         //绘制总进度条轮廓
26.                         this.graphics.lineStyle(1); 
27.                         this.graphics.drawRect( 0, 0, _width, _height );
28.                         //初始化进度条视图
29.                         _progressView = new Sprite();
30.                         _progressView.graphics.beginFill(0x0000ff);
31.                         _progressView.graphics.drawRect(0, 0, _width, _height);
32.                         _progressView.graphics.endFill();
33.                         this.addChild( _progressView );
34.                         _progressView.width = 0; //一开始进度条还没开始读取呢，得让它宽度为0才行
35.                 }
36.         }
37. }

复制代码

这种级别的代码各位应该不会有疑问，所有语句都是以往接触过的。有了这玩意儿我们就可以在主应用中使用之了：
determinateBar.as：

1. package
2. {
3.         import flash.display.Loader;
4.         import flash.display.Sprite;
5.         import flash.events.Event;
6.         import flash.events.ProgressEvent;
7.         import flash.net.URLRequest;
8.         
9.         public class determinateBar extends Sprite
10.         {
11.                 private var loadingProgress:CustomProgressBar;
12.                 private var loader:Loader;
13.                 
14.                 public function determinateBar()
15.                 {
16.                         init();
17.                 }
18.                 
19.                 private function init():void{
20.                         loadingProgress = new CustomProgressBar( 200, 40 );
21.                         loader = new Loader();
22.                         loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
23.                         loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
24.                         loader.load( new URLRequest("http://www.flash8.net/uploadflash/61/flash8net_60902.swf" ) );
25.                         addChild( loadingProgress );
26.                         loadingProgress.x = stage.stageWidth / 2;
27.                         loadingProgress.y = stage.stageHeight / 2;
28.                 }
29.                 
30.                 private function onProgress(event:ProgressEvent):void{
31.                         var loadedPercent:Number = event.bytesLoaded / event.bytesTotal;
32.                         loadingProgress.update( loadedPercent );
33.                 }
34.                 
35.                 private function onComplete(event:Event):void{
36.                         removeChild( loadingProgress );
37.                         addChild( loader );
38.                 }
39.         }
40. }

复制代码

唯一需要介绍的地方就是Loader中的PROGRESS事件，当Loader在读取资源时每一定时间间隔内都会抛出此事件，监听此事件并不断更新进度条的外观就可以达到我们的目的啦。
运行结果如下：
<ignore_js_op> 

2010-10-31 16:31:47 上传

下载附件 (16.68 KB)

 

外观比较粗糙，各位别见怪哈，毕竟我又不是美工（- -！自我安慰一下）
     接下来，会为各位带来预加载图片的制作方式，会有点复杂哦，学之前请先学习bitMap和bitmapData类的使用方法。

列位仙家，do you miss me? 不好意思，刚去上了个厕所回来，手都没洗就马上敲键盘，准备马上给列位仙家带来我们接下来的案例——图片预加载图像。
   所谓预加载图像就是指在图片加载完成前用户在该图片处所看到的图像，为了不让用户看见白白一片的舞台而造成误认为此flash BUG百出的尴尬，使用预加载图像是不错的解决方案。
   加载完成前：
<ignore_js_op> 
    加载完成后：
<ignore_js_op> 

     再次为这个粗糙的界面抱歉，毕竟我不是……咳咳，后面省略的字不用我说你们都会大声告诉我的对不对？（请回帖告诉我）反正咱们能理解原理就达到目的了，界面有毛用。
   首先讲解下预备知识，我们在之前的案例中提到过，使用Embed标签嵌入的资源，new出来的实例类型会有所不同，看下面的代码：

1. [Embed(source="wokao.swf")]
2. private var wokao:Class;
3. [Embed(source="wasai.jpg")]
4. private var wasai:Class;
6. public function init():void{
7.       var test1:MovieClip = new wokao(); //资源类型为.swf，实例化结果为MovieClip类型
8.       var test2:Bitmap = new wasai(); //资源类型为.jpg, .png等图片类型，实例化结果为Bitmap类型
9. }

复制代码

每个bitmap实例都有它所对应的bitmapData, 不过一个bitmapData可以用在好多个bitmap中，所以我们可以嵌入一个预加载图片并使用new操作把它实例化为一个bitmap实例，之后取出此bitmap中的bitmapData，在我们舞台上的图片还未加载完时，它们所对应的bitmapData此时可能为空，那在图片加载完成前，我们可以把预加载图像的bitmapData赋值给它，先一口气把源码都贴上来再说吧：

1. package
2. {
3.         import flash.display.Bitmap;
4.         import flash.display.BitmapData;
5.         import flash.display.Loader;
6.         import flash.display.LoaderInfo;
7.         import flash.display.Sprite;
8.         import flash.events.Event;
9.         import flash.net.URLRequest;
10.         
11.         [SWF(width="1000", height="800")]//元数据标签，用以设置舞台相关属性
12.         public class loadingImg extends Sprite
13.         {
14.                 [Embed(source="assets/preloadImg.jpg")]
15.                 private var preloadImg:Class; //嵌入在swf中的预加载图片类
16.                 private var preloadBMD:BitmapData; //预加载图片的位图数据
17.                 private var imgList:Array; //图片数组
18.                 private var resourceList:Array = ["img1.jpg", "img2.jpg", "img3.jpg"];//资源名称
19.                 private var loadedCount:int = 0;//已加载图片数
20.                 
21.                 public function loadingImg()
22.                 {
23.                         super();
24.                         init();
25.                 }
26.                 
27.                 private function init():void{
28.                         preloadBMD = (new preloadImg() as Bitmap).bitmapData;
29.                         var len:int = resourceList.length;
30.                         imgList = new Array( len );//根据要加载图片的数量来决定数组长度
31.                         for(var i:int=0; i<len; i++)
32.                         {
33.                                 var bm:Bitmap = new Bitmap( preloadBMD );
34.                                 bm.width = 250;
35.                                 bm.height = 250;
36.                                 bm.x = i * 270;
37.                                 bm.y = i * 250;
38.                                 imgList[i] = bm;
39.                                 addChild( bm );
40.                         }
41.                         loadPicture( "assets/" + resourceList[0] );//若你把资源文件放在一个目录下，前面记得加路径
42.                 }
43.                 
44.                 private function loadPicture( source:String ):void{
45.                         var loader:Loader = new Loader();
46.                         loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
47.                         loader.load( new URLRequest( source ) );
48.                 }
49.                 
50.                 private function onComplete(event:Event):void{
51.                         (imgList[loadedCount] as Bitmap).bitmapData = ( (event.currentTarget as LoaderInfo).content as Bitmap ).bitmapData;
52.                         loadedCount++;
53.                         if( loadedCount < resourceList.length ){
54.                                 loadPicture( "assets/" + resourceList[loadedCount] );
55.                         }
56.                 }
57.         }
58. }

复制代码

代码不多，咱们慢慢看。先一眼瞟过所有的import语句以及变量声明，来到我们的init()函数，第一行所做的就是我们刚才提过的，把嵌入的预加载图片实例化后取出其中的bitmapData为我所用。第二句到循环结束这些语句虽然一眼就能看懂，但它们代表了一个提高flash运行效率的好习惯，有的道友喜欢这样使用：

1. var array = new Array(); //初始化时不给出数组具体长度
2. for(var i=0; i < num; i++)
3. {
4.      array.push(i);   //在向数组中添加元素时使用array.push语句
5. }

复制代码

更好的写法应该是：

1. var array = new Array( num ); //初始化时给出数组具体长度
2. for(var i=0; i < num; i++)
3. {
4.      array[i] = i;   //在向数组中添加元素时直接对数组中每个元素赋值
5. }

复制代码

在数组中元素数量庞大时，后者执行效率比前者快很多，不信你大可以试试，不过后者仅限于知道数组长度的情况下使用哦。还有一点，相信细心的道友们已经发现了，就是我在循环开始前先求出了数组resourceList的长度再把此长度放到了循环的限制条件中，这样写的效率高于这样写：

1. for(var i:int=0; i<resourceList.length; i++){}

复制代码

为啥捏？因为这样写的话每次循环都会去计算一下resourceList.length的值，很浪费时间。
在循环中，我们根据要加载的图片数量创建出一定的bitmap实例并添加到舞台上，给这些bitmap实例构造函数中填入我们刚才提取出来的预加载图片的bitmapData，让他们的bitmapData在创建时就等于预加载图片的bitmapData，这样它们一被添加到舞台上就会立即显示预加载图片的样子了。
     在loadPicture()方法中我使用了循环加载的概念，一个图片加载好后会立即加载下一个，给loader的COMPLETE事件添加侦听，当图片加载完成后触发此事件，捕捉到此事件时我们把加载好的图片从LoaderInfo.content中拿出来，在给他实例化为bitmap后把他有价值的玩意儿（即它的bitmapData）剥夺出来替换之前的预加载图片的bitmapData，做完这些后别忘了继续下一步加载哦。
     好了，一口气讲了很多了，若各位还有什么不懂的直接回帖发问哈，我会第一时间解答你的哦 ~_^
       为了给弟兄们省银子，我把所有文件都打包在一起了，请笑纳~其中的img1 ~ img3 三张图片太大了，附件不允许这么大，于是就被我KO掉了，请各位直接去找三张图片放到assets目录下并改成和程序中一致的名字吧~
<ignore_js_op> PreLoading.rar (1.16 MB, 下载次数: 1162)