Mike, I know Steven & others have already responded to your question, but as it happens I just posted the source code of an app that (I think) does what you're looking for. It's one step more complex than you asked for - it actually creates multiple scrolling lists inside an Accordion (thereby breaking the Accordion - but that's a separate issue :-)
Anyway, the app loads images and text via XML and puts the images in a horizontal scroll pane - and this aspect of the app works fine. You could easily strip out the Accordion and related code, and use this as a guide: http://robsondesign.com/etc/flashcoders/scroller_in_accordion/scroller_in_ac cordion.zip -Jim -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mike Dunlop Sent: Tuesday, December 12, 2006 4:05 PM To: Flashcoders mailing list Subject: RE: [Flashcoders] loading thumbnails into a scrollable box via AS Wow!! Steven, thanx so much!! I will give this a shot and let you know how it worked out. Thanks again for taking the time to write all this out :) Best, Mike D ....................... Mike Dunlop // Droplab [ e ] [EMAIL PROTECTED] > 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 > _______________________________________________ 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 _______________________________________________ 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
