XML slideshow with preloader bar

Question

I'm using the following code to create a simple slideshow:
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var my_speed:Number;
var my_count:Number;
var my_images:XMLList;
var my_loaders_array:Array=[];
var my_success_counter:Number=0;
var my_playback_counter:Number=0;
var my_slideshow:Sprite = new Sprite();
var my_image_slides:Sprite = new Sprite();
var my_preloader:TextField;
var my_timer:Timer;
var my_prev_tween:Tween;
var my_tweens_array:Array=[];
var my_xml_loader:URLLoader = new URLLoader();
my_xml_loader.load(new URLRequest("theme1.xml"));
my_xml_loader.addEventListener(Event.COMPLETE, preXML);
next_mc.addEventListener(MouseEvent.CLICK, timerListener);
prev_mc.addEventListener(MouseEvent.CLICK, goBack);
function preXML(e:Event):void {
    var my_xml:XML=new XML(e.target.data);
    my_speed=my_xml.@SPEED;
    my_images=my_xml.IMAGE;
    my_count=my_images.length();
    loadImages();
    my_xml_loader.removeEventListener(Event.COMPLETE, preXML);
    my_xml_loader=null;
function loadImages():void {
    for (var i:Number = 0; i < my_count; i++) {
        var my_url:String=my_images[i].@URL;
        var my_loader:Loader = new Loader();
        my_loader.load(new URLRequest(my_url));
        my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
        my_loaders_array.push(my_loader);
    my_preloader = new TextField();
    my_preloader.text="Loading";
    my_preloader.autoSize=TextFieldAutoSize.CENTER;
    my_preloader.x = (stage.stageWidth - my_preloader.width)/2;
    my_preloader.y = (stage.stageHeight - my_preloader.height)/2;
    addChild(my_preloader);
function onComplete(e:Event):void {
    my_success_counter++;
    if (my_success_counter==my_count) {
        startShow();
    var my_loaderInfo:LoaderInfo=LoaderInfo(e.target);
    my_loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
function startShow():void {
    removeChild(my_preloader);
    my_preloader=null;
    addChild(my_slideshow);
    my_slideshow.addChild(my_image_slides);
    nextImage();
    my_timer=new Timer(my_speed*2000);
    my_timer.addEventListener(TimerEvent.TIMER, timerListener);
    my_timer.start();
function nextImage():void {
    var my_image:Loader=Loader(my_loaders_array[my_playback_counter]);
    my_image_slides.addChild(my_image);
    my_image.x = (stage.stageWidth - my_image.width)/2;
    my_image.y = (stage.stageHeight - my_image.height)/2;
    my_tweens_array[0]=new Tween(my_image,"alpha",Strong.easeOut,0,1,1,true);
function timerListener(e:Event):void {
    hidePrev();
    my_playback_counter++;
    if (my_playback_counter==my_count) {
        my_playback_counter=0;
    if(e.currentTarget is MovieClip)
        my_timer.reset();
        my_timer.start();
    nextImage();
function goBack(e:MouseEvent):void
    hidePrev();
    my_playback_counter--;
    if (my_playback_counter<0) {
        my_playback_counter=my_count-1;
    nextImage();
    my_timer.reset();
    my_timer.start();
function hidePrev():void {
    var my_image:Loader=Loader(my_image_slides.getChildAt(0));
    my_prev_tween=new Tween(my_image,"alpha",Strong.easeOut,1,0,1,true);
    my_prev_tween.addEventListener(TweenEvent.MOTION_FINISH, onFadeOut);
function onFadeOut(e:TweenEvent):void {
    my_image_slides.removeChildAt(0);
I would like change "loading" to a preloader bar. How can i insert a preloader bar in this code? I add this lines:
var total:Number=this.stage.loaderInfo.bytesTotal;
    var loaded:Number=this.stage.loaderInfo.bytesLoaded;
    var percent:Number=loaded/total;[/b]
    my_preloader = new TextField();
    my_preloader.text=(Math.round(percent * 100)) + "%";
    my_preloader.autoSize=TextFieldAutoSize.CENTER;
    my_preloader.x = (stage.stageWidth - my_preloader.width)/2;
    my_preloader.y = (stage.stageHeight - my_preloader.height)/2;
    addChild(my_preloader);
But only show a static "100%".
Thanks guys!

Answer 1

you'll need to change your basic setup from loading all those images in a for-loop to loading them sequentially.  so, to start:
var loadIndex:int;
function preXML(e:Event):void {
    var my_xml:XML=new XML(e.target.data);
    my_speed=my_xml.@SPEED;
    my_images=my_xml.IMAGE;
    my_count=my_images.length();
loadIndex=0;
    loadImages();
    my_xml_loader.removeEventListener(Event.COMPLETE, preXML);
    my_xml_loader=null;
function loadImages():void {
var i:int=loadIndex;
        var my_url:String=my_images[i].@URL;
        var my_loader:Loader = new Loader();
        my_loader.load(new URLRequest(my_url));
        my_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
my_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
        my_loaders_array.push(my_loader);
y_preloader = new TextField();
    my_preloader.x = (stage.stageWidth - my_preloader.width)/2;
    my_preloader.y = (stage.stageHeight - my_preloader.height)/2;
    addChild(my_preloader);
function onProgress(e:ProgressEvent):void{
var total:Number=e.bytesTotal;
    var loaded:Number=e.bytesLoaded;
    var percent:Number=loaded/total;[/b]
    my_preloader.text=100*loadIndex/my_count+(Math.round(percent * 100))/my_count + "%";
    my_preloader.autoSize=TextFieldAutoSize.CENTER;
function onComplete(e:Event):void {
    loadIndex++;
    if (loadIndex==my_count) {
        startShow();
    var my_loaderInfo:LoaderInfo=LoaderInfo(e.target);
    my_loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
loadImage();