Flash Multimedia Game Design

Flash 8 Multimedia: Game Design Sydney CEO
Flash
Multimedia:
Game
Design
Prepared by: Kelly Short
Kelly Short 1
Contents
Section Page
1 The Scene Panel 6

2 Action Panel 7
3 Responding to a key action 8

4 HitTest 11
5 Responding to a hitTest 12
6 Adding a score 14
7 Shooting 15
8 Adding sound to movement 17
9 Turning on and off sounds 18

10 The Final Code 20
Kelly Short 2
Screen Layout
Create a new Flash Document
Lists recently opened items
Kelly Short 3
Library
Timeline
Properties Bar
Stage
Toolbar
Kelly Short 4
The Timeline
Empty Key Frame
Key Frame
Empty Frame
Layer Name
Onion Skinning
Scene and Symbol

New Layer, Motion Guide, Layer Folder
The Tools
Select (V) Sub Select (A)
Free Transform Tool (Q) Gradient Fill (F)
Line Tool (N) Lasso (L)
Pen Tool (P) Text (T)

Oval (O) Rectange (R)
Pencil (Y) Paintbrush (B)
Ink Bucket Tool (S) Paint Bucket (K)
Eye Dropper (I) Erase (E)
Hand Pan(H) Zoom (Z)
Stroke Colour
Fill Colour
Black and White, No colour, Swap Colours
Tool related Options
Kelly Short 5
The Scene Panel

In order to create any multimedia product, you must cre-
ate multiple scenes, and navigate between them.
Open the scene panel by going to Window—>Other

Panels—>Scene
This lists the

scenes that are
within your
document.
Double click to
change the
names
Delete the
scene
Duplicate the
current scene Add a new
scene
Kelly Short 6
The Action Panel
Add an action
script statement
States what object you

Lists all the action have added the action
script statements, script to
double click to add
Kelly Short 7
Responding to a key action

Begin
Create a key Listener
Which Key
is Pressed?
Print Message to say Print Message to say Print Message to say Print Message to say
“Right” “Left” “Up” “Down”
End
Draw a ball and convert it to a symbol (movie clip)

Call the ball “Ball”
Because there can be multiple instances of the one symbol, you also need to
name the instance of the ball that you are using.
With the ball selected, type in

“Ball1” into the instance name
Kelly Short 8
The following is the code to add the keylistener: (line numbers are for reference only)
Add this as a frame script
1. /* =======================Key Listener=============================*/
2. var myListener:Object = new Object();
3.
4. //=============================================on key release
5. myListener.onKeyUp = function () {
6. switch (Key.getCode()) {
7. case Key.RIGHT :
8.
9. break;
10. case Key.LEFT :
11.
12. break;
13. case Key.UP:
14.
15. break;
16. case Key.DOWN:
17.
18. break;
19. }//end switch
20.
21. }//end function
22.
23. Key.addListener(myListener);
At the moment though, this does not do anything aside from add a listener. It doesn’t actually respond to the
listener, because you haven’t programmed it to do anything.
On the following lines, insert the following code:

