Follow object with mouse in Actionscript 3

In this tutorial you will learn how to follow an object with the mouse in Actionscript 3.0. This means that when you move the mouse the object will follow. I have created two different variations in this tutorial for the ‘follow object’. The first variation follows the mouse’s x and y position which will means the object moves when the mouse moves. The second variation follows the mouse’s position with a slight delay, so when you move the mouse the object will follow with a small pause.


Follow object with mouse in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select Oval tool (O) and create a simply circle shape on the stage like below. You can alternatively create a different shape or import an image if you wish.





Step 2

Convert your circle shape into a symbol by selecting F8. Give your symbol appropriate name, check movie clip, choose the centre registration point and click ok.

Select your movie clip and give it the instance name “ball_mc”.




Step 3 (first variation)

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
stage.addEventListener(MouseEvent.MOUSE_MOVE,followBall);

//2.
function followBall(event:MouseEvent):void {
ball_mc.x=mouseX;
ball_mc.y=mouseY;
}

Code:
1. This adds an event listener to the stage with the mouse move event and a followBall parameter.
2. This is the followBall function which set the ball’s x and y position to the mouse’s x and y position.


You should get the following:




Step 3 (Second variation)

This is an alternative step to the one above. Be sure to remove all the code from the above step before attempting this step.

//1.
stage.addEventListener(Event.ENTER_FRAME,followBall);

//2.
function followBall(event:Event):void {
var dx:int = ball_mc.x - mouseX;
var dy:int = ball_mc.y - mouseY;
ball_mc.x -= dx / 5;
ball_mc.y -= dy /5;
}


Code:

1. This adds an event listener to the stage with the enter frame event and the followBall parameter. The enter frame event repeatedly executes the followBall function at runtime.
2. This creates two new variables called ‘dx’ and ‘dy’ which subtracts the ball’s x and y position from the mouse’s x and y position. This allows us to work out the distance of the ball from the mouse.

You should get the following: