Flex | Flash | Air | AS3
Eyes follow the cursor
July 27th, 2009 in FlashIn 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!!!!!!!!!!!!!!!!!!!!!!!!!