I am getting ready to do something similar - that saved me some trial
and error - thx :)
V
Van R Tuck
Director of Web Development
Cause Design Group
1519 Stanford Street Suite 6
Santa Monica, CA 90404
t: 310.430.5369
www.causedesigngroup.com
On Dec 12, 2006, at 12:59 PM, Steven Sacks | BLITZ wrote:
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
