5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

HowtoMakeaFlashGame
ThreeParts:

StartingtheProcess

WritingaBasicGame

LearningAdvancedTechniques

Flashisapopularformatforbrowserbasedvideogamesseenonsitessuch
asNewgroundsandKongregate.WhiletheFlashformatisslowlybecoming
lessutilizedinthefaceofgrowingmobileapps,manyqualitygamesarestill
beingmadewithit.FlashusesActionScript,aneasytolearnlanguagethat
givesyoucontrolovertheobjectsonyourscreen.SeeStep1belowtolearn
howtocreateabasicFlashgame.

StartDownload

Ad

ConvertAnyFiletoaPDFWord,
Jpeg,Gif,RtfFreeDownload!

Part1of3:StartingtheProcess

Designyourgame.Beforeyoustartcoding,itwillhelptohavearoughideaof
whatyouwantyourgametodo.Flashisbestsuitedforsimplegames,sofocuson

creatingagamethathasonlyafewmechanicsfortheplayertoworryabout.Trytohave
abasicgenreandsomemechanicsinmindbeforeyoustartprototyping.Seethisguide
formoredetailsontheplanningphasesofvideogamedevelopment.CommonFlash
gamesinclude:
Endlessrunners:Thesegamesautomaticallymovethecharacter,andthe
playerisresponsibleforjumpingoverobstaclesorotherwiseinteractingwiththe
game.Theplayertypicallyonlyhasoneortwooptionswhenitcomesto
controls.
Brawlers:Thesearetypicallysidescrollingandtasktheplayerwithdefeating
enemiestoprogress.Theplayercharacteroftenhasseveralmovesthatthey
canperformtodefeatenemies.
Puzzles:Thesegamesasktheplayertosolvepuzzlestobeateachlevel.
ThesecanrangefromMatch3stylesuchasBejeweledtomorecomplex
puzzlesolvingtypicallyfoundinAdventuregames.
RPGs:Thesegamesfocusoncharacterdevelopmentandprogression,and
havetheplayermovingthroughmultipleenvironmentswithavarietyofenemy
types.CombatmechanicsvarywildlyfromRPGtoRPG,butmanyareturn
based.RPGscanbesignificantlymoredifficulttocodethanasimpleaction
game.
Ad

StartDownload
1.ClicktoBegin2.DownloadApp
3.BackUpYourPCInstantlyFree

LearnwhatFlashexcelsat.Flashisbestsuitedfor2Dgames.Itispossibletocreate
http://www.wikihow.com/MakeaFlashGame

1/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

3DgamesinFlash,butitisveryadvancedandrequiressignificantknowledgeof
thelanguage.AlmosteverysuccessfulFlashgamehasbeen2D.
Flashgamesarealsobestsuitedforquicksessions.Thisisbecausemost
Flashgameplayersplaywhentheyhavealittlefreetime,suchasonbreaks,
meaninggamingsessionsaretypically15minutesorless.

FamiliarizeyourselfwiththeActionScript3(AS3)language.Flashgamesare
programmedinAS3,andyouwillneedtohavesomebasicunderstandingofhowit

worksinordertosuccessfullycreateagame.Youcancreateasimplegamewitha
rudimentaryunderstandingofhowtocodeinAS3.
ThereareseveralbooksaboutActionScriptavailableonAmazonandother
stores,alongwithalargenumberoftutorialsandexamplesonline.

DownloadFlashProfessional.Thisprogramcostsmoney,butisthebestwayto
createFlashprogramsquickly.Thereareotheroptionsavailable,includingopen

sourceoptions,buttheyoftenlackcompatibilityortakelongertoaccomplishthesame
tasks.
FlashProfessionalistheonlyprogramyouwillneedtostartcreatinggames.
Ad

Kumitang$960sa4days?
SaForexmaaaringkitainang$960sa4naarawlang.Alamin
paano.

Part2of3:WritingaBasicGame

UnderstandthebasicbuildingblocksofAS3code.Whenyouarecreatinga
basicgame,thereareseveraldifferentcodestructuresthatyouwillbeusing.

TherearethreemainpartsofanyAS3code:
VariablesThisishowyourdataisstored.Datacanbenumbers,words
(strings),objects,andmore.Variablesaredefinedbythecode v ar andmust
beoneword.
varplayerHealth:Number=100;

//"var"designatesthatyouaredefiningavariable.
//"playerHealth"isthevariablename.
//"Number"isthetypeofdata.
//"100"isthevalueassignedtothevariable.
//Allactionscriptlinesendwith";"
EventHandlersEventhandlerslookforspecificthingstooccur,andthentells
therestoftheprogram.Thisisessentialforplayerinputandrepeatingcode.
Eventhandlerstypicallycalluponfunctions.

http://www.wikihow.com/MakeaFlashGame

2/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

addEventListener(MouseEvent.CLICK,swingSword);

