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 Responses to “Easily work with Horizontal and Vertical content layouts”

  1. Paul says:

    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.

  2. eyezberg says:

    Thanks for sharing, hope you don’t mind me linking this (tomorrow tho’ it’s late :-) )

  3. Sam says:

    Of course you can link to it. :-)

  4. eyezberg says:

    Done ;-) Sam, what’s your full name / got a pic?
    I do have Chaffic in the Flash Gurus gallery, but I’d add you too..?

  5. Sam says:

    A pic? That must be some link. You can get one here http://www.rewindlife.com/about.cfm.

    Sam

  6. eyezberg says:

    Cool, thanks!
    You must be the only Flasher I know wearing a tie :-) And it’s not for the link, but the flasher image gallery here:
    http://www.eyezberg.com/component/option,com_artistdirectory/Itemid,46/

Leave a Reply