Flash: Eyes That Follow the Mouse

Today we are going to be drawing an eye (facing left), converting it to a movie clip, dragging an instance to the desktop, naming your instances, adding some ActionScript, and testing it.  The result?  Eyes that follow the mouse pointer, obviously.  :)

• Create a Flash ActionScript 2.0 file.
• Create three layers (Actions, Eyes, and Content).
• Add the following ActionScript to the Frame 1 of the Actions layer:

a = eye1._y-_ymouse;

b = eye1._x-_xmouse;

angleA = Math.atan2(a, b);

degrees = angleA/(Math.PI/180);

setProperty("eye1", _rotation, degrees);

a2 = eye2._y-_ymouse;

b2 = eye2._x-_xmouse;

angleA2 = Math.atan2(a2, b2);

degrees2 = angleA2/(Math.PI/180);

setProperty("eye2", _rotation, degrees2);

• Click on Frame 1 of the "Eyes" layer
• Draw a large circle (usually a black line and a white fill) [holding shift while dragging the circle helps it stay circular]
• Draw a smaller circle on the inside-left of the larger circle (about 9:00) which will serve as the pupil
• Select the entire eye [you can drag around the eyeball or click CTRL+A]
• Go to MODIFY > CONVERT TO SYMBOL
• Select "Movie clip" and call the clip something like "eyeball".
• Drag the eyeball over so that the "+" is directly in the center
• Go back to "Scene 1"
• Press "Delete" to remove the eyeball from the Stage
• Drag two "instances" of the "eyeball" on to the stage [a left and right eye]
• Click on the left eye and give it the "instance name" of "eye1"
• Click on the right eye and give it the "instance name" of "eye2"
•  Test your movie (CTRL+ENTER) -- the eyes should "look at" your mouse pointer.
• Add a background picture and resize the eyes accordingly to fit.
• Optionally you can add a custom mouse pointer to give the eyes something interesting to look at.

Below is a Video Tutorial which doesn't follow our project exactly, but should help explain the process: