Tuesday, June 29, 2010

AS3 Beginner Tutorial - part 3: Mouse followers

Let's create a simple mouse follower.

1. Create a movie clip on frame 1 with an instance name of "Cursor" without quotes.
2. Open the actions tab for frame 1.
3. Use this script:

stage.addEventListener(Event.ENTER_FRAME, repeat); 
/*creates a listener that repeats.  note: repeat here 
is name of the function, that is called by listener*/
function repeat (myevent:Event):void { 
Cursor.x = stage.mouseX
Cursor.y = stage.mouseY
} 

4. Test it, you should see that your movieclip is your cursor. Let's give it smoother movement (change your code to this):

stage.addEventListener(Event.ENTER_FRAME, repeat); 
/*creates a listener that repeats.  note: repeat here
is name of the function, that is called by listener*/
function repeat (myevent:Event):void { 
var xmove = (stage.mouseX - Cursor.x)/5
       Cursor.x += xmove
var ymove = (stage.mouseY - Cursor.y)/5
       Cursor.y += ymove
} 

This was a beginner tutorial for those who want to learn Actionscript 3. Many people, when looking at AS3, think it is too complicated to them and decide to stay with AS2. Don't be one of them - AS2 is old now, and if you want to be a real programmer, if you want your flash to be good quality, then you have to use the latest programming language, which is AS3 at the moment.

Related:

AS3 Beginner Tutorial - part 1
AS3 Beginner Tutorial - part 2

6 comments:

Anonymous said...

Really thanks...it´s simple, but great introduction to AS3 ... in real, i was one of them ... who want to stay with AS3, because i really don´t understand a lot of changes in AS3... but i will try...:)

HappyChicken said...
This comment has been removed by the author.
Anonymous said...

THIS DOESN'T TEACH ANYTHING!!

IT JUST GIVES YOU THE CODE AND DOESN'T TEACH YOU!!!

You have to teach someone how to fish not give them fish!

Kirill Poletaev said...

I agree that giving just source code doesn't teach them a thing.

However, in this tutorial, it just shows you how to use basic programming logic in your code and how to actually implement this code using Flash.

If you have any specific questions, please let me know and I will try to answer them.

sonu said...

i didn't understand the mathematics of repeat function.

how does my cursor follow the default cursor?

as in case my cursor.x value=50 and default cursor.x = 200 the calculation comes in nagative ie. -30

and again if the same has opposite value the calculation is 30.

my question is why this formula be opposite as

instead of var xmove = (stage.mouseX - Cursor.x)/5
why is this not working??
var xmove = (Cursor.x - stage.mouseX)/5

do you have words?

Kirill Poletaev said...

Sure.

(stage.mouseX - Cursor.x) - this is the distance between your mouse and the cursor MC.

If the mouse is on the right, the value will be positive (cursor needs to move right, aka increase X by a positive number).

If the mouse is on the left, the value will be negative (cursor needs to move left, aka increment X by a negative number).

We simply take the distance and divide it by a smooth factor number to get the slowing down effect.

Note that xmove (or ymove) is not set as the value of the coordinates of the cursor MC. They are added to the coordinates that already exist.

You might also have misunderstood because Cursor is the name of the movieclip, not the actual position of mouse cursor on stage (which can be read using stage.mouseX and stage.mouseY).

Post a Comment