Dynamically Load Thumbnails To Horizontal Movieclip?

Report · May 02, 2009

I'd like to dynamically load thumbnails into a horizontal movieclip at the bottom of an image gallery to then allow me to load an image by clicking the thumbnails. I found a tutorial to help me load the thumbnails to the stage but I am not sure how to load them into the thumbs movieclip. Here is the code I am using:

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/murals.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.attribute("thumb")));
        imageLoader.x = i * 175 + 25;     // <----- Also, I don't seem to understand how to space the thumbnails using this code.
        imageLoader.y = 5;
        addChild(imageLoader);
    }
}

Thanks in advance!

-Dan

Report · May 02, 2009

As far as loading the thumbs to a movie goes, I'd say all you need to change is...

thumbContainer.addChild(imageLoader);

where thumbContainer is whatever instance name you give to the movieclip you want to load them into.

As far as spacing goes, you should be able to reason that out, then write the code for that reasoning. As is, I think you'll have things crowding up.

Report · May 02, 2009

Easy enough. Well I'd really like to do something like this thumbnail thing on this site http://www.airtightinteractive.com/photos/ . 3 thumbnails in a row horizontally and a few vertically. I don't know how to position dynamically loaded thumbnails like that. I guess I would need to code it to stop at the edge of the movieclip and start a new row. Do you have any idea how I would go about doing that?

Report · May 02, 2009

you can use the following to align displayobjects along a grid:

var colNum:uint = 3;
var colGap:uint = 10;
var rowGap:uint = 10;
var startX:uint = 15;
var startY:uint = 20
var nextX:uint = startX;
var nextY:uint = startY;

for(var i:int = 0; i < xmlList.length(); i++){
     obj.x = nextX;
     obj.y = nextY;
     nextX = (i%colNum)*(obj.width+colGap)+startX;
     nextY = Math.floor(i/colNum)*(obj.height+rowGap)+startY;
}

Report · May 02, 2009

Hmm...they are loading into the movieclip and everything but they are still sort of bunched up in the top left. Each thumb is 65 x 65 px loaded into a 200 x 510 px movieclip and it has 2 rows. Am I suppose to replace the "obj" with my movieclip "muralsNav" or with "imageLoader" ?

var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("xml/murals.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void{

    xml = XML(event.target.data);
    xmlList = xml.children();

    var colNum:uint = 2;
    var colGap:uint = 25;
    var rowGap:uint = 25;
    var startX:uint = 25;
    var startY:uint = 25;
    var nextX:uint = startX;
    var nextY:uint = startY;

    for(var i:int = 0; i < xmlList.length(); i++){
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(xmlList.attribute("thumb")));
        imageLoader.x = nextX;
        imageLoader.y = nextY;
        nextX = (i%colNum)*(muralsNav.width+colGap)+startX;
           nextY = Math.floor(i/colNum)*(muralsNav.height+rowGap)+startY;
        muralsNav.addChild(imageLoader);
    }

}

Thanks,

-Dan

Report · May 03, 2009

Alright, nevermind about the spacing. I just didn't understand at first but I got it. They are spaced all right but the second image in the xml file is covering up the first one. So if I only have 1 image in the xml file it shows that one but since I have 4 the second image covers the first image and the other 2 follow the grid. I checked my XML and everything is fine. Any ideas as to why this would happen?

Here is the code I am using:

    function xmlLoaded(event:Event):void{

        xml = XML(event.target.data);
        xmlList = xml.children();

        var colNum:uint = 2;
        var colGap:uint = 90;
        var rowGap:uint = 90;
        var startX:uint = 25;
        var startY:uint = 25;
        var nextX:uint = startX;
        var nextY:uint = startY;

        for(var i:int = 0; i < xmlList.length(); i++){
            imageLoader = new Loader();
            imageLoader.load(new URLRequest(xmlList.attribute("thumb")));
            imageLoader.x = nextX;
            imageLoader.y = nextY;
            nextX = (i%colNum)*(imageLoader.width+colGap)+startX;
               nextY = Math.floor(i/colNum)*(imageLoader.height+rowGap)+startY;
            muralsNav.addChild(imageLoader);
        }

    }

Thanks.

-Dan

Report · May 03, 2009

you can't using imageLoader.width and imageLoader.height until loading is complete.

Report · May 03, 2009

I added an imageLoaded function. This doesn't work but is this on the right path of what I need to do?

        for(var i:int = 0; i < xmlList.length(); i++){
            imageLoader = new Loader();
            imageLoader.load(new URLRequest(xmlList.attribute("thumb")));
            muralsNav.addChild(imageLoader);

            imageLoader.addEventListener(Event.COMPLETE, imageLoaded);

            var colNum:uint = 2;
            var colGap:uint = 90;
            var rowGap:uint = 90;
            var startX:uint = 25;
            var startY:uint = 25;
            var nextX:uint = startX;
            var nextY:uint = startY;

            function imageLoaded(event:Event):void{
                imageLoader.x = nextX;
                imageLoader.y = nextY;
                nextX = (i%colNum)*(imageLoader.width+colGap)+startX;
                nextY = Math.floor(i/colNum)*(imageLoader.height+rowGap)+startY;
            }

        }

