Simple Magnetic Menu

Here is My first Tutorial - very basic and simple! I used the tutorial by Jamie Keipert (hithere54@hotmail.com) for moving movie clips toward the mouse position in the Advance tutorials section. This will only go over how to build the menu, not how to program actions into the buttons...

To start out, create a new flash movie (.fla) - so select File->New, then pick flash document.
Next, insert a movie clip (Insert->New Symbol) or Ctl+F8(PC) - the name does not matter, neither does the instance name - I just left the movie clip name Symbol 1
Now, at the top of the timeline area, you should see that you have your scene, then next to that your movie clip name, showing that you are editing the movie clip. Draw a rectangle on the stage, then add some text over that rectangle so you will know what button you are looking at in the movie. Next, select all (the rectangle & text) and convert it to a button (Modify->Convert to Symbol) or F8(PC).
Now you have created your button, click on Scene 1 at the top of the timeline to return to the main movie stage. Open your library panel (Window->Library) or Ctl+L(PC), Drag the movie clip you just created to the stage. When I did this, the movie clip was way too big for my movie, so I chose to transform the movie clip down (Window->Design Panel->Transform) or Ctl+T(PC) to fit better on my movie. You may or may not do this, it's up to you. For this tutorial, I would recommend setting the size (in the Info Panel (Window->Design Panel->Info)) to W: 80.0, H: 20.0. Also, in the Info Panel - verify that the X value for your movie clip is between 50 & 150.
So, Currently you have a stage with a movie clip of your button on it. Select the movie clip instance and open the actions panel (Window->Development Panels->Actions) or F9(pc). Make sure your movie clip is selected when opening the actions panel and enter the following code:

onClipEvent (enterFrame) {
        if (_root._ymouse > 50 && _root._ymouse < 150) {
                _root.yChange = Math.round(_root._ymouse-this._y);
                _root.xChange = Math.round(_root._xmouse-this._x);
                _root.yMove = Math.round(_root.yChange/20);
                _root.xMove = Math.round(_root.xChange/20);
                this._y += _root.yMove;
                this._x += _root.xMove;
        }
        else {
                _root.yChange = Math.round(this._y - 60);
                _root.xChange = Math.round(this._x - 50);
                _root.yMove = Math.round(_root.yChange/20);
                _root.xMove = Math.round(_root.xChange/20);
                this._x -= _root.xMove;
                this._y -= _root.yMove;
        }
}

Here's what the code does:

onClipEvent (enterFrame) - This tells the movie to perform the following actions every time it enters the frame
if (_root._ymouse > 50 && _root._ymouse < 150) - This checks to see where the mouse is (top to bottom) on the movie,
if the mouse is in the area then we move the button towards the mouse...
_root.yChange = Math.round(_root._ymouse - this._y); - sets the distance the clip needs to travel vertically
_root.xChange = Math.round(_root._xmouse - this._x); - sets the distance the clip needs to travel horizontally
_root.yMove = Math.round(_root.yChange/20); - this sets whether the mouse needs to move up or down, the /20 section slows down the movement of the movie clip
_root.xMove = Math.round(_root.xChange/20); - this sets whether the mouse needs to move left or right
this._y += _root.yMove; - this moves the movie clip up or down
this._x += _root.xMove; - this moves the movie clip left or right
else - if the mouse is outside our box, the box needs to move back to its set position
These lines will set the distance the movie clip needs to move back to it's starting position - you can change where it will go by adjusting the 60 & 50 to different values - those are the coordinates of the final resting place for the movie clip
_root.yChange = Math.round(this._y - 60);
_root.xChange = Math.round(this._x - 50);
These lines select the direction the movie clip needs to travel to get back to position
_root.yMove = Math.round(_root.yChange/20);
_root.xMove = Math.round(_root.xChange/20);
These lines move the movie clip to it's destination:
this._x -= _root.xMove;
this._y -= _root.yMove;

And there you have it!! Once you've completed this first script, drag another instance of your movie clip button out on the stage, copy & paste the code above again, adjust the values in the if statement of your script to change the area that the movie clip will follow the mouse in, adjust the 60 & 50 values to change the final destination of the movie clip. Do this as many times you need to compensate for the number of buttons you want. If you have any questions feel free to email me and ask!! I hope this is as simple to follow as it was to write!! Have fun and enjoy!!!