RE: [Flashcoders] loading thumbnails into a scrollable box via AS
Mike, I've used the built in scrollPane and UIScrollBars a few times, but found fairly easy to use, but exceedingly complicated to customize. If you don't mind the default look of the ScrollPane I'd suggest using. Though bare in mind they can add considerable file size to your swf. I'd suggest creating movieclip that loads all your images, and then another one that loads that under a masked layer. Use another set of movieclips/buttons to move the thumbnail clip around under the mask. Hope that helps! -Dan -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Mike Dunlop Sent: Tuesday, December 12, 2006 1:43 PM To: flashcoders@chattyfig.figleaf.com Subject: [Flashcoders] loading thumbnails into a scrollable box via AS Hi folks, This is my first go at something like this in flash. I need to, write some actionscript that will read in (from an xml file) a collection of thumbnails. I need to basically have these thumbnails show up in a scrollable pane all spaced evenly. I've seen this done on many flash sites so i know it's too crazy. I know how to load images into a mc (.loadclip()) but i am just not sure about the scrollable box...Would i use a scrollbox component for this? Does anyone have any ideas on how to do this? Thanks in advance! Best, Mike D ... Mike Dunlop // Droplab [ e ] [EMAIL PROTECTED] ___ 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 This e-mail and its attachments are intended only for the use of the addressee(s) and may contain privileged, confidential or proprietary information. If you are not the intended recipient, or the employee or agent responsible for delivering the message to the intended recipient, you are hereby notified that any dissemination, distribution, displaying, copying, or use of this information is strictly prohibited. If you have received this communication in error, please inform the sender immediately and delete and destroy any record of this message. Thank you. ___ 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
RE: [Flashcoders] loading thumbnails into a scrollable box via AS
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
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
Re: [Flashcoders] loading thumbnails into a scrollable box via AS
On 12/12/06, Steven Sacks | BLITZ [EMAIL PROTECTED] wrote: 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. Nice post. Thanks. -- count_schemula ___ 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
Re: [Flashcoders] loading thumbnails into a scrollable box via AS
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
Re: [Flashcoders] loading thumbnails into a scrollable box via AS
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. ...snip... Thanks Steven for the post/tutorial/example, great info. :) Cheers, M -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse ___ 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
RE: [Flashcoders] loading thumbnails into a scrollable box via AS
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
Re: [Flashcoders] loading thumbnails into a scrollable box via AS
Jim, thanks for the taking the time to write back and your app sounds
wonderful. I'm going to check it out tonight and will let you know
how it goes! :)
Thanks!
Best,
Mike D
.
Mike Dunlop
// Droplab
[ e ] [EMAIL PROTECTED]
On Dec 12, 2006, at 4:02 PM, Jim Robson wrote:
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
