Image gallery with thumbnails

im really not sure what forum this is to go in…hopefully here :slight_smile:
what i want to do is create a type of photo gallery that has thumbnails becoming larger images when clicked on and then returning to thumbnail size when clicked again. what i tried to do was make each of the thumbnails a button and then just have the picture open in a new window but that wasn’t what i wanted. i dont know the terms for any of these effects that i want, so if you can’t understand me or just think visually…here’s an aid…

thanks a bunch

Hmm, I have never done it before, but for a push in the right direction it sounds like it would combine a little of this (not exactly, but somewhat like it)…

http://www.kirupa.com/developer/mx/easing_mouseclick.asp

And some _xscale and _yscale at the same time.

you can think about the movement in an oop fashion like so:

  1. each clip has a starting point (home position)

  2. to move, each clip can find the difference between where it is and where it needs to go, then travel that difference over a few frames.

this same principle is at the heart of the random movement code i posted so long ago (it feels like a long time ago!).

this began as being a little simpler but then expanded…

make a movie of a square about 300 x 200 with the registration point in the centre. export it as “sqr”. put this code in frame 1:


this.smls = 20;
this.smly = 20;
this.bigx = 120;
this.bigy = 200;
this.bigs = 100;
this.steps = 8;

function makeClips(i){
   var m;
   this.topLevel = i;
   while(i--){ 
      m = this.attachMovie("sqr","s"+i,i);
      m._x = m.xx = m.smlx = 80 * i;
      m._y = m.yy = this.smly;
      m._xscale = m._yscale = m.ss = this.smls;
      m.onRelease = clickAction;
      new Color(m).setRGB(Math.random()*0xffffff);
   }
}

MovieClip.prototype.clickAction = function(){
   if(!this._parent.lock){
      this._parent.lock = 1;
      if(this._parent.frontPic == this){
         this._parent.frontPic = null;
         this.toBack();
      }else{
         this.toFront();
      }
   }
}

MovieClip.prototype.toFront = function(){
   if(this._parent.frontPic) this._parent.frontPic.toBack();
   this._parent.frontPic = this;
   this.getDis(this._parent.bigx,this._parent.bigy,this._parent.bigs);
   this.swapDepths(this._parent.topLevel);
   this.onEnterFrame = transform;
}

MovieClip.prototype.toBack = function(){
   this.getDis(this.smlx,this._parent.smly,this._parent.smls);
   this.onEnterFrame = transform;
}

MovieClip.prototype.getDis = function(x,y,s){
   this.xm = (x - this._x)/this._parent.steps;
   this.ym = (y - this._y)/this._parent.steps;
   this.sm = (s - this._xscale)/this._parent.steps;
}

MovieClip.prototype.transform = function(){
   if(this.count++ < this._parent.steps){
      this._x = (this.xx += this.xm);
      this._y = (this.yy += this.ym);
      this._xscale = this._yscale = (this.ss += this.sm);
   }else{
      this.count = 0;
      this._parent.lock = 0;
      this.onEnterFrame = null;
   }
};

makeClips(4);

although it may seem complicated, it’s not much more than the two steps i mentioned above. there are rules in place to prevent a user from bringing two pics to the front simultaneously (the lock variable), to bring a forward pic to the back if another back pic is chosen, and to bring the forward pic to the topmost level.

the movement uses an intermediary variable to counter flash’s practice of rounding positions to the nearest 20th of a pixel (over time that’ll add up and mess things around).

it’s really great what you can do by coding in an oop manner!

to use photos i’d create an array of jpgs, and load them into a holder clip within each movie.


// in the while loop of makeClips()...

      m.createEmptyMovieClip("holder",0);
      m.holder.loadMovie(this.photoArray*);


you also won’t need the seed movie, just use createEmptyMovieClip instead of attachMovie. and you’ll want to nix the colour change too, that’s just to tell them apart in the demo. you could pass photoArray.length as the argument for makeClips.

good luck.

Wow sbeener, as usually you show me up (which isn’t that hard because i’m not that good…lol), but do you think OOP fashion thinking is really a good start for a beginner?

