Loading multiple images from xml

programming flash
1

Hi,

I think I’ve run into a newbie problem. I’m trying to load a number of brand logos and link to the brand’s site using information from an xml list. I’m able to get the information from the list fine but when I try to loop through the list and add the images to the stage only the final image remains on the stage. The others get overwritten by the latest one. Obviously I need a new loader to be created each time I loop through but I can’t figure out how to do this. I’ve thought about implementing an array but haven’t had any luck. Here’s my code so far:

var xmlLoader:URLLoader = new URLLoader();
var brandsURL:URLRequest = new URLRequest("brands.xml");
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(brandsURL);

var loaderX:Number = 50;

var brandsXML:XML = new XML();
brandsXML.ignoreWhitespace=true;
var loader:Loader = new Loader();

function xmlLoaded(evt:Event):void {
	brandsXML =XML(xmlLoader.data);

	for (var brandName:String in brandsXML.brand) {
		trace(brandsXML.brand[brandName].@name);

		var request:URLRequest= new URLRequest(brandsXML.brand[brandName].image);
		loader.load(request);
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

		var link:URLRequest=new URLRequest(brandsXML.brand[brandName].link);
		function onClick(evt:MouseEvent):void {
			navigateToURL(link);
		}

		function imageLoaded(evt:Event):void {
			addChild(loader);
			loader.x=loaderX;
			loader.y=50;
			loader.width=209;
			loader.height=56;
			trace("image loaded");
			loaderX+=250;
			loader.addEventListener(MouseEvent.CLICK, onClick);
		}
	}
}

Does anyone know what I need to do to add to stop the loader from replacing itself?

Any help would be greatly appreciated.

Thank you.

2

I have the same problem with one of my codes. I create the loader into for loop but it still loads only the last image. :slight_smile:

3

the key to this is to load one at a time. Use two functions, such as “loadNext()” and “onLoadComplete”

LoadNext will load ONE item…when it’s done laoding, the onLoadComplete function get’s called and you can add it to the display or do whatever else you need to do, and then call loadNext() to load the next image.

naturally you’ll need a counter to keep track of the images loaded so you don’t get an infinite loop and null object/reference errors.

4

Thanks for your advice.

Isn’t that sort of what’s going on in the code as it is? The for loop initiates a load and then “imageLoaded” adds the image to the stage, then the loops starts again, loads the second image and “imageLoaded” adds it to the stage but 250 px further along the y axis (and at the same time removes/replaces the image that was loaded on the first loop!!) Do I need to separate the functions somehow? I apologize for my confusion.