[转][翻译]LoaderMax使用指导(一)

http://hi.baidu.com/mr_ziqiang/blog/item/4ed3436658325f2bab184c06.html

 

 

翻译:闪刀浪子 www.iflashigame.com http://hi.baidu.com/mr_ziqiang
原文：http://www.greensock.com/loadermax-tips/

1、SWFLoader和ImageLoader的content 和rawContent有何不同？
        content属性取得的是包含了真实内容的容器，而rawContent取得的是真实加载内容。这样做的一个主要原因是在真实的内容加载完成之前就能添加到显示列表或者添加其他的事件。

        真实内容(rawContent)可以是图片、MovieClip、Loader或者Video，所以包装的容器也提供也提供一致的对象类型。同时还提供一些非常方便的缩放和裁剪功能。所以你一般使用content属性就行了，除非你需要直接访问SWFLoader和ImageLoader加载的真实内容。

        下面提供一个简单的例子：

      var loader:SWFLoader = new SWFLoader("child.swf", 
                                           {onComplete:onLoadSWF, width:200, height:100});      

      
      //加载开始之前就可以添加到显示列表
      addChild(loader.content); 
      loader.load();    


      function onLoadSWF(event:LoaderEvent):void {

 var mc:MovieClip = loader.rawContent; //取得真实的内容并调用他的一个函数
         mc.myCustomFunction();     里调用了加载到的swf中的一个类
      }

2、随心所欲的使用单独的加载器
如下面的例子一样，如果你只是要加载一个swf文件，则可以直接使用SWFLoader而无需使用LoaderMax进行包装。
//以下方式完全将swfLoader当做类似于Loader一样用了
var loader:SWFLoader = new SWFLoader("child.swf", {onComplete:completeHandler});
loader.load();
//addChild(loader) 直接添加到显示列表没有任何问题

//用上面的代码方式就行了，不需要像下面这样
var queue:LoaderMax = new LoaderMax({onComplete:completeHandler});
queue.append( new SWFLoader("child.swf") );
queue.load();

当你有多个loader需要加载的时候才应该考虑将loader放入到LoaderMax里面。LoaderMax会管理列表中的每一个loader，汇报他们的进度。

3、在XML中定义你要加载的文件
你知道吗，XMLLoader会在你加载的XML文件中自动查找LoaderMax关联的数据，并根据你的定义自动创建正确实例来加载他们。例如，你可以在XML数据中定义两张需要自动加载的图片。

首先定义一个xml文件：

<?xml version="1.0" encoding="iso-8859-1"?> 
<data> 
     <ImageLoader url="1.jpg" name="image1" load="true" /> 
     <ImageLoader url="2.jpg" name="image2" load="true" /> 
</data>

下面你的加载代码：

LoaderMax.activate([ImageLoader]); //这一句其实是为了引入ImageLoader这个类
var loader:XMLLoader = new XMLLoader("data.xml", {onComplete:completeHandler,estimatedBytes:50000}); 
loader.load();

function completeHandler(event:LoaderEvent):void 
{ 
　　var image1:Bitmap = LoaderMax.getLoader("image1").rawContent; 
　　var image2:Bitmap = LoaderMax.getLoader("image2").rawContent; 
}

下面让我们在XML文件中定义两个LoaderMax节点，第一个自动加载一个不自动加载。在这里我们通过设置prependURLs 属性定义一个基本的url,可以让后面录入简化。

下面是需要加载的XML：

<?xml version="1.0" encoding="iso-8859-1"?> 
<data> 
    <LoaderMax name="queue1" prependURLs="http://www.greensock.com/assets/images/" load="true"> 
        <ImageLoader url="1.jpg" name="image1" width="200" height="150" scaleMode="proportionalInside" alpha="0" /> 
        <ImageLoader url="2.jpg" name="image2" width="400" height="300" scaleMode="proportionalOutside" crop="true" /> 
    </LoaderMax> 
    <LoaderMax name="queue2" prependURLs="http://www.greensock.com/assets/" load="false"> 
        <SWFLoader url="swf/child.swf" name="child" autoPlay="false" /> 
        <VideoLoader url="video/video.flv" name="video" width="400" height="300" scaleMode="stretch" autoPlay="false" /> 
    </LoaderMax>
