Tutorial details:
Written by: Cody Lindley [email:cody@o-positive.com]
Website: www.oh-zone.com
Difficulty Level: Advanced

PURPOSE:This is a look at trigonometry for practical use in flash actionscript. I am one of those people who could have cared less about trigonometry when it was taught to me in high school. Today I am kicking myself for not paying more attention in math class.

WHY: The reason for this refresher is for the purpose of writing/programming actionscript in flash that will fake 3D in a 2D space. This was written for my own notes, but I decided someone else out there might get some use out of it.

WARNING: The trigonometry is a review for any one with some common sense and the desire to learn. I do however expect the readers of this material to be knowledgeable about actionscript programming techniques when it comes to writing code for flash. With that said. Expect very little explanation about flash and the code itself. However anyone who considers themselves a flash actionscript guru should be fine. Time for a reality check yet? (You need math to understand trigonometry! You need Colin Moock's book on actionscript to understand scripting techniques in flash.) Last word, reader be ware I am not a writer and this was not written for the the purpose of regenerating these ideas in flash. Think of this material as just a tutorial on the concept of trigonometry and flash, an overview really.

DISCLAIMER: Ya, I know. This stuff is not new and for the most part I am just rehashing what I've read in books, examples and all. So don't go thinking I am some super smart guy. The reality is I just read a lot of books. And the people who wrote those books are just people who read a lot of books. And the people who wrote those books are, well, you get the idea. Credit will be giveing to those books at the bottom of this page.

Normal Cartesian coordinate system: This is a regular old Cartesian coordinate system	<<Normal--- Flash>>	Flash Cartesian coordinate system: Take careful note of the differences. Which is that the y axis is flipped. For future reference also consider that there is a z axis coming strait out of the center of this graph and heading strait for you eyes (more later).

This is actually what the Cartesian coordinate system looks like in flash on the root timeline. It will always start in the upper left hand corner on the root timeline. Note that any object defined by the Cartesian coordinate system uses points whether it be a single point or a box with 4 separate coordinates for each side of the box. The top upper left hand corner in flash has the coordinates (0,0). Note: coordinates represent positions in terms of width along the x axis and height along the y axis.

This is actually what the Cartesian coordinate system looks like in a movie clip in flash. For example lets say that the orange ball is in a movie clip called ball. The center of the orange ball would be at (0,0) in the movie clip if the ball graphic was center inside of the clip (demonstrated below). The exact center of this ball would be at (0,0). We could go on to define the balls height and width by measuring the distance the ball covers along the y and x axis.

First off flash uses radians to measure angles not degrees, more on this next. For now degrees.

The maximum rotation around any Cartesian coordinate system is 360 degrees. In Flash if you are moving clock wise this will be a positive number in degrees until you reach 180 degrees. If your are moving counter clock wise this will be a negative number until you reach 180 degrees. Remember all rotation in flash starts from 0 degrees. Your options are either moving clock wise or counter clock wise. If you want to move counter then you need a negative number. If you want to move clock wise you need a positive number. I know this might be a stretch but if you think about 45 degrees is also the same as -315 degrees. It just all depends on which direction around the clock you are moving and your purpose for rotating around a circle.

Now using the _rotation property of a movie clip will return a value between 0 degrees and 180 degrees or if you are moving counter clock wise a value between 0 degrees and -180 degrees. Take a look at the swf. I know this may be a little confusing. Just remember that if you use the movie property _rotation that if you want to move counter clock wise use a negative number and if you want to move clock wise use a positive number.

When getting the angle value for a movie clip on the stage remember that you could get a negative number. This is shown by dragging the movie clip around the stage in the swf. below. The value returned and used by the _rotation property is in degrees. This gets complicated because flash math functions return values of an angle in radians (Which is an angle in terms of the constant pi or 3.14 ). Radians are good for math but not so good when you want to alter the _rotation property of a movie clip If you are not using the _rotation property then be prepared to get a handle on radians.

Drag the orange circle with the mouse

Action script from swf

[as]onClipEvent (mouseDown) {
    startDrag (this, true, 0, 0, 150, 150);
}
onClipEvent (mouseUp) {
    stopDrag ();
}
onClipEvent (enterFrame) {
    Radians = Math.atan2((this._y-_root.center._y), (this._x-_root.center._x));
    this.degreetextbox = Math.round(Radians*180/Math.PI)+" degrees";
}[/as]

You'll notice that in the above example I had to change radians to degrees for the purpose of showing the output in a text field. We use degrees because everyone understands what 90 degrees means, but few know what -.75 radians means. The following will give a variable named degrees with your angle in degrees and not radians.

Use this equation when you want to change radians to degrees. Flash usually returns the value of an angle in radians when using a math function.

[as]Degrees=Math.round(your_angle*180/Math.PI) [/as]

Remember, your angle is in Radians before you convert it.

READ THIS: The swf below shows what the out put would be if you did not convert from radians to degrees.

[as]onClipEvent (mouseDown) {
    startDrag (this, true, 0, 0, 150, 150);
}
onClipEvent (mouseUp) {
    stopDrag ();
}
onClipEvent (enterFrame) {
    radians = Math.atan2((this._y-_root.center._y), (this._x-_root.center._x));
    this.radiantextbox = radians;
}[/as]

Real quick we should cover the Pythagorean theorem. This theorem simple gives us the distance between two movie clips All we need to know is the x and y coordinates for any two flash movie clips to calculate the distance between the two. Image the two black dots in the image below represent two different movie clips in flash.

The distance between any two points is defined by the following equation:

[as]c = square root (a*a + b*b)


[/as]

Drag clip a with the mouse notice that both clip a and b give the distance from each other which is of course always the same. However it might come in handy to have two thinking movie clips that both now how far they are from each other.

This is the code from flash for clip a

[as]onClipEvent (load) {
    var y1 = 0;
    var y2 = 0;
    var x1 = 0;
    var x2 = 0;
}
onClipEvent (mouseDown) {
    startDrag (this, true, 0, 0, 150, 150);
}
onClipEvent (enterFrame) {
    y1 = _root.aclip._y;
    x1 = _root.aclip._x;
    y2 = _root.bclip._y;
    x2 = _root.bclip._x;
    x_cord = x2-x1;
    y_cord = y2-y1;
    _root.aclip.distance_from_bclip = Math.round(Math.sqrt(x_cord*x_cord+y_cord*y_cord));
}
onClipEvent (mouseUp) {
    stopDrag ();
}[/as]

This is the code from flash for clip b

[as]onClipEvent (load) {
    var y1 = 0;
    var y2 = 0;
    var x1 = 0;
    var x2 = 0;
}
onClipEvent (enterFrame) {
    y1 = _root.aclip._y;
    x1 = _root.aclip._x;
    y2 = _root.bclip._y;
    x2 = _root.bclip._x;
    x_cord = x2-x1;
    y_cord = y2-y1;
    _root.bclip.distance_from_aclip = Math.round(Math.sqrt(x_cord*x_cord+y_cord*y_cord));
}[/as]

Knowing the length of any two sides of a right triangle is enough information to calculate the other two sides of the right triangle. This is useful when you need to find the cosine, sine, and tangent of a triangle. So, why do you need to find the cosine, sine, and tangent of a triangle. The answer is simple, to calculate points around a circle. If you have not figured it out yet getting the cosine and sine of a point will give the location in radians of a point on a circle in flash. Next you will see why this is useful, I am sure you can image why.

Before I go on, consider what purpose the flash math functions below (in dark gray box) would serve you as you work with angles, triangles, cosine, and sine. Also review the relationship of sine, cosine, and tangent in the image below.

THIS IS VERY IMPORTANT: Most likely you will know the lengths of the opposite and adjacent sides of the triangle because they represent the y and x coordinates of a point. See if you can make sense of this by studying the image below.

Math.Atan2(y, x);........calculates the angle (in radians) from the x-axis to a point on the y-axis. Math.cos(angle);.............................................calculates the cosine of an angle in radians Math.sin(angle);..............................................................calcualtes the sine of an angle in radians Math.round(number);.....rounds the number to the nearest interger Ex. math.round(5.16) returns 5 Math.Sqrt(any number);.............................................................calcuates the square root Math.PI( )....................................the circumference of a circle divided by its diameter

All right, here it is, if we know the angle of a right triangle and we use the math functions in flash actionscript cos( ) and sin( ) we can calculate the circular path around a circle. Above I showed how to get the angle of an object on the flash stage. For now we will just pick at random angle of 45 degrees. Given this angle we calculate the coordinates where an angle will intersect with a circle. This mean that we we will be a calculate a circular path around a central point or origin.

IMPORTANT: Remember that radius is the distance from the center of a circle to the edge of the circle. And that cosine represents the horizontal (x) and sine the vertical (y) value of the Cartesian coordinate system

Your goal is to find what the x and y coordinate are for the center of the orange circle below.

Remember that you must first change you angle into radians because we are talking about a 45 degree angle, but flash sees it in radians not degrees. The following code is an example of actionscript that will convert the angle into radians and then by using the math functions cos( ) and sin ( ) return the (x, y) coordinates of the orange circle below.

[as]var degrees=45;
radians = degrees* (Math.PI/180);
xcoordinate = radius * cos(radians);
ycoordinate = radius * sin(radians);[/as]

OK, let me try and explain the image below. The radius determines how big the path will be that the orange circle will follow. The angle determines where on the circular path the orange circle will be angled at a given point according to the origin or center of the Cartesian system (0,0). By using the cos( ) to find the x coordinate and sin( ) for the y coordinate we will have the exact (x,y) coordinates for the orange circle on the circular path (light gray circle). Did you follow that? Think about this. If I as to add 2 degrees to the the angle I would have 47 degrees. That means my variable degrees in the above actionscript would change the location of the orange circle to 2 more degrees clock wise around the light gray circle. If I was to continually add 2 degrees to the current degree variable the orange circle would be rotation around the origin continually and also continually be following the light gray path. In the next example I actually did this in flash. Note also that the circle is rotation around the z axis, more on this later.


The following code is placed on a movie clip in flash call "ball" with a graphic of a orange ball on its timeline. The only other movie clip in the flash file is a clip called "center_cross_hairs". The clip "center_cross_hairs" is used to reference a point or origin in the center of the movie. If you don't know why this is review the start of this tutorial. If I did not use the "center_cross_hairs" clip flash would think (0,0) is located in the top left-hand corner. Remember to name your movie clips in the flash environment for reference in actionscript.

We now need to add some dimension to our code in order to achieve the third dimension. This involves adding another axis to our coordinate system. This axis would be the z axis. So all together now we have 3 axis. They are the x axis, the y axis, and the z axis. The best way to think of the z axis is like this, if some one shot an arrow strait at your head (eye level) the axis the arrow is traveling on is the z axis. If the person who shot the arrow was standing 500 feet away directly in front of you the arrow would go from a very tiny dot to a large arrow stuck between your eyes. This would be considered perspective, because as the arrow travels closer to your head your eyes enlarge the arrow to a realistic size. With that said, image now the Cartesian coordinate system with an axis headed strait for your head. This axis of course would be going through the exact center of the coordinate system which would be (0,0) and extruding towards you. On a monitor think of the z axis as the axis extruding strait out of the screen and coming towards us.

If you look at the animation's below the first example is a ball rotating around the y axis. Really quick before we go on here is a visual to understand what I mean by rotate around the y axis. This image shows how an orange circle could rotate around any of the three different axis.

In the swf below I am faking the rotation around the y axis by using perspective to make the ball larger then smaller as it moves along the x axis. The ball of course is smaller the farther it gets from our view and big the closer it gets to our view. Check out the code and see how it differs from the pervious code. I would like to note that this is still not true perspective because I am only changing the scale of the circle. For true perspective I must also add perspective to the path the ball follows. I am not going to go into detail about this in this example but I will show you the difference by providing two examples. Consider that the first example does not show the ball crossing over to the -z axis. It only looks like it is going away from you down the +z axis. The gray ball however does rotate into the negative side of the z axis. See the difference? For a full explanation check out Flash 5 Studio from friends of Ed, chapter 15 - page 469.

The perspective problem is simple really. You are trying to get a 3 dimensional point in flash, but you must do that by taking what is called an ordered triplet and turn it in to an ordered pair. this is an ordered triplet: (x,y,z) this is an ordered pair: (x,y) What you want to do is drop one of the coordinates so you have an ordered pair and then let flash fake the third coordinate by using perspective. Meaning that flash will be changing the scale of an object while it is rotating around a particular axis according to a perspective variable. look at these examples and see if you can figure out what I mean. If you want to duplicate these examples in flash just drop the code you see in the example on a movie clip. Make sure you have some graphic on the timeline of that movie clip or it will be blank, I've used an orange circle. You will also need another movie clip name "center_cross_hairs". This clip has to be center in the middle of the stage in order for flash to see the origin of the rotation as the center of the swf (or stage). Don't forget to give name it. For a further explanation of the math below reference the book Flash 5 Studio from friends of Ed, chapter 15 rotation points around the z axis = setting the x and y coordinate of a point using sine and cosine. (dropped z) The action script for this movie does not use the distance equation because we are not using the z axis to find any coordinates. rotation points around the x axis = setting the y and z coordinate of a point using sine and cosine. (dropped x) rotation points around the y axis = setting the x and z coordinate of a point using sine and cosine. (dropped y) The following are the books I referenced for this information: 1. ActionScript the Definitive Guide, Colin Moock 2. Super Samurai (http://www.supersamuraiflash.com/) 3. Flash Studio 5, Friends of ed (http://www.friendsofed.com/) 4. Flash Game Studio, Friends of ed (http://www.friendsofed.com/) 5. Visual QuickPro Guide Flash Advanced, Russel Chun Contact: cody@o-positive.com