Monday, May 22, 2006

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.

4 Comments:

Anonymous Matt Przybylski said...

very cool. just an FYI, your link to the .as file isn't working, has double urls. nice work.

Monday, May 22, 2006 7:42:00 AM  
Anonymous Matt Przybylski said...

sorry i probably should have also put this in the other comment, but it would also be beneficial if you provided sample FLA files as well. i like to download class files then get back to them when I need them, so i store them with a sample fla on my hd. if not (or as an addition), you could also benefit from doing a javadoc for these, as you've got a lot of cool stuff but i tend to forget how to use it without having to save a txt file in the same folder that your class is in with a link to your blog post, but who knows what can eventually happen to that.

Monday, May 22, 2006 7:44:00 AM  
Blogger Sam Coles said...

Alright I uploaded a sample application for yas (note it does use my custom Interval class) :).

Monday, May 22, 2006 8:43:00 AM  
Anonymous SmilyOrg said...

You mean 4 arguments? :P

Monday, May 22, 2006 6:04:00 PM  

Post a Comment

<< Home