First, break it up into different pieces. The first piece is the XML parsing, the second piece is drawing the thumbnails, and the third piece is scrolling the thumbnails. I'll leave the XML parsing out of this and focus on drawing the thumbnails.
Here's the most straightforward way to do this. We could do it all with code but let's mix it up a little since it's your first time. 1) Make an empty movie clip. Name it MC_Empty. 2) Draw a 50x50 pixel red square on the stage. Delete the border. Select the square and hit F8. Name it MC_Square. 3) Make two layers in the timeline. Name the top layer MC_Mask and name the bottom layer MC_Container. 4) Put MC_Square on the MC_Mask layer and name it MC_Mask. 5) Put MC_Empty on the MC_Container layer and name it MC_Container. 6) Resize MC_Mask to whatever size you want the visible area to be. 7) Turn the MC_Mask layer into a Mask. It should automatically mask MC_Container. 8) Now that your timeline is set up it's time to write some code. I'm going to use some arbitrary values here for example. Season to taste. var imageArray:Array = parsedXmlImageArray; // Set these values var visibleRows:Number = 5; var visibleCols:Number = 4; var gutter:Number = 10; // These are set based on what you set above var colWidth:Number = (MC_Mask._width / visibleCols); var rowHeight:Number = (MC_Mask._height / visibleRows); var thumbWidth:Number = colWidth - gutter; var thumbHeight:Number = rowHeight - gutter; var rows:Number; var cols:Number; function draw() { rows = 0; cols = 0; MC_Container.thumbs.removeMovieClip(); MC_Container.createEmptyMovieClip("thumbs", 10); var i:Number = imageArray.length; while (i--) { var mc:MovieClip = MC_Container.thumbs.createEmptyMovieClip("item" + i, i); mc._x = cols * colWidth; mc._y = rows * rowHeight; mc.createEmptyMovieClip("img", 10); mc._visible = false; mc.img.loadMovie(imageArray[i]); mc.onEnterFrame = function() { if (this.img._width > 0) { this._width = thumbWidth; this._height = thumbHeight; this._visible = true; delete this.onEnterFrame; } }; if (++cols == visibleCols) cols = 0; if (cols == 0) rows++; } } This is a simple example. First, we set up some initial variables that you can play with. Decide how many visible rows and columns you want and how much space you want in between the thumbnails (gutter). It will then determine the sizes of the thumbnails, rows and columns based on the dimensions of MC_Mask. In this way, you can resize it easily by setting the width and height of MC_Mask and calling draw() again. The draw function: Creates an empty movieclip inside MC_Container called thumbs. This makes it easier to refresh the view by simply removing the thumbs clip rather than removing every single movieclip inside it. Then we loop through the array of image paths you got from parsing your XML. In the loop, we create a reference to an empty movieclip. The name of the clip is "item" + i (item1, item2, etc.) and its depth is set to i. We also make it invisible. We set its _x to the number of columns times the width of the columns and its _y to the number of rows times the height of the rows. Inside that clip we create an empty movieclip to load the image into, and tell it to load movie. Then, we put an onEnterFrame on the movieclip (not the image clip because when you loadMovie, when it's done loading it will overwrite onEnterFrame) that checks to see when the image has loaded, and then resizes the image to the thumbWidth and thumbHeight we set above. Then it makes the clip visible. We do this so the image doesn't show until it's done loading and resized. Then we increment cols and see if it's equal to the visibleCols. If it is, we reset it back to 0 so it draws from the left position again. If cols is equal to 0, then we know it's a new row so we increment rows. That's all there is to it. Doing a scrollbar is a different discussion, and you could just as easily throw all of this into a movieclip and put that movieclip into a scrollpane. You'll need to use the undocumented command setScrollProperties on the scrollpane once the images are finished loading, though, so keep that in mind (google it for more info). Hope this helps, Steven _______________________________________________ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com