Flashvalley - Flash tutorials - Creating a grid dynamically

In your library you should now have 2 movie clips grid_containerMC and cellMC (pic4). Right click on cellMC and in the menu select Linkage. In the new window check Export for Actionscript (pic5)

pic4

pic5

At the bottom of the stage create a static text field with the text cell name : and a dynamic text field (pic6) with the properties as seen on pic7.

pic6

pic7

4. Above the layer which contains grid_container, create a new layer, select the first frame and press F9 to open the action panel.

We are now ready to code !

Let's have a look at the code below, roll over the if you want to see the comments associated with the nearby code (be sure you have javascript enabled for this to work properly).

// we initialize the _x and _y position of the first cell as well as a counter that we will use to set the depths and create the cell name
initX = 0;
initY = 0;
counter = 0 ;

// The magic really starts here between the 2 following loops, roll over the question mark for detailed explanations.
for(var i=1;i<=10;i++){
for(var j=1;j<=10;j++){
counter++;
// We attach the movie clip on the stage
grid_container.attachMovie("cellMC","cell"+counter,counter);
// We assign a _x position to the cell
grid_container["cell"+counter]._x = initX;
// We assign a _y position to the cell
grid_container["cell"+counter]._y = initY;
// We generate a random number that we display in the dynamic text field of the cell
grid_container["cell"+counter].randomNumber.text = Math.floor(Math.random()*9)+1;
// We assign a onRelease event to the cell
grid_container["cell"+counter].onRelease = function(){
cellName.text = this._name;
}
initX +=30;
}
initY +=30;
initX = 0;
}

You can preview the final result here

Good luck :)

flashvalley.com