i don’t think that oop is harder, just different.

why start out on the wrong foot? the sooner you start thinking and coding this way, the better and more manageable your code will be.

Good point. I didn’t even know what OOP was until like a month ago…lol… :frowning:

On another foot though, do you think nex is going to be able to adjust that code to work for her needs?

Just curious…

kind of like this:

<a href=http://www.panoramiclocations.com>virtual gallery</a>

Rev:elderly:

Hey rev, use Sbeeners code, it works great.

Just create a movie clip called “sqr” and in the library set the Linkage properties to “Export for Actionscript” then run the movie. It is awesome :slight_smile:

I would, but this one was done 2.5 years ago (Flash 4), and the jpegs are loaded dynamically…

I was just curious if that was what nex was asking. The code on mine is old, outdated, and uses Gen2…

again, just curious. I plan to expand on it eventually, after I get up on MX…

Rev:elderly:

whoa. all i can say is oh my god!! this is going to be an ongoing project here. i should have expected something like this! well, basically to help me…know what im doing, i am going to take parts of the code and kinda put it into english and i would like for yall to tell me if i am thinking correctly. i know it seems strange to translate the code into words but i think it is going to help me. it took me a bit to get the first part of the code, but im going to try and break it down for myself.

does…

function makeClips(i){
var m;
this.topLevel = i;
while(i–){
m = this.attachMovie(“sqr”,“s”+i,i);
m._x = m.xx = m.smlx = 80 * i;
m._y = m.yy = this.smly;
m._xscale = m._yscale = m.ss = this.smls;
m.onRelease = clickAction;
new Color(m).setRGB(Math.random()*0xffffff);
}
}

kinda mean the following in english, if its really off…omg im going to be really really embarassed, but hey, i dunno…lol, i’ll just try it anyways!

to make the clips…
for variable m
the top level=i,
while the top level=i
variable m will attach the movie clip to the stage. the movie clip is called sqr, and its instance name is s, the clip will be displayed on the topmost level which is i
m._x and m._y tell the position of the attached movie clip which is sqr
m._xscale determines how the movie clip will move according to the parent clip
m.onRelease=ClickAction says that on the relase of the click the ClickAction code will be executed

is that kinda sorta what is happening? i have some more questions to ask if i am on the right track, if not…then…whoa, lol

Pretty much yeah.

“s” is the instance name, but notice it is a"s"+i

This means as it loops around to create the necessary amount of clips you will need different instance names to be able to identify each seperate clip.

So if i=1 then your clips would be s1, s2, s3, s4, ect :slight_smile:

You have the idea though :slight_smile:

close …

here’s my version, hopefully will clear things up a little.

