Dynamic image preloaders problem

Alright. I’ve searched the forum and google but I haven’t gotten an answer to my problem.

I’ll break it down for you.

I have a gallery, loading images via xml and then using a for loop to add them inside a movieclip.

Now, I need a preloader which shows the progress for each images individually. I haven’t figured out how to do this since my urlloader only shows the progress of all images (I think).

Here’s what my xml function looks like:


            var gallery:XML = new XML(event.target.data);
            numberPictures = gallery.picture.length();
            for (i=0; i <gallery.picture.length(); i++) {
                
                xmlObject = new MovieClip();
                    xmlObject.x = (i * Step) + 20;
                    xmlObject.y = 30;
                    addChild(xmlObject);
                                        
                var thumbLoader:Loader = new Loader()
                    xmlObject.addChild(thumbLoader);
                    thumbLoader.load(new URLRequest(gallery.picture*.imagepath));
                    thumbLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, thumbLoadProgress);
                    
                function thumbLoadProgress(event:ProgressEvent):void
                {
                    var pcent:Number=Math.ceil((event.bytesLoaded / event.bytesTotal) * 100);
                    if(pcent != 100)
                    {
                        loaderText.text = ("Loading images: " + pcent + "%");
                        loaderText.visible = true;
                    }else
                    {
                        loaderText.visible = false;
                    }
                }
            }

Thanks in advance!