26
Apr
04

Easily work with Horizontal and Vertical content layouts

post info

By Sam
Categories: Flash

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”

Feed for this Entry
  1. 1 Paul Apr 28th, 2004 at 9:37 am

    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. 2 eyezberg Apr 28th, 2004 at 5:33 pm

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

  3. 3 Sam Apr 28th, 2004 at 5:42 pm

    Of course you can link to it. :-)

  4. 4 eyezberg Apr 29th, 2004 at 5:09 pm

    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. 5 Sam Apr 29th, 2004 at 5:14 pm

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

    Sam

  6. 6 eyezberg May 1st, 2004 at 1:56 am

    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/

Comments are currently closed.