Introduction

Welcome to this tutorial, we hope you can learn somthing about Flash interactivity from it! This tutorial is split into three parts: The Movie Guidelines for setting up the movie, ready for adding our actions. The Good Stuff Here we work through the script that will generate the mouse interaction. Advanced Use Here i discuss some other ways that the skills taught in this tutorial can be developed to create more complex projects.

The Movie

Basicly we will need to create three layers: 1. ACTIONS 2. Eyes 3. Face (background)

Firstly select the left eye and give it an instance name of ¡°eye¡±, then select the right eye and call it ¡°eye2¡±. We are about to create a script that will tell the eyes to rotate to look at the mouse. Obviously this script needs to be recalculated all the time to catch every mouse movement so the eye is always looking in the correct direction. For this reason, in the second frame of the actions layer, create a keyframe and insert this action:

gotoAndPlay (1);

This will cause the movie to play over and over again, causing the actions in frame one to be executed over and over again. Now on to the tricky stuff...

The Actions

The basic idea is that we have to calculate the angle from the eye position to the mouse position and then rotate the eye by that angle. To do this we need to get out the old school text books and look up some trigonometry! Luckily I have already done this for you, remember this from your high school days ... ? ; if tanA = a/b ; then A = tan-1 (a/b) ... No? Well Macromedia did and they have added support for these functions and plenty more into Flash5. So basicly, we can calculate angle A if we get distances a and b, to get this we can use the following code to frame one of our movie:

a = eye._y-_ymouse;
b = eye._x-_xmouse;

Now, to turn those distances into angle A we can use this code:

angleA = Math.atan2(a, b);

The only problem is that this gives you the angel not in degrees but in ¡°radians¡±, another way of measuring angles. To convert angleA into degrees we use this line:

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

Now we have the angle in degrees that the eye needs to rotate. All that remains is to rotate the eye by the angle ¡°degrees¡± using this code:

setProperty ("eye", _rotation, degrees);

Now if you test your movie the left eye should turn around and follow your cursor where ever it goes. Finally you need to make a second copy of this entire code to make the second eye move also - you will need to change the value names to something different so they dont get mixed up. Here is the final code that should be in frame one of your actions layer:

a = eye._y-_ymouse;
b = eye._x-_xmouse;
angleA = Math.atan2(a, b);
degrees = angleA/(Math.pi/180);
setProperty ("eye", _rotation, degrees);
a2 = eye2._y-_ymouse;
b2 = eye2._x-_xmouse;
angleA2 = Math.atan2(a2, b2);
degrees2 = angleA2/(Math.pi/180);
setProperty ("eye2", _rotation, degrees2);

Now test your movie and see that it is working, if not check that it is the same as LookingFinal.fla which is also included with this tutorial and has the script working. But all that is just for starters...

The Good Stuff

Now you know some of the basics of calculating distances and making movies react in relation to them. So now it is your turn to use these concepts to come up with some crazy interaction of your own. Firstly, to make this script really practical you will need to have it inside its own move. Use the "cut frames" command to move both frames of all three layers into a new movie clip. This movie can then be placed anywhere, even animated within your movie somewhere and it will always look at the cursor. A similar script you could apply would be to detect the distance from the cursor to the movie. This will open up many more options for you to experiment with. Using the earlier, triangle shaped diagram, the length of the angled line is the distance between the cursor and the eye. We will call this "c". Again, going back to high school maths: c squared = a squared + b squared. So to calculate the distance c we can use something like this:

c = Math.sqrt(a*a+b*b)

I will leave the rest for you to sort out, have fun and come up with something crazy. Visit our website -  - for more examples and tutorials. At the time of writing, the main navigation on the site uses a complex version of the above scripts to create an organic type of interactive animation, check it out when you can.

If you have any questions or comments about this tutorial, feel free to email me or post to the tutorial Comments page here at Flash Kit.

discuss this topic to forum