Gridded gallery?

1

Hi guys… so now i’m trying to make a thumbnail gallery layout in a grid and move elastically… basically so that when you rollover one thumbnail, it enlarges and the others move to give it room… i’ve seen this done in some experiments, but searched around and couldn’t find a complete explaination for how to do it… making the grid is easy, but figuring out how to ‘center’ the active movieclip and tell the others to move in a certain direction based on their position in the grid relative to the ‘active’ clip is very hard, i find… you have to avoid wraparound and have to somehow label each MC in a way that can be described through trig I bellieve…

anyway here’s a link to a recent post of mine, at the bottom is what I’ve worked out as far as the motion, only its in a row and not a grid:

http://www.kirupaforum.com/forums/showthread.php?threadid=32928

if anyone knows of a site that might have a tutorial for this let me know, k?
thanks everyone…

2

This is way beyond my simplistic comprehension, but I saw this at bit-101. It has a bunch of duplicated dot movieClips that react to the dots around it in a elastic motion. It’s kind of bass akwards to what you want to do - but it may just give you a really good idea.

Thanks Bit-101 :beam:

3

okay i think i’m onto something… this will be hard to describe without diagrams but here goes… I just want the entire grid to spread out away from the MC being rolled over, so let’s say each clip will move a distance of 10 pixels away from it while it enlarges… I hope someone understands what I’m talking about because I barely do :-\ here’s the method I came up with:

(each clip has an enterframe function that changes its size to ‘tgtsize’, x to ‘tgtx’ and y to ‘tgty’)

find dx & dy, the difference between the this clip and the selected clip
angle = arctan(dx/dy);
hyp = Math.sqrt((dxdx)+(dydy));
newHyp = hyp+10; //calculate new distance from center
newdx = cos(angle)*newHyp;
newdy = sin(angle)*newHyp;

set to new position based on selected clip by adding (newdx,newdy);

should work, but I get wierd results…

below is the actual code, also i’m attaching what I’ve got in the .fla

//========================
on (rollOver) {
for(i=0;i<_root.num;i++) {

	mc=_level0["box"+i];
	
	diffx = this._x - mc._x;
	if(diffx&lt;0) {
		xneg = -1;
	} else {
		xneg = 1;
	}
	
	diffy = this._y - mc._y;
	if(diffy&lt;0) {
		yneg = -1;
	} else {
		yneg = 1;
	}
	if(xneg == 1 && yneg == 1) {
		angle = Math.atan2(diffy,diffx);
	}
	if(xneg == -1 && yneg == 1) {
		angle = (Math.atan2(diffy,diffx))+Math.PI;
	}
	if(xneg == -1 && yneg == -1) {
		angle = (Math.atan2(diffy,diffx))+Math.PI;
	}
	if(xneg == 1 && yneg == -1) {
		angle = (Math.atan2(diffy,diffx))+(Math.PI*2);
	}
	
	hyp = Math.sqrt(Math.pow((mc._x - this._x),2)+Math.pow((mc._x - this._y),2));
	newHyp = hyp+10;
	newx = Math.cos(angle)*newHyp;
	newy = Math.sin(angle)*newHyp;
	mc.tgtx = this._x +(newx);
	mc.tgty = this._y +(newy);
	
	trace(mc);
	n = 
}
	
this.tgtsize = 40;

}

4

Are you sure you want all the other clips to move by 10 pixels on rollOver? Might be hard on your CPU :-\

5

well, it doesn’t seem to drain TOO much power… i mean heh the lights don’t flicker when I run the script… I don’t even know if I will actually use it… I’m more just experimenting and trying to get the math to work so that I can incorporate it in later experiments…