All About Coding - Programming and Software Tutorials

How To Have An Object Follow Your Mouse in AS3

Introduction:

In this tutorial you will learn how to make any object follow your mouse around the screen. We use percentages to move to have the object slow down as it nears the mouse. As always you can download the source files here. This code is specific to Action Script 3.

Let's Get Started:

1. Open Flash CS3 and you should be presented with a startup screen that lists several items.
from the Create New section select Flash File (Action Script 3.0). If the startup screen does not display you can select File -> New then select Flash File (Action Script 3.0) from the dialog window and click ok.

2. You will now be at the main work area. The image below should be similar to what you see.
You can view/change/add which windows are visible to your desire.

3. At the bottom of the screen you have your document properties. Most of the time you will want to change the document resolution. For this tutorial 500 x 300 should do just fine. Also you can change your background color here to something a little more appealing like a nice gray.

4. Go ahead and make a new layer and name one ball and the other actions.
If you cant remember how to do this just look back at the first tutorial.

5. On you message layer lets make a ball that will follow our mouse. To create a circle click and hold on the rectangle tool then select oval tool. Now you can draw a oval on the work area. ***Note*** to make a perfect circle hold the shift key as you are drawing.

6. Now that we have drawn our ball lets turn it into a movie clip by selecting it and hitting F8. Name it ball and select movie clip then hit ok.

7. Now like before for us to be able to access properties of the ball in our action script we need to give it a unique instance name. In the properties area name it myBall.

8. Ok all we lack now is to add the Action Script that will make our ball follow the mouse. In your actions layer add the following code. If you can't remember how to do this take a look back at the previous tutorial.

this.addEventListener(Event.ENTER_FRAME, MoveBall);
function MoveBall(evt:Event):void
{
  var xMouse = root.stage.mouseX;
  var yMouse = root.stage.mouseY;
  if(Math.abs(xMouse - myBall.x) < 1)
  {
    //if mouse is within 1px move to mouse position
    myBall.x = xMouse;
    myBall.y = yMouse;
  }
  else
  {
    //move ball 1/6 of the way to mouse each frame
    myBall.x -= (myBall.x-xMouse) / 6;
    myBall.y -= (myBall.y-yMouse) / 6;
  }
}

9. Basically what we are doing here is telling Flash to every frame take a look at the mouse position and at the position of the ball and move it 1/6 of the way to the mouse. Make sure that you type in the names exactly as you named them as the code is case sensitive.

Conclusion:

Your Done! This is a great effect you can add to your banners and animations. You can adapt this technique to do more than balls. For one example you could combine it with alpha blending to have a tool tip that follows the mouse and darkens as it gets closer.