//"addEventListener()"definestheeventhandler.
//"MouseEvent"isthecategoryofinputthatisbeinglistenedfor.
//".CLICK"isthespecificeventintheMouseEventcategory.
//"swingSword"isthefunctionthatiscalledwhentheeventoccurs.

FunctionSectionsofcodeassignedtoakeywordthatcanbecalledupon
later.Functionshandlethebulkofyourgame'sprogramming,andcomplex
gamescanhavehundredsoffunctionswhilesimplergamesmayonlyhavea
few.Theycanbeinanyordersincetheyonlyworkwhentheyarecalledupon.
functionswingSword(e:MouseEvent):void;
{
//Yourcodegoeshere
}

//"function"isthekeywordthatappearsatthestartofeveryfunction.
//"swingSword"isthenameofthefunction.
//"e:MouseEvent"isanaddedparameter,showingthatthefunction
//iscalledfromtheeventlistener.
//":void"isthevaluethatisreturnedbythefunction.Ifnovalue
//isreturned,use:void.

Createanobject.ActionScriptisusedtoaffectobjectsinFlash.Inordertomake
agame,youwillneedtocreateobjectsthattheplayerwillinteractwith.Depending

ontheguidesyouarereading,objectsmaybereferredtoassprites,actors,ormovie
clips.Forthissimplegame,youwillbecreatingarectangle.
OpenFlashProfessionalifyouhaven'talready.CreateanewActionScript3
project.
[1]

ClicktheRectangledrawingtoolfromtheToolspanel.Thispanelmaybein
differentlocationsdependingontheconfigurationofFlashProfessional.Drawa
rectangleinyourScenewindow.
SelecttherectangleusingtheSelectiontool.

Assignpropertiestotheobject.Withyournewlycreatedrectangleselected,
opentheModifymenuandselect"ConverttoSymbol".Youcanalsopress F8 as

ashortcut.Inthe"ConverttoSymbol"window,givetheobjectaneasilyrecognizable
name,suchas"enemy".
FindthePropertieswindow.Atthetopofthewindow,therewillbeablanktext
fieldlabeled"Instancename"whenyouhoveroverit.Nameitthesameasyou
didwhenyouconvertedittoasymbol("enemy").Thiscreatesauniquename
thatcanbeinteractedwiththroughAS3code.
Each"instance"isaseparateobjectthatcanbeaffectedbycode.Youcancopy
thealreadycreatedinstancemultipletimesbyclickingtheLibrarytaband
draggingtheinstanceontothescene.Eachtimeyouaddone,thenamewillbe
changedtodesignatethatit'saseparateobject("enemy","enemy1","enemy2",
etc.).
Whenyourefertotheobjectsinthecode,yousimplyneedtousetheinstance
name,inthiscase"enemy".

http://www.wikihow.com/MakeaFlashGame

3/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

Learnhowyoucanchangethepropertiesofaninstance.Onceyouhavean
instancemade,youcanadjustthepropertiesthroughAS3.Thiscanletyoumove

theobjectaroundthescreen,resizeit,andsoon.Youcanadjustpropertiesbytyping
theinstance,followedbyaperiod".",followedbytheproperty,followedbythevalue:
e n em y . x = 1 5 0 ; ThisaffectsthepositionoftheenemyobjectontheX
axis.
e n em y . y = 1 5 0 ; ThisaffectsthepositionoftheenemyobjectontheY
axis.TheYaxisiscalculatedfromthetopofthescene.
e n em y . r ot a t i o n = 4 5; Rotatestheenemyobject45clockwise.
e n em y . s ca l e X = 3 ; Stretchesthewidthoftheenemyobjectbyafactor
of3.A()numberwillfliptheobject.
e n em y . s ca l e Y = 0 . 5 ; Squishestheobjecttohalfitsheight.

Examinethe t r ac e ( ) command.Thiscommandwillreturnthecurrentvalues
forspecificobjects,andisusefulfordeterminingifeverythingisrunningasit

should.YoumaynotwanttoincludetheTracecommandinyourfinalcode,butitis
usefulfordebugging.

Buildabasicgameusingtheaboveinformation.Nowthatyouhaveabasic
understandingofthecorefunctions,youcancreateagamewheretheenemy

changessizeeverytimeyouclickonit,untilitrunsoutofhealth.[2]

http://www.wikihow.com/MakeaFlashGame

4/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

varenemyHP:Number=100;
//setstheenemy'sHP(health)to100atthestart.
varplayerAttack:Number=10;
//setstheplayersattackpowerwhentheyclick.

enemy.addEventListener(MouseEvent.CLICK,attackEnemy);
//Byaddingthisfunctiondirectlytotheenemyobject,
//thefunctiononlyhappenswhentheobjectitselfis
//clicked,asopposedtoclickinganywhereonthescreen.

setEnemyLocation();
//Thiscallsthefollowingfunctiontoplacetheenemy
//onthescreen.Thisoccurswhenthegamestarts.

