[F8] An easier way than creating 480 separate buttons?

[drn33]

Good afternoon all. I am creating a photo gallery that can have up to 500 externally loaded thumbnail images, each of which will open a larger external photo when clicked. Sounds easy enough....
What I am thinking is creating one button 50px x 50px, which I can duplicate 500 times and give a different instance name to each. I then assign a movie clip in frame one which identifies the instance name of the button and loads an external thumbnail image. Then on mouseclick it will use the same variable to load the larger image. I understand the logic, but my coding is not quite synching up right. Can someone please help me with this. Here is the code:

1st button is named "e01"
The movie clip called "em01" in frame one of the button has this code:

var loadThumb = this._name //get the instance name of the button
loadMovie("thumbnails/" + loadThumb + ".jpg", this); //load an external thumbnail image based on the variable

Once I figure this out, I can call the same variable to load the larger external image. I think my problem is with "this._name" and making it call the instance name of the button rather than the movie clip. Any help would be greatly appreciated.

[gparis]

The movie clip called "em01" in frame one of the button has this code

you should put your code on the main timeline and on a keyframe, not on a movieclip, specially not one that is inside a button.

to target multiple instances use a for loop, if you don't already do (with your duplicate code)

gparis

[drn33]

Thank you for the response gparis. I have not used for loops very often, but putting the code on the main timeline makes sense. I'm guessing the main timeline code for the thumbnail "e01" by itself would look like this:
In frame 1 of the main timeline:

var loadThumb = this.myGallery.e01_name; //myGallery is the movie clip that contains all the buttons
this.myGallery.e01.em01.loadMovie("thumbnails/" + loadThumb + ".jpg", this);

This would load the external thumb jpeg into button 1. How would I use a for loop to add them to the others?
Thanks!

[gparis]

var loadThumb = this.myGallery["e"+i]._name
this.myGallery["e"+i]["em"+i].loadMovie("thumbnails/" + loadThumb + ".jpg");

don't use zeros before the 1 (as in e1 intead of e01), that way you can iterate through the loop with var i from 1 to 480, which would give you: e1 e2 e3....e480

You can duplicate your movies the same way inside the for loop.
Read here for more info
gparis

[gparis]

