2004 Prentice Hall, Inc. All rights reserved. Chapter 18 – Macromedia Flash MX 2004: Building an Interactive Game Outline 18.1 Introduction 18.2 Object-Oriented

2004 Prentice Hall, Inc. All rights reserved.

Chapter 18 – Macromedia Flash MX 2004: Building an Interactive Game

Outline18.1 Introduction18.2 Object-Oriented Programming18.3 Objects in Flash18.4 Preliminary Instructions and Notes

18.4.1 Manual Coding18.4.2 Labeling Frames18.4.3 Using the Actions Layer

18.5 Adding a Start Button18.6 Creating Moving Objects

18.6.1 Adding the Target18.6.2 Adding the Blocker

18.7 Adding the Rotating Cannon18.7.1 Coding the Cannon’s Rotation18.7.2 Hiding the Cannon Layer


Macromedia Flash Case Study: Building an Interactive Game

18.8 Adding the Cannon Ball18.8.1 Initializing the Ball’s Motion Variables18.8.2 Scripting the Ball’s Motion

18.9 Adding Sound and Text Objects to the Movie18.10 Adding the Time Counter

18.10.1 Adding the Time Box18.10.2 Creating a Final Animation Sequence

18.11 Detecting a Miss18.12 Creating a Function18.13 Adding Collision Detectors

18.13.1 Adding Collision Detection to the Blocker18.13.2 Adding Collision Detection to the Target

18.14 Finishing the Game18.15 ActionScript 2.0 Elements Introduced in This Chapter


Objectives

• In this tutorial, you will learn:– To learn advanced ActionScript in Flash MX 2004.

– To build on Flash skills learned in Chapter .

– To create a functional, interactive Flash application.


18.1 Introduction

• Macromedia Flash MX 2004– Useful for creating short animations

– Capable of building larger, interactive applications


18.2 Object-Oriented Programming

• ActionScript 2.0– Object-oriented scripting language

• Classes

– A collection of properties and methods

• Instance

– One member of a class

– Closely resemble JavaScript


18.3 Objects in Flash

• Dynamic position– Create new Flash document

– Draw black box and convert it to a movie clip symbol

– Drag another instance of movie clip from Library onto stage

– Change instance names of first box to box1 and the other to box2

– Add script in Actions panel

– Test movie


18.4 Preliminary Instructions and Notes

• Template file for the game is named cannontemplate.fla– Chapter 18 directory from CD-ROM

• Play different sections of movie clips by referencing frame labels


18.4.1 Manual Coding

• Manually enter code into the Actions panel• Use ActionScript Dictionary from Help


18.4.2 Labeling Frames

• Label each frame in main timeline to represent its purpose in the game

• Select first frame of Labels layer• Enter intro into the Frame Label field in the

Property inspector• Label second frame game and third frame end


18.4.3 Using the Actions Layer

• Create an Actions layer to make larger applications more compartmentalized

• Add stop actions to all three frames in the Actions layer


18.5 Adding a Start Button

• Create simple starting frame for game– Select first frame of the Intro/End layer

– Drag introText movie clip and the Play button onto stage

– Resize Play button

– Select Play button and add script


18.5 Adding a Start Button

Fig. 18.1 Positioning the introText movie clip and Play button.


18.6.1 Adding the Target Object

• Create moving target– Position the target– onClipEvent

• Event handler that detects when the specified event occurs

• Runs when the clip first loads

2004 Prentice Hall, Inc.All rights reserved.

OutlineOutline

Oscillating Object(1 of 1)

1 onClipEvent( enterFrame )

2 {

3 // changes direction based on location

4 if ( this._y > 325 ) {

5 direction = -1;

6 } else if ( this._y < 75 ) {

7 direction = 1;

8 } // end if...else if statement

9

10 // increases the target’s y coordinate by

11 // speed times direction ( 1 or -1 )

12 this._y += speed * direction;

13

14 } // end of onClipEvent( enterFrame )


18.6.2 Adding the Blocker

• Moving target object– Block the ball

– Add difficulty to the game

– Select frame of Blocker layer

– Drag an instance of the blocker object onto stage

– Copy script from target object’s Actions panel

– Paste script in blocker’s Actions panel


OutlineOutline

Adding Oscillation to the blocker object(1 of 1)

1 onClipEvent( load )

