Professional Documents
Culture Documents
This is a tutorial describing a basic shooting game using ActionScript 3.0 with classes
defined for the each of the component parts: bombs and antiaircraft (aa) as well as the
gun, the ground and a health bar. The game opens with the following screen:
After clicking on the start button, a new screen appears along with what is termed a
health bar. This bar will grow or shrink depending on bombs hitting the ground or being
hit by antiaircraft shot by the gun. NOTE: an early version of the game required the
player to click on the gun to make it have "the focus" and receive events such as the
arrow key strokes. The version I describe here sets up the proper focus by program
control. However, I would call what I have done a 'hack' to get it working exactly as I
wanted. Notice that bombs are already falling.
Clicking the space bar stops the game (but bombs in motion continue to fall) and
produces a text field with a summary. Notice below that there is debris from bombs and
that the health bar is smaller than it started.
The player ends the game by pressing the space bar. Bombs in motion continue to fall. A
text field appears reporting a score.
This is intended to be a basis for a game. A relatavely minor enhancement is to develop a
scoring scheme. As you can see from the last screen shot, all I do is report the number of
times a bomb lands on the ground and the total shots. I also note if the health bar has
gone to zero. I keep the game going even if the health bar is zero. You can make a more
elaborate system for your game. Other enhancements could be to add objects on the
ground and to differentiate if bombs hit these objects. Notice that in my game, no checks
are made for a bomb hitting the gun. You also can add guns!
Overview
Before getting to the implementation, here is an overview of this application in terms of
events and [general] behavior: what happens when?
Moving on, the next thing I thought about was: who does what. In many cases, this
relates to the event handling of the events just listed. These very general ideas help me in
the implementation. I will give detailed code later.
The event handler for the button sets off the chain of events for starting the game. This
includes setting up timed events for dropping bombs.
The timer event handler associated with a bomb move the bomb down the screen and
check if the ground has been reached.
The event handler for key strokes after detecting an left or right arrow, moves the gun.
This same event handler after detecting the up arrow starts off an aa. The creation of a
new aa sets up the event handling for a timed event. This event handler after detecting the
pressing of the space bar initiates the ending of the game.
The timer event handler associated with an aa moves the aa up the screen AND checks if
it collides (hits) any of the bombs. This means that somewhere there must be a list, that
is, an array, of all the bombs.
With these general considerations in mind, I will now describe the implementation of the
shooter using Flash and ActionScript 3.0. The critical feature of this application is the
interaction between using the [traditional] Flash authoring system: creating symbols in
the Library, placing them on the Stage in frames and writing frame code AND defining
classes (also done 'in Flash' by opening a new ActionScript file) by writing ActionScript
code in .as files. The symbols in the Library are each connected to the appropriate class
using the Linkage panel in Flash CS3 and the Properties/Advanced panel in Flash CD4.
The single instance of the bar and the multiple instances of the bombs and the aa's appear
on the Stage as a result of coding. To put it another way, you do not move instances of
the bar or the bomb or the aa to the Stage and give them instance names in the usual way.
Instead, this is done all by code.
The application consists of the shooter1.fla file and 5 .as files: Gun.as, Aa.as, Bomb.as,
Bar.as and Ground.as. The .fla file can be anywhere on the drive. The 5 .as files are
contained in a folder named shooter, which was contained in a folder called as3 at the
top of the drive. Each of the .as files contain opening and closing coding for the shooter
package. An outline for each is:
package shooter {
import statements
class definition
To reinforce a point that was difficult for me to grasp: each of the class definitions is part
of the shooter package.
The shooter1.fla file consists of 2 frames and 2 layers. The screen shot below shows the
shooter1 .fla file, the first frame:
There are 4 objects placed on the stage: gun, ground, a button named startbtn made
using a button in the Common Library, and a dynamic text field named
instructions. Note that I edited the oval rust button to change the text to start. I also
changed the font.
The second frame is similar to the first.. The text in the textfield has changed and the
button is no longer there. The health bar is NOT on the Stage. It will be created by the
program.
Concepts
The code in the .fla file and in all the .as files will be shown with explanation later. Here I
will go over the critical concepts.
The use of classes and objects is best explained with concrete examples and the shooter
application is a very good one. Briefly, an object puts together data and code. A class
defines the data (variables) and the code (methods) for the objects of that class. New
objects of a given class are created using what is termed the constructor function that is
given as part of the class definition. For a new bomb, there would be a statement with
new Bomb();
A class method is for the whole class. Recall the Math.random and Math.floor
methods and the Math.PI constant. For class definitions that you or I make, we
indicate a class method or a class variable by the modifier static. A static variable can
be changed. The static term means there is just one variable. Other modifiers specify
what code can access the variable or method. A public method or variable is accessible
by any code. Some object oriented computer scientists may dislike this characterization,
but public static methods serve somewhat as global functions. Methods that are not
static are for each object created in that class. The internal designation indicates
that a variable or method is only used by code in the package. A private designation
indicates that a variable or method is accessible only by code in the class. The default
is internal. I have tried to go over and change this to private when appropriate.
Similarly, I changed some public designations to internal to variables or methods
used outside code in that particular class but in one of the other classes. Note that
constructor methods must be public. Consider also that making designations overly
broad does not produce any errors. What it does do is cause less checking to be done
during the translation (aka compiling) process. If you were working on a big project
involving many people, this would be a disadvantage.
For the shooter application, I decided to write class definitions for the things that would
appear on the screen: this is the single gun, the single ground and the single bar, and
multiple bombs and aa's.
The code in this and other applications makes use of the built-in features of Flash. The
good news is that there is considerable functionality to build on. The bad news is that you
need to figure out what things are called and where they are found and insert the
appropriate import statements. You should think of the .as files I/you write as
extending the language. These also need to be imported into your program so the frame
action code contains an import statement citing the package I wrote.
Each of the symbols: bar, gun, bomb, ground, aa have Linkage settings to point to the
corresponding Class definition. For example, right click on the bomb symbol in the
Library and then click on Linkage…in CS3 or Properties and then Advanced in CS4. You
need to click on Export for ActionScript and Export in first frame. The Base class will be
pre-set to flash.display.MovieClip. You will need to put in shooter.Bomb
as the source file for the Class. This indicates the Bomb.as file in the shooter package
(folder).
CS3 screen shot (after clicking on Linkage, then clicking Export for ActionScript and
typing in shooter.Bomb)
CS4 screen shot (after clicking on Properties and then Advanced, clicking on Export for
ActionScript and typing in shooter.Bomb):
Each of these class definitions are defined as extensions of the MovieClip class. This
takes two operations (that can be done in any order).
• Insert/New symbol and create a symbol in the usual way. Use the Linkage panel
to connect the symbol to a class.
• Create a class (that is, write the class definition). The header statement defining a
class contains the phrase extends MovieClip This sets up the new class to
inherit the variables and methods of the MovieClip class. Inheritance is one way
to connect symbols to class objects.
[Note that this was not what was done in the jigsaw puzzle. In that program, a movie clip
instance was placed on the Stage and named in the usual manner. This instance name
was passed as a parameter to the Piece function. This is the constructor function
for the Piece class. Each Piece object had a variable that held a reference to an instance
already on the Stage.]
The class definition can specify variables and methods. These are in addition to the
variables and methods for movie clips. The class definition can specify a constructor
function. This is invoked implicitly for any instances of the symbol on the stage, for
example, the gun or the ground. Each Piece object HAS-A jigsaw piece instance.
In general, think of inheritance as a way to re-use code. The subclass is an extension of
the original class, called the superclass. In the situation here, I am building on
MovieClip to form bomb, aa, etc. Some of the variables and methods will be used just
the way there are in the original class (aka the superclass) but there probably will be new
things! For example, any bomb object has a .x and a .y which will be used in the code.
The .x and .y are variables in the MovieClip class.
[You can read about another use of inheritance in the Bouncing Things game. Balls
(circles), rectangles and stars are created and bouncing around in a box. Inheritance is
used to make some of the coding be shared.]
The gun responds to the left, right and up arrow by a call to addEventListener for
the KeyboardEvent.KEY_DOWN event. The event handler will move the gun right or
left for the right and left arrows. For the up arrow, the code creates a new aa. See
comment below on the creation of bombs.
The clicking of the button is connected to a function in the usual way using
addEventListener. One special thing that needs to be done is to call a class method
called startup of the Bomb class. The call to startup includes sending the names of
the ground and gun instances. This is necessary for the coding in the .as files to
reference these instances. The startup method also sets the focus and does some
manipulation (I call it a hack) to make sure the gun does not have a yellow box around it.
The documentation indicates a way to avoid this but it did not work (see below).
Bombs move down and aa's move up using a Timer in the same way as a ball moved in
bouncing ball and the cannonball moved in cannonball. In addition, the
TIMER_COMPLETE event is used to remove the aa objects after they have gone up past
the start of the Stage.
Bombs in motion are stopped on frame 1. When a bomb hits the ground, a
gotoAndPlay command is issued to go to frame 2. Think of the target disintegrating in
cannonball or the frame animation in rock paper scissors.
Deleted: Implementation and
Coding¶
¶
Open up Flash and click on
File/New to start a new Flash file.
Rename the first layer board and
add a new layer and name it
actions. The board layer will
hold the material and the actions
layer will hold the [frame] code.
Remember: most of the code of
this application is in the .as files,
not in the .fla file.¶
¶
Create the symbols: gun, ground,
aa, bomb, and bar. All except the
bomb are 1 frame movies. The
bomb has multiple frames, some of
which can be keyframes and some
regular frames. The frames from 2
on show an exploding bomb.¶
¶
¶
The first frame and the final frame
each have a stop(); in the actions
layer and the board layer as
shown:¶
¶ ... [1]
Page 10: [1] Deleted comp sci 5/4/2009 2:14:00 PM
Implementation and Coding
Create the symbols: gun, ground, aa, bomb, and bar. All except
the bomb are 1 frame movies. The bomb has multiple frames,
some of which can be keyframes and some regular frames. The
frames from 2 on show an exploding bomb.
The first frame and the final frame each have a stop(); in the
actions layer and the board layer as shown:
As described earlier, bring instances of the gun and the ground
to the board layer and name them ground and gun1. There was
no special reason to give the gun the name of gun1, except to
suggest a possible extension with multiple gun instances. I also
used a button in the Window/Common Library and changed the
text to Start. I gave the button the name startbtn.
Write the code for frame 1. I move on to describe the code in the
main movie time line and then go on to the .as files. The code in
frame1 is
import shooter.*; Import the package
that I create. The
package (shooter
folder) consists of
5 class definitions
(5 .as files).
} Close function
definition
stop(); Stop at this frame.
stop();
You need to specify where to find the .as files. Putting this a
more correct way, you need to specify where to find the shooter
package that contains the class definitions. In this example, I
created a package called shooter. I created a folder called
shooter in a folder called as3 on my C drive. The shooter folder
will contain files for each of the class definitions.
Gun.as
Ground.as
Bomb.as
Aa.as
Bar.as
As I said earlier, there will be 5 files. I start with the file named
Gun.as. Remember: it needs to be saved in the folder named
shooter. I have specified that this folder is in c:\as3. There is
only one Gun object, the gun1 instance already on the Stage.
Note each file is part of the shooter package and so starts with
package shooter {
import flash.events.*;
import flash.ui.Keyboard;
import flash.text.*;
public class Gun extends MovieClip { Start class
definition, specified
as subclass of
MovieClip
private static const UNIT = 10; Sets up the amount
of horizontal
movement triggered
by click on an arrow
key
this.addEventListener(KeyboardEvent.KEY_DOWN,re
Set up event
portKeyDown); handling for key
presses
} Close constructor
function definition
private function reportKeyDown(ev) { Start of event
handler for key
presses. Note the ev
parameter.
var newaa:Aa; This will hold the aa
IF one is to be
created.
this.removeEventListener(KeyboardEvent.KEY_DOWN
Stop event handling
,reportKeyDown); for key strokes
} Close the if
statement
} Close the function
package shooter {
import flash.display.MovieClip;
}
}
The startup method has coding that sets the gun to have the
focus so that the key presses work. However, I had the problem
that this put a yellow box around the gun. The documented way
to remove the box did not work, so, after some experimenting, I
came up with what is shown here: moving the gun off stage, do
the code for the focus, and then moving it back.
package shooter{ Start
package
import flash.utils.Timer;
import flash.events.TimerEvent;
} Close
method
if ((this.y+400)>Bomb.groundlevel) { Check if
beyond
the
vertical
level of
the
ground
Bomb.groundhits++; Increment
static
count of
ground
hits
Bomb.healthbar.decrease(30); Decrease
the health
bar
} Close if
true
clause
} Close
method
Bomb.ground.stage.stageFocusRect = Remove
false; yellow
box?
Set up
Bomb.timerb.addEventListener(TimerEvent.T event
IMER, maybemakebomb); handling
for this
timer
} Close
method
bombs[i].x Position
=Math.floor(Math.random()*550)- bomb
Bomb.ground.x; randomly
} Close if
true
clause
} Close
method
} Close
class
definition
} Close
package
The Aa.as file sets up the coding for the aa objects. Note that
new aa objects are created by code in the Gun.as file (look back
at the code in the reportKeyDown method). As is the case for
bombs, there are no aa instances manually placed in the Stage.
They are created by code.
package shooter { Start
package
definition
import flash.utils.Timer;
import flash.events.TimerEvent;
totalshots++; Increase
count
Set up
timer.addEventListener(TimerEvent.TIMER, event
intervalListener); handler
for timing
interval
timer.start(); Start
timer
Set up
timer.addEventListener(TimerEvent.TIMER_CO event
MPLETE, overListener); handler
for when
ENOUGH
intervals
have
occurred
} Close
construct
or
method
private function Start
intervalListener(ev:TimerEvent):void { method
var i; Set
variable
i=0; Initialize
Bomb.bombs.splice(i,1); Remove
from list
of bombs
Bomb.healthbar.increase(10); Add to
health bar
} Close if
true
clause
else { Else
i++; Increase i
} Close
else
clause
} Close
while
clause
} Close
method
parent.removeChild(this); Remove
this aa
from
display
list
} Close
method
} Close
class
definition
} Close
package
The Bar.as code handles the decreasing and increasing of the
height of the health bar. The constructor method does not do
anything, so creating a new bar just creates a new instance of
the bar symbol in the Library.
package shooter{
import flash.display.*;
}
internal function decrease(amt:int):void {
if (this.height <= amt) {
Gun.okay = false;
this.height = 0;
} else {
this.height -= amt;
}
}
internal function increase(amt:int):void {
this.height += amt;
}
}
}
Recap
Place the gun and the ground and the start button on the Stage
and give each an instance name.
Create the text field and write the text for the starting frame.
Write the class definition code, that is, the 5 .as files and save in
a folder named shooter in a folder names as3.
Build the whole game: design the gun, ground, bar, bomb and aa
symbols the usual way, and then put in the code in the frames
and then in the 5 .as files.
Or
Only read this if you are familiar with previous versions of Flash
and want to reflect on the differences.