Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    How to get width of an xml pic added via loop

    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.

    Code:
    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);
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.
    Last edited by marilynn.fowler; 02-18-2009 at 08:20 PM.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Apply a new listener to imageLoader that will pick up when the image is loaded, and then make the measurements for each.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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:
    Code:
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.


    Code:
    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);
    }
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #8
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Try to add
    Code:
    _root.
    to the front, might be scope issue.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I tried that and I got another error message. So then I tried retooling my code as follows:

    Code:
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #10
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Can you provide the FLA for testing?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #11
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    http://www.vicesbyproxy.com/staging/...experiment.fla

    The xml file is in a subfolder called "data" and the images are in a subfolder called "pics"
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #12
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.

    Code:
    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);
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #13
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    marilynn.fowler (03-05-2009)

  • #14
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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?

    Code:
    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];
    		}
    	}
    }
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #15
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •