Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Master Simple Math Concepts to Electrify Your ActionScript  : Page 2

I know we said there would be no math, but this is way easier than it sounds. This practical article uses basic trigonometry in ActionScript to improve the flexibility and creativity of your animations. After this down-to-earth tutorial, you may never shy away from math again.


advertisement
The Flash Coordinate System and Angle Measurements
Before I go any further, it's important to describe two things about how Flash (and most other computer environments) deal with coordinates and angles. First, you must remember that, unlike the graphs you used in math, in Flash, positive y values are down, not up. The origin point (0,0) of the Flash stage is the upper left corner, so positive angles begin in the lower right quadrant of the stage and increase as you rotate clockwise around the stage (see Figure 5). Negative angles can be specified, but they don't really exist. That is, it's not possible to have a negative angle in the real world, but if you specified -45°, Flash would understand you to mean 315°.

Second, while you can use degrees as an angle unit of measure for the MovieClip._rotation property, all of the trig functions require a unit of measure called radians. There are 2 π radians in 360 degrees, and therefore π radians in 180 degrees.

Author's Note: You may remember that π (pi, approximately 3.14) is a unique mathematical constant that expresses the ratio of the circumference of a circle to its diameter. It is helpful to understand it when calculating the circumference (2 πr) and area (πr2), but all you need to remember now is that there are 2 π radians in 360 degrees. In ActionScript, the π constant can be retrieved from the Math object by referencing Math.PI (case-sensitive).



Figure 5. Going Up: In the Flash coordinate system, positive angles start in the lower right quadrant of the screen and the angle values increase with a clockwise rotation.
To pass an angle to the aforementioned Math.sin() and Math.cos() methods, you must use radians. However, since most of us are used to thinking in terms of degrees, it can be more convenient to convert degrees to radians. To do so, multiply the angle in degrees by (π/180).

Circular Animation with ActionScript
Now that you know how to convert degrees to radians, I can show you the small script that will animate a MovieClip in a circle. If you don't want to start from scratch, you can download the source code and follow along. Otherwise, start a new Flash file and call it "circle1.fla." Add a MovieClip to the stage (my file uses a 40-pixel circle), and give it an instance name of "mc1." Next, add the following script to frame one of your movie. I'll explain as I go.

To start, I'll store a few simple variables in the MovieClip.

mc1.angle = 0; mc1.angleChange = 20; mc1.radius = 100; mc1.centerX = Stage.width / 2; mc1.centerY = Stage.height / 2;

The first line establishes an arbitrary angle at which you will begin the animation. Remember that positive angles start at positive x, zero y and rotate clockwise (covered in the last section).

The second and third lines define a degree of change in the angle from one iteration of the script to the next, and the size (radius) of the circular animation path.

The third and fourth lines define the point around which the "mc1" MovieClip will animate—in this case, the center of the stage.

Next, I'll define a simple function to convert degrees to radians and return the radian value. Remember that Math.PI is a constant that is already part of the built-in Math class.

function deg2rad(degree) { return degree * (Math.PI / 180); }

Next I'll define the function that will actually animate the MovieClip.

function animateCircle() { var radian = deg2rad(this.angle); this._x = this.centerX + this.radius * Math.cos(radian); this._y = this.centerY + this.radius * Math.sin(radian); this.angle += this.angleChange; this.angle %= 360; }

After the function definition (which I'll omit from these line counts) the first line stores the degree to radian conversion in the local variable, radian. It passes the current value of the angle variable stored in the MovieClip to the conversion function. This variable starts as 0, but will be incremented with each iteration of the animation.

The second and third lines update the x- and y-coordinates of the MovieClip, starting with the center of the orbit, adding the radius offset, and then the x and y location, respectively, determined by taking the cosine and sine, respectively, of the current angle (in radians, of course).

The fourth line uses the += assignment operator to add the MovieClip angleChange value to the MovieClip angle variable.

The last line of the function is another great example of how not being afraid of math can improve your code. All this line does is make sure the angle value stays within the range of 0-360. It might otherwise have been written:

if (this.angle >= 360) { this.angle = 360 - this.angle this.angle = this.angle - 360 }

Instead, it uses the modulus assignment (%=) to say, in one simple line, 'reassign the variable to the amount left over (the remainder) when dividing the value of the variable by 360.' For example, if, after adding 20, the angle value is 380, you may want to adjust that so the final value is within the accepted range of 0-360 (380 divided by 360 equals 1 with a remainder of 20). Therefore, using modulus, the new value of this.angle can be set to 20. This can be very handy. Using modulus can reduce the amount of code you have to write (and, therefore, maintain) and it's really useful for common every day tasks. For example, you can quickly determine if any number is even or odd. Any even number when divided by 2 will leave a remainder of 0, while any odd number divided by 2 will leave a remainder of 1.

Back to our script, the last line of the script assigns the aforementioned function to the EnterFrame event of the MovieClip so it is called every time the playback head enters a frame in the MovieClip—thereby causing a frame loop.

mc1.onEnterFrame = animateCircle;

That's it! Test your movie, and you should see the MovieClip animating in a circle around the center of the stage.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap