 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 Programming 18.3 Objects in Flash 18.4 Preliminary Instructions and Notes Manual Coding Labeling Frames Using the Actions Layer 18.5 Adding a Start Button 18.6 Creating Moving Objects Adding the Target Adding the Blocker 18.7 Adding the Rotating Cannon Coding the Cannon’s Rotation Hiding the Cannon Layer

 2004 Prentice Hall, Inc. All rights reserved. Macromedia Flash Case Study: Building an Interactive Game 18.8 Adding the Cannon Ball Initializing the Ball’s Motion Variables Scripting the Ball’s Motion 18.9 Adding Sound and Text Objects to the Movie Adding the Time Counter Adding the Time Box Creating a Final Animation Sequence Detecting a Miss Creating a Function Adding Collision Detectors Adding Collision Detection to the Blocker Adding Collision Detection to the Target Finishing the Game ActionScript 2.0 Elements Introduced in This Chapter

 2004 Prentice Hall, Inc. All rights reserved. Objectives In this tutorial, you will learn: –To learn advanced ActionScript in Flash MX –To build on Flash skills learned in Chapter. –To create a functional, interactive Flash application.

 2004 Prentice Hall, Inc. All rights reserved Introduction Macromedia Flash MX 2004 –Useful for creating short animations –Capable of building larger, interactive applications

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved Manual Coding Manually enter code into the Actions panel Use ActionScript Dictionary from Help

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved Adding a Start Button Fig. 18.1Positioning the introText movie clip and Play button.

 2004 Prentice Hall, Inc. All rights reserved 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. Outline Oscillating Object (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved. Outline Adding Oscillation to the blocker object (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved Adding the Blocker Fig. 18.4Oscillating blocker and target.

 2004 Prentice Hall, Inc. All rights reserved Adding the Rotating Cannon Cursor-responsive effect –Select second frame of Cannon layer –Drag Cannon object from Library onto the stage

 2004 Prentice Hall, Inc. All rights reserved Adding the Rotating Cannon Fig. 18.5Cannon position.

 2004 Prentice Hall, Inc. All rights reserved Coding the Cannon’s Rotation Select the canon –Open its Actions panel –Add code in Fig Rotates the cannon barrel to point toward cursor –Event handler onClipEvent Executes every time the mouse moves

 2004 Prentice Hall, Inc. All rights reserved. Outline Rotating the cannon object (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved Coding the Cannon’s Rotation actual coordinates (0, 200)  x y relative to cursor (0, 0) actual position: (75, 250) relative position (to cannon): (75, 50) Fig. 18.7Rotating the cannon object.

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved Hiding the Cannon Layer Show/Hide selectorsHidden layer Fig. 18.8Show/Hide layers.

 2004 Prentice Hall, Inc. All rights reserved Adding the Cannon Ball Drag ball symbol from the Library onto stage in frame 2 of Ball layer

 2004 Prentice Hall, Inc. All rights reserved. Outline Setting the ball object’s fire ratio (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved. Outline Moving the fired ball object (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved Adding Sound and Text Objects to the Movie Lock/Unlock selector Fig Locking/Unlocking layers.

 2004 Prentice Hall, Inc. All rights reserved Adding the Time Counter Time –An important aspect of many games and applications

 2004 Prentice Hall, Inc. All rights reserved Adding the Time Box Remaining time –Displayed in dynamic text box in bottom-left corner

 2004 Prentice Hall, Inc. All rights reserved. Outline Time-decrease code (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved Creating a Final Animation Sequence Final animation sequence –Informs user of the outcome of the game

 2004 Prentice Hall, Inc. All rights reserved Detecting a Miss Detects when the ball has been fired off the stage

 2004 Prentice Hall, Inc. All rights reserved. Outline Miss detection in Flash (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved. Outline Function creation in Flash (1 of 2)

 2004 Prentice Hall, Inc. All rights reserved. Outline Function creation in Flash (2 of 2)

 2004 Prentice Hall, Inc. All rights reserved Adding Collision Detection to the Blocker Built-in collision detection method –Determines whether two objects are overlapping

 2004 Prentice Hall, Inc. All rights reserved Adding Collision Detection to the Target Add code to target that increases player’s remaining time each time target is hit

 2004 Prentice Hall, Inc. All rights reserved. Outline Collision detection in Flash (1 of 1)

 2004 Prentice Hall, Inc. All rights reserved 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

 2004 Prentice Hall, Inc. All rights reserved ActionScript 2.0 Elements Introduced in This Chapter