1.  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 18.4.1 Manual Coding 18.4.2 Labeling Frames 18.4.3 Using the Actions Layer 18.5 Adding a Start Button 18.6 Creating Moving Objects 18.6.1 Adding the Target 18.6.2 Adding the Blocker 18.7 Adding the Rotating Cannon 18.7.1 Coding the Cannon’s Rotation 18.7.2 Hiding the Cannon Layer

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

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

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

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

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

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

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

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

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

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

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

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

14.  2004 Prentice Hall, Inc. All rights reserved. Outline Oscillating Object (1 of 1)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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