Creating Sudoku in Flash
Tutorial parts
Part 1: Understanding the game and setting up our FLA
Introduction
The first step to creating any game is to understand what it is you're trying to make. Sudoku is a very simple game to understand, it consists of rows, columns and 3x3 regions and each must have exactly 1 of each number from 1 to 10. You can read more about it at Wikipedia.
Breaking it down even further we have a 9x9 grid which forms the rows, columns and regions, and each of those cells needs to let users enter a number or have a number locked in by the game.
A sudoku grid
Now that we have an understanding of the game we can begin to make it in Flash.
Setting up our Flash file
For this example we're going to use a hybrid of creating elements on our stage and programmatically through ActionScript. Our presentation is going to use 4 different layers. A background, the grid background, the grid lines, and interface components.
The structure of our FLA
If you're new to Flash you should note that I've assigned each of these layers a name and a single purpose. This is an important habit to build, you never know when you will come back to a FLA file to do some more work and the default names "Layer X" quickly become meaningless.
The background
The background is just a drawn "rectangle primitive" with some curvature applied to it.
Selecting the rectangle primitive tool in Flash
Adjusting the rectangle primitive properties to add curvature
The grid background
In this game I decided one grid cell should be 50x50 pixels. I prefer a more subtle way of indicating the grids than very thick black lines, so to create the grid background I drew 2 ordinary rectangles, one light gray and one dark gray, each covering one region (3x3 cells, 150x150 pixels). Group them using CTRL + G to make it easier to copy & paste them.
Our grid background rectangles
Once you have drawn them you just copy & paste them to form the 3x3 regions using a checkerboard style and aligning them flush next to each other. Because they are exactly 150x150 pixels .
The grid lines
The grid lines are just plain white lines forming a 9x9 grid of the cells, each 50x50 pixels. I didn't put lines for the edges.
The interface
These are the actual buttons within the game that people are going to click on. There are three buttons, New Game, Hint and Solve.
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
Give each button a meaningful name, like "NewGameButton", and then 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
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.
The win dialogue's properties
Once you have done all of this you're ready to start coding the game.
Tutorial parts
