IntroductiontoGamesProgrammingwithFlashandActionscript3

JumpManTutorial1

JumpMan!
JumpManisasimplegamewheretheplayercontrolsJumpManwhomustjumpoveraseriesof
cratesasheskateboardsalongaroad.
Thegameiscontrolledbypressingakeyonthekeyboard.JumpManskatesautomaticallytowards
thecratesandtheplayermusttimethejumpstoavoidthecrates.HittingthecratesdecreasesJump
Manshealth.Pointsareawardedfortheamountofcratesthatareavoided.Thegameendswhen
JumpManshealthisdepleted.
OpenFlashandStartanewFlashFile(Actionscript3).

IntheTimeline,doubleclickonthenameofLayer1andrenameittoground.
Drawagreencolouredrectanglethatcoversthebottomhalfofthestage.Thiswillrepresentthe
ground.
Addanewlayerandnameitjumpman.
Drawacharacterandhisskateboardonthislayer.Makeitssizeandpositionsimilartothatshownin
thescreenshotbelow.

ColinMaxwell

2011

IntroductiontoGamesProgrammingwithFlashandActionscript3

JumpManTutorial1

Addanewlayerandnameitcrates.
Drawacrateonthislayer.Makeitssizeandpositionsimilartothatshowninthescreenshotbelow.

SelectJumpMan,thenrightclickonitandchooseConverttoSymbol.
SelectMovieCliptypeandsetthenametojumpman.PressOK.

Selectthecrate,thenrightclickonitandchooseConverttoSymbol.Nameitcrateandsetittoa
MovieCliptype.PressOK.
Withthecratestillselected,lookatthepropertiespanel,whichwillbeeitherattherightorbottom
ofthescreen.IfyoucantseethePropertiesPanelthengotothemenubarandchooseWindow
PropertiesProperties.

ColinMaxwell

2011

IntroductiontoGamesProgrammingwithFlashandActionscript3

JumpManTutorial1

InthepropertiespanelchangetheInstancenametocrate_mc.

SelectjumpManandsethisInstanceNameinthePropertiesPaneltojumpman_mc.

AnyobjectthatiscontrolledbyActionscriptmusthaveitsowninstancename.Everyobjectmust
haveitsownuniqueinstancenameduplicatenameswillconfuseFlash.
Addanewlayerandnameitcode.
Selectframe1ofthecodelayerandpressF9toopentheActionsPanel(orgotothemenubarand
chooseWindowActions).

ColinMaxwell

2011

IntroductiontoGamesProgrammingwithFlashandActionscript3

JumpManTutorial1

MakesureScriptAssistisswitchedOFF(seediagram).

TheActionsPaneliswherewetypetheActionscriptcodethatwillmakeourgamework.
Makingthecratemove
Firstwewillmakethecratemove.Thisisdonebyrepeatedlychangingthecratespositiononthex
axis.Thecratewillmovefromrighttoleft,sowillbemovinginanegativedirection.Thismust
happencontinuously.
TomakesomethinghappencontinuouslyinActionscriptwemustsetupathingcalledanEvent
Listenerthatwillcauseafunctiontoruncontinuously.Typethefollowinglineofcode,whichwill
createanEventListenerwhichisattachedtothestage.Thiseventlistenerisaspecialonecalledan
EnterFrameeventlistener,whichrunscontinuously.Thistypeofeventlistenerisusedalotin
gamesprogramming.Thiseventlistenerwillrunafunctioncalledgameloop,whichyouwillmakein
alaterstep
stage.addEventListener(Event.ENTER_FRAME, gameloop);
Nextyouneedtocreatethefunctioncalledgameloop.Typethefollowinglineofcodenotethe
curlybrackets(alsoknownasbraces)whichindicatethestartandendpointsofthefunction.
function gameloop(e:Event):void{
}

ColinMaxwell

2011

IntroductiontoGamesProgrammingwithFlashandActionscript3

JumpManTutorial1

Anycodethatisplacedwithinthecurlybracketswillbecomepartofthisfunction.Addthefollowing
lineofcodebetweenthecurlybrackets.Thislinechangesthepositionofthecrateonthexaxisby
20pixels(movinginanegativedirection,totheleft).
crate_mc.x-=20;
ClosetheActionsPanel,thentestyourFlashmoviebypressingCtrl&Enteratthesametimeorgoto
themenubarandchooseControlTestMovie.
Youshouldseethecratemovingfromrighttoleftandgoingofftheedgeofthescreen.
Makinganothercrate
Youcouldmakeanothercrateandmakeitmoveinthesamewayasthepreviousone,butwewill
cheatinsteadandreusethecratewealreadymade(reusingobjectsiscommonpracticeingames
programmingasitmakestheprogramssmallerandfaster).
Todothis,wewillwaituntiltheexistingcratemovesofftheleftsideofthescreenandthenwell
magicallymoveitbacktotherightofthescreen.Thiswaywereusethesamecrateoverandover,
butitwilljustlooklikeanothercratemovingacrossthescreen.Theplayerwillbeunawarethat
wevedonethis.
Addsomeextracodetothefunction,sothatitlookslikethis:
function gameloop(e:Event):void{
crate_mc.x-=20;
if (crate_mc.x<-100){
crate_mc.x=650;
}
}
Thiscodeworksbycheckingtoseeifthecratespositiononthexaxisislessthan100(apositionoff
theleftsideofthescreen).Ifthecratespositionislessthan100,thenthecrateisimmediately
placedatposition650onthexaxismeaningthatthecrateisofftherighthandsideofthescreen.
ClosetheActionsPanel,thentestyourFlashmoviebypressingCtrl&Enteratthesametimeorgoto
themenubarandchooseControlTestMovie.
Youshouldseeacontinuousstreamofcratesmoveinfromtherightandgoofftheleftofthe
screen.
InthenextpartofthislessonyouwilllearntomakeJumpManjump.
Exercise
Thinkabouthowyoucouldmakethecratemovefasterorslower.Whichpartofthecodeaffectsthe
speedofthecrate?

ColinMaxwell

2011