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 = {}; = 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.

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 = 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);


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.


Example SWF:

Example FLA:

Suggestions and comments more than welcome.


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