I'm sure everyone has seen this effect done at some point in time. Basically just a little bit of math going a long way.
Download Flash File
Prepare Symbol
You need to set up your symbol. The grid itself is just one box with many instances arranged accordingly, so you are going to have to prepare the first box. Make a new symbol as a movie clip (Insert > New Symbol) called "square". Once you are inside the symbol, you need to create two layers.
In the first layer, create three keyframes in frames 1, 2 and 3. Also, name this layer "Script". In the layer below, insert a frame in frame 3. Name this layer "Shape".
Create Shape
In the example mentioned above, I used a simple box, you are free to use any shape you wish in order to obtain the effect desired. For now, just make a rectangle. Once you have drawn the shape you want to use, select it, and convert to a movieclip (F8). Make sure the shape you are going to use is in the layer with one full frame (the layer with keyframes is going to be used for scripting).
Frame One
You need to define a few variables before you start scripting. Generally if you were doing this from scratch, this would be your last step, but in this case since you already know what you need, you can jump ahead.
Place this script in the FIRST keyframe in your script layer.
xPos = _x;
yPos = _y;
diam = 2000;
The xPos and yPos variables are used to assign values to the shape according to mouse position, which will be done in the actual script. Also, take note of the "diam" variable, as this controls the diameter of your 'effected' area. Raising or lowering this value changes the mass of pixels that "push away" on your shape. Once the effect is finished you will have a better idea of what I am describing.
Frame Two
Now that we have our variables defined, it's time to perform the calculations necessary to acheive our effect. Place this script in the 2nd frame of your script layer.
x0 = _x;
y0 = _y;
x = _root._xmouse;
y = _root._ymouse;
a = x-x0;
b = y-y0;
r = Math.sqrt(a*a+b*b);
box_dia_x = this._x-a/r*diam/r;
box_dia_y = this._y-b/r*diam/r;
box_div_x = (xPos-x0)/2;
box_div_y = (yPos-y0)/2;
this._x = box_dia_x+box_div_x;
this._y = box_dia_y+box_div_y;
I'm not going to go into a great deal of detail here, as it is basic math, and can be fairly understood with a general background in algebra :). To sum things up, the mouse position is used in determining the motion and position that the shape will take, while the "dia" value is used to determine how large the affected area will be. The last two lines put it all into action.
Frame Three
Since this is a symbol, the effect must loop or it will only perform the script once, and change none of the variables, and the shape will just drift away. So you need to keep things rolling continuously. To do this, just put this in the 3rd frame of your scripted layer.
gotoAndPlay(2);
Preparing the Grid
This is the easiest step, all you need to do, is get back to the root of your stage, and insert the "square" symbol from your library onto the stage. Then proceed to copy and paste instances until you create a grid, where the effect will better be displayed.
That's it! You're done, now hit ctrl+enter and test out your script. Play around with the variables and positions of the shapes and you can get some interesting results.
