Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Adding the Cannonball - Adobe Flash CS3

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Flash CS3: Building an Interactive Game

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Adding the Cannonball - Adobe Flash CS3

In this section, we add the cannonball to our game.

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.

 

3    package

4    {

 

5          // import relevant classes

 

6          import flash.display.MovieClip;

 

7          import flash.events.TimerEvent;

 

8          import flash.utils.Timer;

9

10         public class Ball extends MovieClip

11         {

 

12               var speedX : int; // speed in x-direction

 

13               var speedY : Number; // speed in y-direction

14          

15               // Create Timer object to move ball

 

16               var moveBallTimer : Timer = new Timer( 33, 0 );

17          

18               // Ball constructor starts moveBallTimer

 

19               public function Ball() : void

20               {

 

21                      // call function moveBall as moveBallTimer event handler

 

22                      moveBallTimer.addEventListener(

23                            TimerEvent.TIMER, moveBall );

 

24                      moveBallTimer.start();

 

25               } // end Ball constructor

26

27               // update the x and y coordinates using the specific speeds

 

28               private function moveBall( t : TimerEvent )

29               {

 

30                      x += speedX;

 

31                      y += speedY;

 

32               } // end function moveBall

33

34               // set speed in x direction

 

35               public function setSpeedX( v : int )

36               {

 

37                      speedX = v;

 

38               } // end function setSpeedX

 

 

40                // get speed in x direction

 

41                public function getSpeedX() : int

42                {

 

43                      return speedX;

 

44                } // end function getSpeedX

45

46                // set speed in y direction

 

47                public function setSpeedY( v : int, fireRatio : Number )

48                {

 

49                      speedY = v * fireRatio;

 

50                } // end function setSpeedY

51

52                // get speed in y direction

 

53                public function getSpeedY() : Number

54                {

 

55                      return speedY;

 

56                } // end function getSpeedY

57

58                public function stopTimers() : void

59                {

 

60                      moveBallTimer.stop();

 

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

8

9    // register function mouseDownHandler as MOUSE_DOWN event handler

 

10   stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );

11          

12   function mouseDownHandler( args : MouseEvent ) : void

13   {

 

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

19         {

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).


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.