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.

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.

Action script from swf

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"; }

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.

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

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.

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; }

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

c = square root (a*a + b*b)

This is the code from flash for clip a

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( ); }

This is the code from flash for clip b

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)); }

Knowing the length of any two sides of a right triangle is enough information to calculate the other two sides of a 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 will be able to 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's 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.

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

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.

Now that we have some knowledge of the third dimension or z axis we can start to think about plotting multiple points for the purpose of faking 3D in flash. If you think about this, with the use of another axis plotting these points is any easy concept to grasp. The image below shoes how one might do this on the Cartesian coordinate system. The reality how ever still remains, there is no z axis in flash or on any computer monitor. The z axis is just a conceptual and mathematical way around positioning points on a two dimensional plane with the purpose of faking the third dimension.

If you want an object to have a depth of 10 then imagine that the coordinates for the four corner points farthest from you would be (x, y, 5). And if you have a perfect square all of the corners would have the same coordinate. So, knowing that the four corners closes to you would have the coordinates (x, y,-5). Remember that the exact center or origin is in the middle of the box(0,0). That means that you must travel down the x axis -5 and +5, which would give you a depth of 10 or a total length of 10. Take a look at the image below.

This next swf below shows just how one might plot these points using random coordinates on the Cartesian system. Again there is no z axis so we must figure out how to place a point on the screen in flash if it didn't have a z position. However in order to achieve a three dimensional effect we must take into consideration the point's z position in our math, so to speak. Below the swf is the actionscript that is located on the ball movie clip. The following is the code I used to duplicate the balls, pretty standard its located on a keyframe on the main timeline in flash. Also don't forget the purpose of the center_cross_hairs movie clip. This clip centers the balls by making them think there origin is the center of the stage. Just make sure this clip is centered on the stage.

num_of_balls = 15;

for (var i = 0; i < num_of_balls; i++)
{ _root.ball.duplicateMovieClip ("ball" + i, i); }

The following are the books I referenced for this information:

1. ActionScript the Definitive Guide, Colin Moock (http://www.Moock.org/)

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: email@codylindley.com