iLeichun

当前位置: 首页 > 美文翻译

如何用AS3实现队列加载图片

分类:美文翻译   来源:网络   时间:2011-08-02 00:01:26
    本文将为您讲解如何使用AS3的Loader类来实现图片的队列加载,在本例中我们通过点击按钮来触发对下一张图片的加载操作,同时显示加载进度条。
    假设我们有4张图片:space1.jpg, space2.jpg, space3.jpg, space4.jpg. 并把这些图片存放在数组picsArray中。关键代码如下:
 
//定义点击按钮
var btnLoad:Button = new Button();
btnLoad.label = "点击我";
btnLoad.move(100, 20);
addChild(btnLoad);
 
//定义加载器
var loader:Loader =new Loader();
this.addChild(loader);
loader.x=65;
loader.y=70;
 
//这些图片必须放在同一个目录下,以保证能正常加载 
var picsArray:Array=["space1.jpg","space2.jpg","space3.jpg","space4.jpg"];
var numPics:int=picsArray.length;
var nextPic:int=0;
 
//添加加载完成侦听
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,doneLoad);
 
//加载出错侦听 
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
 
//加载进度侦听
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,updateInfo);
 
//按钮点击侦听
btnLoad.addEventListener(MouseEvent.CLICK,doLoad);
 
//加载第一张图片,初始化界面 
loadInitImg();
 
//触发加载
function doLoad(e:MouseEvent):void {
    loader.load(new URLRequest(picsArray[nextPic]));
    infoBox.visible=true;
    infoBox.text="开始加载...";
    //加载过程中禁用按钮
    btnLoad.mouseEnabled=false;
}
 
//更新加载进度信息
function updateInfo(e:ProgressEvent):void {
    infoBox.text="已加载: "+String(Math.floor(e.bytesLoaded/1024))+" / "+String(Math.floor(e.bytesTotal/1024))+" KB.";
}
 
//加载错误
function loadingError(e:IOErrorEvent):void {
    infoBox.text="加载图片出错,请刷新页面后重试!";
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,doneLoad);
    loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,updateInfo);
    loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);
}
 
//加载完成一张图片,并准备下一张
function doneLoad(e:Event):void {
    infoBox.text="";
    infoBox.visible=false;
 
    //如果所加载的图片到达数组末尾,从0开始
    nextPic=(nextPic+1)%numPics;
    btnLoad.mouseEnabled=true;
}
 
//加载第一张图片初始化界面
function loadInitImg():void {
    loader.load(new URLRequest(picsArray[nextPic]));
    infoBox.visible=true;
    infoBox.text="Loading starts...";
    btnLoad.mouseEnabled=false;
}
更多