LoaderMax使用指導

轉載

翻譯:閃刀浪子 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"屬性。

7、設定區域對image/video/swf進行裁剪
假設你想讓一張圖片等比縮放以適應到某個區域，但是不希望在區域的邊緣留下空白區。怎麼做？你可以首先設定scaleMode屬性爲"proportionalOutside"，然後將"crop"屬性設置爲true。這樣可以使圖片等比填充整個區域，並且講超出區域的部分裁剪掉。下面給一段代碼：

var loader:ImageLoader = new ImageLoader("1.jpg", {width:200, height:100, scaleMode:"proportionalOutside", crop:true, container:this, x:50, y:70});

8、progress 和 rawProgress有什麼不同？（譯者注：這個特性需要特別瞭解）
所有的加載器都有一個"progress"屬性來顯示"bytesLoades"和"bytesTotal"的比例（即進度）。但是LoaderMax類還多了一個"rawProgress"的屬性，這個屬性將所有的加載文件同等對待而且與文件大小無關。它在一些特定的場合下會比較有用：比如你發現你的進度條不穩定或者你想忽略文件大小的評估同時不想給你的加載器設定estimatedBytes 。

下面有個例子，可以讓你充分了解"progress"和"rawProgress"在各種情景下的比較。你會發現"rawProgress"進度條不會突變，但是相對於以文件大小爲計算依據的方式速度會一會兒快，一會兒慢。
點擊load()按鈕你可以看到"progress"非常精確並且平滑。(這是因爲estimatedBytes的值是正確的)接下來你試着改變estimatedBytes的值或者刪除estimatedBytes的值看一下省略的時候的運行情況。試着取消“auditSize”的複選框，可以觀察“auditSize”爲false的情況下是如何運行的。更多有關進度條暴增和回退的問題原因會在下一節做講解。

9、避免進度條的抖動（暴增或者回退）
不知道你有沒有在使用中遇到過進度條暴增活着回退的情況。一般在單一加載的時候不會出現這種情況，但是當你用一個LoaderMax實例去加載多個文件的一些特殊場合會發生這種情況。首先說一下原因和我所使用的方案。

爲了精確的計算一組加載器總的進度，我們最關鍵的是需要知道每一個文件的文件大小。但是在文件還沒有開始加載的時候我們如何知道要加載的大小呢？LoaderMax通過兩種方式來處理：第一種——在創建你的loader的時候隨意指定一個值給"estimatedBytes"屬性，就像這樣：

new ImageLoader("1.jpg", {estimatedBytes:26000}); 如果你給一個加載器設定了一個"estimatedBytes"值，LoaderMax會根據這個值來計算"progress"，直到開始真正加載取到了真實的文件大小值再替換掉它。如果你所設定的值不準確，就會在修正這個文件大小值的時候出現進度條的抖動。具體現象爲：如果你所設定的值比真實的文件大小值小很多，就會出現進度條的回退。如果你所設定的值比真實的文件大小值大很多，就會出現進度條的暴增現象。 LoaderMax所採用的第二種解決方式是檢查真實文件。默認情況下會查找每一個子加載器是否有"estimatedBytes"設置。一旦發現沒有進行設置，就會迅速開啓一個URLStream取得真實的文件大小，並立刻關閉再檢查下一個。全部檢測完畢後，就會按照真實的文件總字節數加載並計算進度。這樣做的好處是減少了你的麻煩並且會進度會非常準確。不過會要在開始下載前花費一些檢查的時間。當然你也可以關閉"auditSize"選項或者進行全局設置關閉所有加載器的"auditSize",下面是代碼： var loader:ImageLoader = new ImageLoader("1.jpg", {width:200, //turns auditing off for only this instance: var queue:LoaderMax = new LoaderMax({auditSize:false}); //changes the default auditSize to false for all LoaderMax instances created after this point LoaderMax.defaultAuditSize = false;height:100, scaleMode:"proportionalOutside", crop:true, container:this, x:50, y:70}); 好了，知道了原因下面我們來看一下如何解決，這裏有一些方案共你選擇：比較省事、精確、需要一點額外時間（默認）的方式忽略estimatedBytes 選項，讓LoaderMax自己去計算。

給一個估計的文件大小值設置到estimatedBytes
這種方式需要給一個合適的值，否則過大進度條會暴增，過小進度條會回退。

比較省事、非常不精確、無需額外時間
關閉自動校驗長度開關也不給默認的文件大小值，此時文件長度會使用默認的20000字節爲長度。

省事、比較精確、無需額外時間
關閉自動校驗長度開關改用"rawProgress"來代替"progress"。由於rawProgress的計算方式與文件長度有關僅與文件個數有關，所以沒有必要校驗文件長度了。

10、每一個文件都會請求兩次嗎？
不是這樣的。事實上只有當你沒有設置estimatedBytes並且自動校驗長度開關打開的情況下才需要請求兩次服務器。多出的這一次是用於校驗文件長度的。

11、集成roo swf到LoaderMax進度
加入你要獲取一個很大的swf文件，還需要加載很多素材，同時你還希望瞭解所有這些的進度（包括這個root Swf)。你可以這樣來做：

var queue:LoaderMax = new LoaderMax({onProgress:progressHandler, onComplete:completeHandler});
queue.append( new SelfLoader(this) ); //just to include the root swf in the progress calculations
queue.append( ...append your other loaders... );
queue.load();
12、parse()一個完整的Url數組有時候你會希望簡單的給LoaderMax一個數組，讓它自己使用對應的類型去加載。可以用下面的方法來做： var urls:Array = ["1.jpg", "video.flv", "child.swf", "audio.mp3"]; //activate the types of loaders so that parse() can recognize the appropriate extensions (only necessary once) LoaderMax.activate([ImageLoader, VideoLoader, SWFLoader, MP3Loader]); var queue:LoaderMax = LoaderMax.parse(urls, {onComplete:completeHandler}, {autoPlay:false}); queue.prependURLs("http://www.greensock.com/assets/"); //saves us from having to include this in every URL in the array, and makes switching servers very easy. queue.load(); 取得加載的內容用下面的方法： function completeHandler(event:LoaderEvent):void { var video:VideoLoader = LoaderMax.getLoader("http://www.greensock.com/assets/video.flv"); addChild( video.content ); video.playVideo(); } 13、取得代碼提示和嚴格的數據類型如果你不介意文件長度稍微會長一點、代碼量會大一些。可以使用 com.greensock.loading.data包裏面的類來設定值對象，並作爲參數傳給記載器。比如：

var config:LoaderMaxVars = new LoaderMaxVars();
config.name = "queue1";
config.onComplete = completeHandler;
config.onProgress = progressHandler;
config.maxConnections = 1;
var queue:LoaderMax = new LoaderMax(config);

終於翻譯完了，呵呵

寂寞城管

發佈了22 篇原創文章 · 獲贊 0 · 訪問量 5萬+

私信關注

LoaderMax使用指導

位圖緩存優化渲染研究1

Alternativa3D 入門整理

diskgenius重建分區表

關於doom的研究

Aternativa3D 7.5中的MapMapping和LOD技術

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結