functionsetEnemyLocation():void
{
enemy.x=200;
//movestheenemyto200pixelsfromtheleftofthescreen
enemy.y=150;
//movestheenemydown150pixelsfromthetopofthescreen
enemy.rotation=45;
//rotatestheenemy45degreesclockwise
trace("enemy'sxvalueis",enemy.x,"andenemy'syvalueis",enemy.y);
//Displaysthecurrentpositionoftheenemyfordebugging
}

functionattackEnemy(e:MouseEvent):void
//Thiscreatestheattackfunctionforwhentheenemyisclicked
{
enemyHP=enemyHPplayerAttack;
//SubtractstheattackvaluefromtheHPvalue,
//resultinginthenewHPvalue.
enemy.scaleX=enemyHP/100;
//ChangesthewidthbasedonthenewHPvalue.
//Itisdividedby100toturnitintoadecimal.
enemy.scaleY=enemyHP/100;
//ChangestheheightbasedonthenewHPvalue

trace("Theenemyhas",enemyHP,"HPleft");
//OutputhowmuchHPtheenemyhasleft
}

Tryitout.Onceyou'vecreatedthecode,youcantestyournewgame.Clickthe
ControlmenuandselectTestMovie.Yourgamewillbegin,andyoucanclickthe

enemyobjecttochangeitssize.YourTraceoutputswillbedisplayedintheOutput
window.
Ad

MeetForeignMen
ForeignMenSeekFilipinaLadiesfor
DatingandChat.JoinFreeNow!

Part3of3:LearningAdvancedTechniques

Learnhowpackageswork.ActionScriptisbasedoffJava,andusesavery
similarpackagesystem.Packagesallowyoutostorevariables,constants,

functions,andotherinformationinseparatefiles,andthenimportthesefilesintoyour
program.Theseareespeciallyusefulifyouwanttouseapackagethatsomeoneelse
http://www.wikihow.com/MakeaFlashGame

5/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

hasdevelopedthatwillmakeyourgameeasiertocreate.
SeethisguideformoredetailsonhowpackagesworkinJava.

Buildyourprojectfolders.Ifyou'recreatingagamewithmultipleimagesand
soundclips,you'llwanttocreateafolderstructureforyourgame.Thiswillallow

youtoeasilystoreyourdifferentelements,aswellasstoredifferentpackagestocallon.
Createabasefolderforyourproject.Inthebasefolder,youshouldhavean
"img"folderforallofyourartassets,a"snd"folderforallofyoursoundassets,
anda"src"folderforallofyourgamepackagesandcode.
Createa"Game"folderinthe"src"foldertostoreyourConstantsfile.
Thisparticularstructureisn'tnecessary,butisaneasywaytoorganizeyour
workandmaterials,especiallyforlargerprojects.Forthesimplegame
explainedabove,youwillnotneedtocreateanydirectories.

Addsoundtoyourgame.Agamewithoutsoundormusicwillquicklybecome
boringtotheplayer.YoucanaddsoundtoobjectstoFlashusingtheLayerstool.

Seethisguideformoredetails.

CreateaConstantsfile.Ifyourgamehasalotofvaluesthatwillremainthesame
throughoutthegame,youcancreateaConstantsfiletostorealloftheminone

placesothatyoucaneasilycallonthem.Constantscanincludevaluessuchasgravity,
playerspeed,andanyothervaluethatyoumayneedtocallonrepeatedly.[3]
IfyoucreateaConstantsfile,itwillneedtobeplacedinafolderinyourproject
andthenimportedasapackage.Forexample,let'ssayyoucreatea
Constants.asfileandplaceitinyourGamedirectory.Toimportit,youwould
usethefollowingcode:
package
{
importGame.*;
}

Lookatotherpeople'sgames.Whilemanydeveloperswon'trevealthecodefor
theirgames,thereareavarietyofprojecttutorialsandotheropenprojectsthatwill

allowyoutoseethecodeandhowitinteractswithgameobjects.Thisisagreatwayto
learnsomeadvancedtechniquesthatcanhelpyourgamestandout.
Ad

BrainGamesFree
TonsofWord,Math,LogicGamesto
SharpenYourBrain.FreeDownload!

SourcesandCitations
http://www.wikihow.com/MakeaFlashGame

6/7

5/11/2015

HowtoMakeaFlashGame:4StepswikiHow

1. http://www.adobe.com/devnet/flash/articles/flash_cs5_createfla.html
2. http://as3gametuts.com/2011/03/12/gettingstartedwithas32/
3. http://www.makeflashgames.com/tutorials/gameframework.php

ArticleInfo

Categories:VideoGameCreation
Inotherlanguages:
Espaol:crearunjuegodecomputadorausandoFlash,:
,Italiano:CreareunGiocoinFlash,Portugus:FazerumJogoemFlash,:
Flash,Deutsch:EinFlashSpielentwickeln,Franais:faireunjeuflash,Bahasa
Indonesia:MembuatPermainanFlash

Thankstoallauthorsforcreatingapagethathasbeenread93,529times.

http://www.wikihow.com/MakeaFlashGame

7/7