[Guide]Create a simple Flash game

[Coolis®]

This approach will also let you add extra elements to the game easily, and the technique can be applied to a variety of different game types: the principles are largely the same whether you’re creating a driving game or a shoot-‘em-up. If that all sounds a bit scary, don’t worry – it will start to make sense as we work through the steps.

 

 

01. Open your FLA from last month (or open start.fla from the cover disc). First, we need to allow the player to control our character, Madame Octopus (MO). We need to control her using ActionScript, so open your library (Cmd/Ctrl + L) then locate your Madame Octopus MovieClip. Right-click (Ctrl + click) on the MovieClip, choose Properties and then under Advanced, tick the Export for ActionScript checkbox. Give it an Identifier of ‘MO’ and a class of ‘MO’.

 

 

02. A class, in this context, is a text file with a set of instructions and information about an object. In this case, we need to create a file for the class we just created: ‘MO’. Choose File > New, then from the Type list select ActionScript File. We’ll enter all the code for MO into this file. Save the file as MO.as.

 

03. Enter the following code into your MO.as file (you can copy and paste it from the file Step 3 on the cover CD), then save the file and return to the main Flash movie. class MO extends MovieClip { var movedelta = 10; function onEnterFrame() { if( Key.isDown(Key.RIGHT) ) { _x = _x + movedelta; } if( Key.isDown(Key.LEFT) ) { _x = _x - movedelta; } if( Key.isDown(Key.UP) ) { _y = _y - movedelta; } if( Key.isDown(Key.DOWN) ) { _y = _y + movedelta; } } } Select Control > Test Movie to test whether the movement works when you press the arrows on your keyboard.

 

 

04. The code we just created sets up the class MO as a sub-class of the MovieClip class; that is to say, we’re using the existing MovieClip class and giving it some extra instructions. We create a variable called movedelta and give it a value of 10. This is the amount, in pixels, that the character will move each time a button is depressed. We also added four conditional statements inside a function. The function is special, as it’s built into the MovieClip class. onEnterFrame executes every time a frame is encountered in the movie. As our movie is running at 30fps, this function will execute 30 times a second. The conditional statements check each arrow key in turn to see if it is pressed down and if it is, the position of the character is updated on the X or Y axis, as appropriate.

 

 

05. We’ve now got Madame Octopus happily moving around the screen in response to the arrow keys. The next stage is to add some objects for her to avoid. We’ll make use of the bubble movie clip that we used last month. Locate the bubble MovieClip in your library, right-click (Ctrl + click) on it and choose Duplicate. Name the duplicate ‘evilBubble’, and again tick Export for ActionScript, giving the MovieClip an identifier of ‘EB’ and a class of ‘EB’. If you didn’t complete last month’s tutorial, open the file EB.as from the cover CD.

 

06. Double-click on the evilBubble symbol in the library, and remove all but the first frame of the timeline by highlighting the frames, right-clicking and selecting Remove Frames. Delete the motion guide layer, then reposition the bubble so that its centre aligns with the origin crosshairs on the stage. Select the bubble and use the Tint colour effect to give it a colour.

 

 

07. The evil bubble doesn’t yet appear on stage; it’s in the library waiting to be used. We’re going to create lots of evil bubbles using ActionScript. Go to File > New, select ActionScript file, and save the resulting document as EB.as.

 

 

08. Enter the following code into the EB.as file (you can copy and paste it from the file Step 8 on the cover CD). This code is similar to that for the MO class, but has a few differences we’ll look at in a moment: class EB extends MovieClip { var speed; function onLoad() { _x = 800; _y = Math.random()*490; _xscale = _yscale = Math.random()*80 + 20; _alpha = 60; speed = Math.random()*5 + 5; } function onEnterFrame() { _x -= speed; if(_x < -60) { this.removeMovieClip(); } } }

 

 

09. The code we’ve just added sets up a variable called speed that represents how quickly the bubble moves across the screen. When the bubble is first created, we set it to appear off the right-hand side of the screen (at an X position of 800 pixels) and we randomly set the Y position somewhere between 0 and 490 pixels (the height of our movie). We create a random scale and speed for the bubble, then each time the onEnterFrame function runs we update the position of the bubble and if it’s moved out of sight (60 pixels to the left of the screen) we remove it.

 

10. The bubble is ready to go now, but we need something to make it appear. We’ll use the MO class to do this, as the character is always on screen. Edit the MO.as file, and add a new variable underneath the var movedelta = 10 code as follows: var bubbleCounter = 0; Next, after the code that checks for the arrow key presses (within the onEnterFrame function) enter the following additional code (or get it from the CD file Step 10): bubbleCounter += 1; if(bubbleCounter > 30) { bubbleCounter = 0; _root.attachMovie(“EB”, “EB”+_root.getNextHighestDepth(), _root. getNextHighestDepth()); } } }

 

11. Test your movie: you should see an evil bubble appear on screen every second, travel across the screen and disappear off the left-hand edge of the screen. As it takes more than one second for the travel to happen, it’s possible to have many bubbles on screen at once. The code we’ve just added controls how often (in frames) a new bubble is created. If you want more, lower the “>30” bit of the code to, say, “>20”. If you want fewer, increase that number.

 

 

12. We’re going to add some collision detection to the bubbles. When they hit Madame Octopus, we want to end the game (the aim being to avoid the bubbles for as long as possible). To do this, we need to first give MO an instance name so we can refer to her from the bubble class. Click on the Madam Octopus then enter an instance name of ‘octopus’ in the Properties panel.

 

 

13. Create a new symbol (Insert > New Symbol), drag it onto the stage and give it an instance name of endGamePanel. Inside the endGamePanel, create a ‘Game Over’ screen to suit (or check out our version). Set the alpha property of your symbol to 0. Create a new layer in your main timeline. Name it actions, then add the following code, or copy and paste it from the cover CD file Step 13a: Var tmpscore = 0; var playing = true; function endGame() { playing = false; _root.endGamePanel._alpha = 100; } Edit EB.as and enter the code below inside the onEnterFrame function, or copy and paste it from file Step 13b on the cover CD. This uses the built-in hitTest function to check if a bubble is touching MO. If it is, the bubble is removed and the endGame() function is called: if(this.hitTest(_root.octopus)) { this.removeMovieClip(); _root.endGame(); }

 

 

14. In the main timeline, add a text field set to Dynamic. Name the field ‘score’. In your EB.as file, immediately after if(_x < -60) {, enter the following code: _root.tmpscore+=10; _root.score.text = tmpscore; Finally, we can stop the score from growing when the game ends by adding a conditional statement around the score code and the bubbles code. Add the following code around your existing statements: If (_root.playing) { // existing code is in here } Check our sample files on the disc to make sure you’ve inserted this code correctly.

 

 

15. Taking it to the next level from here isn’t hard; the basics are all in place. Why not add a ‘Play Again’ button to the endGamePanel? This would need to reset ‘playing’ to true, tmpscore to 0 and hide the endGamePanel again. You could also add characters that squirt ink, and arm your octopus with a weapon. The code we used for the bubbles will work for these.

 

 

Credits: Digital Art

[MiraDBZ]

Sorry if this is considered as spam but im very angry..

 

Ok you c/p a guide from a site ok but c/p 20 guides from a site that becomes annoying.

[DreaM]

Seriously, Pwnz0r is right!

[Maxtor]

it is ok to share guides. just give credits.

[Sуѕтємƒяєαк]

Sorry if this is considered as spam but im very angry..

 

Ok you c/p a guide from a site ok but c/p 20 guides from a site that becomes annoying.

+1 to that.

 

The guide may be cool, but c/p has its limits.