</data>

接下来的ActionScript里，XMLLoader将自动解析所有的加载器，不过只会自动加载第一个LoaderMax节点中的内容，因为他的"load"属性设置为"true"。xmlloader加载完成之后，这些内容也完成了加载。我们还可以继续加载第二个LoaderMax中的内容。代码如下：

LoaderMax.activate([ImageLoader, SWFLoader, VideoLoader]); 
var loader:XMLLoader = new XMLLoader("data.xml", { onComplete:completeHandler, estimatedBytes:50000 } );

function completeHandler(event:LoaderEvent):void { 
    trace("XML and queue1 loaded!"); 
    addChild( LoaderMax.getContent("image1") ); 
    addChild( LoaderMax.getContent("image2") ); 
    //grab the LoaderMax named "queue2" that was defined in the XML and start loading it now 
//取得xml文件中名字为"queue2"的LoaderMax开始加载
    var queue2:LoaderMax = LoaderMax.getLoader("queue2"); 
    queue2.addEventListener(LoaderEvent.COMPLETE, queue2CompleteHandler); 
    queue2.load(); 
} 
    
function queue2CompleteHandler(event:LoaderEvent):void { 
    trace("queue2 loaded!"); 
}

4、简单的进度条设置
LoaderMax里获取精确的加载进度实在是简单到不能再简单了，你只要设置你的进度条对象bar.scaleX=progress就搞定了。

代码如下：

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler}); 
//...append various loaders... 
queue.load();

function progressHandler(event:LoaderEvent):void { 
    myProgressBar.scaleX = event.target.progress; 
}

5、统计下载速率或者耗时
LoaderMax里每一个加载器(loader)都有一个loadTime属性，他会告诉你加载中消耗了多少时间，你也可以用来计算下载速率。

var kbps:Number = (loader.bytesLoaded / loader.loadTime) / 1024;
trace("下载速率为:"+kbps)

如果计算完成下载需要多长时间可以这样：

var secondsLeft:Number = (1 / loader.progress) * loader.loadTime;

6、让video/image/swf 的大小适应区域
这是一种比较常见的需求，有一个固定了大小的区域，你需要让加载进来的video/image/swf适应区域的大小。比如：你有一个缩略图的网格，但是你的实际图片大小与缩略图的规定大小并不一致或者是未知的。没问题，你可以直接设置图片的宽度和高度来适应你的区域大小。

var loader:ImageLoader = new ImageLoader("1.jpg", {width:200, height:100, container:this});

默认情况下他会通过拉伸来适应你设置的尺寸。如果你希望按照比例来缩放显示以适应区域，可以设置scaleMode属性为“proportionalInside”. 这种情况下水平或者垂直方向可能会多出空余位置，你可以设置“hAlign” and “vAlign” 属性来确定水平适应还是垂直适应（默认值都为"center"）。如果你希望改变区域的填充颜色可以设置"bgColor"属性。

下面的例子是将图片加载到一个200*100红色背景的区域中，等比缩放，并设置x和y位置属性：

var loader:ImageLoader = new ImageLoader("1.jpg", {width:200, height:100, scaleMode:"proportionalInside", bgColor:0xFF0000, container:this, x:50, y:70});

还有一个好处是放置图片的ContentDisplay对象会立即创建，你可以放在场景的任何位置，添加鼠标事件等等（意思就是说创建一个imageLoader实例后不用等加载就能马上设置）。例如添加一个鼠标事件可以这样来写：

loader.content.addEventListener(MouseEvent.CLICK, clickHandler); 
function clickHandler(event:MouseEvent):void { 
    trace("clicked image associated with loader: " + event.currentTarget.loader); 
}

重要提示：
如果你想改变区域的尺寸到缩放后的内容的尺寸，可以设置ContentDisplay的"fitWidth"和"figHeight"属性。