Recently we ran into several situations where we needed to lay out content either vertically or horizontally based on data available at run-time. In an effort to keep the conditional processing to a minimum and accomplish this goal, Chafic and I came up with a technique where we store the current position as properties of an object, and based on orientation set two variables, changeTarget and changeSource, to determine how to change the position at each iteration without having to check the orientation inside the loop.
Since the contitional is outside the loop, this improves performance, reduces the amount of duplicated code, and improves reusability.
Here’s an example of this implemenation that lays out a set of colored boxes both horizontally and vertically using the same layout code with only one conditional.
var data:Array = [0xFF0000, 0x00FF00, 0x0000FF];
var contentDepth:Number = 1;
function layoutContent(x:Number, y:Number, direction:String):Void {
var pos:Object = new Object();
pos.x = x;
pos.y = y;
var changeTarget:String;
var changeSource:String;
if (direction.substr(0, 1).toLowerCase() == “h”) {
changeTarget = “x”;
changeSource = “_width”;
} else {
changeTarget = “y”;
changeSource = “_height”;
}
var max:Number = data.length;
var contentClip:MovieClip;
for (var i:Number = 0; i