any Flash creators—even experienced ActionScript coders—are unnecessarily frightened by math. Some find the subject so intimidating they will avoid even simple scripting projects if there is any "serious" math involved. However, I think those same Flashers would be surprised by how much they could accomplish, and how easily, by understanding just a small handful of math and (dare I say it?) physics principles.

Understanding a few basic formulas can really bring your ActionScript to a higher level. For example, you can easily add an approximation of gravity, acceleration or friction to games for a much greater level of realism and polish. You can calculate the distance between two points to improve collision detection, and path finding making more complex interactions within reach. Best of all, you can replace the restrictive nature of timeline animations with highly dynamic ActionScript that let you change any parameter you desire at runtime—and let you reuse and adapt the code for many other projects.

Thus begins an occasional look at math made easy within these pages. From time to time, I will show how seemingly confusing science can be much easier to comprehend than you thought. How often I visit these topics depends on your feedback to these articles, so let me know what you think.

Sine and Cosine

Figure 1. Sine and Cosine Illustrated: What could be easier? Potentially complicated graphics like this one are the reason many programmers stay away from mathematic concepts in their designs.

I'll start by explaining some very simple trigonometry that is enormously useful in animation, game programming, and even interface design. Don't panic thinking about the word trigonometry. I'll only be using two functions in this article: sine and cosine. Figure 1 should make these principles easy to understand. (Or not.)

Trying to digest a comprehensive illustration or description of a concept, such as that in Figure 1, is one of the biggest barriers to embracing math in every day scripting. Ultimately, it would be great to have a full understanding of each topic, how each applies to our environment, etc. But it often helps to start with only the information that relates to what you're trying to accomplish and then move on from there if a need presents itself.

For example, in the case of sine and cosine, it's better to begin by understanding the roles of sine and cosine in the composition of a triangle. If you can think of a simple triangle and start working with x and y coordinates, for example, suddenly you're getting somewhere!

Triangles
A lot of discussion about triangles in trigonometry is about the relationship between the sides of the triangle, the angles of the triangle, or some combination of both. If you have any experience in these topics, you may remember the three sides being described as a, b, and c, with c being the longest side. In the context of this article, it will be easier to think about this if you imagine the triangle on the Flash stage. Hereafter, I'll show the x and y axis, and label the triangle sides x, y, and c, with c still being the longest side.

Figure 2. Single Point: The screen shot shows a point on the Flash stage, described by position x, y.

Look at Figure 2. If you wanted to position a MovieClip at a point on the stage, you need to know its x and y coordinates.

One way of determining those values is by using an angle described by the triangle formed with x and y as two of it sides, as shown in Figure 3. If you know the angle indicated in green and marked with a (40-degrees, for example, but I'll talk about that later), you can use the sine and cosine functions to determine x and y.

Figure 3. X and Y: Using angle a, you can determine x and y with the cosine and sine functions..

This is because the cosine of the angle is defined as x over c, and the sine of the angle is defined as y over c. For simplicity, c is defined as having a length of 1, making the cosine of the angle x, and the sine of the angle y.

Fortunately, you don't have to worry about the formulas for sine or cosine because these functions are built into Flash, in the Math object. So, all you have to do is use the provided methods on your angle:

MovieClip._x = Math.cos(angle)
MovieClip._y = Math.sin(angle)

Now that you know how simple it is to get x and y coordinates from an angle, think of how easy it would be to animate a MovieClip on a circle. All you have to do is keep calculating the sine and cosine of a series of angles, and this will describe a circle as depicted in Figure 4.

Figure 4. Circular Path: A circular animation path is easy to create with sine and cosine.

Since c is 1 in the definition of sine and cosine, and c is the radius of the circle, you can create a circle of any size simply by multiplying the resulting sine and cosine values by the radius you want. For example, if you simply multiply your sine and cosine values by 100, you will describe a circle with a radius of 100.

Now you can animate MovieClips around any point on the stage, another MovieClip, or your mouse. You can even turn boring old left-aligned navigation systems into a dynamic arc of moving buttons. All of these examples will be included in source code that you can download from this article.