Eyes follow the cursor
July 27th, 2009 in Flash | 26 CommentsIn this lesson, let’s play again with trigonometrics. We are going to build an animation where the eyes of Dug, the dog from the Pixar movie UP, follow the mouse cursor. This tutorial is done with actionscript 3 and introduces the use of the Math.atan2 method.
1. Create a new flash file (Actionscript 3.0) and save it as EyesFollow.fla.
2. In our files, we have imported a dog png file with holes in the eyes. Create the same type of file, or follow along with the source files that you can download, or pass through this step as the goal of this tutorial is to make the eyes pointing to the cursor.
3. Create a new layer for the eyes. Let’s create one eye. With the oval tool selected (O), draw a white circle for the white of the eye. Select the circle and convert it to a movie clip with registration point at the center. Double click on it so we can edit it.
4. Create a new layer and draw a brown circle inside the white one. Create a new layer and at the center of the brown circle draw a little black circle. Select the brown and black circle and place them at the right of the white circle. This is very important to make the eye looking to the right.
5. Return to Scene 1. Select the eye, copy and paste it and move the duplicated eye to its position. Our 2 eyes are ready, set their instance name to eye1_mc and eye2_mc.
6. The graphic part is done, now let’s explain the principle of what we want to achieve.
As the eyes must follow the mouse cursor, we want to rotate the eyes at a certain angle that changes each time the mouse moves. If we draw a schema, we’ve got that :
7. We want to determine the value of the angle in order to know at which angle the eye should rotate. Let’s complete the schema by writing down all the datas that we have in our possession.
So what can we do with that? Here is where trigonometrics come, with the atan2 method:
The atan2()method computes and returns the angle of the point y/x in radians, when measured counterclockwise from a circle’s x axis (where 0,0 represents the center of the circle). The return value is between positive pi and negative pi.
IMPORTANT : A common mistake is to enter them as x, y, rather than y, x, as specified. Note that the first parameter to atan2 is always the y coordinate.
(http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Math.html#atan2())
8. It seems that we’ve got all in hand to determine the angle:
angleRadians = Math.atan2(mouseY-eye.y,mouseX-eye.x);
Then we convert this angle into degrees so that we can set it to the rotation property of the eye:
angleDegress = angleRadians * 180 / Math.PI;
9. What remains to be done is to translate this principle that we’ve just explained into actionscript code.
Create a new ‘actions’ layer. With its first frame selected, open the actions panel.
First add a Mouse_Move listener to the stage to detect when the user moves the mouse. When this event will be dispatched, that will call the followCursor function.
stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);
Next write the followCursor function. Make the first eye following the cursor.
function followCursor(event:MouseEvent):void {
var coordy1 : Number = mouseY - eye1_mc.y;
var coordx1 : Number = mouseX - eye1_mc.x;
var angleRadians1 : Number = Math.atan2(coordy1,coordx1);
var angleDegrees1 : Number = angleRadians1 * 180 / Math.PI;
eye1_mc.rotation = angleDegrees1;
}
Do the same process with the other eye ‘eye2_mc.’
10. Here’s the final code, test the movie to see it in action.
stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor);
function followCursor(event:MouseEvent):void {
var coordy1 : Number = mouseY - eye1_mc.y;
var coordx1 : Number = mouseX - eye1_mc.x;
var angleRadians1 : Number = Math.atan2(coordy1,coordx1);
var angleDegrees1 : Number = angleRadians1 * 180 / Math.PI;
eye1_mc.rotation = angleDegrees1;
var coordy2 : Number = mouseY - eye2_mc.y;
var coordx2 : Number = mouseX - eye2_mc.x;
var angleRadians2 : Number = Math.atan2(coordy2,coordx2);
var angleDegrees2 : Number = angleRadians2 * 180 / Math.PI;
eye2_mc.rotation = angleDegrees2;
}
Jul 27th, 2009
Really really cool
thanks
Jul 28th, 2009
awesome ! i just love it…
Thx
Jul 28th, 2009
Thanks so much for this great tutorial.
Jul 29th, 2009
I was searching this code everywhere
finally i’ve found it
Big thx
Jul 30th, 2009
Wow..thank’s buddy..
this kinda code is the one that I love..
Aug 12th, 2009
super
Aug 15th, 2009
make tutorial about how we can create dynamic line between 2 object that we can change their position
tanx
Aug 20th, 2009
really nice …. very… nice eye follow..
nice code
Aug 21st, 2009
[...] View Tutorial // [...]
Aug 23rd, 2009
Is it possible for the eyes to follow the cursor Outside the flash box?
Aug 26th, 2009
awesomeeeeeee!!!!!!!!!!!!!!!! i just LOOOOOOVE it XD thank u so much! =D
Sep 16th, 2009
Awesome tutorial easy to follow thanx!
Oct 13th, 2009
[...] Eyes follow the cursor | RiaCodes (tags: no_tag) [...]
Jan 7th, 2010
Wow you must be good at Maths
Jan 22nd, 2010
thanks… exactly what i was looking for… and than from a math genius
perfect.. how lucky 
Feb 22nd, 2010
awesome example!!!!!!!!!!!!!!!!!!!!!!!!!
Mar 25th, 2010
Brilliant!
This will definetly save me from a math migraine!!!
Thanks!
Apr 18th, 2010
Some many got it wrong. You didn’t. Perfect Simple Coding.
Apr 18th, 2010
So many got it wrong. Absolutely perfect coding.
Thank you so much
Apr 23rd, 2010
when I enter the code and change the eye1_mc to a different name to specify for a project I wish to try out, it gives me the following error
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at stationarydef_fla::MainTimeline/followCursor()
any clarification to what is happening and what could fix the error?
Apr 24th, 2010
Thank you for making this so easy even someone who has only opened flash twice can do this!
May 26th, 2010
Great man thanks
Jun 16th, 2010
I like this a lot! But it doesn’t work on my actual site… :S
Jun 16th, 2010
Perhaps because it’s a flash website made in actionscript 2.0 !
Jul 22nd, 2010
This is awesome and I’ve been trying it with my own character. One question though- I’ve made one eye, duplicated it (both movie clips) and named them according to your tutorial. When I test movie, it doesn’t work. But when I downloaded your file, I noticed that the instance/library name of your eye movie clip isn’t named eye1_mc/eye2_mc and you only have one symbol called “Eye” and it still works despite that the actions specifically refer to eye1_mc/eye2_mc. So where are your eye1_mc/eye2_mcs? I’m unsure of where I went wrong.
Thanks!
Jul 28th, 2010
Awesome this worked, just made the decision to learn AS3 instead of AS2. I didnt exactly follow the tutorial, I instead made a barrett(sniper rifle) follow the mouse. Thanks!