1.  2008 Pearson Education, Inc. All rights reserved. 1 17 Adobe ® Flash ® CS3: Building an Interactive Game

2.  2008 Pearson Education, Inc. All rights reserved. 2 Knowledge must come through action. — Sophocles It is circumstance and proper timing that give an action its character and make it either good or bad. — Agesilaus Life’s but a walking shadow, a poor player that struts and frets his hour upon the stage and then is heard no more: it is a tale told by an idiot, full of sound and fury, signifying nothing. — William Shakespeare

3.  2008 Pearson Education, Inc. All rights reserved. 3 Come, Watson, come! The game is afoot. — Sir Arthur Conan Doyle Cannon to right of them, Cannon to left of them, Cannon in front of them Volley’d and thunder’d. — Alfred, Lord Tennyson

4.  2008 Pearson Education, Inc. All rights reserved. 4 OBJECTIVES In this chapter you will learn:  Advanced ActionScript 3 in Flash CS3.  How to build on Flash CS3 skills learned in Chapter 16.  The basics of object-oriented programming in Flash CS3.  How to create a functional, interactive Flash game.  How to make objects move in Flash.  How to embed sound and text objects into a Flash movie.  How to detect collisions between objects in Flash.

5.  2008 Pearson Education, Inc. All rights reserved. 5 17.1 Introduction 17.2 Object-Oriented Programming 17.3 Objects in Flash 17.4 Cannon Game: Preliminary Instructions and Notes 17.5 Adding a Start Button 17.6 Creating Moving Objects 17.7 Adding the Rotating Cannon

6.  2008 Pearson Education, Inc. All rights reserved. 6 17.8 Adding the Cannonball 17.9 Adding Sound and Text Objects to the Movie 17.10Adding the Time Counter 17.11 Detecting a Miss 17.12 Adding Collision Detection 17.13 Finishing the Game 17.14 ActionScript 3.0 Elements Introduced in This Chapter

7.  2008 Pearson Education, Inc. All rights reserved. 7 17.1 Introduction Adobe Flash CS3 is capable of building large, interactive applications In the cannon game, the player has a limited amount of time to hit every part of a moving target. Hitting the target increases the remaining time, and missing the target or hitting the blocker decreases it.

8.  2008 Pearson Education, Inc. All rights reserved. 8 Fig. 17.1 | Ball fired from the cannon and hitting the target. (Part 1 of 4.)

9.  2008 Pearson Education, Inc. All rights reserved. 9 Fig. 17.1 | Ball fired from the cannon and hitting the target. (Part 2 of 4.)

10.  2008 Pearson Education, Inc. All rights reserved. 10 Fig. 17.1 | Ball fired from the cannon and hitting the target. (Part 3 of 4.)

11.  2008 Pearson Education, Inc. All rights reserved. 11 Fig. 17.1 | Ball fired from the cannon and hitting the target. (Part 4 of 4.)

12.  2008 Pearson Education, Inc. All rights reserved. 12 17.2 Object-Oriented Programming ActionScript 3.0 – An object-oriented scripting language that closely resembles JavaScript ActionScript class – A collection of characteristics known as properties, and behaviors known as functions You can create your own classes or use any of Flash’s predefined classes A symbol stored in the Library is a class. A class can be used to create many instances, or objects, of the class

13.  2008 Pearson Education, Inc. All rights reserved. 13 17.2 Object-Oriented Programming Dragging a symbol from the Library onto the stage creates an instance (object) of the class Multiple instances of one class can exist on the stage at the same time Any changes made to an individual instance (resizing, rotating, etc.) affect only that one instance Changes made to a class (accessed through the Library ), affect every instance of the class

14.  2008 Pearson Education, Inc. All rights reserved. 14 17.3 Objects in Flash Introduction to object-oriented programming in Flash Dynamic positioning (i.e., moving an object)

15.  2008 Pearson Education, Inc. All rights reserved. 15 Fig. 17.2 | Dynamic positioning.

