Creating a game menu

Although this menu is designed for a shooting game, using the skills that you learn from this tutorial will help you when creating and making any menu for any flash game or flash movie.

Double click on layer 1, and rename it actions.
Insert another 4 layers, renaming them: ‘title’, ‘purchases’, ‘player name’ and ‘start button’.
More layers will need to be inserted shortly, for the shooting menu’s animation, which will be your creation (see animation tutorials if unsure). If this is the first menu you have ever made, perhaps try adding some animation once your comfortable with the concept of creating a menu. so far you should have the following layers

-Actions (For all the actions)
-Title (Contains the title of the game)
-Purchases (A layer which controls the purchasing funtions)
-Player name (Allows the player to enter their name)
-Start button (Allows the player to begin the game)

In this shooting game menu, the player will be required to enter their name, purchase bullets, and press the start button to begin.

You will need to think of a title for the game, which will be ‘Shoot to Kill’ for this tutorial. Using the text tool, insert a textbox somewhere on the stage, making sure it is on the title layer, and insert the title of the game in the textbox. Being a main heading the text should be made visible with colour, and made a moderate size. For this tutorial the headings original position is off the stage, and once the game has started it slides in from the side of the stage to the middle of the stage.
Let's make your title do this also. On frame 1 of the title layer move the text off the left hand side of stage, making sure none of the text is visible on the stage. Right click on frame 15 on the title layer and insert a keyframe. On frame 15 move the title text to where you want it to slide to. Once this is done, right click anywhere between the 1st and 15th frame and create motion tween. Test the movie to see the result.

Now that there is an animation at the start of the game, you don't want to
see all the other menu options until this animation is over.
So you will need to insert a keyframe on frame 15 of all the other layers, as this is where the animation ends.

Before going any further define the variables of the game. On the 15th frame of the actions layer, insert the following actionscript:

stop();
var ammo = 0;
var money = 100;

This tells Adobe Flash to set the players money to 100, and the players ammo to 0. Obviously the player will require some money to purchase ammo. But only a little bit, as this is only the beginning of the game.

Now for the player name layer:
Using the text tool, insert a textbox somewhere on the stage on the 15th frame. In the textbox properties, set it to input text, this allows the player to enter text in to the textbox. Select the textbox, and give it a var of ‘playerName’ without the quotation marks. Also, next to ‘Var:’ on the left side, there are three buttons, the one closest to ‘Var:’ puts a border around the text box, click on it, and make sure that there is a border around the text box. (If this isn' done, the user won’t be able to see where to enter their name).
Now next to this playerName input textbox, on the left hand side, insert a static textbox. In the textbox write ‘enter name:’
The shooting menu now has a place for the user to enter their name!

For the purchase layer:
You will now need to provide the player with some stats showing them how much ammo they have purchased.
Using the text tool insert a static textbox on the stage, and write in the textbox, ‘ammo:’ Now next to this, on the right hand side of this textbox, insert a dynamic textbox, give it a var of ammo. The shooting menu now has somewhere to display how much ammo the player has purchased.

Now you will need to design a button that allows the user to purchase the bullets.
Using the text tool, draw out a static textbox, and type in ‘Purchase Bullets’. You could also draw a little bullet to put next to the text just to make it more creative and interesting. Select the purchase bullets text, right click on it, and convert it in to a button.
Right click on the purchase bullets button, and give it the following actions:
on (release) {
if (_root.money>24) {
_root.ammo += 5;
_root.money -= 25;
} else {
_root.ammo += 0;
}
}

This tells Adobe Flash that when the button is released, if the money is larger than 24, the users ammo will go up by 5, however, if it’s below 24, the ammo won’t go up at all.
Meaning the cost of 5 bullets is, 25.
The user can now insert their name, and purchase bullets for the game menu.

You will also need to insert some money functions on this layer:
Using the text tool, insert some static text somewhere on the stage, and make the text '$', on the right hand side of this, insert a dynamic text box, with the var of money. And that's it for that!

Last but not least, the start button:
Simply draw the graphic that you want to be you start button, right click on it, and convert it in to a button.
Now give the start button the following actions by right clicking on it and selecting actions:

on (release) {
gotoAndStop("Scene 2", 1);
}

This tells flash that when the button is released, go to scene 2.

Scene 2, is where the start of the main game begins. To insert ‘Scene 2’, click on ‘insert’, from the top menu, and select scene.

On scene 2, insert three dynamic textboxes, and three static text boxes.

Give these var names to the dynamic text boxes:
One textbox needs to have a ‘var’ of: ammo
Another needs a var of: playerName
And the last needs a var of: money.

Now obviously for the static text boxes, they describe what the dynamic text boxes are for. So next to the ammo text box on the left hand side, insert the text ‘ammo’.
For the money text box, it needs a money symbol next to it ‘$’.
Being a shooting game, you may want to make a crosshair cursor. Take this tutorial to see how to make a crosshair cursor.

To go back to scene 1, click on ‘view’, from the top menu, hover the mouse over ‘go to’, and select scene 1.

This is a basic way of creating a menu, but it is fully funtional, and the skills learnt from this tutorial, can definately be used for other tasks. NOT JUST FOR A SHOOTING GAME!

1 comment:

Unknown said...

ty... help a lot for a newbie like me :) gj