Have you ever seen those paintings where the eyes are always looking at you no matter where you stand. Well, sorry, this tutorial won't teach you anything about painting. This simple Flash tutorial goes over how to make a pair of eyes follow the mouse using Actionscript.
Jump straight to the source code if you'd like to skip the details.
The eye
First you need to create three Sprites for each eye. The pupil, the eye, and the mask for the pupil. The mask for the pupil needs to be identical in shape to the part of the eye where the pupil shows. In my case, the eye and the mask for the eye are identical circles. To make things easier on yourself, the registration point for both the pupil and the eye should be located at the center of each.
For this tutorial, I'll be doing everything in basic Actionscript. However, you are free to use images or MovieClips for your eyes. In fact I'd encourage it, as that will look way better than my goofy circle eyes.
I'm not going to bother pasting my eyeball creation and placement Actionscript here, since it isn't important to the tutorial. If you really want to see it, just download the source code at the bottom of the article.
So now that you have your eye, pupil and mask, place them on the screen wherever you want. Make sure you mask the pupils with the mask object. Otherwise you'll have some weird floating pupil effect. Again, I'm doing all of this in the Actionscript, but you are free to manually place everything on the stage. That's actually the easier way to do it, since you can see exactly where they are going.
It follows me everywhere I go
Ok, enough talk about making and placing eyeballs on the stage. The real reason you are reading this is to see how to get your eyes to follow the mouse. As I said before, the code is really simple.
First calculate the offset between the mouse position and your eye. In this case I have two eyes, so I created the _focalPoint object to compare against. My _focalPoint is located right between the two eyes. This allows both eyes to move together in uniform instead of getting cross-eyed in the middle. The following code goes in your EnterFrame handler function.
// calculate mouse offset var distx:Number = mouseX - _focalPoint.x; var disty:Number = mouseY - _focalPoint.y;
Finally we reposition the pupils based on this offset. You will notice that we are scaling down distx and disty. This is so the eyes don't move so far that they are no longer visible. I am using a factor of 25. You may need to change this depending on how wide or thin your stage is and where you position the eyes. Experiment a little to get it just right.
// set the eyes according to the mouse offset _pupil1.x = _eye1.x + (distx / 25); _pupil1.y = _eye1.y + (disty / 25); _pupil2.x = _eye2.x + (distx / 25); _pupil2.y = _eye2.y + (disty / 25);
Because we set the registration point of both the eye and the pupil Sprites, we can use the eye .x and .y properties to place the pupil. This makes the code a lot cleaner as you can see.
And there you go. Nice rolling eyes going everywhere your mouse goes. Like I said, it's a very easy effect to make once you know how to do it. No complex trig. No fancy classes. Just plain simple Actionscript.
Eye Following Downloads
If you have any questions, please let me know either in the comments below or through the contact form. I'd love to see what you guys come up with this. So go set your mouse following eyeballs free. Enjoy!