16.  2008 Pearson Education, Inc. All rights reserved. 16 17.3 Objects in Flash (Cont.) The properties x and y refer to the x- and y-coordinates of an object import – Allows you to use built-in classes of ActionScript 3.0, such as MouseEvent and Sprite Instance variables have scope through the entire class Movie clips in the Library can be placed on the stage using the addChild function The addEventListener function registers an event handler to be called whenever an event is triggered

17.  2008 Pearson Education, Inc. All rights reserved. 17 Outline BoxCode.as (1 of 2) By declaring the two Box objects at the beginning of the class, they become instance variables and have scope through the entire class.

18.  2008 Pearson Education, Inc. All rights reserved. 18 Outline BoxCode.as (2 of 2) The addChild function adds the boxes to the stage. The addEventListener function registers the handleClick function as the event handler for the MOUSE_DOWN event.

19.  2008 Pearson Education, Inc. All rights reserved. 19 17.4 Preliminary Instructions and Notes The stop action at the end of a section ensures that only the desired animation will be played ActionScript programmers often create an Actions layer to better organize Flash movies. Before writing any ActionScript to build the game, label each frame in the main timeline to represent its purpose in the game In our game, we use an Actions layer to hold any ActionScript attached to a specific frame. ActionScript programmers often create an Actions layer to better organize Flash movies. Add keyframes in the second and third frame of the Actions layer, and place a stop function in all three frames.

20.  2008 Pearson Education, Inc. All rights reserved. 20 17.5 Adding a Start Button Most games start with an introductory animation.

21.  2008 Pearson Education, Inc. All rights reserved. 21 Outline Handle playButton click event. (1 of 1)

22.  2008 Pearson Education, Inc. All rights reserved. 22 17.6 Creating Moving Objects The first parameter of a Timer constructor is the delay between timer events in milliseconds The second parameter is the number of times the Timer should repeat – A value of 0 means that the Timer will run indefinitely

23.  2008 Pearson Education, Inc. All rights reserved. 23 Outline Target.as (1 of 4) The first parameter of the Timer constructor is the delay between timer events in milliseconds. The second parameter is the number of times the Timer should repeat. A value of 0 means that the Timer will run indefinitely. We specify that moveTargetTimer is a Timer using the colon syntax. This activates moveTargetTimer, which in turn calls the moveTarget function.

24.  2008 Pearson Education, Inc. All rights reserved. 24 Outline Target.as (2 of 4)

25.  2008 Pearson Education, Inc. All rights reserved. 25 Outline Target.as (3 of 4)

26.  2008 Pearson Education, Inc. All rights reserved. 26 Outline Target.as (4 of 4)

27.  2008 Pearson Education, Inc. All rights reserved. 27 17.6 Creating Moving Objects (Cont.) We can enable the target now on stage, target, to move vertically simply by adding the following calling methods setSpeed, setUpDown and setHitCounter in the second frame of the Actions layer: target.setSpeed( 8 ); target.setUpDown( -1 ); target.setHitCounter( 0 );

28.  2008 Pearson Education, Inc. All rights reserved. 28 17.6 Creating Moving Objects (Cont.) The code to add the blocker is very similar to that of the Target.as

29.  2008 Pearson Education, Inc. All rights reserved. 29 Outline Blocker.as (1 of 3)

30.  2008 Pearson Education, Inc. All rights reserved. 30 Outline Blocker.as (2 of 3)

31.  2008 Pearson Education, Inc. All rights reserved. 31 Outline Blocker.as (3 of 3)

32.  2008 Pearson Education, Inc. All rights reserved. 32 17.6 Creating Moving Objects (Cont.) Add the following code in the second frame of the Actions layer to set the speed and direction of the blocker: blocker.setSpeed( 5 ); blocker.setUpDown( 1 );

33.  2008 Pearson Education, Inc. All rights reserved. 33 Fig. 17.7 | Oscillating blocker and target.

