all groups > flash actionscript > october 2005 >
You're in the

flash actionscript

group:

Dynamic thumbnail in movie clip


Dynamic thumbnail in movie clip artesiandesign2
10/14/2005 8:50:36 PM
flash actionscript:
I'm basically doing a custom image gallery. I have a single movie clip
(symbol) where each instance should have a different thumbnail. I'm using a
common movie clip because I want it to do certain things the same way for each
thumbnail.

buttons_mc - this is my gallery movie
buttons_mc.thumbnail - an instance of my thumbnail Movie Clip

buttons_mc.thumbnail.photo_mc - this is the image inside the thumbnail
buttons_mc.thumbnail.button - this is the button inside the thumbnail

I'm using the same button and movie clip for each thumbnail.
I need to know how to tell each instance of the thumbnail symbol to load it's
respective JPEG (from an array).


var images_residential = new Array(); // filenames of images
images_residential = ["",
"residential1.jpg",
"residential2.jpg",
"residential3.jpg",
"residential4.jpg",
"residential5.jpg",
"residential6.jpg"];

_global.imagePopup = function(fileName:String) { // enlarged photo popup
gotoAndPlay("open");
popup.photo_mc.loadMovie("photos/" + fileName); //load photo into placeholder
popup.photo_mc._x = -200;
popup.photo_mc._y = -150;

}

on (release) { // in my thumbnail button
imagePopup(_root.images_residential[buttonNum]); // need to know which
thumbnail this is
trace (images_residential[buttonNum]);
} // supposed to show my image in , but output show "undefined"


I don't have a clue how to tell each instance which image use.
I'm still trying to get a grasp on AS, objects and classes... I'm close, but
still in the woods.

Can anyone please help?
Re: Dynamic thumbnail in movie clip CodeManNew
10/15/2005 12:00:00 AM
How many thumbnails do you have on the stage at one time?

You'll need to make sure that each placeholder has a unique instance name and
then run a loop to go through your array and load the picture in the
appropriate thumbnail.
Re: Dynamic thumbnail in movie clip artesiandesign2
10/18/2005 11:24:48 PM
Thanks so much for responding!

How many thumbnails do you have on the stage at one time?

Currently, I have 6 thumbnails. However, I will be adding images periodically.
Could be up to 20 per gallery.

You'll need to make sure that each placeholder has a unique instance name and
then run a loop to go through your array and load the picture in the
appropriate thumbnail.

I was hoping to avoid naming each instance. Then I'd have to go into each
gallery and manually name each thumbnail. I might as well just make individual
buttons, each loading their own jpeg thumbnail.

I'd rather have my thumbnail movie have a variable (property?) that told it
which image to load based on a property/assigned to the movie - i.e. how you
specify parameters for components through the Flash component inspector - but I
don't know how to add a parameter to my thumbnail button. Is this too complex
for what I want to do?

Could you give me an idea of where to start with your suggestion or with my
Property idea?

Thanks again!
Re: Dynamic thumbnail in movie clip sampurtill
10/19/2005 12:00:00 AM
Do this, dynamically load all the thumbnails into empty movie clips and store
their movieclip names in a variable. Outside the loop, write a function for
when you press a thumbnail_mc, the big picture url loads into another mc. This
works especially well with an XML file, I have done it a ton of times. Check it
out here ->www. tfhucd.com and click the media basket. Is that what you're
looking for? Hope this helps, if you want any of the code from that I could
send you the entire .fla, I don't mind you copying it as long as you're not
making money off of it.
Re: Dynamic thumbnail in movie clip CodeManNew
10/19/2005 12:00:00 AM
As I understand it, you basically want to do two things:

1. Dynamically load photo .jpgs from an array into a photo gallery using the
loader component
and
2. When a thumbnail is clicked, have a larger version of the photo appear

Here's one way to do it...

One the stage, drag as many instances of the loader component as you have
thumbnails. Properly size them and make each instance have a sequential name
(thumbnail0) starting with 0.... Also, drag another loader for the main photo,
and make its instance name "main."

To load these thumbnails, use this code:

//Establish array of thumbnails
photo_box=new
Array("0001.jpg","0002.jpg","0003.jpg","0004.jpg","0005.jpg","0006.jpg");
//Load images listed in array into pre-existing thumbnails, which have
instance names
//thumbnail0,thumbnail1,thumbnail2...thumbnail6
// using a loop
for (i=0; i<7; i++){
//build photo to load name based on number in loop
photo_to_load=photo_box;
//build instance name of loader component dynamically based on position in
array
thumb_to_load="thumbnail"+i;
//establish the content path
//note syntax includes no "." after "_root"
//that's how you path dynamic variables
_root[thumb_to_load].contentPath=photo_to_load;
_root[thumb_to_load].load;
}

In a new layer above the layer used for the loaders, make one invisible button
with the code:

on (release){
//for each button, set the button number here
//the number is the only thing that changes in the button instance
//in line 5 of this code
_root.button_pushed=0;
//call a function that can then use the button number
_root.load_main_pic();
}

Copy that button to cover the other thumbnail loaders, changing line 5 of the
code for the thumbnail number... so over thumbnail2, the _root.button_pushed=2,
etc.

Back in the first frame action, add the function:

// function for loading main picture when invisible buttons are pressed
function load_main_pic(){
// set main photo to load based on button pushed variable
// note: you may want to have a separate array for the full size pics
// in which case you would adjust the following line for that array name
main_to_load=photo_box[_root.button_pushed];
_root.main.contentPath=main_to_load;
// load that main photo
_root.main.load;
}

I've posted the result at www.lehman-meyer.com/flash/loader.html

Click on any thumbnail and see the main pic appear.

You can also download the source .fla by just going to
www.lehman-meyer.com/flash

There's also some code in there to make the scale of the thumbnails enlarge on
rollover...

The nice thing about this approach is that the invisible buttons are re-usable
over and over again, and the only thing that has to change on them is the
thumbnail number in lines 5 and 11 of the code... and the loaders remain
invisible if not used.

This can also be improved in many ways, including using .xml as sam alluded
to... or parallel arrays, so you have file names and other pic information
popping up dynamically... and once you decide on a number of thumbnails per
page, you can have Flash dynamically build more pages on the fly based on the
length of the array...

Hope this helps
Re: Dynamic thumbnail in movie clip sampurtill
10/19/2005 10:16:15 PM
That's extremely tedious and unnecessary, especially the use of a component.
Why wouldn't you just loop a createEmptyMovieClip() and load each thumbnail
into that? If it was looped it would be way less of a hassle.
Re: Dynamic thumbnail in movie clip CodeManNew
10/20/2005 12:00:00 AM
As you know with most things in Flash, there's more than one way to do it...
you're right, createEmptyMovieClip() would be a good way to do it in
ActionScript, but then you would have to do a little math to determine the x
and y values of each thumbnail, which of course, could also be in the loop.
Sometimes it's easier to position the placeholders graphically than to do the x
and y calculations...
Re: Dynamic thumbnail in movie clip sampurtill
10/27/2005 7:08:16 AM
If you loop the x and y calculations then it takes out the pain of manually
doing everything. You're right, there's more than one way to kill a bird in
Flash. Or whatever the saying is. But if you have the x and y coordinates
looped, it will cut down a tremendous amount of time that would be wasted in my
opinion. Unless you were going to put the thumbnails in random places all over
the stage, which I don't think this person is trying to do.
AddThis Social Bookmark Button