Report · May 03, 2009

no.

normally, you'd remove your for-loop, initialize i and put your code to load your first image and add the complete listener in one function.

in your complete listener's function, increment i, do whatever and if i is less than your list lenght, call the above function.

but when you're arranging items in a grid i'm not sure it makes any sense to keep checking all the width/heights. if they're not all the same, there's not much point to arranging them along a grid.

more appropriately, you would resize all the loaded images so they will be the same size when displayed in the grid.

and there's no reason to repeatedly define all those parameters. they should be removed for the loop.

Report · May 03, 2009

Am I doing this right? I can't test because I keep getting these errors and don't understand why:

1084: Syntax error: expecting rightparen before semicolon. if (i < xmlList.length(); i++) {

1084: Syntax error: expecting semicolon before rightparen. if (i < xmlList.length(); i++) {

Code:

Report · May 03, 2009

The i++ is misplaced it should go after the { opening of the if function

Sincerely,

Michael

El 03/05/2009, a las 15:01, danedmonds <forums@adobe.com> escribió:

>

Am I doing this right? I can't test because I keep getting these
errors and don't understand why:

>

+ 1084: Syntax error: expecting rightparen before
semicolon. if (i < xmlList.length(); i++) {
+
+ 1084: Syntax error: expecting semicolon before
rightparen. if (i < xmlList.length(); i+) {

>

Code:

>

function xmlLoaded(event:Event):void{
xml = XML(event.target.data);
xmlList = xml.children();

>

function thumbLoaded(event:Event):void{
var i:int = 0;
imageLoader = new Loader();
imageLoader.load(new
URLRequest(xmlList+.attribute("thumb")));
muralsNav.addChild(imageLoader);

>

imageLoader.addEventListener(Event.COMPLETE, imageLoaded);
}

>

var colNum:uint = 2;
var colGap:uint = 90;
var rowGap:uint = 90;
var startX:uint = 25;
var startY:uint = 25;
var nextX:uint = startX;
var nextY:uint = startY;

>

function imageLoaded(event:Event):void{
if (i < xmlList.length()); i++) {
imageLoaded.x = nextX;
imageLoaded.y = nextY;
nextX = (i%colNum)*(imageLoaded.widthcolGap)startX;
nextY = Math.floor(i/colNum)*(imageLoaded.height
rowGap)startY;

>

imageLoader.addEventListener(Event.COMPLETE,
thumbLoaded);
}
}

>

}

>

Report · May 03, 2009

Thank you for your reply. That helped me get past that error but now its giving me a "i is undefined" error for every place that "i" is in the "imageLoaded" function.

Isn't "var i:int = 0;" defining "i" ?

function xmlLoaded(event:Event):void{
         xml = XML(event.target.data);
         xmlList = xml.children();
          
          function thumbLoaded(event:Event):void{
             var i:int = 0;
             imageLoader = new Loader();
             imageLoader.load(new URLRequest(xmlList.attribute("thumb")));
             muralsNav.addChild(imageLoader);
               
             imageLoader.addEventListener(Event.COMPLETE, imageLoaded);
          }
          
          var colNum:uint = 2;
          var colGap:uint = 90;
          var rowGap:uint = 90;
          var startX:uint = 25;
          var startY:uint = 25;
          var nextX:uint = startX;
          var nextY:uint = startY;
          
          function imageLoaded(event:Event):void{
               
               if (i < xmlList.length()) {
                    i++;
                    imageLoader.x = nextX;
                    imageLoader.y = nextY;
                    nextX = (i%colNum)*(imageLoader.width+colGap)+startX;
                    nextY = Math.floor(i/colNum)*(imageLoader.height+rowGap)+startY;
                    
                    imageLoader.addEventListener(Event.COMPLETE, thumbLoaded);
               }
          }
          
     }

Thanks,

Dan

Report · May 03, 2009

You're defining i within a function so the scope of i will be that

function, outside of that scope the var i doesn't exist.

Sincerely,

Michael

Report · May 07, 2009

Whew. I have finally found the answer I was looking for to unload the current image before loading a new image. I had to add "MovieClip(parent.parent).gallery.removeChildAt(0);" to my "fullLoaded" function. NOW, the loaded images are not centered and I have not changed any code but at that one piece. I have been fighting with this all day and can not figure out what is causing that and this project is due next week. Any help is very much appreciated!

Thanks!!

Dan

(PS: I wasn't sure if this deserved a new discussion or not...please let me know for future posts.)

CODE (fullLoaded function is at the bottom):

var columns:Number = 2;
var my_x:Number = 25;
var my_y:Number = 75;
var my_thumb_width:Number = 65;
var my_thumb_height:Number = 65;
var my_images:XMLList;
var my_total:Number;

var container_mc:MovieClip;

var x_counter:Number = 0;
var y_counter:Number = 0;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("xml/gallery.xml"));

myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
     var myXML:XML = new XML(e.target.data);

     my_images = myXML.IMAGE;
     my_total = my_images.length();

     createContainer();
     callThumbs();
}

function createContainer():void{
     container_mc = new MovieClip();
     container_mc.x = my_x;
     container_mc.y = my_y;

     addChild(container_mc);

     container_mc.addEventListener(MouseEvent.CLICK, callFull);
}

function thumbLoaded(e:Event):void{
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
}

function callFull(e:MouseEvent):void{
     var full_loader:Loader = new Loader();
     var full_url = my_images[e.target.name].@FULL;
     full_loader.load(new URLRequest(full_url));

     full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
}

function fullLoaded(e:Event):void{
     var my_loader:Loader = Loader(e.target.loader);
     MovieClip(parent.parent).gallery.addChild(my_loader);
     MovieClip(parent.parent).gallery.removeChildAt(0);
     my_loader.x = (MovieClip(parent.parent).gallery.width - my_loader.width)/2;
     my_loader.y = (MovieClip(parent.parent).gallery.height - my_loader.height)/2;
}

Report · May 03, 2009

Alright, now the images load but they aren't aligning to the grid.

Any ideas?

Code:

Report · May 04, 2009

Help, please....?

Report · May 04, 2009

Alright, the images or image I should say follows the grid. But the rest of the images aren't loading. Where am I going wrong with this code?

Thanks,

Dan

Code:

Report · May 05, 2009

bump

Report · May 06, 2009

I wasn't sure if I should make a new discussion for this or not so I'm just going to post it here.

Alright. I finally found a tutorial that works for what I am trying to do. The thumbs load on a grid and when I click on the thumb they load in the loader. Now I am having trouble removing them. The tutorial has the remove function on the loaded large image so when you click that it removes itself. I would like so that when you click on the a thumb the current image will unload and the thumb that is clicked on will load but can't figure out how to get it to do that. I figured I'd just add a CLICK listener for the "removeFull" function to the "callFull" function but I think it cancels itself out.

Here is the code I am using: (the code to load and unload is toward the bottom)

stop();

var columns:Number = 2;
var my_x:Number = 25;
var my_y:Number = 75;
var my_thumb_width:Number = 65;
var my_thumb_height:Number = 65;
var my_images:XMLList;
var my_total:Number;

var container_mc:MovieClip;

var x_counter:Number = 0;
var y_counter:Number = 0;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("xml/gallery.xml"));

myXMLLoader.addEventListener(Event.COMPLETE, processXML);

function processXML (e:Event):void{
    var myXML:XML = new XML(e.target.data);

    my_images = myXML.IMAGE;
    my_total = my_images.length();

    createContainer();
    callThumbs();
}

function createContainer():void{
    container_mc = new MovieClip();
    container_mc.x = my_x;
    container_mc.y = my_y;

    addChild(container_mc);

//The large image loads when the thumb is clicked on.
    container_mc.addEventListener(MouseEvent.CLICK, callFull);
    container_mc.buttonMode = true;
}

function callThumbs():void{
    for (var i:Number = 0; i < my_total; i++){
        var thumb_url = my_images.@THUMB;;
        var thumb_loader = new Loader();
        thumb_loader.load(new URLRequest(thumb_url));
        thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

        thumb_loader.name = i;

        thumb_loader.x = (my_thumb_width+25)*x_counter;
        thumb_loader.y = (my_thumb_height+25)*y_counter;

        if (x_counter+1 < columns){
            x_counter++;
        } else {
            x_counter = 0;
            y_counter++;
        }
    }
}

function thumbLoaded(e:Event):void{
    var my_thumb:Loader = Loader(e.target.loader);
    container_mc.addChild(my_thumb);
}

//This function loads the large image.
function callFull(e:MouseEvent):void{
    var full_loader:Loader = new Loader();
    var full_url = my_images[e.target.name].@FULL;
    full_loader.load(new URLRequest(full_url));
    full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
}

//This function centers the large image in the gallery loader.
function fullLoaded(e:Event):void{
    var my_loader:Loader = Loader(e.target.loader);
    MovieClip(parent.parent).gallery.addChild(my_loader);
    my_loader.x = (MovieClip(parent.parent).gallery.width - my_loader.width)/2;
    my_loader.y = (MovieClip(parent.parent).gallery.height - my_loader.height)/2;

//The large image unloads when it is clicked on.
my_loader.addEventListener(MouseEvent.CLICK,removeFull);
}

//This function removes the loaded image from the gallery loader.
function removeFull(e:MouseEvent):void{
    var my_loader:Loader = Loader (e.currentTarget);
    my_loader.unload();
    removeChild(my_loader);
}