Sunday, 9 August 2009

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:

21 comments:

Kiran 23 September 2009 22:23  

Thank you for keeping that kind of tutorials for viewing everybody it helps me to learn new thing which is very imp to me!

Meghan Manders 14 November 2009 14:17  

Thanks for this tutorial! It's just what I was looking for! Do you have a tutorial where you can constrain the movement within a specific area?

iliketo 14 November 2009 14:21  

@Meghan Manders

Takes a look at the limit movement on the stage tutorial. You will need to convert it to AS3.

Meghan Manders 14 November 2009 14:39  

@iliketo

The problem is I'm not familiar with actionscript 1 or 2 and don't know how to convert it.

iliketo 14 November 2009 16:33  

@Meghan Manders

I assume you have some knowlegdge of Actionscript 3. It is not difficult to learn, the code is very basic.

NIGHT CAT 28 November 2009 19:17  

hi, I'm is beginner at flash, and I'm search a tutorial "how to make an object following the cursor" and this is nice, but I'm just have flash 8 and AS2.Can you show this tutorial but using AS2?
I want the first variation one :D

iliketo 29 November 2009 04:12  

@Night cat

Here is the code for AS2.

onEnterFrame = function () {
ball_mc._x = _xmouse;
ball_mc._y = _ymouse;
}

NIGHT CAT 3 December 2009 03:13  

@Iliketo

sorry late reply! I'm sick now!
Thank you so mush to give me the AS2

NIGHT CAT 4 December 2009 04:05  

@iliketo

I'm sorry I'm ask you again ^^;
my friend told me if he has a little problem with the following object tutorial AS2 code, he said, if he want to make the object following the cursor but just one place or certain place. he said it's just for AS3. can you help me and my friend? sorry, me and my friend always wanted to know about flash, and try the new or more difficult flash

iliketo 4 December 2009 08:19  

@Night cat

What do you mean by "just one place or certain place".

bibek 6 April 2010 01:16  

its very useful tutorials but i have a question. How to hide ball when mouse is outside the stage?

iliketo 6 April 2010 10:28  

@Bibek

There is a Mouse.hide() method you can use.

Rosh J Kalathil 4 October 2010 17:52  

Thank you very much, veryone

Geraldo Netto 16 December 2010 10:28  

Thanks Man!

It worked perfectly!!!

Uttam 14 February 2011 09:44  

Hi,
Do we need to remove the onEnterFrame event handler at the bottom of the script? How does it affect the swf if we do not remove it and navigate to other frames?
Thank you

Mihkel 30 April 2011 07:05  

Thank you very much. Works absolutely perfectly. Finaly found a simpel and working code with a good example. This is the first example that does what I need. I Searched for this for sometime.

Jose 13 June 2011 10:08  

Thanks for this!!!

I was having problems with the code and this was really simple to do!

Thanks to your tips I managed to finish my Final Major Project!

THANKS AGAIN!!!!

Tony GM de Brockane 3 July 2011 05:41  

Hi,

how to limit the movement of the clip so that it doesnt leave the frame?

iliketo 30 July 2011 06:49  

@Tony

You can use the code from the Limit stage boundaries in AS3 tutorial to the prevent the movie clip from leaving the stage edges. You will need to put the function call inside an 'enter frame' event

FlyingMamoth 16 April 2012 05:03  

Thanks for the tutorial....but can u plz tell me if i want to follow that ball in side a box not entire stage ....wat alteration i have to make ???? Expecting an early response ...thank you
jojan george

iliketo 16 April 2012 12:58  

@FlyingMamoth

The easiest way would be to add the code inside the movie clip, or like this

stage.addEventListener(MouseEvent.MOUSE_MOVE,followBall);

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

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP