CAP121 Tut Flashgame

8/12/2019 CAP121 Tut Flashgame

1/6

Computer Arts Projects _March 2009 www.computerarts.co.uk

78 Project four Get involved

Luke FeldmanAn Australian artistbased in the USA,Feldmans workranges fromcomputer animation,website design andfunctionality,tocharacter design,illustrations,installations andadvertising.www.

lukefeldman.com

SkillsBuild a

Flash-based game Learn howto programa scoreboard

Illustrator/ Flash 8/ActionScript 2.0

Design aFlash-basedvideogame

Luke Feldman reveals

how to create an excitingFlash-based computergame that will bring youraudience back time andtime again The aim of any game is to get people to play it. But agame does not have to be complex to generate a lot of attention visually appealing graphics, a fun concept, a fast pace and ascoreboard are all you need to succeed. Everyone has a competitiveside, so the presence of a basic scoreboard, in particular, will helpentice the audience to return.

This project takes you through a step-by-step process tocreate a simple, yet effective, Flash-based arcade game. NamedBeesting, the aim is to obtain the highest score by preventing yourcharacter, the bee, from being hit by the enemy, the skull. Thefollowing steps use Illustrator and Flash, and cover tips on leset-up, game programming, scoreboard programming, and design.

On your discYoull nd the

resources you needto work along withthis project,including Flash les,some code, and aplayable version ofthe game, on yourcover disc, in theResources section.

CAP121.tut_flashgame 78 9/2/09 10:19:3 am


2/6

www.computerarts.co.uk March 2009 _ Computer Arts Projects

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 theenemy. 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 hereare a bee (including a dead version of the character for when a player is killed), a skull, andthe background. You should also decide on the gameplay and how the game will work atthis stage. Beesting is an arcade game, the aim being to keep the bee alive by using themouse to avoid the ying skulls. The longer the player stays alive, the higher the points.



3/6



06 Now create a new movie clip named Player, making sure the Export forActionScript box is checked next to Linkage.

04 Next, create the start screen, end screen, and lay out the elements thescoreboard, start button and restart button. When youre happy, create a new Flash le at550x400px, with a frame rate of 24fps. Export the elements out of Illustrator (File>Export ) asseparate *.swf les, such as background.swf, scoreboard.swf, character.swf.

03 Once the main elementshave been designed, create a newIllustrator le ensuring that thecolour mode is set to RGB. Scan thesketches (you can either create yourown graphics, or use those suppliedon your disc), and import them intoIllustrator. This game is designedonly for the web, so will be a size of550x400 pixels.

05 This is what the nished Flash le will look like. Take note of the organisation of the le, including layernames playerAlive, playerDead, for instance.

Always use RGB When creating artwork for use in Flash, ensure you always set your colours in Illustrator to RGB. Using CMYK willresult in the colours fading when they are imported into Flash.



4/6



08 To add player controls, go to the Library paneland drag the Player movie clip onto the Player layer. Givethe Player movie clip the Instance name of Player, andadd 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=520){this._x=520;}if(this._xConvert to Symbol), with an Instance name ofplayerAlive. Import the Player-Dead character into Flash, and place it on the playerDead layer. From the library, dragthe Wings and Blood movie clips (you will nd these on your cover disc) onto the layers of the same name. Positionthe elements on the screen so that they overlay each other.

Element size Create all the art elements in the actual size that you want to see them in the game. This saves time whenimporting the elements into Flash, as they will not have to be re-scaled to the correct size.

Clipboard I haveoccasionally found thatwhen importing artworkfrom Illustrator the coloursseem faded. My solution isto use the clipboard to copyobjects straight fromIllustrator to Flash.

10 For the Start button, create a button named buttonStart (create an object, selectit, and go to Modify>Convert to Symbol>Button, or use the Start Button object provided). Giveit 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 anInstance name of Enemy.



5/6



13 For the players nal score,create a text eld with a Var: name ofendScore. Place the button onto framethree of the End Score layer, and position itin the centre of the stage.

11 Create a button named buttonRestart with the Instance name, buttonRestart. Place the button ontoframe three of the Restart Button layer.

12 To set up the scoreboard, create a text eld (select the Text tool and click on thestage) with a Var: name of score this will show the players score. Place a button onto frametwo 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.



6/6



Check the code!Always check the spelling of code. Many errors are simply

caused by misspelling the code.

15 Add this code, which youll nd on your disc, to the rstframe of the Script layer. This sets up the initial values for the mainvariables 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 Scriptlayer. The For/Next programming loop was used to remove all of the

Enemy movie clips. Show the nal score, and check to see if thebuttonRestart 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 functionali ty of the game, add this code to the second frameof the Script layer. There are three main pieces to this code: Update this checks to see if theplayer is still alive; Create Enemies by attaching, positioning and moving the EnemyMovieClip; HitTest check to see if the Enemy movie clip has hit the Player movie clip.


CAP121 Tut Flashgame

Documents

Transcript of CAP121 Tut Flashgame