Adding the Cannonball
In this section, we add the cannonball to our game. Create a keyframe in frame 2 of the Ball layer, then drag the ball symbol from the Library onto the stage. Give the ball object the instance name ball. Notice that the ball instance appears as a small white circle on the stage. This circle is Flash’s default appearance for a movie clip that has no graphic in its first frame. The ball will appear hidden beneath the cannon when the movie is viewed, be-cause it is on a lower layer. Provide the Ball object with the x- and y-coordinates 0 and 200, respectively. This places the ball right under the cannon, so that when the ball is fired, it appears to have been fired from inside the cannon.
Initializing the Ball’s Motion Variables
Link the ball symbol to a Ball class, as we did previously with the Target and Blocker classes. Next, create a new ActionScript 3.0 file named Ball.as and add the code shown in Fig. 17.12 to the file.
This code defines the Ball class. It has three properties—the speed in the x-direction, speedX (line 12), the speed in the y-direction, speedY (line 13), and a timer that moves the ball, moveBallTimer (line 16). Since the speed in the x-direction will be only integer values, it is of type int. However, the speed in the y-direction is also dependent on fire-Ratio, which can be a decimal value, and thus, speedY is of type Number, which is Action-Script 3’s floating-point variable type. The class definition also creates the get and set functions for these properties. When the Ball object is created, the Ball constructor func-tion starts the moveBallTimer, which calls the moveBall function every 33 ms. Function moveBall (lines 28–32) increments the x- and y-coordinates by speedX and speedY. The stopTimers function allows us to stop the moveBallTimer from outside of the class.
1 // Fig. 17.12: Ball.as
2 // Move ball and set speed.
5 // import relevant classes
6 import flash.display.MovieClip;
7 import flash.events.TimerEvent;
8 import flash.utils.Timer;
10 public class Ball extends MovieClip
12 var speedX : int; // speed in x-direction
13 var speedY : Number; // speed in y-direction
15 // Create Timer object to move ball
16 var moveBallTimer : Timer = new Timer( 33, 0 );
18 // Ball constructor starts moveBallTimer
19 public function Ball() : void
21 // call function moveBall as moveBallTimer event handler
23 TimerEvent.TIMER, moveBall );
25 } // end Ball constructor
27 // update the x and y coordinates using the specific speeds
28 private function moveBall( t : TimerEvent )
30 x += speedX;
31 y += speedY;
32 } // end function moveBall
34 // set speed in x direction
35 public function setSpeedX( v : int )
37 speedX = v;
38 } // end function setSpeedX
40 // get speed in x direction
41 public function getSpeedX() : int
43 return speedX;
44 } // end function getSpeedX
46 // set speed in y direction
47 public function setSpeedY( v : int, fireRatio : Number )
49 speedY = v * fireRatio;
50 } // end function setSpeedY
52 // get speed in y direction
53 public function getSpeedY() : Number
55 return speedY;
56 } // end function getSpeedY
58 public function stopTimers() : void
61 } // end function stopTimer
62 } // end class Ball
63 } // end package
Fig. 17.12 | Move ball and set speed.
Scripting the Ball’s Motion
In the second frame of the Actions layer, add the code in Fig. 17.13. The new code moves the ball along a straight line in the direction the cannon was pointing when the mouse was clicked.
1 // Fig. 17.13: Fire ball on click event.
2 var firing : Boolean = false; // is ball firing?
3 var exploding : Boolean = false; // is ball exploding?
4 var fireRatio : Number = 0; // firing direction of ball
5 var speed : int = 30; // speed of ball
6 ball.setSpeedX( 0 );
7 ball.setSpeedY( 0, 0 );
9 // register function mouseDownHandler as MOUSE_DOWN event handler
10 stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
12 function mouseDownHandler( args : MouseEvent ) : void
14 // if the mouse is within the stage and the ball has not been fired or
15 // exploded yet, fire ball toward mouse cursor
16 if ( ( !firing ) && ( !exploding ) && ( stage.mouseX > 0 ) &&
17 ( stage.mouseY > 0 ) && ( stage.mouseX < 550 ) &&
18 ( stage.mouseY < 400 ) )
20 firing = true;
21 fireRatio = ( stage.mouseY - 200 ) / stage.mouseX;
22 ball.setSpeedX( speed );
23 ball.setSpeedY( speed, fireRatio );
24 } // end if
25 } // end function mouseDownHandler
Fig. 17.13 | Fire ball on click event.
This code initializes four variables—firing, exploding, fireRatio and speed (lines 2–5). Variables firing and exploding are set to false to signify that the ball is not moving or exploding. Later, we will set exploding to true and play a brief explosion ani-mation upon collision with the target or the blocker. Variables fireRatio and speed specify the ball’s firing direction and speed, respectively. The function addEventListener (line 10) registers the function mouseDownHandler (lines 12–25) as the event handler for the stage’s MOUSE_DOWN event. The if statement in the mouseDownHandler function (lines 16–24) checks that the ball is not currently in flight (!firing) or exploding (!exploding), and the mouse is within the stage (lines 16–18). If the condition evaluates to true, firing is set to true (line 20), and fireRatio is set to the mouse’s y-coordinate (relative to the cannon) divided by its x-coordinate (line 21). This fireRatio will move the ball toward the cursor’s position when it is fired. Lines 22–23 set the ball’s speed in the x-direction to speed, and the ball’s speed in the y-direction to speed * fireRatio. The expression speed * fireRatio returns the appropriate change in y based on the given change in x (speed).
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.