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
>
>
> _______________________________________________
> [email protected]
> 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
>
_______________________________________________
[email protected]
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
