ActionScript显示大量外部jpg图片

一、

外部图片的显示分为两步，下载图片、解码图片。

二、

ActionScript提供了的Loader可以直接下载并解码图片显示图片，把两者对用户屏蔽。

 

public var b:Bitmap = new Bitmap; public var bd:BitmapData = new BitmapData(100,100); var loader:Loader = new Loader(); var url:URLRequest = new URLRequest("http://imgsrc.baidu.com/forum/pic/item/20949b50f483ee2484352450.jpg"); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, jpgComplete); loader.load(url); public function jpgComplete(e:Event):void { bd = e.currentTarget.loader.content.bitmapData; b.bitmapData = bd; addChild(b); }

如果要显示大量图片就可能需要生成一个loader池，可以对多个图片同时进行处理。但是又不能有太多loader同时对图片解码（下载可以多个同时），那样会导致flash一帧里运算量太大画面很卡。试验了可以设为5个loader，不卡的上限未试验。

 

但是事实上下载、解码这两个过程，并行的上限有所不同。100个（假设）同时下载也不会导致画面卡（下载是io，非运算），而5个（假设）同时解码就会比较卡。

 

虽然loader已经把下载和解码完美得封装成异步操作了，这里我们却不能直接使用loader。如果直接使用loader就意味着，下载也只能5个并行了。把两个行为封装在一起的虽然使用方便，但是代价就是瓶颈由最窄的决定。

 

三、

所以我们需要把loader重新拆开来。由UrlLoader负责下载，再由Loader负责对下载的binary数据解码为bitmap。

 

下载

loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; miniMap = new Bitmap(); addChild( miniMap ); loader.addEventListener(Event.COMPLETE,loadCompleteHandler); minimapURL = UserData.resRoot + "map/" + _mapData.res + "/mini.jpg"; loader.load(new URLRequest(minimapURL)); private function loadCompleteHandler(event:Event):void { loader.removeEventListener(Event.COMPLETE,loadCompleteHandler); miniMap.width = _px; miniMap.height = _py; _mapDecoder.decode(loader.data, miniMap, miniCallBack); }

 

解码

 

public class ImageDecoder { private static var MAX_LOADER:int = 2; private var _loaderPool :Vector.<ImgLoader>; private var _waitList :Vector.<Object>; private var _lastGetTime:Number; public function ImageDecoder() { _loaderPool = new Vector.<ImgLoader>; // 初始化5个loader进行decode for( var i:int = 0;i< MAX_LOADER;i++){ _loaderPool.push( new ImgLoader() ); } _waitList =new Vector.<Object>; } /** * 异步的解码，完成后填入bitmapData中 * 对于bitmap的处理，可以不用等待，直接使用。 * 这个函数有时候很慢（>6ms) * @param data * @param bitmapData * */ public function decode( data : ByteArray, bitmap :Bitmap,callBack:Function = null) : void { var s:Number = getTimer(); var decoder : ImgLoader = getFreeLoader(); // 如果没有空闲的loader，加入等待。 if( !decoder ){ var info:ImgInfo = new ImgInfo(); info.data = data; info.bitmap = bitmap; info.callBack = callBack; _waitList.push( info ); return; } decoder.bitmap = bitmap; decoder.callBack = callBack; decoder.contentLoaderInfo.addEventListener(Event.COMPLETE,handler); decoder.loadBytes( data ); if(getTimer() - s)trace( "Decode Img:",getTimer() - s ); } // 这里存在泄漏，有可能handler不被调到。 private function handler(event:Event):void{ var decoder:ImgLoader = event.currentTarget.loader as ImgLoader; decoder.contentLoaderInfo.removeEventListener(Event.COMPLETE,handler); decoder.bitmap.bitmapData = (decoder.content as Bitmap).bitmapData; if( decoder.callBack!= null ){ decoder.callBack( decoder.bitmap.bitmapData ); } decoder.unload(); // 如果有等待，继续解码等待列表中的图片 _loaderPool.push( decoder ); if( _waitList.length > 0 ){ var obj : ImgInfo = _waitList.pop(); decode( obj.data, obj.bitmap, obj.callBack ); } } private function getFreeLoader() : ImgLoader { var now:Number = new Date().getTime(); if( _loaderPool.length > 0 ){ _lastGetTime = now; return _loaderPool.pop(); } else { if( now - _lastGetTime > 5000 ){ _lastGetTime = now; return new ImgLoader(); } } return null; } } } import flash.display.Bitmap; import flash.display.Loader; import flash.utils.ByteArray; class ImgLoader extends Loader{ public var bitmap:Bitmap; public var callBack:Function; } class ImgInfo { public var bitmap:Bitmap; public var callBack:Function; public var data:ByteArray; }