Solved

AS3 XML add images in loader array next to each other?

Posted on 2010-08-12
11
852 Views
Last Modified: 2013-11-11
Need:  On loading of each loader with image inside, place them one next to the other.  ie:  

loader[1].x=0;
next loader in array and loop:
loader[2].x=previous Loader.x + Loader.width;
next loader in array and loop:
loader[3].x=previous Loader.x + Loader.width;
ect...

Ideas?

my code for loading xml images:
var xmlData:XML = new XML();
var xmlList:XMLList = new XMLList();
var currentPic:int=0;
var xmlLoader:URLLoader = new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE, onComplete);
xmlLoader.load(new URLRequest("xml/portfolio.xml"));

function onComplete(e:Event):void {
	trace("complete");
	xmlData=new XML(e.target.data);
	xmlData=new XML(xmlLoader.data);
	xmlList=xmlData.portfolio;
	loadImages();
}
var Length=xmlList.length();
function loadImages():void {
	trace("loadImages");
	var loaders = new Array();
	for (var i = 0; i < xmlList.length(); i++) {
		trace("i = " + i);
		loaders[i] = new Loader();
		loaders[i].load(new URLRequest(xmlList.pic[i]));
		trace("xmlList.pic[i] = " + xmlList.pic[i]);
		view.addChild(loaders[i]);
		trace("loaders.x = " + loaders.x);
		updatePic(currentPic);
	}

}
function updatePic(index:int):void {
	trace("updatePic");
}

Open in new window


my traces tell me that my images are being loaded.  I just need them to load next to instead of on top of each other...
Thanks for any and all help!

0
Comment
Question by:cubical38
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
11 Comments
 
LVL 39

Expert Comment

by:blue-genie
ID: 33428172
ok so have you tried that code you specified ... and what was the result?

you wouldn't use Loader.width though, i think you need to check loader.loadercontent - also you might need to put a listener in to check that the image is loaded before you try to find out how wide it is.

then in your for loop you just need to set the x at the previous item (i.e i-1) x position + width.
0
 

Author Comment

by:cubical38
ID: 33429712
Thanks,

As far as I can tell, images are loaded (at least in the trace it traces correctly) and witch ever image is the last in the xmlList appears (all stacking on the same x.y, hopefully).

So something like:
loaders[i].loadercontent.x = loaders[-i].loadercontent.x + 400;

?
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 33429755
As far as I can tell, images are loaded - no when you're actually doing it on a live server, you'll have a delay, so if you try to get the width of the image before its loaded you're going to get errors.

all stacking on the same x.y, hopefully) - huh ? i'm confused, i thought you didnt' want that?



So something like:
loaders[i].loadercontent.x = loaders[-i].loadercontent.x + 400;

something like but not quite

loaders[i-1] and you probably need to check if i != 0 otherwise i will be -1 and throw an error.

0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:cubical38
ID: 33429846
Hopefully - as in then they would all be loaded and it would just be moving the x

I'll set up a listener for event.COMPLETE and an if statement for the i !=0

Thanks again.  I wont be able to implement this until tonight, but the logic makes sense...
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 33430446
cool, that's the most important thing, finding the logic that works, googling the syntax is the easy part.
try and implement it and let's see how it works out.
0
 

Author Comment

by:cubical38
ID: 33434618
Okay It may just be late in the day but I am getting stuck.  When I test this code I get the following trace:
complete
loadImages
i = 0
xmlList.pic[i] = images/AKLservices.jpg
i = 1
xmlList.pic[i] = images/Flare.jpg
i = 2
xmlList.pic[i] = images/AKLservices.jpg
i = 3
xmlList.pic[i] = images/Flare.jpg
bytesLoaded=0 bytesTotal=60445
bytesLoaded=0 bytesTotal=110141
bytesLoaded=0 bytesTotal=170586
bytesLoaded=0 bytesTotal=220282
bytesLoaded=60445 bytesTotal=220282
bytesLoaded=110141 bytesTotal=220282
bytesLoaded=170586 bytesTotal=220282
bytesLoaded=220282 bytesTotal=220282
updatePic
updatePic
updatePic
updatePic

Which tells me it is not loading them in individually (as in: loaded then loop, loaded, then loop ect.) as the updatePic is not traced until the loop is complete (am I wrong?).  How do I make sure I am loading in all of the images?  Without an error Im not sure if Im going the correct route here...

Thanks again...
var xmlData:XML = new XML();
var xmlList:XMLList = new XMLList();
var currentPic:int=0;
var xmlLoader:URLLoader = new URLLoader();
var loaders = new Array();

xmlLoader.addEventListener(Event.COMPLETE, onComplete);
xmlLoader.load(new URLRequest("xml/portfolio.xml"));

function onComplete(e:Event):void {
	trace("complete");
	xmlData=new XML(e.target.data);
	xmlData=new XML(xmlLoader.data);
	xmlList=xmlData.portfolio;
	loadImages();
}
var Length=xmlList.length();
function loadImages():void {
	trace("loadImages");
	
	for (var i = 0; i < xmlList.length(); i++) {
		trace("i = " + i);
		loaders[i] = new Loader();
		loaders[i].load(new URLRequest(xmlList.pic[i]));
		loaders[i].contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
		loaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
		trace("xmlList.pic[i] = " + xmlList.pic[i]);
		addChild(loaders[i]);
		//updatePic(currentPic);
	}

}
function progressHandler(e:ProgressEvent):void {
	var percent:Number;
	var loaded:Number=0;
	var total:Number=0;
	for (var i in loaders) {
		loaded+=loaders[i].contentLoaderInfo.bytesLoaded;
		total+=loaders[i].contentLoaderInfo.bytesTotal;
	}
	percent=loaded/total;
	trace("bytesLoaded=" + loaded + " bytesTotal=" + total);
}
function loadComplete(index:int):void {
	trace("updatePic");
}

Open in new window

0
 

Accepted Solution

by:
cubical38 earned 0 total points
ID: 33434854
update, success...
var Length=xmlList.length();
function loadImages():void {
	trace("loadImages");
	var loaders = new Array();
	for (var i = 0; i < xmlList.length(); i++) {
		trace("i = " + i);
		loaders[i] = new Loader();
		loaders[i].load(new URLRequest(xmlList.pic[i]));
		loaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, updatePic);
		addChild(loaders[i]);
		updatePic(currentPic);
		if (i == 0){
			loaders[i].x=0;
		} else {
			loaders[i].x=loaders[i-1].x + 622;
		}
	}

}

Open in new window

0
 

Author Comment

by:cubical38
ID: 33801005
I was trying to accept my answer for future users to get the code but also award points to the expert.  All 500 points should be awarded to blue-genie.
0
 

Author Comment

by:cubical38
ID: 33801012
award points to blue-genie.
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 33803229
hey no don't worry about it, go ahead and accept the answer yourself you did fix it yourself.
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question