Flash Tutorials
Flash ActionScript Mines Tutorial 1 Next
Suppose that we want to implement a game of Mines, the simple game that you can find on Windows, with clones on other systems also available.
Let's start a new Flash / ActionScript 3.0 project called mines. The basic structrure that we're going to need is a table to contains the tiles in the game. We'll start with the "beginner" settings in the game where the table has dimensions 9x9 and there are 10 hidden mines.
Stage
The first thing to do is preparing the stage. We'll start with a square stage large enough to store 9x9 tiles, with a border around it for other interface elements we might want to add. Assuming that you're working in the Classic mode for the workspace, in the Properties area to the left of the stage, click on the Edit button next to the dimensions to make it 400x400, and then on the color square to set the background color to whatever you want.
Basic Images
Next, we need to create the following 5 tile objects: for a closed tile, for a highlighted one, for a tile having a flag on top of it, for a mine that has exploded, if the game is lost, and for a bomb that has been revealed, when the game is won. Since these are easy enough, we'll create them using vector drawing directly in Flash.
Let's start with the closed tile. Start by drawing a square of 30 x 30 pixels in a color contrasting with the background, anywhere on the screen. For that, click on the rectangle tool, then click on the first corner, then drag it and release for the second corner. Then click on the Selection tool (pointer) in the toolbar to the left of the stage all the way to the top, and double click on the rectangle you just created. Double click on it to select it. In the Properties pannel to the right, set its width and hight to 30. Set a border in a darker or lighter color (depending on the background), and then set the fill color of the tile whatever you want. Then if you feel confident about it, you can add more decoration to it, for example, to give it a 3D effect.
Select the entire tile and make a copy of it somewhere close by. Edit the colors of the second tile to lighten them. This will be your highlighted tile to be used when we click on it. Once you've done that, select this entire second (highlighted) tile, right-click on it, then select Convert to Symbol from the pop-up menu. Leave the type of the symbol MovieClip, and give it the name TileHighlighted. Click on the button labeled Advanced and check the option Export for ActionScript.
Paste another copy of the first (simple) tile somewhere else, and then select the original first tile and convert it to another symbol of the same type called TileClosed. Then go back to the second copy of the original file and add something that can stand for a flag on top of it. Select the whole tile and convert it to a symbol called TileFlagged. Repeat the operation to create another verion of the tile containing an exploded bomb and a simple bomb. Call them TileExploded and TileBomb. At the end, convert the original tile also to a symbol and call it TileClosed. Once you are sure you have adjusted the color of the stage to match the tiles, simply delete them from the stage. Next we'll need to draw an area for the whole table. Since the tiles themselves are 30 x 30, you'll have to draw a rectangle of size 274x274 to include a 2 pixel border. Click on the rectangle tool and set the stroke in the properties to No stroke (for now), set the fill color as you like, then draw another rectangle in the middle of the stage. Select it using the selection tool, then edit its properties in the panel to the right. Set both the width and the height to 274. Then w need to give precise values to its starting position, so that we know how to place the tiles in the code. If we subtract 274 from 400 and then divide by 2, we get 68. Set both the origin x and origin y to 68. This will center the table on the stage in both directions. Then the origin point for the tiles will be 70x70 (we will add a 2 pixel border next). Now you can set the stroke of this area as 2 pixels wide and whatever color you want. Without deselecting it, right-click on it and convert it to a symbol. Since we don't need to interract with it, you can select the type of symbol as Graphic. This one does not need to be exported to ActionScript.