...

View Full Version : How to get width of an xml pic added via loop



marilynn.fowler
02-18-2009, 07:29 PM
How do I get the width of the thumbs added to the stage? Right now if I trace imageLoader.width I get 0 instead of the actual width of the image.


import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 100;

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 = (i * thumbSpace);
imageLoader.y = 0;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
trace(imageLoader.width);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
MovieClip(root).scrollWidth = thumbSpace * (xmlList.length());
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}

gnomeontherun
02-18-2009, 07:55 PM
My guess is that information is not yet ready as it has to load the file first, and that takes longer than the initial loop. Try to set a function outside of the loading loop to get it.

marilynn.fowler
02-18-2009, 07:59 PM
How do I do that? What I'm trying to do is get the width so that I can properly space the thumbnails, instead of using thumbSpace.

gnomeontherun
02-19-2009, 01:12 PM
Apply a new listener to imageLoader that will pick up when the image is loaded, and then make the measurements for each.

marilynn.fowler
02-20-2009, 01:55 AM
Thanks, Jeremy. I've tried it, and I know I'm close, but it still doesn't work. I don't know why imageLoader.x isn't setting to the new thumbSpace. Here's my code, with what I added/revised highlighted:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;


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.name = xmlList[i].attribute("source");
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
addChild(imageLoader);
imageLoader.x = thumbSpace;
imageLoader.y = 0;
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
MovieClip(root).scrollWidth = thumbSpace;
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}

function thumbLoaded(event:Event):void {
thumbSpace += event.target.width;
trace(thumbSpace);
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}


When I do a trace I get the proper values. I tried making the thumbLoaded function return a value function thumbLoaded():int but then I'd get a slew of error messages.

gnomeontherun
02-20-2009, 09:38 AM
This is a stab in the dark with the coding, but you need to handle the calculation inside of your new function. The new function doesn't probably run until AFTER the imageLoader.x = thumbSpace; has been run. It doesn't do each line of code line by line until finished, it runs through and if something has to load its just put in a queue and then your new function is called only when its loaded, which will pretty much always be too late.



import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;

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();
imageLoader.y = 0; // No need to reset this every time I think

for(var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.name = xmlList[i].attribute("source");
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}
MovieClip(root).scrollWidth = thumbSpace;
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}

function thumbLoaded(event:Event):void {
thumbSpace += event.target.width;
imageLoader.x = thumbSpace;
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}

marilynn.fowler
02-25-2009, 08:17 AM
It doesn't work and I don't know why.

When I trace thumbSpace inside of the thumbLoaded function, it's outputting the correct numbers, but when I trace thumbSpace inside of the xmlLoaded function it gives me a single 0. What am I doing wrong?

Single tear.

gnomeontherun
02-25-2009, 09:36 AM
Try to add
_root. to the front, might be scope issue.

marilynn.fowler
02-25-2009, 09:31 PM
I tried that and I got another error message. So then I tried retooling my code as follows:


import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;

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();
imageLoader.y = 0;

for(var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoader.name = xmlList[i].attribute("source");
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
addChild(imageLoader);

imageLoader.x = thumbLoaded();
trace(imageLoader.x);

imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}

MovieClip(root).scrollWidth = thumbSpace;
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}

function thumbLoaded():int {
thumbSpace += event.target.width;
return(thumbSpace);
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}


and I get the following "error 1120: Access of undefined property event" for line 38 (thumbspace += event.target.width).

I hope I haven't created the illusion that I know what I'm doing, because I really don't know why my thumbLoaded values aren't being passed to the imageLoader.x portion of the xmlLoaded function. It still puts them all at zero and if I trace them I still only get the one zero.

gnomeontherun
02-25-2009, 09:39 PM
Can you provide the FLA for testing?

marilynn.fowler
02-26-2009, 02:19 AM
http://www.vicesbyproxy.com/staging/expGallery/experiment.fla

The xml file is in a subfolder called "data" and the images are in a subfolder called "pics"

marilynn.fowler
02-27-2009, 10:22 PM
Well, I'm a little bit closer. At least it's not giving me error messages. When I trace thumbLoaded, it's outputting the correct numbers, but the global thumbSpace is still 0, the X-position is not getting set, and it's only loading the second-to-last thumbnail.


import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;

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.name = xmlList[i].attribute("source");
addChild(imageLoader);

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
imageLoader.addEventListener(MouseEvent.CLICK, showPhoto);
}

MovieClip(root).scrollWidth = 100 * (xmlList.length());
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}

function thumbLoaded(event:Event):Number {
trace("width = " + event.target.width + ", X = " + thumbSpace);
imageLoader.y = 0;
imageLoader.x = thumbSpace;
thumbSpace += event.target.width;
return thumbSpace;
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);
}

gnomeontherun
03-03-2009, 08:20 PM
Now that I looked at it, you should be putting the widths into an array so that you can access them later. The reason is always the loading time, the thumbs don't load in time for the loop, which is why the last one is the only one to get it, since the last call is set and not overwritten. So try putting the values into an array along with the thumbSpace counter, and when xml loader is done space them out.

marilynn.fowler
03-04-2009, 09:06 AM
I did that (with the help of my friend Chris Basmajian) and now they're spaced properly, but they seem to be loading in a weird order and not the order that they appear in the XML document. What causes this seemingly random arrangement?


import fl.transitions.Tween;
import fl.transitions.easing.*;

//var imageLoader:Loader;
var imageLoaders:Array = new Array();
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;

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++) {
imageLoaders.push( new Loader() );
imageLoaders[i].load(new URLRequest(xmlList[i].attribute("thumb")));

imageLoaders[i].name = xmlList[i].attribute("source");
addChild(imageLoaders[i]);

imageLoaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
imageLoaders[i].addEventListener(MouseEvent.CLICK, showPhoto);
}

MovieClip(root).scrollWidth = 100 * (xmlList.length());
MovieClip(root).maxScroll = MovieClip(root).minScroll - MovieClip(root).scrollWidth + thumbSpace;
}


function thumbLoaded(event:Event):Number {
event.target.content.y = 0;
event.target.content.x = thumbSpace;

thumbSpace += event.target.width + 1;
return thumbSpace;
}

function showPhoto(event:MouseEvent):void {
/*this works as well
MovieClip(root).photoGallery.source = event.target.name;
*/
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);

for(var j:int = 0; j < xmlList.length(); j++) {
if(xmlList[j].attribute("source") == event.target.name) {
(root as MovieClip).blurb_txt.text = xmlList[j];
}
}
}

gnomeontherun
03-04-2009, 09:39 AM
HTTP calls are queued up and not always executed in the same order...I don't know if there is anything to do about that other than to wait to display things after all thumbs are loaded.

marilynn.fowler
03-05-2009, 07:01 AM
OK, people. It finally works. HALLELUJAH!!

I don't want anyone else to suffer like I did, so I'm posting the code.


import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoaders:Array = new Array();
var xml:XML;
var xmlList:XMLList;
var bigPhoto;
var fadeTween:Tween;
var thumbSpace:int = 0;
var url;
var thumbLoadCntr = 0;

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++) {
imageLoaders.push( new Loader() );
imageLoaders[i].load(new URLRequest(xmlList[i].attribute("thumb")));
imageLoaders[i].name = xmlList[i].attribute("source");
addChild(imageLoaders[i]);

imageLoaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
imageLoaders[i].addEventListener(MouseEvent.CLICK, showPhoto);
}
}

function thumbLoaded(event:Event):void {
thumbLoadCntr++;
if ( thumbLoadCntr == xmlList.length() ) {
placeThumbs();
}
}

function placeThumbs():void {
for(var i:int = 0; i < xmlList.length(); i++) {
imageLoaders[i].content.y = 0;
imageLoaders[i].content.x = thumbSpace;
thumbSpace += imageLoaders[i].content.width + 1;
}
//horizontal scroll formula
MovieClip(root).minSlider = MovieClip(root).thumbs_mc.x;
MovieClip(root).maxSlider = MovieClip(root).minSlider - MovieClip(root).mask_mc.width + thumbSpace;
}

function showPhoto(event:MouseEvent):void {
(root as MovieClip).photoGallery.load(new URLRequest(event.target.name));
fadeTween = new Tween((root as MovieClip).photoGallery, "alpha", None.easeNone, 0, 1, 1, true);

for(var j:int = 0; j < xmlList.length(); j++) {
if(xmlList[j].attribute("source") == event.target.name) {
(root as MovieClip).blurb_txt.text = xmlList[j];
}
}
}


Thanks everyone who took the time to help me. Special thanks to Chris Basmajian. If eating other people's brains would make me smarter, I'd eat his first.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum