Main Content

You are here:

Rotation in ActionScript

Welcome to Foundation Flash's tutorials. In today's tutorial, I will be expanding on some of the methods you learned about in our previous tutorials about trigonometry, and introducing those methods into Flash, in order to show you how Flash deals with them, and how you can use them in your work. The final product of today's tutorial will be this:

So, let's get to work. You'll remember last time, we explained how to get an angle from two lengths of a triangle using inverse trigonometric functions. I will use these functions in order to make that angle rotation swf above. But first, let's look at how Flash handles these functions. If you were to try to find an angle where you had the opposite (5) side, and the hypotenuse (10) side, you would do the following calculation:

sin-1(5/10)

In Flash, you would do this:

Math.asin(5/10);

This would return the correct answer of 30, right? Wrong. Open a new Flash document and type the following code into the first frame of your movie:

var angle = Math.asin(5/10);
trace(angle);

You'll notice it returns a very odd number, 0.523598775598299. So why isn't it 30? Well, this is because Flash measures angles in an odd form of angle measurement, radians. You don't need to really need to know much about this form of measurement (I don't), all you need to know is how to convert between degrees and radians. The formula for converting radians to degrees is:

radians/(pi/180)

And the formula for converting degrees to radians is:

degrees/(180/pi)

The one we will be using is radians to degrees. So change your angle variable to:

Math.asin(5/10)/(Math.PI/180);

Now test your movie. Yay! It now outputs the correct number, 30. So, now we know how Flash handles trigonometric functions, we can get to work on our mouse following arrow.

Open a new Flash document, and inside create a Movie Clip with the instance name of arrow. Inside, draw (you guessed it) an arrow. Note, the registration point should be on the end of the arrow, on the point which you want it to rotate about. Now, create a new empty Movie Clip called object. Put it on the stage on the point which you want the arrow to rotate about. Next, create a dynamic textbox with the instance name angletext. Select the object move clip and press F9 to open up its action panel. Inside, you need to first type:

onClipEvent (mouseMove) {

This means that the following code will be executed every time the mouse moves. Next, type:

 x = this._xmouse;
y = this._ymouse*-1;

This stores the x and y positions of the mouse, in relation to this point. The y is reversed, as y co-ordinates in Flash are reversed, and we want them not to be reversed for our equation. Next, we figure out the angle, using the following equation:

 angle = Math.atan(y/x)/(Math.PI/180);

And we store it inside the angle variable. We use atan as we are using the x and y variables, and if you think of it like a triangle, with the angle at the center, we are using the opposite and adjacent sides. However, this does not stop here. Think about it carefully. If our mouse goes to the left of the object Movie Clip, then the x variable becomes negative so if we wanted x to be 10 and y to be 5, it would actually calculate:

Math.atan(-5/10)/(Math.PI/180);

So would return -26.565051177078 instead of 26.565051177078. And even in that case, its still wrong as it is calculating in the wrong direction. What can we do to remedy this? Well, in this instance, we would add 180. The first 90 degrees would be to make it positive, and the second would be to move the angle into the upper left quadrant (corner). So under where we declared our angle variable, type:

 if (x<0) {
                                angle += 180;
}

So, if x is negative, add 180 to our angle. Now we need to sort out the bottom quadrants. Well, the bottom left would actually return a positive number, as both x and y would be negative, so all it would need would be another 180 degrees to put it to its correct position. Luckily, I planned this so that it is covered by the first if statement. Clever, eh? Now, last quadrant need 90 degrees added to take it out of negative numbers, and then another 270, to put it in its right place. That makes 360, so:

 if (x>=0 && y<0) {
                                angle += 360;
}

If x is greater than or equal to 0, and y is less than 0, then we add 360 to our angle variable. Now, we want to display our returned angle in our angletext textbox, so type:

 _root.angletext.text = angle;

Now, our angle will be displayed in our textbox. Lastly, we want our arrow to follow our mouse. We do this by first making the angle negative, as Flash uses cartesian co-ordinates, which are back to front, and then by adding 90, as Flash measures 0 degrees as 90, 90 degrees as 180, etc. So we end up with:

 _root.arrow._rotation = (angle*-1) + 90;

And of course, don't forget to close our onMouseDown event:

}

Test your movie, and it should work. Here is the final code:

onClipEvent (mouseMove) {
        x = this._xmouse;
        y = this._ymouse*-1;
        angle = Math.atan(y/x)/(Math.PI/180);
        if (x<0) {
                angle += 180;
        }
        if (x>=0 && y<0) {
                angle += 360;
        }
        _root.angletext.text = angle;
        _root.arrow._rotation = (angle*-1) + 90
}

Now, I've tried to explain this in as much detail as possible, as I know it is a very difficult concept to understand, but if you still don't understand, or it's not working, or you just want a bit more explanation, feel free to email us at [email protected]. I hope you have learned something valuable from this, thanks for reading, and stay tuned, because soon we will be making a small mini game using this code, and other useful bits of code that you have learned over the past few tutorials,

Leon.

Comments