Pre-loading external images using the UILoader Component in Flash ActionScript

In Flash UILoader component allows to load external images dynamically. External images help to keep the content and logic separate and initial flash load very quickly. The only issue is the timely loading of images.

To make sure that images load before the next part of flash movie plays or any function is called, you need to use Event.COMPELTE eventListener and add the further logic in the Event.COMPLETE handler function.

Before adding following code to your Action Panel, first drag the UILoader component in Library or on stage and delete it from stage, this way, it will automatically be added to the Library.

 

import fl.containers.UILoader; 
 
var backgroundLoader:UILoader = new UILoader(); 
backgroundLoader.source = "images/bg.jpg"; 

addChild(backgroundLoader); 
 
backgroundLoader.addEventListener(Event.COMPLETE, bgCompleteHandler); 

function bgCompleteHandler(event:Event) { 
    trace("background image bytes: " + backgroundLoader.bytesLoaded); 
   //do here whatever you have to 
  //after the background image has loaded completely
}

Hope that helps.

Cheers!