Logic problem: trying to adjust x and y of clips based on mouse location

1

Hey All,

I am trying to alter some code that I borrowed from a dock-menu posted here on Kirupa.

I dynamically laid out movie clips in rows and columns to form a larger rectangular panel of clips.

I’m trying to enlarge the clips on mouse over, and actually I figured out this part of it…but as the clips enlarge, I want them to move away from each other so that the one with the mouse over is clearly visible, in other words, the x and y position of all the other clips are suppose to adjust. This is where I’m stuck with the logic!

I was sort of trying to get the same effect of a dock menu and also copy the effect of this site (go to options and select grid) - if any one can explain the math and logic of this, wow!

http://www.oneover.com/

Any suggestions? Thanks so much!

Here’s my attempt:

//*********************************************************

centerx = Stage.width/2;
centery = Stage.height/2;
piborder = 8;
panelitems = [];

//*********************************************************
//make panel of movie clips
total_panels = 192;
panel_columns = 12;
panel_rows = 16;
panel_holder = createEmptyMovieClip(“panel_holder”, 2);
panel_holder._x = 170;
panel_holder._y = 120;
makePanel();

function makePanel() {
bw=34; //left-right spacing of buttons
bh=34; // top-bottom spacing for buttons
j = 16 // number of buttons per row = how many columns

	for (var i = 0; i<total_panels; i++) {
		var panel = panel_holder.attachMovie("panelitem","panel_item"+i, 2000+i);
		panel.id = i;
		// applies dropshadow filter to object panel
		panel.filters = [myDropShadowFilter];
		//place dynaimcally created movieclips in rows/columns
		panel._x =  0 + bw * (i % j);
		panel._y =  0 + bh * Math.floor(i / j);
		panelitems.push(panel);
	}

};

//*********************************************************
// mouse over stuff
panel_holder.onEnterFrame = function () {
var panel_height = 0;
var panel_width = 0;
for (var i = 0; i<total_panels; i++) {
var xxm = panelitems*._xmouse;
var yym = panelitems*._ymouse;
var xm = Math.sqrt(xxmxxm+yymyym);
if (xm<50) {
_global.mouse_over = i;
panelitems*._xscale = panelitems*._yscale += ((200-xm)-panelitems*._yscale)/3;
}
else {
panelitems*._xscale = panelitems*._yscale += (100-panelitems*._yscale)/3;
}
panel_height += panelitems*._height;
panel_width += panelitems*._width;
}

/* THIS IS WHERE I'M STUCK, I CAN'T FIGURE OUT THE LOGIC HERE TO MAKE THE MOVIECLIPS IN THE PANEL HOLDER ADJUST THEIR X AND Y BASED THE POSITION OF THE MOUSE - I WAS TRYING THIS CODE WHICH I BORROWED FROM A DOCK MENU, BUT AS YOU CAN SEE, THE CURRENT LOGIC OF THIS ALIGNS THE CLIPS IN A DIAGONAL:

panel_height += (total_panels-1)*piborder;
var p_ypos = Math.round(centery-panel_height/2);
for (var i = 0; i&lt;total_panels; i++) {
if (i&gt;0) { p_ypos += panelitems[i-1]._height/2 };
p_ypos += piborder+panelitems*._height/2;
panelitems*._y = p_ypos;
}
panel_width += (total_panels-1)*piborder;
var p_xpos = Math.round(centerx-panel_width/2);
for (var i = 0; i&lt;total_panels; i++) {
if (i&gt;0) { p_xpos += panelitems[i-1]._width/2 };
p_xpos += piborder+panelitems*._width/2;
panelitems*._x = p_xpos;
}
*/

};