Adding a pre loader to an XML photo gallery between the photos.

Question

Hey,
I have made a photogallery in actionscript 3 which uses an .XML file to import pictures. As the user clicks on the displayed image the code loads the next image in the cycle into the display. Now, I would like to add a preloader which displays the loading progress of each image as the user clicks (otherwise there is just a blank area as the image loads). I have made a pre-loader for the main .SWF but I can't figure out how to make it work for the images or how to make a seperate one for the images. The fact is that I am a bit of a muppet when it comes to AS3, and am finding myself getting lost an confused quite easily.
I have attatched the .FLA if that helps any! If not then...
here is the link to the .HTML page that contains the .swf:
http://www.davidframpton.co.uk/portfolio.html
Here is the code I am using for the main pre-loader held in frame 1:
stop();
addEventListener(Event.ENTER_FRAME, loaderF);
function loaderF(e:Event):void {
    var toLoad:Number = loaderInfo.bytesTotal;
    var loaded:Number = loaderInfo.bytesLoaded;
    var total:Number = loaded/toLoad;
    if(loaded == toLoad) {
        removeEventListener(Event.ENTER_FRAME, loaderF);
        gotoAndStop(2);
    } else {
        preloader_mc.preloaderFill_mc.scaleX = total;
        preloader_mc.percent_txt.text = Math.floor(total * 100) + "%";
And here is the code for the photogallery:
stop();
var xmlRequest:URLRequest = new URLRequest("http://www.davidframpton.co.uk/galleryData.xml");
var xmlLoader:URLLoader = new URLLoader (xmlRequest);
var imgData:XML;
var imageLoader:Loader;
var rawImage:String;
var rawH:String;
var rawW:String;
var imgNum:Number = 0;
var checkSec:Timer = new Timer(100);
var numberOfChildren:Number;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
master_mc.addEventListener(MouseEvent.CLICK, nextImgF);
master_mc.buttonMode = true;
function xmlLoadedF(event:Event):void{
    checkSec.start();
    checkSec.addEventListener(TimerEvent.TIMER, checkerF);
    imgData = new XML(event.target.data);
function packagedF():void{
    checkSec.removeEventListener(TimerEvent.TIMER, checkerF);
    rawImage = imgData.image[imgNum].imgURL;
    numberOfChildren = imgData.*.length();
    imageLoader = new Loader;
    imageLoader.load(new URLRequest(rawImage));
    master_mc.addChild(imageLoader);
function checkerF(event:TimerEvent):void{
    if (imgNum == 0) {
        packagedF();
    }else if(imgNum < numberOfChildren){
        imageLoader.unload();
        packagedF();
    }else {
        imageLoader.unload();
        imgNum = 0;
        packagedF();
function nextImgF(event:MouseEvent):void {
    checkSec.addEventListener(TimerEvent.TIMER, checkerF);
    imgNum++;
I would really appreciate any help. Even if your could guide me to where I can learn how to do this myself in an simple fashion, I would be greatful.
Thanks in advance
Dave

Answer 1

The Loader class has a contentLoaderInfo property that is a LoaderInfo class object.  You can assign an event listener to the contentLoader Info that listens for PROGRESS.  There is an example in the Loader class section that shows the contentLoaderInfo property being used for a variety of event detections, including PROGRESS.