Solved

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

Posted on 2010-08-12
11
828 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

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 …
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

706 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now