Creating Minesweeper in Flash

Tutorial parts

Part 1: Understanding the game and setting up our FLA

Bookmark and Share

Introduction

There's probably not a lot that needs to be said about Minesweeper, we've all played it a thousand times or more since it's on pretty much every computer. It consists of a grid, each cell may or may not contain a mine, if it does not contain a mine then it may be blank or it may have X adjacent mines.

Setting up our Flash file

As with Sudoku, we're going to use a hybrid of creating elements on our stage and programmatically through ActionScript. Our presentation is going to use 2 different layers. The background and the interface components.

Setting up your Minesweeper FLA The structure of our FLA

Remember to name your layers, you will thank yourself if you ever have to come back to an old FLA.

The background

The background is just a drawn "rectangle primitive" with some curvature applied to it.

Selecting the primitive rectangle tool in Flash Selecting the rectangle primitive tool in Flash
Adjusting the rectangle primitive properties to add curvature Adjusting the rectangle primitive properties to add curvature

The interface

These are the actual buttons within the game that people are going to click on. There are three buttons, Easy, Medium and Hard.

To create a button in Flash select the Text tool, click somewhere on the stage (make sure you select our Interface layer), write the button text, select the Pointer tool so the text is committed to the stage and then press F8.

Creating a button in Flash Creating a button

Give each button a meaningful name so you can find them easily in the Library and make sure you assign an instance name to the button on the stage. You do this by selecting the button and then in the Properties dialogue entering text in the <Instance Name> textfield.

Assigning an instance name in Flash Assigning an instance name

This is a very important step because the instance name allows us to access the button from our code.

Our win dialogue

When the player has won the game we want to display a message saying so. To do this we create a movieclip (created the same way as buttons) called WinDialogue. There's one significant difference to the buttons though, we're sharing this asset with the code so it can be programatically created.

Our win dialogue's properties The win dialogue's properties

Once you have done all of this you're ready to start coding the game.

Tutorial parts