A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: Add images from XML into a grid-like structure

  1. #1
    Member
    Join Date
    Mar 2010
    Posts
    30

    Add images from XML into a grid-like structure

    I see there are many many tutorials on creating horizontally oriented scrolling image galleries.
    I'm trying to load and display images (read in dynamicaly with xml) into a rectangular grid format, say, 2 rows of 3 images.

    I believe I understand the nuts and bolts about xml loaders, but my code is only showing what I think is the last image:

    Actionscript Code:
    function loadComplete(evt:Event):void
    {
        //flashprojXMLLoader.removeEventListener(Event.COMPLETE, loadComplete);
        var flashXMLInfo:XML = XML(evt.target.data);
        flashProjDate = flashXMLInfo.project.@date;
        flashProjName = flashXMLInfo.project.@pname;
        flashProjTitle = flashXMLInfo.project.@ptitle;
        flashProjDesc = flashXMLInfo.project.@description;
        flashImage = flashXMLInfo.project.@image;
        var n=0;

        while (n<flashImage.length())
        {          
            for(var i:int = 0; i < 2; i++)
            {
                for(var j:int = 0; j<3; j++)
                {
                    imageLoader.load(new URLRequest(flashImage[n]));
                    imageLoader.x = j*200;
                    imageLoader.y = i*200;
                    addChild(imageLoader);
                    trace("positioned image " + flashImage[n] + " at " + imageLoader.x + " , " + imageLoader.y);
                    n++;
                }
            }  
               
        }

    }

    the trace command reveals that the coordinates are indeed right on where I expect them to be... only thing is on the stage, only one image shows up. The very last one.
    What am I doing incorrectly? I'm not very experienced with the Loader class, I admit.
    thank you
    Don

  2. #2
    Senior Member
    Join Date
    May 2010
    Location
    Russia: Western Siberia
    Posts
    268
    It happens because these loops work too fast. So the program loops thru them before any image can be loaded and added. When the last loop is finished it stops and program has time to add image to the stage. That's why you can see only the last one.
    You can work around this problem by making sure that image is on the stage before loading next one.
    Actually, you can do it without loops at all.
    Load the first image, then add it to the stage, and when it's added it will trigger Event.ADDED. You just have to add event listener and handler for this event. When it's triggered, go to another image.

    When I was making my first gallery, I also encountered this problem, and this way worked for me
    Last edited by caseyryan; 08-11-2010 at 01:21 AM.

  3. #3
    Member
    Join Date
    Mar 2010
    Posts
    30
    Hi, thanks very much for your advice.
    "You can work around this problem by making sure that image is on the stage before loading next one. " How would I do that? Is there something like a pause or wait command in AS3? Would I need to set up a timer, so each picture has, say, a third of a second to load before moving on to the next one in the loop?

    "Actually, you can do it without loops at all." I don't know how to load/display an image from an XML file any other way, really.
    I could just position the images directly onto the stage, but my intent is to have XML data with each image. Every image will have its own clickable external link, and description that will show up in a text field.

    I'll provide the script in its entirety here: (some of the imported libraries may be extra and not necessary)

    Actionscript Code:
    import flash.display.MovieClip;
    import flash.display.*;
    import fl.transitions.*;
    import fl.transitions.easing.*;
    import flash.events.*;



    // UPDATE THIS SECTION WITH FLASHPROJECTS.XML DATA
    // -------------- Load FLASH XML  info   -----

    var flashProjDate:XMLList; // xml tag: date
    var flashProjName:XMLList; // xml tag: pname
    var flashProjTitle:XMLList; //  xml tag: ptitle
    var flashProjDesc:XMLList; // xml tag: description
    var flashImage:XMLList; // xml tag: image

    var imageLoader:Loader = new Loader();
    var flashprojXMLLoader:URLLoader = new URLLoader();
    flashprojXMLLoader.load(new URLRequest("flashprojectlist.xml"));
    flashprojXMLLoader.addEventListener(Event.COMPLETE, loadComplete);

    function loadComplete(evt:Event):void
    {
        //flashprojXMLLoader.removeEventListener(Event.COMPLETE, loadComplete);
        var flashXMLInfo:XML = XML(evt.target.data);
        flashProjDate = flashXMLInfo.project.@date;
        flashProjName = flashXMLInfo.project.@pname;
        flashProjTitle = flashXMLInfo.project.@ptitle;
        flashProjDesc = flashXMLInfo.project.@description;
        flashImage = flashXMLInfo.project.@image;
        var n=0;

        while (n<flashImage.length())
        {          
            for(var i:int = 0; i < 2; i++)
            {
                for(var j:int = 0; j<3; j++)
                {
                    addChild(imageLoader);
                    imageLoader.load(new URLRequest(flashImage[n]));
                    imageLoader.x = j*200;
                    imageLoader.y = i*200;
                    trace("positioned image " + flashImage[n] + " at " + imageLoader.x + " , " + imageLoader.y);
                    trace(Event.ADDED);
                    n++;
                }
            }  
               
        }

    }

  4. #4
    Junior Member
    Join Date
    Aug 2010
    Posts
    8
    Hey,

    I have a better solution for you, how to position objects in a custom grid:

    Link for the grid:
    http://www.actionscript-library.com/?p=270

    Link where I use this technique in a XML gallery:
    http://blog.activeden.net/resources/...3-and-milkbox/

  5. #5
    Member
    Join Date
    Mar 2010
    Posts
    30
    yikes... this is turning out to be more difficult that I thought... I thought it would be a simple matter. Thanks very much gentlemen!

    Might try to devise a different method. This is going to be my portfolio site, and I should have a darn good grasp of what I put up there so I can describe how the code works.

Tags for this Thread

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center