checkProgress not being added to for loop

[zangief252]

I'm using a for loop to add images that are in an XML list to the stage. In the loop I am adding each image onto the stage as well as adding individual text fields for each images' load percentage and an onComplete listener to add a tween once the image is fully loaded.

When I test it, the loop adds all the images to the stage but only adds the load progress to the last image in the XML list. The correct amount of text fields are being added to the stage, but the loading percentage is only going into the last iteration. I've traced the load progress function and they're all happening, but they're just not being added to ALL of the images.

Basically, how do I add the checkProgress percentage to ALL of the text fields using the for loop? I've managed to make the onComplete function work for all of the images by using an if statement in it. Would I also utilize an if statement in the ProgressEvent function? If so how exactly would I impliment it?

Thanks!

Code:

var loadTextThumb:TextField;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();

xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.x = 170 + ( Math.floor( i / 2 ) * 245 );
imageLoader.y = 30 + ( ( i % 2 ) * 290 );
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
loadTextThumb = new TextField();
addChild(loadTextThumb);
loadTextThumb.x = 170 + ( Math.floor( i / 2 ) * 280 );
loadTextThumb.y = 30 + ( ( i % 2 ) * 320 );
imageLoader.contentLoaderInfo.addEventListener(Pro gressEvent.PROGRESS, checkProgressThumb);
imageLoader.contentLoaderInfo.addEventListener(Eve nt.COMPLETE, onCompleteThumb);
}
}

function checkProgressThumb(p:ProgressEvent):void {
var percent:int = (p.currentTarget.bytesLoaded / p.currentTarget.bytesTotal) * 100;
trace(percent)
loadTextThumb.text = percent.toString() + "%";
}

function onCompleteThumb(event:Event):void {
if( event.target is LoaderInfo ) {
var info:LoaderInfo = LoaderInfo( event.target );
var imageLoader:Loader = info.loader;
trace("Thumb loaded");
Tweener.addTween(imageLoader, {alpha:.6, time:0.75, transition:"linear"});
}
}

[cbeech]

the problem here is that both the loader and textfield instances are declared 'outside' the loop - each time the loop iterates it is creating a 'new' instance of the object, which effectively 'replaces' the previous one - thus the only one that will remain instantiated will be the last. to remedy, create entirely new instances that are dynamically named as the loop progresses, you will then still be able to use single handler methods assigned to all instances for processing the events.

however, there is an additional problem, how does one 'know' which textfield belongs to which loader? so you must store a reference to the two items, since we cannot add properties to a loader instance, and then iterate through an array in the handlers to determine that the event object processing the event is paired with the textfield we want to refer to. more like the following:



var images:Array = new Array();

var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();

xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();

for (var i:int = 0; i < xmlList.length(); i++) {
this['imgLdr'+i] = new Loader();
this['imgLdr'+i].load(new URLRequest(xmlList[i].attribute("thumb")));
this['imgLdr'+i].x = 170 + ( Math.floor( i / 2 ) * 245 );
this['imgLdr'+i].y = 30 + ( ( i % 2 ) * 290 );
this['imgLdr'+i].name = xmlList[i].attribute("source");
addChild(this['imgLdr'+i]);

this['imgTxt'+i] = new TextField();
this['imgTxt'+i].x = 170 + ( Math.floor( i / 2 ) * 280 );
this['imgTxt'+i].y = 30 + ( ( i % 2 ) * 320 );
addChild(this['imgTxt'+i]);

images.push( {img:this['imgLdr'+i], txt:this['imgTxt'+i]} );

this['imgLdr'+i].contentLoaderInfo.addEventListener(ProgressEvent. PROGRESS, checkProgressThumb);
this['imgLdr'+i].contentLoaderInfo.addEventListener(Event.COMPLETE , onCompleteThumb);
}
}

function checkProgressThumb(p:ProgressEvent):void {
var percent:int = (p.currentTarget.bytesLoaded / p.currentTarget.bytesTotal) * 100;
for(var obj in images) {
if(p.currentTarget == images[obj].img) {
images[obj].txt.text = percent.toString() + "%";
break;
}
}
}

function onCompleteThumb(e:Event):void {
for(var obj in images) {
if(e.currentTarget == images[obj].img) {
removeChild(images[obj].txt);
Tweener.addTween(images[obj].img, {alpha:0.6, time:0.75, transition:"linear"});
break;
}
}
}