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

2012-09-22

[转][翻译]LoaderMax使用指导(一)http://hi.baidu.com/mr_ziqiang/blog/item/4ed3436658325f2bab184c06.ht

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

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

下面你的加载代码：

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"属性。

热点排行

Web前端

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