creating a grid

Posted on Thursday, 22 April 2004 by nuno mira

I've had to do this so many times and seen this question asked so many times as well...
This is an easy way of creating some cool effects, like this one for example.

Here's a simple script to create a grid (without the color effects):

PLAIN TEXT
Actionscript:
  1. var x0:Number = 0; // x position (upper left corner)
  2. var y0:Number = 0; // y position (upper left corner)
  3. var nr:Number = 3; // number rows
  4. var nc:Number = 10; // number colums
  5. var vd:Number = 50; // vertical distance between the mcs
  6. var hd:Number = 50; // horizontal distance between the mcs
  7.  
  8. for (var i = 1; i <= nr; i++) {
  9.     for (var j = 1; j <= nc; j++) {
  10.         // names are assigned like positions in a matrix: square(i,j)
  11.         var mc = this.attachMovie("square", "square" + i + j, i + "" + j);
  12.         mc._x = x0 + hd * (j - 1);
  13.         mc._y = y0 + vd * (i - 1);
  14.     }
  15. }

This piece of code creates a rectangular grid, with nr rows and nc colums, i.e., with nr*nc squares.
You can think of this grid like a nr*nc matrix.
download .fla
This is achieved using a nested for() loop inside another for(),

In this .fla you'll also find code that creates exactly the same grid, but assigns different instance names to the squares. This can be important, depending on the way you want to interact with the attached movie clips.

PLAIN TEXT
Actionscript:
  1. var x0:Number = 0; // x position (upper left corner)
  2. var y0:Number = 0; // y position (upper left corner)
  3. var nr:Number = 3; // number rows
  4. var nc:Number = 10; // number colums
  5. var vd:Number = 50; // vertical distance between the mcs
  6. var hd:Number = 50; // horizontal distance between the mcs
  7. var s:Number = 0; // variable to hold names and depths
  8.  
  9. for (var i = 1; i <= nr; i++) {
  10.     for (var j = 1; j <= nc; j++) {
  11.         s++;
  12.         // names are sequential: left to right, top to bottom
  13.         var mc = this.attachMovie("square", "square" + s, s);
  14.         mc._x = x0 + hd * (j - 1);
  15.         mc._y = y0 + vd * (i - 1);
  16.     }
  17. }

In case you don't want to have nr*nc squares, or just want to see things done in a different way:
The second example uses the modulo operator - % - but places the squares in a strange order.
download .fla
The third example does the same without the modulo operator, and places the squares sequentially on the stage.
download .fla
In these last two examples you specify both the number of movie clips and the number of rows:

PLAIN TEXT
Actionscript:
  1. var x0:Number = 0; // x position (upper left corner)
  2. var y0:Number = 0; // y position (upper left corner)
  3. var nt:Number = 12; // total number of movie clips
  4. var nc = 5; // number of columns
  5. var vd:Number = 50; // vertical distance between the mcs
  6. var hd:Number = 50; // horizontal distance between the mcs
  7.  
  8. for (var i = 1; i <= nt; i++) {
  9.     var mc = this.attachMovie("square", "square" + i, i);
  10.     var aprox = Math.floor((i - 1) / nc);
  11.     mc._x = x0 + hd * ((i - aprox * nc) - 1);
  12.     mc._y = y0 + aprox * vd;
  13. }

In this example you obtain only 2 movie clips in the last row.

Here's a simple example interacting with the squares: fading them in and out:

PLAIN TEXT
Actionscript:
  1. var x0:Number = 0;
  2. var y0:Number = 0;
  3. var nt:Number = 12;
  4. var nc = 5;
  5. var vd:Number = 50;
  6. var hd:Number = 50;
  7. for (var i = 1; i <= nt; i++) {
  8.     var mc = this.attachMovie("square", "square" + i, i);
  9.     var aprox = Math.floor((i - 1) / nc);
  10.     mc._x = x0 + hd * ((i - aprox * nc) - 1);
  11.     mc._y = y0 + aprox * vd;
  12.     mc.useHandCursor = false;
  13.     // fade in
  14.     mc.onRollOver = function()
  15.     {
  16.         this.onEnterFrame = function()
  17.         {
  18.             if (this._alpha> 0) {
  19.                 this._alpha -= 10;
  20.             } else {
  21.                 this._alpha = 0;
  22.                 delete this.onEnterFrame;
  23.             }
  24.         };
  25.     };
  26.     // fade out
  27.     mc.onRollOut = function()
  28.     {
  29.         this.onEnterFrame = function()
  30.         {
  31.             if (this._alpha <100) {
  32.                 this._alpha += 10;
  33.             } else {
  34.                 this._alpha = 100;
  35.                 delete this.onEnterFrame;
  36.             }
  37.         };
  38.     };
  39. }

download .fla
This entry was posted in 1. Bookmark the permalink.

One Response to creating a grid

  1. Adam says:
    Saturday, 19 June 2004 at 18:03

    I’ve been looking for an example of how to construct nested ‘for’ loops which position clips in a grid, this is just the primer I needed – thank you for sharing Nuno!! Excellent stuff. I’ve downloaded your examples and will go and have a play about – cheers!!