xml gallery with pre loader??

hi i am stuck i used tutorials and created a great xml gallery slideshow. the problem is that the photos are rather large so i would love to add a preloader for the xml galler can anyone help?

my code looks like this
were would i add a pre loader?


import caurina.transitions.*;
//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = "image-scroller.xml";
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void {
trace("xml loading complete");
xmlData = new XML(e.target.data);
//trace(xmlData.image);
buildScroller(xmlData.image);
}


var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 1;

this.addChild(scroller);
scroller.y = scroller.x = padding;
//build scroller from xml
function buildScroller(imageList:XMLList):void{
trace("build Scroller");
for (var item:uint = 0; item < imageList.length(); item++ ) {
var thisOne:MovieClip = new MovieClip();

//outline
var blackBox:Sprite = new Sprite();
blackBox.graphics.beginFill(0xFFFFFF);
blackBox.graphics.drawRect( 0, 0, 695, 345);
thisOne.addChild(blackBox);

thisOne.x = (730 + padding) * item;
thisOne.itemNum = item;
thisOne.title = imageList[item].attribute("title");
thisOne.link = imageList[item].attribute("url");
thisOne.src = imageList[item].attribute("src");
thisOne.alpha = 0;
//image container
var thisThumb:Sprite = new Sprite();
//add image
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(thisOne.src);
trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
ldr.load(urlReq);
//assign event listeners for Loader
ldr.contentLoaderInfo.addEventListener(Event.COMPL ETE, completeHandler);
ldr.contentLoaderInfo.addEventListener(IOErrorEven t.IO_ERROR, errorHandler);
thisThumb.addChild(ldr);
thisOne.addChild(thisThumb);

//create listeners for this thumb
thisOne.buttonMode = true;
thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);

//add item
scroller.addChild(thisOne);
}

scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
trace("termination of build scroller");
}

function overScrollerItem(e:MouseEvent):void {
trace("over" + e.currentTarget.name);
}
function outScrollerItem(e:MouseEvent):void {
trace("out" + e.currentTarget.name);
}
function clickScrollerItem(e:MouseEvent):void {
trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
}
function completeHandler(e:Event):void {
//trace("thumbnail complete "+e.target.loader.parent.parent.name);
//size image into scroller
resizeMe(e.target.loader.parent, 724, 376, true, true, false);
Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}
function errorHandler(e:IOErrorEvent):void {
trace("thumbnail error="+e);
}

var my_loader:Loader = new Loader();
my_loader.load(new URLRequest("shadow.swf"));
addChild(my_loader);

//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
}
if (centerHor) {
mc.x = (maxW - mc.width) / 2;
}
if (centerVert){
mc.y = (maxH - mc.height) / 2;
}
}

function moveScrollerThumbs(e:Event):void {
if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
}
else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
}
else {
speed = 0;
}
scroller.x += speed;

//scroller limits
if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
scroller.x = -scroller.width + stage.stageWidth - padding;
}
else if (scroller.x > padding) { //if scrolled to far right
scroller.x = padding;
}
}
}




ive found some code to pre load a xml gallery but dont know were to place it or how it works...

preloadbar_mc.onEnterFrame = function(){
if (!this.target) return (0);
var loaded = target.getBytesLoaded();
var total = target.getBytesTotal();

var scale = 0;
if (loaded && total){
var percent = loaded/total;
scale = 100 * percent;
}

this._xscale = scale;
}

preloadbar_mc.target = my_xml;

thx for any help.