Preloader help needed to load external jpeg

1

Hi, will appreciate very much anyone could help me with this. I’m in the midst of building my flash gallery. I need a preloader bar to appear before the external image loaded. And disappear once the external image fully loaded. I learned to build my gallery from lynda.com online tutorial. Sadly to say the method taught for this particular tutorial was an animated loading gif put on the background of gallery. This is not very elegant when there is alpha fade in and fade out between the images. To illustrate my point below is the code copied from lynda.com tutorial. Please note that I’m using UI loader component to do this.


var imageNumber:Number = 1;

function checkNumber ():void{
    next_btn.visible=true;
    back_btn.visible=true;
    
    if (imageNumber==5) {
        next_btn.visible = false;
    }
    //If the imageNumber is = 1, then don't show the back button
    if (imageNumber==1) {
        back_btn.visible = false;
    }
}
checkNumber();
next_btn.addEventListener(MouseEvent.CLICK, nextImage);

function nextImage (evtObj:MouseEvent):void{
    //Adding to the current value +1
    imageNumber++;
    largeImageLoader.source = "TestImages/Picture0"+imageNumber+".jpg";
    checkNumber();
}

back_btn.addEventListener(MouseEvent.CLICK, backImage);

function backImage (evtObj:MouseEvent):void{
    //Subtract 1 from the current value
    imageNumber--;
    largeImageLoader.source = "TestImages/Picture0"+imageNumber+".jpg";
    checkNumber();
}
import fl.transitions.Tween;
import fl.transitions.easing.*;

largeImageLoader.addEventListener(Event.COMPLETE, imageLoaded);

function imageLoaded(event:Event) {
   //trace("image loaded");
   new Tween(largeImageLoader, "alpha", Regular.easeOut, 0, 1, 2, true);
}

OK base on my code here, what would be the best way to do it or code it?
Thanks again