Grid Positioning-- out with the old, in with the new.

When ever I've had to position items in a grid I've always gone about it the same way every time, by using a lot of vars.

 var xPos:Number, yPos:Number;
 var yStart:Number = 10;
 var xStart:Number = 10;
 var xMove:Number = 62.5;
 var yMove:Number = 70;
 var xMax:Number = Stage.width-xMove;
 var yMax:Number = Stage.height-yMove;
 for(var i:Number = 0; i < pictureArray.length; i++){
   
  var pData:Object = {};
  pData.mc = scope.attachMovie("frame", "p"+i, scope.getNextHighestDepth());
  pData.goal = new Point( xPos, yPos );
  pData.picInfo = pictureArray[i].attributes;
   
  _global.setTimeout(Delegate.create(this, add, pData), i*375);
   
  xPos += xMove;
   
  if(xPos > xMax){
    
   yPos += yMove;
   xPos = xStart;
  }
 }

Very flexible, sure, but somewhat confusing to those not too farmiliar with actionscript or too many lines for those too lazy to write it. So I wrote a easy to use GridPosition class. The code above shrinks down to a much more managable size.

 //ONE LINE
 var position:GridPosition = new GridPosition( new Rectangle(10, 10, Stage.width-55, 
Stage.height-55), new Point(62.5, 70), "h", true);
  
 var pictureArray:Array = galleryData.firstChild.childNodes;
 for(var i:Number = 0; i < pictureArray.length; i++){
   
  var pData:Object = {};
  //ONE LINE
  pData.mc = scope.attachMovie("frame", "p"+i, scope.getNextHighestDepth(), 
{_x:random(100)+475, _y:random(100)+400});
  pData.goal = new Point( position.x, position.y );
  pData.picInfo = pictureArray[i].attributes;
   
  _global.setTimeout(Delegate.create(this, add, pData), i*375);
   
  position.update();
 }

The GridPosition class has four parameters.

• $area: A rectangle defining the area of where the movie clips will be placed.


• $move: A point defining the x and y move per update.


• $type: A string that's value is either "v" or "h" defines a horizontal or vertical orientation.


• $overflow: A boolean that if true allows for overflow.

Download:
GridPosition.as

Example SWF:
gridSample.html

Example FLA:
GallerySample.zip

Suggestions and comments more than welcome.