also just use one holder mc inside the movieclip e1 (you don't need to duplicate it )
which would give:
this.myGallery["e"+i]holder.loadMovie("thumbnails/" + loadThumb + ".jpg");

gparis

[drn33]

Thanks gparis, this is great information. I will look up the article and try it out on a small batch of the images. Just for clarification, the holder MC would be an empty movie clip inside the button e1 (you said movie clip above)? Is that what you meant? Should I then give the MC inside e1 an instance name of "holder"?

And would I need to put periods after myGallery and before holder in your code here: this.myGallery["e"+i]holder.loadMovie("thumbnails/" + loadThumb + ".jpg");
so it would read: this.myGallery.["e"+i].holder.loadMovie("thumbnails/" + loadThumb + ".jpg");

Thanks again!

[gparis]

do not use buttons. All movieclips.

no dot before the bracket, but after yes, sorry. it should read:
this.myGallery["e"+i].holder.loadMovie("thumbnails/" + loadThumb + ".jpg");

gparis

[drn33]

Okay, I'm a little confused. If there are no buttons, how do I call out the larger image when the thumbnail is clicked. Would I write an on(press) handler on the movie clip? Sorry, that's something I have not done before.

So basically I would have a movie clip called "holder" inside the myGallery MC, and MC "holder" will load the thumbnail image? Then when that movie clip is pressed with some special script, it will trigger a larger external image based on the variable loadThumb I assigned earlier in the main timeline? And I would copy and paste the holder MC for all my thumbnails and assign a different instance name to each one? Am I on the right track.

Thanks again for your help, I really appreciate it.

[gparis]

this.myGallery["e"+i].holder.onPress=function() {//actions};

gparis

[gparis]

And I would copy and paste the holder MC for all my thumbnails

no. You just use ONE movieclip, then you duplicate or attch it within the for loop.

gparis

[drn33]

Okay, this makes more sense. I think I have a fun few hours of testing and lots of debugging, but thank you very much for all your help!

[drn33]

Okay, I was able to get the code to load all the thumbnails into the holder MC quite easily, so thank you very much gparis for that. But the bigger problem is that the onPress command does not work. I went through the code and discovered that when the movie clip is taken over by the loaded thumbnail, it loses it's ability to accept event handler commands. Does this make sense? Basically I was able to initiate onPress commands for every movie clip but the holder clips with the externally loaded image. Any suggestions as to how to fix this? If I can just figure this one out it should work perfectly.
Thanks again for your help.

[[HKR]Chief]

Try this. Instead of assigning the actions to the holder, assign them to the holder's parent, like so:

this.myGallery["e"+i].onPress=function() {//actions};

See if that works.

[drn33]

Thanks for the suggestion HKRChief. I did try that first and it applied it to the movie clip as a whole, which would not work for what I am trying to do. Here's what I am trying to do:

Inside MC myGallery:
Load i number of movie clips called holder with a dimension of 50px by 50px
position each movie clip 50 pixels apart
load external images into each movie clip representing images e1 through e120
set the alpha of the movie clip to 50%

then onRollOver:
Set alpha to 100%, resetting to 50% onRollOut

onPress
assign a variable eual to the image loaded (e1 - e120)
pop up a box and pass the variable into it, which will then load a larger version of the same image being called from a different folder.

So far I have been able to get the external thumbnails to load without trouble, but once loaded, they do not accept any event commands (onRollOver, onPress, etc)

Any ideas?

[welchyboy]

I am having trouble with the basics of an xml gallery. Is anyone interested in helping? I have a site i am building and i already have a gallery that i like up on the site at
http://www.finstofurstaxidermy.com/taxidermy.html

on the gallery page...

I know this gallery isn't all that fancy and not aligned right but what really matters to me is that the site loads fast at the beginning. I would like this gallery to be set up so whenever the user clicks on the image it loads at that point not at the very beginning of the site. So slow internet users have to wait to see the initial site. Can someone help me. I am very new to flash and extremely new to xml. I have looked at tutorials and all that but i just dont know how to edit this particular one. I don't want a completely different gallery just want this gallery to load the pictures when clicked. Please someone help if you know how. Thanks

[[HKR]Chief]

Hey guys, this applies to both of you. Last night, I created a small fla file that will help guide you both on how to do this.

My movie is broken down into two frames. In the first frame, it loads up the xml data and parses it into a couple arrays. When you click the button, it goes to frame 2. In frame two, it creates a scrollpane and fills the scrollpane with the images as per the filenames within the xml file. it also assigns actions to the holders of the images.

I put a lot of comments within the script so it will help you understand what's going on and what lines are doing what. If you have any further questions, just let me know.

[welchyboy]

Hey Chief I really do appreciate you replying with some help. I get some of that however I dont know how to translate that into mine. Did you see my gallery one the site i referenced? How can I get that so when the image is clicked it will call that one image to the container. I already have the container set up and stuff. My gallery is sooo newbie style lol. I have to align all the pictures in flash different ways because they are each individual .fla files. I just did it any way i could figure out and it works however i want to do it better. Your gallery did help some however i still dont understand how to call one image from the xml when clicked. Can you help me there. I can send you my .fla or code or whatever you need i just need some help. Thanks again for your help

[drn33]

HKR Chief, thank you very much for putting together this file. It was VERY thorough and I was able to follow every line of code. I have modifoed the code to my movie, and in general it works with two exceptions. One, this script is not on the main timeline, but is nested inside 2 MC's. I have set the path using _root. but the loaded image replaced the movie clip one level up, which is the big MC that holds all of the photos. Second, it only loads one image, not the n = 5 that I have set. Here is my modified code. Can you see what I am doing wrong?

_root.photos.mov2.createEmptyMovieClip('holder',3) ;
holder._x = 2;
holder._y = 123.2;
var thumbx = 0;

for (n=0; n<5; n++) {
var thname:String = "e" + n;
_root.photos.mov2.holder.createEmptyMovieClip([thname]);
//photos is the first MC, mov2 is the second. I want the empty movie clip inside mov2. Right now it is replaciing mov2, and only once, not the five times I have set. I tried adding .holder, but it had no effect.
var thisthumb:Object = _root.photos.mov2.holder[thname];
thisthumb.nvalue = n;
thisthumb.onRollOver = function() {this._alpha=100;}
thisthumb.onRollOut = function() {this._alpha=50;}
thisthumb.onRelease = function() {//some action to be determined later}

thisthumb._x = thumbx;
thisthumb._y = thumby;
thisthumb._alpha=50;
thisthumb.createEmptyMovieClip("holder", this.getNextHighestDepth());
var mycontainer:Object = thisthumb.holder;
var th_filename:String = _global.filenamearray[n];
loadMovie("images/thumbnails/" + th_filename + ".jpg", mycontainer);
thumbx = thumbx + 50; }

Also none of the onEvent functions work (onRollOver, onRollOut).

Thanks for your help.

[[HKR]Chief]

drn33,

Ok, I think I might see why it's not working, but we'll see. First, we should change the name of one of the clips because you've got two separate clips called holder. For instance in your first image you attach it would attach to _root.photos.mov2.holder.e0.holder. For simplicity sake, let's change the first one to be "gallerycontainer".

The other problem is that in the for loop, when you create the emptyclip called [thname], you don't have a depth specified, so it might be overwriting each consecutive one. For the depth here, I've found it better to use a static number rather than a "nextHighestDepth". So I'm adding a 1000 to n and setting that as each clip's depth.

And finally, I set the th_filename variable to be the full string, vice just part of it.

With those things in mind, Here's my end result:

_root.photos.mov2.createEmptyMovieClip('gallerycontainer',3) ;
_root.photos.mov2.gallerycontainer._x = 2;
_root.photos.mov2.gallerycontainer._y = 123.2;
var thumbx = 0;

for (n=0; n<5; n++) {
var thname:String = "e" + n; 
_root.photos.mov2.gallerycontainer.createEmptyMovieClip([thname], n+1000); 
var thisthumb:Object = _root.photos.mov2.gallerycontainer[thname]; 
thisthumb.nvalue = n; 
thisthumb.onRollOver = function() {this._alpha=100;}
thisthumb.onRollOut = function() {this._alpha=50;}
thisthumb.onRelease = function() {//some action to be determined later}

thisthumb._x = thumbx; 
thisthumb._y = thumby;
thisthumb._alpha=50;
thisthumb.createEmptyMovieClip("holder", this.getNextHighestDepth());
var mycontainer:Object = thisthumb.holder; 
var th_filename:String = "images/thumbnails/"+_global.filenamearray[n]+".jpg";
loadMovie(th_filename, mycontainer);
thumbx = thumbx + 50; }

So try that and let me know how it works out.

[drn33]

HKRChief, thank you for modifying this code. I got so frustrated that I modified the movie to do something else. However, I may come back to this script later. I jst had to gett off of this and on to something else. Thank you very much for your help.