» Home » Tutorials » Flash » Beginner » Simple Magnetic Menu - A Revisit and Upgrade

Simple Magnetic Menu - A Revisit and Upgrade

By Nathan Daniel | Published 01/18/2007 | Beginner | Rating:

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

Simple Magnetic Menu - A Revisit and Upgrade

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!

How would you rate the quality of this article?

	1	2	3	4	5
Poor						Excellent

Verification:

Enter the security code shown below:

Add comment

Spread The Word / Bookmark this content

Clesto Digg it! Reddit Furl del.icio.us Spurl Yahoo!

Simple Magnetic Menu

Attachments

MagneticMenu.fla

Comments

Comment #1 (Posted by Jenny Lynn - jtlynnmyop at interconncet.net)
Rating
Is this written for Flash 8 only, I get an unexpected file format error?
Comment #2 (Posted by James - oh_rock_oh at hotmail.com)
Rating
Great tutorial, but I just keep getting this error and I have no idea why. Please help?

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 24: 'else' encountered without matching 'if'
else

Total ActionScript Errors: 1 Reported Errors: 1
Comment #3 (Posted by Ketav - ketavsharma at gmail.com)
Rating
I noted 2 things about this program or animation

[quote]
if (currY < 33)
{
yChange = currY - 31;
}
if (currX < 70)
{
xChange = currX - 68;
}
[/quote]
i think this part is useless no use

and

second thing
yChange = Math.round((mouseY-currY)/5
why we divided by an integer greater than 1 as the distance we have to move is mouseY-currY
actually in flash the mouse event is generated according to fps
1 fps =1 mouse event per second
12 fps= 12 mouse event per second

so if we dont divide by 5 or any integer >1
the button will go to the graphic in 1 frame only and there will be no smooth transition
if we divide it by any no say 5 the button will travel one fifth of distance in one frame in next frame 1/5th of remaining distance and we will get a cool magnetobutano!!!
Comment #4 (Posted by Anil - anilkumarnd at gmail.com)
Rating
AS3 code
********

var mouseOnGraphics:Boolean;
menu_mc.mouseEnabled = false;
graphics_mc.addEventListener(MouseEvent.MOUSE_OVER,rollOver_fn);
graphics_mc.addEventListener(MouseEvent.MOUSE_OUT,rollOut_fn);
function rollOver_fn(event:MouseEvent):void {
mouseOnGraphics= true;
}
function rollOut_fn(event:MouseEvent):void {
mouseOnGraphics = false;
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
var Var_mouseX = mouseX;// x of the mouse position
var Var_mouseY = mouseY;// y of the mouse position
var currX = menu_mc.x;// current button x
var currY = menu_mc.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 (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((Var_mouseY-currY)/5);// determine the distance to move y
xChange = Math.round((Var_mouseX-currX)/5);// determine the distance to move x

// since we're moving towards the mouse, always add :D
menu_mc.y += yChange;
menu_mc.x += xChange;
} 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!
menu_mc.y -= yChange;
menu_mc.x -= xChange;
}
}

Submit Comment


Enter your email address: Subscribe Unsubscribe	© 2000-2007 actionscript.org! All Rights Reserved. Read our Privacy Statement and Terms of Use... Our dedicated server is hosted and managed by WebScorpion Webhosting.