Nathan Daniel

A web developer specializing in web services and integration.  Along with HTML & PHP development, Nathan also develops RIAs utilizing Flex 2.0 and Flash!
Online portfolio and website can be seen at http://flex2.bsi-scs.com. 

View all articles by Nathan Daniel
  A few years back, I created the first Simple Magnetic Menu tutorial.  It goes through how to make a button come to the users mouse based on the mouse being in a certain area of the stage/movie.  However, there are major limitations with the idea.  The biggest of these problems is the buttons only move when the mouse is in a "square" area which can be determined by flash.  The tutorial limited movement for a mouse position within a rectangle the width of the screen and 100 pixles high.  
  Over time, I've received several questions and comments about the tutorial.  One of the major "wants" people have wanted is to be able to have the button move if the mouse is in an area that is NOT a square or limited by the X & Y coordinate plane.  So comes a revisit to the original tutorial with a code overhaul and the ability to make the button move when the user is in any "trigger area".
  
  To begin this tutorial, create a new Flash Document.  Next, use the rectangle tool and draw a square or rectangle on the stage.  Feel free to design it however you would like - it's your button!  When you're done editing your design, drag your mouse over your button graphics and "convert to symbol" (F8 or right click on the PC).  Make sure you set the registration point to the center of your button (it starts out in the upper left corner).  The button moves it's registration point to the mouse position.  So, once the button gets into place, if it's a corner, the user will still have a hard time clicking your button.
  After you've created the movie clip that is your button, draw some more shapes on the stage.  Random places, anywhere you want.  Once finished with your new drawings, select them all and convert them to a new symbol.  *My suggestion for learning and understanding is to have plenty of "white space" around your graphics.*
  Now, your stage should have 2 movie clips.  One is your button, the other your graphics - from now on refered to as button and graphics respectively.  Select your graphics and bring up the Actionscript editor window (F9 - PC). 
  For this graphic you'll want to add only a few lines of code:

on (rollOver) {  // when the mouse hovers over the graphics
    _root.mouseOnGraphics = true;  // a variable to let flash know the mouse is on the graphics
}
on (rollOut) {  // when the mouse is no longer over the graphics
    _root.mouseOnGraphics = false;
}


  Once you've added the code for your graphics, you'll need to add the code to your button.  Select your button and bring up the Actionscript editor window again.  Add the following code to your button:

onClipEvent(enterFrame)
{
 var mouseX = _root._xmouse;  // x of the mouse position
 var mouseY = _root._ymouse;  // y of the mouse position
 var currX = this._x;  // current button x
 var currY = this._y;  // current button y
 var xChange = 0;  // how much to add/subtract from x coordinate
 var yChange = 0;  // how much to add/subtract from y coordinate
 
 // move toward mouse if mouse is on the graphics
 if (_root.mouseOnGraphics)
 {
 // mouseY - currY determines the total distance between the y points
 // the "/5" says take the distance and divide by 5.  This keeps the button from relocating to the mouse positoin without floating there
// changing the 5 will also affect the speed the button moves.  Try changing it to 20 or to 2 to see what happens!
  yChange = Math.round((mouseY-currY)/5);  // determine the distance to move y
  xChange = Math.round((mouseX-currX)/5);  // determine the distance to move x
  
// since we're moving towards the mouse, always add :D
  this._y += yChange;
  this._x += xChange;
 }
 // move away from mouse
 else
 {
// the following will help keep the button from bouncing around the point you want it to be at forever.  It says if you're within 2 pixels then just go to the position.
  if (currY < 33)
  {
   yChange = currY - 31;
  }
  if (currX < 70)
  {
   xChange = currX - 68;
  }
  
// this code is the same as for moving towards the mouse however,
// move from it's current position to the desired location (68,31)
  yChange = Math.round((currY-31)/5);
  xChange = Math.round((currX-68)/5);
  // as we are moving away - subtract the difference!
  this._y -= yChange;
  this._x -= xChange;
 }
}


Now, run your move (Control->Test Movie).  As you can see, whenever you mouse over your graphics the button moves to the mouse.  However, it only moves towards your mouse position if you're on one of the actual graphics of your graphics movie clip!!!  In a movie clip, the white space of the clip is ignored and not counted as part of the clip.  So, even when you select the graphics clip on the stage, it displays as a square object, but only the graphical parts of the clip will trigger events!  Now, using this technique, you can create complex movie clips with where only certain areas of the clip will attract the mouse!  No more limitations on the trigger area, you now have the freedom to create a trigger area with any dimensions, unlimited edges, and very little math!


You can see this in action at: http://www.theswishdelivers.com
I hope you find this useful - feel free to drop me an email with any questions or comments!