UI: reusing flash.display.Loader and non-visible preloading

This covers how to preload images then scale/center appropriately prior to showing them.

Going Old Skool doing it Flash8 Style
In Flash8 preloading assets required all sorts of trickery to load a clip prior to resizing it, centering it and then displaying it. There were two techniques

1) loading the clip offstate

2) putting it into a nested clips, one was a container, the other a sacrificial clip. Any changes to realClip would get blown away as the new image/clip gets loaded in.

• PictureThumbnail //200x300 normally scaled down to 100x100
• loadTarget_mc
• realClip_mc

so we would do something like

realClip_mc.loadMovie("image.jpg"); //400x500

loadTarget_mc._visible = false;

In addition we'd have to do some juggling of the scale/centering of realClip to match that of the PictureThumbnail.
Flash 9 suave.
Thankfully with flash.display.Loader, and the display list there is the capability to avoid jumping through these hoops.

One of the major changes for me was wrapping my head around the flash.display.Loader object and it's relation to the display list. The idea of adding a Loader to the display list as in the Adobe example, is similar the old school approach of putting it in undesired containers, we'd really prefer getting PictureFrame.image.jpg Getting at the loaded clip is even more difficult: loader.contentLoaderInfo.content ! In addition the need to addListeners to the

configureListeners(_loader.contentLoaderInfo);

instead of the loader object directly was non-intuitive.

The nice thing is with the DisplayList there is a whole world of nonrendered visual behavior. So we can Load our clips independent, then manipulate them prior to adding them to the display list exactly where we want/expect. And then proceed to reuse the Loader for other assets (as in a sequential preloader). Here's an example, in where we can reuse the loader, and then when it's complete match it's size to an onstage Flash IDE drawn placeholder.
package { import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.*; import flash.net.URLRequest; import flash.text.TextField; import flash.display.DisplayObject; public class IMGLoader extends MovieClip { private var url:String = "kt_grace.jpg"; protected var _loader:Loader; public function IMGLoader() { ///////////////////////////////////// _loader = new Loader(); configureListeners(_loader.contentLoaderInfo); _loader.addEventListener(MouseEvent.CLICK, clickHandler); var request:URLRequest = new URLRequest(url); _loader.load(request); // addChild(loader); } private function configureListeners(dispatcher:IEventDispatcher):void { dispatcher.addEventListener(Event.COMPLETE, completeHandler); dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler); dispatcher.addEventListener(Event.INIT, initHandler); dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); dispatcher.addEventListener(Event.OPEN, openHandler); dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler); dispatcher.addEventListener(Event.UNLOAD, unLoadHandler); } private function completeHandler(event:Event):void { trace("completeHandler: " + event); var clip:DisplayObject = DisplayObject(LoaderInfo(event.target).content); clip.width = lt_mc.width; clip.height = lt_mc.height; lt_mc.addChild(clip); }