Computer ArtsProjects _March2009 www.computerarts.co.

uk
78 Project four Get involved
LukeFeldman
AnAustralianartist
basedintheUSA,
Feldmanswork
rangesfrom
computer animation,
websitedesignand
functionality, to
character design,
illustrations,
installationsand
advertising. www.
lukefeldman.com
Skills
Builda
Flash-basedgame
Learnhow
toprogram
ascoreboard
Illustrator/ Flash 8/
ActionScript 2.0
Design a
Flash-based
videogame
Luke Feldman reveals
how to create an exciting
Flash-based computer
game that will bring your
audience back time and
time again
The aim of any game is to get people to play it. But a
game does not have to be complex to generate a lot of attention
visually appealing graphics, a fun concept, a fast pace and a
scoreboard are all you need to succeed. Everyone has a competitive
side, so the presence of a basic scoreboard, in particular, will help
entice the audience to return.
This project takes you through a step-by-step process to
create a simple, yet effective, Flash-based arcade game. Named
Beesting, the aim is to obtain the highest score by preventing your
character, the bee, from being hit by the enemy, the skull. The
following steps use Illustrator and Flash, and cover tips on le
set-up, game programming, scoreboard programming, and design.
Onyour disc
Youll ndthe
resources youneed
toworkalongwith
this project,
includingFlashles,
somecode, anda
playableversionof
thegame, onyour
cover disc, inthe
Resources section.
CAP121.tut_flashgame 78 9/2/09 10:19:3 am
www.computerarts.co.uk March2009_ Computer ArtsProjects
Design a Flash-based videogame 79
01 When creating any game, begin by developing a ow chart outlining your plans.
The aim of Beesting is for a player to evade a ying enemy;the higher the score, the faster the
enemy.The main elements in this game will consist of the player, the enemy and the score.
02 Sketch a layout detailing how the game will look. The main visual elements here
are a bee (including a dead version of the character for when a player is killed), a skull, and
the background. You should also decide on the gameplay and how the game will work at
this stage. Beesting is an arcade game, the aim being to keep the bee alive by using the
mouse to avoid the ying skulls. The longer the player stays alive, the higher the points.
CAP121.tut_flashgame 79 9/2/09 10:19:6 am
Computer ArtsProjects _March2009 www.computerarts.co.uk
80 Project four Get involved
06 Now create a new movie clip named Player, making sure the Export for
ActionScript box is checked next to Linkage.
04 Next, create the start screen, end screen, and lay out the elements the
scoreboard, start button and restart button. When youre happy, create a new Flash le at
550x400px, with a frame rate of 24fps. Export the elements out of Illustrator (File>Export ) as
separate *.swf les, such as background.swf, scoreboard.swf, character.swf.
03 Once the main elements
have been designed, create a new
Illustrator le ensuring that the
colour mode is set to RGB. Scan the
sketches (you can either create your
own graphics, or use those supplied
on your disc), and import them into
Illustrator. This game is designed
only for the web, so will be a size of
550x400 pixels.
05 This is what the nished Flash le will look like. Take note of the organisation of the le, including layer
names playerAlive, playerDead, for instance.
Always use RGB
Whencreatingartworkfor useinFlash, ensureyoualways set your colours inIllustrator toRGB. UsingCMYKwill
result inthecolours fadingwhenthey areimportedintoFlash.
CAP121.tut_flashgame 80 9/2/09 10:19:8 am
www.computerarts.co.uk March2009_ Computer ArtsProjects
Design a Flash-based videogame 81
08 To add player controls, go to the Library panel
and drag the Player movie clip onto the Player layer. Give
the Player movie clip the Instance name of Player, and
add the following Actions to the Player movie clip:
onClipEvent(enterFrame){
_rotation = _xmouse/10; Adds a slight rotation to player
_y = (_y+_ymouse/6); Move with mouse y direction
_x = (_x+_xmouse/6); Move with mouse x direction
This creates an area that the player can only move in:
if(this._y>=370){this._y=370;}
if(this._y<=50){this._y=50;}
if(this._x>=520){this._x=520;}
if(this._x<=35){this._x=35;}
07 Import the Player-Alive character into Flash, and place it on the playerAlive layer. Convert it into a movie
clip named playerAlive (select the object on the stage and go to Modify>Convert to Symbol), with an Instance name of
playerAlive. Import the Player-Dead character into Flash, and place it on the playerDead layer. From the library, drag
the Wings and Blood movie clips (you will nd these on your cover disc) onto the layers of the same name. Position
the elements on the screen so that they overlay each other.
Element size
Createall theart elements intheactual sizethat youwant toseetheminthegame. This saves timewhen
importingtheelements intoFlash, as they will not havetobere-scaledtothecorrect size.
Clipboard
I have
occasionally foundthat
whenimportingartwork
fromIllustrator thecolours
seemfaded. My solutionis
tousetheclipboardtocopy
objects straight from
Illustrator toFlash.
10 For the Start button, create a button named buttonStart (create an object, select
it, and go to Modify>Convert to Symbol>Button, or use the Start Button object provided). Give
it the Instance name of buttonStart, and place it onto frame one of the Start Button layer.
09 Next, import the enemy character artwork into Flash. Convert it into a movie clip named Enemy, with an
Instance name of Enemy.
CAP121.tut_flashgame 81 9/2/09 10:19:9 am
Computer ArtsProjects _March2009 www.computerarts.co.uk
82 Project four Get involved
13 For the players nal score,
create a text eld with a Var: name of
endScore. Place the button onto frame
three of the End Score layer, and position it
in the centre of the stage.
11 Create a button named buttonRestart with the Instance name, buttonRestart. Place the button onto
frame three of the Restart Button layer.
12 To set up the scoreboard, create a text eld (select the Text tool and click on the
stage) with a Var: name of score this will show the players score. Place a button onto frame
two of the Score layer. Position this button at the top of the stage, in the centre.
14 Next, import the background artwork and place it on the Background layer.
Import the start-screen artwork and place it on frame one of the Intro Screen layer. Import
the end-screen artwork and place it on frame three of the End Screen layer.
CAP121.tut_flashgame 82 9/2/09 10:19:10 am
www.computerarts.co.uk March2009_ Computer ArtsProjects
Design a Flash-based videogame 83
Check the code!
Always checkthespellingof code. Many errors aresimply
causedby misspellingthecode.
15 Add this code, which youll nd on your disc, to the rst
frame of the Script layer. This sets up the initial values for the main
variables in the game: enemy speed, number of enemies, the score,
player life. Check to see if the buttonStart has been pressed.
17 Lastly, add this code to the third frame of the Script
layer.The For/Next programming loop was used to remove all of the
Enemy movie clips. Show the nal score, and check to see if the
buttonRestart has been pressed.
18 Once these steps have been completed, test the game. You can play Beesting at www.skaffs.com.
16 To programme the functionality of the game, add this code to the second frame
of the Script layer. There are three main pieces to this code: Update this checks to see if the
player is still alive; Create Enemies by attaching, positioning and moving the Enemy
MovieClip; HitTest check to see if the Enemy movie clip has hit the Player movie clip.
CAP121.tut_flashgame 83 9/2/09 10:19:11 am