Flash Tutorials

In this tutorial you will learn how to make a movieclip face the cursor with some simple trigonometry. I am expecting you already know some trig and some Actionscript, but if you dont I will quickly give you some examples.

This is what you will end up with when you finish.

That is just a basic triangle, but you should get used to it because you use it for nearly every thing in trig (unless you want to get advanced). You will have noticed that I have placed letters around the sides. Well they all stand for something.

H = Hypotenuse - The longest side on the triangle.

O = Opposite - The side opposite to the angle. (Not the right angle).

A = Adjacent - The side adjacent the the angle.

You will also notice there is a symbol inside the angle (?). That is theeta, it is a letter out of the Greek alphabet. I will use it for the angles.

Now, the most important thing you need to know is SOH CAH TOA. Think about it all day until it is permanently stuck in your brain. But what is that supposed to mean? sine-opposite-hypotenuse cosine-adjacent-hypotenuse tangent-opposite-adjacent. I know, it looks like a lot but you can find out more about it from here: http://en.wikipedia.org/wiki/SOH_CAH_TOA

Now that we have that out of the way, open a new flash document and set the Frame Rate to 30.

Make what you want to face the cursor, and make a MC.

Make sure its registration point is set to the center and that it is facing the right. Give it an instance name of "man".

Now place this code on the frame.

function convert(radians:Number):Number {
    degrees = radians*(180/Math.PI);
    return degrees;
}
man.onEnterFrame = function() {
    var adjacent:Number = this._x-_xmouse;
    var opposite:Number = this._y-_ymouse;
    var angle:Number = Math.atan2(opposite, adjacent);
    this._rotation = convert(angle);
};

I know I usually tell you to put the code on the MC, but because of Flash 9 coming out soon, I have chosen to get you used to it and ready for AS3.

function convert(radians:Number):Number {
    degrees = radians*(180/Math.PI);
    return degrees;
}

All that is is a function that converts an angle from radians to degrees, since flash uses radians but the _rotation property is in degrees. Dont ask me why they did that. The function has one parameter, then outputs the result.

man.onEnterFrame = function() {
    var adjacent:Number = this._x-_xmouse;
    var opposite:Number = this._y-_ymouse;
    var angle:Number = Math.atan2(opposite, adjacent);
    this._rotation = convert(angle);
};

Although this code probably looks confusing to a lot of you, it is actually quite simple. The first line is exactly the same as if I put onClipEvent(enterframe){ on the man MC. So why do it on the frame? Well imagine if you had 20 MC's on the stage, each with a seperate block of actionscript. It would be hard to fix the bugs in the code. But if it is all on the frame it is alot easier and organised. Adobe have made you do this in AS3, no more code on MCs or buttons. The next three lines are declaring variables, which are what we learnt about at the start.

The first variable is the adjacent, the second is the opposite and the third is theeta/angle. The next line is just making the MCs rotation the same as the angle we figured out, but it is using the convert function we made so it isn't in radians. Otherwise it wouldnt work.

Now you know how to make an MC face the cursor