2 {

3 // initializes two variables

4 direction = 1;

5 speed = 2;


7


9 {

10 // changes direction based on location

11 if ( this._y > 325 ) {

12 direction = -1;

13 } else if ( this._y < 75 ) {

14 direction = 1;

15 } // end of if...else if

16 this._y += speed * direction;



18.6.2 Adding the Blocker

Fig. 18.4 Oscillating blocker and target.


18.7 Adding the Rotating Cannon

• Cursor-responsive effect– Select second frame of Cannon layer

– Drag Cannon object from Library onto the stage


18.7 Adding the Rotating Cannon

Fig. 18.5 Cannon position.


18.7.1 Coding the Cannon’s Rotation

• Select the canon– Open its Actions panel

– Add code in Fig. 18.6• Rotates the cannon barrel to point toward cursor

– Event handler onClipEvent• Executes every time the mouse moves


OutlineOutline

Rotating the cannon object(1 of 1)

1 onClipEvent( mouseMove )

2 {

3 // sets x and y to corresponding cursor position on stage

4 x = _root._xmouse;

5 y = _root._ymouse;

6

7 // determines whether the cursor is in stage (width: 550 height: 400)

8 if ( x > 0 && y > 0 && x < 550 && y < 400 ) {

9

10 // adjusts the cannon’s rotation based on cursor position.

11 angle = Math.atan2( ( y - 200 ), x );

12 this._rotation = angle * ( 180 / Math.PI );

13 } // end of if statement

14 } // end of onClipEvent( mouseMove )


18.7.1 Coding the Cannon’s Rotation

actualcoordinates(0, 200)

x

y

relative to cursor(0, 0)

actual position: (75, 250)

relative position (to cannon): (75, 50)

Fig. 18.7 Rotating the cannon object.


18.7.2 Hiding the Cannon Layer

• Select Show/Hide dot in the layer name portion of timeline– Red x

• Indicate that layer is invisible for editing

• Clicking the Show/Hide x again will make the Cannon layer visible


18.7.2 Hiding the Cannon Layer

Show/Hide selectors Hidden layer

Fig. 18.8 Show/Hide layers.


18.8 Adding the Cannon Ball

• Drag ball symbol from the Library onto stage in frame 2 of Ball layer


OutlineOutline

Setting the ball object’s fire ratio(1 of 1)

1 onClipEvent( mouseDown )

2 {

3 // sets x and y to corresponding cursor position on stage

4 x = _root._xmouse;

5 y = _root._ymouse;

6

7 // fires ball if conditions are true

8 if ( ( !fire ) && ( !exploding ) &&

9 x > 0 && y > 0 && x < 550 && y < 400 ) {

10

11 fire = true;

12 fireRatio = ( y - 200 ) / x;


14 } // end of onClipEvent( mouseDown )


OutlineOutline

Moving the fired ball object(1 of 1)


2 {

3 // changes the fired bullet’s position

4 if ( ( !exploding ) && fire ) {

5 this._x += speed;

6 this._y += speed * fireRatio;

7

8 // returns ball to starting position

9 } else if ( ( !exploding ) && ( !fire ) ) {

10 this._x = 0;

11 this._y = 200;




18.9 Adding Sound and Text Objects to the Movie

• Add keyframe to frame 2 of Text layer• Drag text symbol from Library into stage• Add keyframe to second frame to Sound and

ScoreText layers• Add instance of sound and scoreText objects• Lock and unlock layers by clicking Lock/Unlock


18.9 Adding Sound and Text Objects to the Movie

Lock/Unlock selector

Fig. 18.11 Locking/Unlocking layers.


18.10 Adding the Time Counter

• Time– An important aspect of many games and applications


18.10.1 Adding the Time Box

• Remaining time– Displayed in dynamic text box in bottom-left corner


OutlineOutline

Time-decrease code(1 of 1)

1 onClipEvent( load )

2 {

3 // initializes variable time

4 time = 10;

5 } // end of onClipEvent( load )

6


8 {

9 // decreases time and changes text in timeBox

10 time -= ( 1 / 24 );

11 this.timeText.text = "TIME :" + parseInt( time );

12

13 // plays end sequence

14 if ( time < 0 ) {

15 _global.winner = false;

16 _root.gotoAndPlay( "end" );




18.10.2 Creating a Final Animation Sequence

• Final animation sequence– Informs user of the outcome of the game


18.11 Detecting a Miss

• Detects when the ball has been fired off the stage


OutlineOutline

Miss detection in Flash(1 of 1)

1 if ( this._x < 0 || this._y < 0 || this._x > 550 || this._y > 400 )

2 {

3 // setting fire to false returns ball to original position

4 fire = false;

5

6 // plays appropriate sound and score sequences

7 _root.text.gotoAndPlay( "miss" );

8 _root.scoreText.gotoAndPlay( "minusTwo" );

9 _root.sound.gotoAndPlay( "miss" );

10

11 // changes variable time in timeBox

12 _root.textBox.time -= 2;



18.12 Creating a Function

• Functions in Flash– Block of code that can be called multiple times

– Used when specific task needs to be repeated many times in different parts of movie

– Bound to object in which it is created

– Global function• Accessible from any part of movie


OutlineOutline

Function creation in Flash(1 of 2)

1 _global.ballContact = function( timeChange )

2 {

3 // determines whether ball has been fired and is not exploding

4 if ( ( !exploding ) && ( fire ) ) {

5

6 // adjusts variables to play exploding sequence

7 exploding = true;

8 fire = false;

9 _root.timeBox.time += timeChange;

10 _root.ball.gotoAndPlay( "explode" );

11

12 // plays appropriate sound and text based on timeChange

13 if ( timeChange < 0 ) {

14 _root.sound.gotoAndPlay( "blocked" );

15 _root.text.gotoAndPlay( "blocked" );

16

17 if ( timeChange == -5 ) {

18 _root.scoreText.gotoAndPlay( "minusFive" );


20


OutlineOutline

Function creation in Flash(2 of 2)

21 } else if ( timeChange >= 0 ) {

22 _root.sound.gotoAndPlay( "hit" );

23 _root.text.gotoAndPlay( "hit" );

24

25 if ( timeChange == 5 ) {

26 _root.scoreText.gotoAndPlay( "plusFive" );

27 } else if ( timeChange == 10 ) {

28 _root.scoreText.gotoAndPlay( "plusTen" );

29 } else if ( timeChange == 20 ) {

30 _root.scoreText.gotoAndPlay( "plus20" );

31 } // end of if...else if statement

32 }// end of if...else if statement.

33

34 return true;

35 }// end of if statement

36

37 return false;

38 }// end of function


18.13.1 Adding Collision Detection to the Blocker

• Built-in collision detection method– Determines whether two objects are overlapping


18.13.2 Adding Collision Detection to the Target

• Add code to target that increases player’s remaining time each time target is hit


OutlineOutline

Collision detection in Flash(1 of 1)


2 {

3 newHit = false;

4

5 // tests for collision

6 if ( this.hitTest( _root.ball ) ) {

7

8 // newHit will be true if ballContact() returns true

9 newHit = ballContact( 5 );

10

11 // determines whether newHit is true

12 if ( newHit ) {

13

14 // increments hitCounter and plays target’s hit animation

15 _root.target.hitCounter += 1;

16 this.gotoAndPlay( "hit" );





18.14 Finishing the Game

• hitCounter is greater than or equal to 5– Player has destroyed the entire target

– Global variable winner is set to true

– Frame labeled end is played


18.15 ActionScript 2.0 Elements Introduced in This Chapter

Action Description object._x Property that refers to an object’s x-coordinate. object._y Property that refers to an object’s y-coordinate. _xmouse Property that gives the mouse’s x-coordinate. _ymouse Property that gives the mouse’s y-coordinate. object._rotation Property that refers to the rotation of an object. text Property that refers to the text in a text field. this References the object to which the code is attached. _root Creates a reference path that starts at the main timeline. _global Declares a global variable or function. function() Declares a function. object1. hitTest("object2" )

Returns true if object1 and object2 are overlapping.

parseInt( n ) Returns number n without decimals. onClipEvent( event ) Event handler that detects when the specified event, such as load,

enterFrame or mouseMove, occurs. Math Built in object that contains useful methods and properties (refer to

Flash’s ActionScript Dictionary for a full list). Fig. 18.16 ActionScript 2.0 elements.

Documents

2004 Prentice Hall, Inc. All rights reserved. Chapter 18 – Macromedia Flash MX 2004: Building an Interactive Game Outline 18.1 Introduction 18.2 Object-Oriented