function makeClips(i){

here’s a function called makeClips. it takes one argument, the number of clips to make, which is represented by i.

var m;

i’m going to use the variable m later in the script, i don’t want it to exist outside the function so i precede it with var.

this.topLevel = i;

i’m going to swap movies depths to the top level later in the program. the topmost movie will be in the level corresponding to the number of clips i create, so we store that value in this.topLevel for later.

**while(i–){ **

do everything in this loop while the statement in the brackets evaluates as true. in this case, until i equals 0.

m = this.attachMovie(“sqr”,“s”+i,i);

attach “sqr” to this, name it “s”+i (so the first one is called “s3”, the next “s2”, and so on), and put in in level i. only one movie per level allowed. the movie we’ve created will be represented by m so we can easily refer to it in the next lines.

m._x = m.xx = m.smlx = 80 * i;

set the _x position to 80 * i. also set variables m.xx and m.smlx to the same value. m.xx is the intermediary variable used for movement, and m.smlx stores the x position when the clip is small.

m._y = m.yy = this.smly;

same again with y.

m._xscale = m._yscale = m.ss = this.smls;

and again with the scale.

m.onRelease = clickAction;

when the user clicks on this movie, execute this function.

*new Color(m).setRGB(Math.random()0xffffff);

set it to a random color. this just to tell them apart when they’re straight squares. there’s no reason to do this when they’re photos.

That last apart about changing colors didn’t work for me sbeener. All my clips were identical.

bizarre, works for me.

What the…

LOL, It works fine now… I am confused… I checked my saved file… didn’t work, recopied and pasted the code… worked fine.

Eh… oh well. :slight_smile:

here i go again with my english translations, lol, there are some things that i still don’t understand. i hope you can bear with me, im really not experienced in any type of programming. blush

this.smls = 20;’ height/width of all small clips
this.smly = 20; 'where all of the clips will be on the y axis
this.bigx = 120; 'location (on the x axis) of where each of the clips will open up when clicked on
this.bigy = 200; 'location (on the y axis) of where each of the clips will open up when clicked on
this.bigs = 100; 'height/width of all big clips
this.steps = 8; 'something like the amount of time it takes to complete the effect

i think i just had an ephiphany…i seriously didn’t know this when i posted that last thread so you might be thinking {{DUH! you didn’t know that?}}. i know what i just figured out is probably the most obvious thing, but…better late than never, right? lol im THINKING that… variable m is that one square that i made and exported for actionscript. all the things that are listed under the function make clips(i) are a funky way of duplicating that one square and positioning it and scaling i according to the x and y. the code says that the small clips will appear over everything else in the movie.

i know it seems like im repeating myself over and over again, but i really want to know what im doing and i want to be able to know what the code is doing in my own words. however, i still don’t fully understand the following:

m._x = m.xx = m.smlx = 80 * i;
m._y = m.yy = this.smly;
m._xscale = m._yscale = m.ss = this.smls;

what is m.xx? and m.yy? why do you say that the the m._x position is the same thing as the m.xx position? and the same for the y?

i feel learning disabled or something. :frowning: for the next block of code…

MovieClip.prototype.clickAction = function(){
if(!this._parent.lock){
this._parent.lock = 1;
if(this._parent.frontPic == this){
this._parent.frontPic = null;
this.toBack();
}else{
this.toFront();
}
}

i tried, i really really tried.i was reading the actionscript dictionary and it doesnt make a lot of sense right now… i don’t even know where to start…what is the parent? :frowning:

I better let sbeener explain it, who better to then the person who wrote it eh? Plus he could explain it way better than I could any day.

Hey I enjoyed those posts there is also a component for this at www.flashcomponents.net. If you wanna take the easy route. But to learn is often best.

nex - you’re on the right track! most of that’s right on the money.

one thing … smls and bigs represent the scale, not the width and height, small but important difference.

m represents the clip which you attach each time the while loop is itererated. it’s just an easy way to refer to it. i could go:


this.attachMovie("sqr","s"+i,i);
this["s"+i]._x = this["s"+i].xx = this["s"+i].smlx = 80 * i;
...etc

but that looks like hell, is a lot more typing, and all that evaluation is hard on the processor. much better to assign the results of attachMovie to a variable, then use that to refer to the clip.

m.xx is used to contain where the clip would actually be if the position wasn’t rounded to the nearest 20th of a pixel.

for instance, say this code was looping over and over:


this._x += 2.326672;

the movie will move, rounding the result each time. here’s a comparison to show the difference:


with rounding	without
0		0
2.35		2.326672
4.7		4.653344
7.05		6.980016
9.4		9.306688
11.75		11.63336
14.1		13.960032
16.45		16.286704

see how they get further and further apart? the solution is to add to an in between variable (which doesn’t round). you increment that variable, preserving the mathmatical integrity, and then make the _x equal that variable. that way the movie is always within .05 of where you want it to be. which, in flash, is as close as you can get.

xx is the holder variable, as is yy, as is ss. thus, they need to be initilised at the movie’s _x (or _y, or _xscale respectivly) position.

hmmm. did that make it clearer?

this._parent means: the movie that’s above me in the hierarchy. say i make a movie called ‘bigdaddy’ in _root, then make a movie called ‘child’ in ‘bigdaddy’. this._parent from ‘child’ refers to ‘bigdaddy’, this._parent from ‘bigdaddy’ refers to _root. it’s the actionscript equivilant to ‘…/’ for directory structures.

here’s a blow by blow of the clickaction method:

MovieClip.prototype.clickAction = function(){

i’m defining a function which will be method of the MovieClip object (just like play(), or gotoAndStop()). that means that all this code will be executed relative to the clip it’s called from. since we assign this function to an onRelease handler, that means it will be run relative to whatever movie you click on.

if(!this._parent.lock){

i store a variable name lock in the parent movie. it it’s true, it means that there’s already a movie in motion and we should wait for it to stop. so only proceed if it’s false.

this._parent.lock = 1;

ok, lock must have been false so we can go ahead. set lock to true to prevent this function from working if it’s called again in the meantime.

if(this._parent.frontPic == this){

i store the clip that is currently in front (big) in this._parent.frontPic. if that equals me (‘this’) it means we’re in front and should do the toBack action.

this._parent.frontPic = null;

if we’re here, it means that we were in front. since we won’t be shortly and nothing is coming up to the front, we’ll set the frontPic variable to null. that way we’ll know that there’s nothing up front next time the function is called.

**this.toBack();[/]

initiate the back actions.

}else{

else, if we’re not up front then we’re a little pic so we’ll need to call the toFront actions.

this.toFront();

initiate the to front actions

}
}

end if, end function.

okay, about the :
m._x = m.xx = m.smlx = 80 * i;
m._y = m.yy = this.smly;
m._xscale = m._yscale = m.ss = this.smls;

i understand your explanation of why you use the in between variable. yet, i don’t understand why at the same time.
why doesn’t the in between variable round? is that just how it works or something? or is there a logical reason that i just don’t see? as for the rest of the explanation…phew…flew right over my head. i notice that when i take out the intermediate variables the squares act one way the first time you click on them, and act a different way the second time. and i am pretty sure thats why you need them in there…to keep things consistent. however, what did you mean when you said that the intermediate variables need to be initialized at the movie’s _x position?

moving along…seriously, sbeener i am so thankful that you are taking the time to go over this with me bit by bit

MovieClip.prototype.clickAction = function(){
if(!this._parent.lock){
this._parent.lock = 1;
if(this._parent.frontPic == this){
this._parent.frontPic = null;
this.toBack();
}else{
this.toFront();
}
}

some general questions…for this movieclip, is this._parent referring to the variable m?
is .lock something that flash already knows? how does flash know what you’re talking about?

if(!this._parent.lock){
that kinda reminds me of this crazy NOT thing we did with boolean expressions in my visual basic class today. is it like saying
this._parent.lock=false
if this._parent lock=true then continue to the next line of code
right? or did i say it backwards? lol, i hope not cos if so then im in bad shape for my vb class cos i thought i understood today

this._parent.lock = 1;
i seriously have no idea what this does. to figure out the other things i just change the values to see how the movie changes. with this, i dont know…i changed the number to -25 and nothing changed. i changed it to 3650 and nothing changed. i changed it to 34.56 and nothing changed… whooa…wait! omg…a lightbulb just went on in my head. now, i know what this does…well sorta. im confused now. nothing changes unless i make it=0. when its 0 you can stop the clips in mid-motion and you have have all the clips overlapping each other. did you just pick 1 because its not 0? lol

if(this._parent.frontPic == this){
i have a feeling that this is an esstential portion of code that i have no understanding of.

this._parent.frontPic = null;
the same with this…i just dont get it

this.toBack();
if all that above was true then you will do the back actions

}else{
if all the above wasn’t true then you must be in the back

this.toFront();
and will therefore do the front actions
}
}

so…putting all my thoughts together,
this function determines whether the clip is in the front(big) or back(small) and after that it determines which function(to back or to front) should be exectued based on whether it is in the front or the back. however, i dont understand that lock stuff…please tell me that im making some kind of progress, lol. your encouragement helps considering people i know told me its a hopeless cause.


oh yea, rev, i checked your gallery and thats pretty cute. its virtually the same thing that i want, except i want all the changes to happen as a result of a click.

thx beta, lol, at least you offered