Flashvalley - Flash tutorials - Creating a grid dynamically

Creating a grid dynamically with actionscript

download source files

There is plenty of reasons why you would like to create a grid in Flash, if you are creating a sudoku a crossword activity or a chess game you will surely need to create a grid with cells that need to be interactive and able to display some kind of data (graphics or text).

If you try to draw a grid using the Flash drawing tools you will quickly notice that it is a tedious process that requires a lot of patience, no need to say that it is not the best and more efficient way of doing it. As long as you just need a couple of cells it is fine to do it manually but when you need to create a 50x50 grid it can quickly become a real nightmare.

Instead of doing it manually we are going to use Actionscript to create, align and assign behaviors to all the cells of the grid.

In the following tutorial you will learn to :

- attach movie clips dynamically on the stage using a loop and the attachMovie method
- use the [] syntax to dynamically assign properties to movie clips
- assign events to movie clips dynamically.

We are going to create a 10x10 grid and assign a onRelease event to each of those cells. A random number will be displayed into each cells. When a cell will be clicked it will display the name of the according movie clip in the a dynamic text field at the bottom of the stage. Although the interactivity itself has no practical use it will help you to understand processes that will come handy to create tiled based games later on.

2. create an empty movie clip and call it grid_containerMC then drag it from your library on the top left corner of your stage (You can use the align tool

and

and be sure that the "To stage" icon

is selected). Call the instance grid_container (pic1).

pic1

This movie clip we just created will be the container of our grid. It is handy to have a container since we will just have to move the container in order to move the grid later on if it is necessary. Creating the grid directly on the root would be a bad idea since we would need to update the code each time we want to move the grid.

3. Now we are going to create the initial movie clip that we will use later on to create the cells of the grid.
Create a 20x20 rectangle with a light gray for the fill color and a black stroke of 1 pixel (pic2) on top of that rectangle create a dynamic text field and set the parameters like seen on pic3

pic2

pic3

Select the rectangle and the text field all together and press F8 to convert the selection in a movie clip that you name cellMC, be sure that you set the registration point to the top left corner of the movie clip (pic2 above) you can now delete the instance from the stage.

Continue to next page...