5+: Start-up & Restart Buttons

This tutorial builds on Part 5 of the six-part tutorial series on building a Space Shooter. 

We're going to create a start-up screen with start button, and on the end game screen we'll create a similar restart button to allow the player to get back in the game.

Prerequisites: Please complete Tutorial 5 first.

Tools & Techniques: displaying results in textboxes, changing the visibility of symbols on stage.

The game will not run unless we now call initialise under our global variable declarations. Instead we are going to create a start-up screen with a button.

Begin by creating a layer above 'game over' but ideally below 'actions', label it 'start up'.

Now draw a square the same dimensions as your stage, directly covering it (i.e. x = 0, y = 0, width = 800, height = 450). This may be a solid colour, or a gradient as shown below. You may also use the same background used in the EndGame symbol.

With this rectangle selected, convert it to a symbol called "StartGame"

It will also need an instance name, 'startScreen_mc':

Navigate inside of this new symbol and check the location bar at the top:

It is good practice to name the layers, so call the first 'background'.

Add two more layers above called 'design' and 'controls'. The latter is where we will add the start button.

Select the 'Rectangle' tool, customising the properties to include a thick stroke, a suitable fill, and you may change the 'corner radius' to create curved edges (see below).

Draw your rectangle on screen taking into consideration that this will become your button.

Convert the new rectangle into a symbol named 'Start', making sure you select 'Button' as its type.

Enter the button and add text to a new, higher, layer. Suitable text for the button would be the word 'Start'.

The timeline in button symbols is a little different as there are Four frame sections labelled Up, Over, Down and Hit.

Up: What the button will look like in its default static state, i.e. when the button is UP.

Over: How the button will appear when the mouse is hovered OVER the button.

Down: The button will change to this state as it is pressed DOWN.

Hit: Users never see this view, any Fills or Strokes will denote what is 'click-able' - I use bright colours that stand out for clear demarcation.

Below are the options selected in this tutorial, but you may change these to your needs (note that the 'Hit' area doesn't need any detail).

Exit the button, selecting it on the main timeline and giving it a suitable instance name with '_btn' for easy identification as a button instance.

Optionally you may like to use the 'design' layer you created previously to place some further information on the start screen. You have a number of assets available in the library so why not use them as we have below:

If you would like a restart button on the 'Game Over' screen then duplicate this button from the Library (name it "Restart").

If you have created the duplicate start button, change the internal text appropriately. The example below has changed the text from 'Start' to 'Restart'.

Note: if you want to reuse the start button without changes to text or design, you do not need to duplicate it as you can simply drag in another instance.

Drag and drop the 'Restart' button into the 'EndGame' movie clip.

As with the 'Start' button, the 'Restart' button will need an instance name, "restart_btn".

Now we can return to the main Actions panel for the main timeline and edit our core code.

At the top, above our variable declarations we can add an event listener to allow a mouse click on the Start and Restart buttons.

Whilst these will always be 'listening', the buttons will only be useable when their parent symbols (EndGame named gameover_mc and StartGame named startScreen_mc) are visible.

The following two lines should be placed at the top of the code above all subroutines, but below any 'import' statements that may exist.

startScreen_mc.start_btn.addEventListener(MouseEvent.CLICK, startGame);
gameover_mc.restart_btn.addEventListener(MouseEvent.CLICK, restartGame);

The initialise subroutine call currently occurs when the program is run, and this should no longer be the case. Either remove or comment out the call as below:

// initialise();

Finally, we will create two subroutines for each of our two new event listeners. When either the Restart or Start buttons are pressed, their parents will be made invisible and the initialise subroutine will be called to reset the values of all variables and add the event listeners.

These may be placed at the end of all other code, outside of any other subroutines (but may exist anywhere so long as they are not inside another subroutine).

function startGame(event: MouseEvent) {
	startScreen_mc.visible = false;
	initialise();
}

function restartGame(event: MouseEvent) {
	gameover_mc.visible = false;
	initialise();
}