34.  2008 Pearson Education, Inc. All rights reserved. 34 17.7 Adding the Rotating Cannon Many Flash applications include animation that responds to mouse cursor motions

35.  2008 Pearson Education, Inc. All rights reserved. 35 Fig. 17.8 | Cannon position.

36.  2008 Pearson Education, Inc. All rights reserved. 36 Outline Register mouseInHandler as MOUSE_MOVE event handler. The Math object provides us with an arc tangent function: Math.atan2(y, x). This function returns a value, in radians, equal to the angle opposite side y and adjacent to side. The constant Math.PI provides the value of л.

37.  2008 Pearson Education, Inc. All rights reserved. 37 Fig. 17.10 | Trigonometry of the cannon object.

38.  2008 Pearson Education, Inc. All rights reserved. 38 Error-Prevention Tip 17.1 If your code is not working and no error message displays, ensure that every variable points to the correct object. One incorrect reference can prevent an entire function from operating correctly.

39.  2008 Pearson Education, Inc. All rights reserved. 39 17.7 Adding the Rotating Cannon (Cont.) You can hide the Cannon layer by selecting the show/hide selector (dot) in the portion of the Timeline to the right of the layer name – A red x should appear in place of the dot to indicate that the layer is hidden while editing the movie – The layer will still be visible when the movie is viewed – Clicking the show/hide x again makes the Cannon layer visible.

40.  2008 Pearson Education, Inc. All rights reserved. 40 Fig. 17.11 | Using selectors to show/hide layers.

41.  2008 Pearson Education, Inc. All rights reserved. 41 17.8 Adding the Cannonball Ball class has three properties – The speed in the x-direction, speedX – The speed in the y-direction, speedY – A timer that moves the ball, moveBallTimer.

42.  2008 Pearson Education, Inc. All rights reserved. 42 Outline Ball.as (1 of 3) The Number type is ActionScript 3’s floating-point variable type.

43.  2008 Pearson Education, Inc. All rights reserved. 43 Outline Ball.as (2 of 3)

44.  2008 Pearson Education, Inc. All rights reserved. 44 Outline Ball.as (3 of 3) The stopTimers function allows us to stop the moveBallTimer from outside of the class.

45.  2008 Pearson Education, Inc. All rights reserved. 45 17.8 Adding the Cannonball (Cont.) Adding the code on the following slide to the second frame of the Actions layer will move the ball along a straight line in the direction the cannon was pointing when the mouse was clicked

46.  2008 Pearson Education, Inc. All rights reserved. 46 Outline Fire ball on click event.

47.  2008 Pearson Education, Inc. All rights reserved. 47 17.9 Adding Sound and Text Objects to the Movie Lock a layer by clicking the lock/unlock selector (dot) to the right of the layer name in the Timeline When a layer is locked, its elements are visible, but they cannot be edited – Allows you to use one layer’s elements as visual references for designing another layer, while ensuring that no elements are moved unintentionally To unlock a layer, click the lock symbol to the right of the layer name in the Timeline

48.  2008 Pearson Education, Inc. All rights reserved. 48 Fig. 17.14 | Lock/Unlock layers.

49.  2008 Pearson Education, Inc. All rights reserved. 49 17.10 Adding the Time Counter Time, whether increasing or decreasing, is an important aspect of many games and applications In this section, we discuss adding a time counter that decreases as the game progresses. Add the following code to the second frame of the Actions layer to implement a timer

50.  2008 Pearson Education, Inc. All rights reserved. 50 Outline Timer countdown. The timer’s interval is set to 1 second, and it is set to repeat indefinitely. The time is displayed in timeText The player has lost if they have no time left and the ball has not been fired

51.  2008 Pearson Education, Inc. All rights reserved. 51 17.10 Adding the Time Counter (Cont.) Add the following code to the third frame of the Actions layer to implement an end game

52.  2008 Pearson Education, Inc. All rights reserved. 52 Outline Stops all timers and sends objects into hidden frame. The event listeners must be stopped, as the event handler functions do not exist in the third frame. These elements should be hidden, because they are not necessary after the game has finished.

53.  2008 Pearson Education, Inc. All rights reserved. 53 17.10 Adding the Time Counter (Cont.) Winner Boolean keeps track of whether the player has won or lost the game To do this, add the following code to the second frame of the Actions layer var winner : Boolean = false; Next, add the following code to the third frame of the Actions layer – This if … else statement checks the winner variable – If winner is true, the text movie clip goes to the win frame – Otherwise the text movie clip goes to the lose frame

54.  2008 Pearson Education, Inc. All rights reserved. 54 Outline Check winner and show "Winner" or "Game Over".

55.  2008 Pearson Education, Inc. All rights reserved. 55 17.11 Detecting a Miss To detect when the ball has moved outside the bounds of the stage, add the following code to the second frame of the Actions layer

56.  2008 Pearson Education, Inc. All rights reserved. 56 Outline Detecting a miss. Check the ball’s x- and y- coordinates

57.  2008 Pearson Education, Inc. All rights reserved. 57 17.11 Detecting a Miss (Cont.) To run the checkBall function at a regular interval, add the following code to the second frame of the Actions layer. // Check ball at 33 ms intervals var checkBallTimer : Timer = new Timer( 33, 0 ); This timer only needs to run after the ball has been fired, so we will start it in the mouseDownHandler function by inserting the following code: // call function checkBall as checkBallTimer event handler checkBallTimer.addEventListener( TimerEvent.TIMER, checkBall ); checkBallTimer.start(); // start Timer We must stop this timer at the end of the game by adding the following code to the third frame of the Actions layer: checkBallTimer.stop();

58.  2008 Pearson Education, Inc. All rights reserved. 58 17.12 Adding Collision Detection Before we add collision detection to the target and blocker, we add a function that handles the actions common to all of our collisions Add the following code to the second frame of the Actions layer

59.  2008 Pearson Education, Inc. All rights reserved. 59 Outline Common actions after collision. (1 of 2)

60.  2008 Pearson Education, Inc. All rights reserved. 60 Outline Common actions after collision. (2 of 2)

61.  2008 Pearson Education, Inc. All rights reserved. 61 17.12 Adding Collision Detection (Cont.) The onBallContact function uses explodeTimer. We must define this in the second frame of the Actions layer: // Delay for ball explosion var explodeTimer : Timer = new Timer( 266, 1 ); Stop this timer at the end of the game, by adding the following code to the third frame of the Actions layer explodeTimer.stop();

62.  2008 Pearson Education, Inc. All rights reserved. 62 17.12 Adding Collision Detection (Cont.) explodeTimer calls the resetBall function Add the following code to the second frame of the Actions layer

63.  2008 Pearson Education, Inc. All rights reserved. 63 Outline Reset the ball to its original position.

64.  2008 Pearson Education, Inc. All rights reserved. 64 17.12 Adding Collision Detection (Cont.) Flash has a built-in collision detection function that determines whether two objects are touching The function object1.hitTestObject( object2 ) returns true if any part of object1 touches object2 Many games must detect collisions between moving objects to control game play or add realistic effects In this game, we rely on collision detection to determine if the ball hits either the blocker or the target To implement collision detection, add the following code to the second frame of the Actions layer

65.  2008 Pearson Education, Inc. All rights reserved. 65 Outline Detect collision using hitTestObject. (1 of 2)

66.  2008 Pearson Education, Inc. All rights reserved. 66 Outline Detect collision using hitTestObject. (2 of 2)

67.  2008 Pearson Education, Inc. All rights reserved. 67 17.12 Adding Collision Detection (Cont.) To call collisionDetection at regular intervals, add the following to the beginning of the checkBall function: collisionDetection();

68.  2008 Pearson Education, Inc. All rights reserved. 68 Fig. 17.22 | ActionScript 3.0 elements.