Flash Tutorial: Eyes Following the Mouse

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!

This entry was posted in actionscript, Flash, Flex, Tutorials and tagged , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Chan

    Hi, Can you give the sample of eye following the mouse movements.

    • http://orangeSPLoTCH.com mattc

      Were you unable to download the actionscript file at the end of the post? Or are you referring to something else?

      • http://www.facebook.com/henninghh990 Henning Høgmoen Haugen

        Think he meant the .fla file, so its easier to see which symbols have been given which instance name.

        • http://orangesplotch.com Matt Carpenter

          Thanks Henning. I can see how they might be confused. The whole .swf is generated from the Actionscript code, no .fla was used. There aren’t any other files to see, it’s all in the RollingEyes.as file. Hope that helps. This isn’t to say that you can’t do the same thing with symbols in a .fla file. Just that this isn’t how I did it for this tutorial.

  • Ermaks

    Great . I love this. Is so simple and so useful at the time =)

    • http://orangesplotch.com Matt Carpenter

      Thanks! I’m glad you find it useful.

  • Adam Hain

    Hi Matt, I’d like to create something very close to this, but use Javascript/Jquery. Any chance there is an updated version? Thanks!!