8. trace ("Right");
11. trace ("Left");
14. trace ("Up");
17. trace ("Down");
Your code should now look like this: (Changes in bold)
/* =============Key Listener============================================*/
var myListener:Object = new Object();
//=============================================on key release
myListener.onKeyUp = function () {
switch (Key.getCode()) {
case Key.RIGHT :
trace ("RIGHT");
break;
case Key.LEFT :
trace ("Left");
break;
case Key.UP:
trace ("Up");
break;
case Key.DOWN:
trace ("Down");
break;
}//end switch
}//end function
Key.addListener(myListener);
Kelly Short 9
Of course, the trace function is simply there to see if your ball will actually move. In order
to make it move, you have to program it to. Add the bold sections to your code
/* =======================Key Listener==================================*/
//=============================================on key release
case Key.RIGHT :
_root.ball1._x= _root.ball1._x + 10; //moves ball 10 right of
//current x position of ball
break;
case Key.LEFT :
_root.ball1._x= _root.ball1._x - 10;//moves ball 10 left of cur
//rent x position of ball
break;
case Key.UP:
_root.ball1._y= _root.ball1._y - 10;//moves ball 10 UP of cur
//rent y position of ball
trace ("Up");
break;
case Key.DOWN:
trace ("Down");
_root.ball1._y= _root.ball1._y + 10;//moves ball 10 Down of cur
//rent y position of ball
break;
}//end switch
}//end function
Kelly Short 10
Hit Test
http://www.kirupa.com/developer/actionscript/hittest.htm
Select the circle movie clip. Once the circle movie clip has been se-
lected, click the Instance tab to display the Instance panel. In the
Name field of the Instance panel, enter the word circle
Because it takes at least two objects to create a collision, you will need to name the second object: the square
movie clip. Select the blue square and give it the name: block. You would enter the word 'block' in the Instance
panel just like you did for the circle movie clip in Step 1
Once you named the block movie clip, it is time to add the actions. Right click on the circle movie clip and
select Actions. The Object Actions window will appear. Copy and paste the following code into that window:
onClipEvent (enterFrame) {
The code following If the two shapes
this statement will if (_root.circle, hitTest(_root.block)) {
are colliding
be enabled each
time the frame of _root.text = "Collision Detected";
the movie clip
loads. Basically, } else {
enterFrame, en-
ables the action to _root.text = "No Collision";
loop continuously.
}
Displays in the
text box on the
screen
Kelly Short 11
Responding to a Hit Test

onClipEvent (enterFrame) {
if (_root.circle, hitTest(_root.block)) {
//anything you put here will happen if there is a conection
} else {
//anything you put here will happen if there is a conection
Things you can do:
• go back in the opposite direction
• Play a sound (see Multimedia booklet)
• Explode
Exploding:
Double click on the circle. In the timeline, set a keyframe at Frame 2. This is where the explosion will start.
Place a stop script on frame 1. This way, the explosion will only start when the object gets sent to Frame 2
Set a stop();
script here.
Change this to a
spot, or differ-
This should be ent shape and
the same as the shape tween
first frame
Kelly Short 12
onClipEvent(enterFrame) {
if(this.hitTest(_root.square1)) {
_root.ball1.gotoAndPlay(6);
}
}
Kelly Short 13
Adding a score
Adding a score is very simple. First, create a dynamic text field to store the score and add the Var property
of score.
Add the score

variable To embed the
font into the
text field click
here
_root.score=_root.score+1;//make sure there
//are no spaces or it won’t
//work!
}
}
Also, on the frame script, declare and initialize the variable score by:
var score:Number = 0;
Kelly Short 14
Shooting
Draw the following shot and

convert it to a symbol
Convert to symbol again, so that you have

done so twice. Double click to enter the first
symbol
Kelly Short 15
Add a stop here
Motion tween so that the shot

moves across the screen
Add a stop();
script here, as
most of the
time, you do
not want to Change the position of the bul-
shoot, only let to where the ball is
when key is
pressed.
If the space key
is pressed
Shoot the bullet
Kelly Short 16
Adding sound to movement

1. Select File > Import to import a sound.
2. Select the sound in the library, right-click (Windows) or Control-click (Macintosh), and select Linkage.
Select Export for ActionScript and Export in First Frame; then give the
sound the identifier Swish1
To add sound, for example, to shot:
Var HitSound:Sound = new Sound();

HitSound.attachSound("Swish1");
HitSound.start();
break;
Kelly Short 17
Turning sound on and off
Create a button
to turn sound on
and off
Add the following code to the button:
on (release) {
if(SoundOn==1){
SoundOn=0;
} else {
SoundOn=1;
}
trace (SoundOn);
Kelly Short 18
Now, every time a sound plays you must add a condition:
if(SoundOn==1)//if the sound is on

{
//add sound
var HitSound:Sound = new Sound();
HitSound.start();
break;
}
Kelly Short 19
The Final Code

//The Frame Script
var score:Number = 0;
/* =======================Key Listener==================================*/
//=============================================on key release
case Key.RIGHT :
_root.ball1._x= _root.ball1._x + 10; //moves ball 10 right of current
//x position of ball
break;
case Key.LEFT :
_root.ball1._x= _root.ball1._x - 10;//moves ball 10 left of current
//x position of ball
break;
case Key.UP:
_root.ball1._y= _root.ball1._y - 10;//moves ball 10 UP of current y
//position of ball
trace ("Up");
break;
case Key.DOWN:
trace ("Down");
_root.ball1._y= _root.ball1._y + 10;//moves ball 10 Down of current
//y position of ball
break;
case Key.SPACE:
ypos=getProperty(ball1,_y);
setProperty(shot1,_y,ypos);
shot1.gotoAndPlay("start");//throwshot
if(SoundOn==1)//if the sound is on
{
//add sound
var HitSound:Sound = new Sound();
HitSound.start();
break;
}
}//end switch
}//end function
Kelly Short 20
//On the Ball
_root.score=_root.score+1;
}
}
//On the sound button
on (release) {
if(SoundOn==1){
SoundOn=0;
} else {
SoundOn=1;
}
trace (SoundOn);
}
Kelly Short 21

Flash Multimedia Game Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flash Multimedia Game Design

Uploaded by

Copyright:

Available Formats

Flash 8 Multimedia: Game Design Sydney CEO

Prepared by: Kelly Short

1 The Scene Panel 6

3 Responding to a key action 8

9 Turning on and off sounds 18

Create a new Flash Document

Lists recently opened items

Scene and Symbol

Free Transform Tool (Q) Gradient Fill (F)

Line Tool (N) Lasso (L)

Pen Tool (P) Text (T)

Hand Pan(H) Zoom (Z)

Tool related Options

The Scene Panel

Open the scene panel by going to Window—>Other

This lists the

The Action Panel

States what object you

Responding to a key action

Create a key Listener

Draw a ball and convert it to a symbol (movie clip)

With the ball selected, type in

On the following lines, insert the following code:

Your code should now look like this: (Changes in bold)

Responding to a Hit Test

//anything you put here will happen if there is a conection

//anything you put here will happen if there is a conection

Things you can do:

• go back in the opposite direction

• Play a sound (see Multimedia booklet)

Add the score

Draw the following shot and

Convert to symbol again, so that you have

Add a stop here

Motion tween so that the shot

Shoot the bullet

Adding sound to movement

To add sound, for example, to shot:

Var HitSound:Sound = new Sound();

Turning sound on and off

Add the following code to the button:

Now, every time a sound plays you must add a condition:

if(SoundOn==1)//if the sound is on

The Final Code

//On the Ball

//On the sound button

You might also like