Make your own Flash Game Tutorial

This is a cool tutorial for Flash game programmers and designers. Learn how to make a simple Flash game. All the game assets and code are free to download. Use and alter the design. Change the code the way you want.

 

Make a Game in Adobe Flash
Adobe Flash game

The game play is simple (find and click little heart objects to score points). It gives you a scoring system and the chance to start over again. Basically, you have to get to five points or if your lives are used up, and the game is over. But once you get to 5 points you have to work hard to get to 10, 15, 20 …etc. Also available for download is the OOP Action script files and the Mac version.

Downloads:

PC_flash_game.zip

Mac_version.zip

 

Let’s look at a list to see how the game comes together: You will learn about:

* Importing a background scene.

* Converting to movie clips.

* Make a game title.

* Make text click boxes.

* Add a text score counter

* Design art graphics

* Create animation scenes

* Add Actionscript code

 

Watch the video:

On to our simple shooting game tutorial in Adobe Flash:

A.   Making scenes

1. Create a new document and change the size to 800×600 px and frame rate to 24 fps. Import a background image. You can use sample image provided here. Convert the background image into a movie clip by pressing F8 and use upper left corner registration. That will help you to fit the image with the workspace. Use 0,0 in both X and Y value in the properties. Give a title of your game. For example “Flash Shooter”. Also include some “Start Game” text.

 

2. Convert the “Start Game” text into a button. Make any up/down effects that you like. On the hit state just draw a rectangle box that covers the whole text.

 

3. Press Shift+F2 to go to scenes manager. Rename the existing scene to “intro” and add a new scene named “play“.

4. Select the new scene and add the background from the library which you created before (the background image movie clip).

5. Insert a frame in frame 61 by pressing F5 in the background layer. Now make a new layer and add a score board. To do that, first insert a static text “score” for example. Beside that add a dynamic text box. Give an instance name of the dynamic text box “score_txt“. Now select the both text and make them a movie clip.

 

6. Now we’ll make our target object that we’ll use to shoot. Make a ball shape or anything you want. Convert it to a movie clip. Double click to edit that object. Now just animate it to make it appear and disappear.

 

7. In my example it appears in frame 10 and disappears in frame 45. Insert a new keyframe in frame 60 and another one in 65. Make an animation as if it’s broken when clicked.

 

8.  For different position of the ball we’ll use 10 keyframes. Insert keyframes from frame 50 to 60 and place the ball in different positions in every keyframe.

9.  Now go to scenes manager and add a new scene named “over”. That is the game over scene. Now place a “game over” text on the score board movie clip from the library. You can also place a play again button just like the start game.

 

B.   Actionscript

1. First of all go to intro and add a new layer. Insert this action to the layer :


stop();

2. And this action to the Start Game button :


on(release) {

	gotoAndPlay("play", 1);

}

This action sends us to the “play” scene when we press and release the start game.

3.  Go to play scene and insert some intro like “3, 2, 1, GO” like in my example. After that, my sample starts the game from frame 50. So in the actions layer, insert new keyframe in frame 49 and add these actions :


gotoAndStop(random(10)+50);

Remember, we had the ball in different positions in 10 keyframes after frame 50. This command takes us to a random frame in 10 keyframes after frame 50.

4. Add these commands to frame 1:


var score=0;

var lives=5;

This command is to count our score and lives. It sets a variable to start the game.

5. Now go to the score board movie clip and double click to edit. Insert two frames. Now add a new layer and put two keyframes there. In the last keyframe insert this command :


score_txt.text = _root.score;

This will show the score variable in score_txt field. By using two keyframe the score will update quickly.

6. Now let’s edit the ball. All of them are an instance of one object. So we’ll edit any one of them or edit it from the library.

 

Add a new object that covers the ball perfectly and place in the exact timing when you need the ball to be clicked. Convert the object to a button and change opacity to 0% then give this command on the object :


on(press) {

	_root.score++;

	gotoAndPlay(60);

}

Because the breaking animation is on the frame 60.

 

7. Now add this action to frame 45:


gotoAndPlay(1);

_root.lives--;

if(_root.score>0){

	_root.score--;

}

_root.gotoAndStop(random(10)+50);

This action minuses lives and score if the player fails to click.   Add this action to frame 65 : gotoAndPlay(1);


_root.gotoAndStop(random(10)+50);

8.  Now we’ll make the game more difficult. If the player clicks outside the ball he loses both lives and score by 1. Now give an instance name to the background movie clip “bg_mc“.   9.   Add this action to frame 49 : (as the game starts from 50)


bg_mc.onPress = function() {

	if(score>0) {

		score--;

	}

	lives--;

}

C.    Lives

1. Create 5 heart shapes and convert them all into one movie clip.

 

2. Now in that movie clip select them all and make the movie clip again with an instancename “lives_mc“. Now we’re in third level from our main clip.

3. Now edit that movie clip and insert 5 keyframes on every frame 1-5. Now keep all 5 shapes in keyframe 5, keep 4 shapes on keyframe 4 … like this you will have a single shape in keyframe 1.

4. Go to the second level of the main lives movie clip that is directly on our main clip. Insert 2 keyframe and in the second frame add this action :


if(_root.lives>-1) {

	lives_mc.gotoAndStop(_root.lives);

}

if(_root.lives==0) {

	_root.gotoAndPlay("61");

}

5. Now go to the “play” scene and add this action to keyframe 61:


gotoAndPlay("over",1);

This action will take us to the Game Over scene when lives = 0. I know your head must be spinning right now, so watch the video as you are reading this text. It will really speed this up for you.

​Add this page to your Website, Blog, or Forum. Let your friends know about this tutorial:<a href= “http://www.tutorialboneyard.com/flash-shooter-game” target=”_blank”>Make Flash Game</a>

More Flash tutorials:

Tweet, Recommend, or give a thumbs up: