ActionScript 3.0 Cookbook: Solutions for Flash Platform and Flex Application Developers

In the first stage of the application, begin with the most fundamental and central task of the application. In an application that involves bouncing circles, the most natural place to begin is to create a single circle that bounces within the boundaries of a rectangle. Here are the steps to complete this stage of the application:

1. Create a new Flash document named stage1.fla and open it.

2. Add the following code to the first frame of the default layer of the main timeline:

   // Include DrawingMethods.as from Chapter 4 for its custom drawing methods. #include "DrawingMethods.as" // Include MovieClip.as from Chapter 7 for its getNewDepth( ) method. #include "MovieClip.as" // Create the circle movie clip and draw a circle of radius 10 within it. _root.createEmptyMovieClip("circle", _root.getNewDepth( )); with (circle) { lineStyle(0, 0x000000, 0); beginFill(0, 100); drawCircle(10); endFill( ); } // Create a movie clip for the box and draw a rectangular outline within it. _root.createEmptyMovieClip("border", _root.getNewDepth( )); with (border) { lineStyle(0, 0, 100); // Draw a 200 x 200 rectangle. drawRectangle(200, 200); _x += 100; _y += 100; } // Create some properties for the circle that define the area within which its // movement should be constrained. circle.minX = 0; circle.minY = 0; circle.maxX = 200; circle.maxY = 200; // Initialize the circle at a random coordinate within the acceptable range. circle._x = Math.random( ) * circle.maxX; circle._y = Math.random( ) * circle.maxY; // Set the velocity of the circle to six pixels per frame. circle.vel = 6; // Set a property that determines the direction or angle of the initial movement // of the circle. The value needs to be in radians, so generate a random value // between 0 and 2p (which is 360 in degrees). circle.dir = Math.random( ) * Math.PI * 2; // Define an onEnterFrame( ) method for the circle so that it continually updates // its position. circle.onEnterFrame = function ( ) { // Calculate the new x and y coordinates for the circle. // Using basic trigonometric formulas, we can derive the x // and y components of a vector, a line that has both direction // (an angle) and velocity. See Recipe 5.12 and Recipe 5.14. this._x += Math.cos(this.dir) * this.vel; this._y += Math.sin(this.dir) * this.vel; // If the circle is touching the rectangle or is outside its boundaries, change // the direction of the circle. if ((this._x + this._width/2) >= this.maxX) { this._x = this.maxX - this._width/2 - 1; this.dir += 2 * (Math.PI/2 - this.dir); } else if ((this._x - this._width/2)<= this.minX) { this._x = this.minX + this._width/2 + 1; this.dir += 2 * (Math.PI/2 - this.dir); } if ((this._y + this._height/2) >= this.maxY) { this._y = this.maxY - this._height/2 - 1; this.dir -= 2*this.dir; } else if ((this._y - this._height/2) <= this.minY) { this._y = this.minY + this._height/2 + 1; this.dir -= 2*this.dir; } };

That is all there is to stage one of the application. If you save and test your movie, you should see a single circle that bounces around within the boundaries of a rectangle. The majority of the code in this stage is nothing new or complicated. Some of the mathematics involved in the calculations might be new to you, but the ActionScript syntax is familiar. The only portion of the code that really needs some further explanation is a snippet from the onEnterFrame( ) method. Within this method you want to update the position of the circle according to the direction and velocity for the circle. There are two basic trigonometric formulas that you can employ here to find the new x and y coordinates based on the information you do know (the direction/angle and the velocity).

Trigonometry says that the x coordinate can be found by multiplying the cosine of the angle by the velocity, and the y coordinate can be found by multiplying the sine of the angle by the velocity. Now, if the circle was only going to move along a straight line forever, then this would be all that is needed. However, you want the circle to bounce when it hits the sides of the rectangle. Therefore, you need to use a series of if statements. In each case, you must calculate whether the edge of the circle is touching or outside of the rectangle. You can find the edge of the circle by adding or subtracting the radius from the center of the circle (the radius is half of either the width or the height). When the circle needs to bounce, you must do two things. First, set the circle so that it is within the boundaries of the rectangle by at least one pixel. Otherwise, the circle can get trapped along the side of the rectangle. The other thing you should do is assign the circle a new direction. The new direction is determined either by adding twice the difference between p/2 and the current direction (in the case of the circle bouncing off the left or right walls) or by subtracting twice the current direction (in the case of the circle bouncing off the top or bottom walls), as shown in the preceding onEnterFrame( ) handler.