Easily work with Horizontal and Vertical content layouts

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

6 thoughts on “Easily work with Horizontal and Vertical content layouts

  1. Nicely done, I was working on something similar for background tiling, I like the way you arranged you code. Somehow I feel like working on it and changing it to make it behave like a looping background pattern.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>