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) 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
_______________________________________________
[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
