AS3 liquid layout class

Posted on

I’m sure everyone has needed one of these at one time or another. I just decided to finally get one together for myself.

To use, you first call StageAlignTool.init() and pass in the stage, and optionally a minimum width and a minimum height (defaults to 1024×768).
Next, you call StageAlignTool.registerLocation() and pass in the displayObject you wish to register, which position you wish it to lock to (StageAlignTool .TL means Top Left, StageAlignTool.MC means Middle Center), and optionally if you want it to stay relative to where it is now (true) or snap to the edge of the stage (false).
The class automatically sets your stage scale mode to NO_SCALE and the stage align to TOP_LEFT. It also expects the display objects you pass it to have their registration points in the top left corner.



//StageAlignTool.init(Stage reference[, min width = 1024, min height = 768]);
StageAlignTool.init(stage, 1024, 768);

//StageAlignTool.registerLocation(a DisplayObject, position to lock to[, stay relative to current = false]);
//possible locations are [StageAlignTool.]TL, TC, TR, ML, MC, MR, BL, BC, BR

StageAlignTool.registerLocation(bg, StageAlignTool.MC);

Give it a try and tell me what you think.

14 thoughts on “AS3 liquid layout class

  1. cool. worked sweet but when i used an external loader i got an error#1009 message. think i may have placed the code somewhere wrong? suggestions?

    package {
    import StageAlignTool;

    public class Main extends MovieClip {

    var object:MovieClipInstance = new MovieClipInstance();

    public function Main() {
    addEventListner(Event.ADDED_TO_STAGE, initMain);

    private function initMain(event:Event) {
    StageAlignTool.init(stage, 1024, 768);
    StageAlignTool.registerLocation(object, StageAlignTool.TL);

  2. Hey nice class,

    I cleaned up the packaging of the class for you. You should follow packages standards so that other people can store this with their other class.

    There are a few things still wrong with it though.

    1: stayRelative set to true breaks the class.

    2: stayRelative set to true should be default since people would expect that the local x/y of the object would be where it positioned..

    3: I added a throw error on the constrictor so that you can’t create an instance and understand why.

    4: I added some basic docs: used asdoc with flash develop

    5: I added a flash develop project. Way better then flash IDE and comparable to flash builder

    6: you could probably dispatch an event when StageAlignTool is set on or off and or if you reached min x/y

    7: you could use Event.ADDED_TO_STAGE and Event.REMOVED_FROM_STAGE to listen for when the DisplayOject is added to stage to start the init() or registerLocation(), or to call kill when the item have been remove from the stage. that way you have to call one less function.

    Any how, nice work.

  3. I wonder how easy it would be to set the initial position of everything relative to where its at in the minimum dimensions you set. I say this because the initial positions of the items on the page is set into the browser no matter how large the browser window is. if I have my window maxed out when the page loads up, it doesnt move everything out to fit the window, it just keeps it all in the minimum area you set, so if I then make my window smaller, nothing happens. maybe I’ll mess with this a little bit to see what I come up with.

  4. I played around with the code a little bit and got it so the position of the items isnt dependant on what size the window is when you initially load the page. here is an example:

    case TR:
    if (_registeredObjects[disp].stayRelative){
    // original code uses _stageW so it relies on original window size
    //disp.x = sw – _stageW + _registeredObjects[disp].ogX;

    // new code
    // figures out how far from the right of the page the item should be
    // depending on the minimum stage width assigned and subtracts that
    // from the current stage width each time stage is resized
    disp.x = sw – (_minW – _registeredObjects[disp].ogX);
    //y doesn’t change
    disp.x = (sw – disp.width);
    disp.y = 0;

    I didnt mess with the code in the else statement because I’m not using that in my application. Thanks a lot for this class guys. I’ve always been a sucker for liquid layout. hence my company name = fluid web design

  5. great ! added this to it:

    // match stage dimensions;
    $disp.width = _stage.stageWidth;
    $disp.height = _stage.stageHeight;

    if (_registeredObjects[$disp].fitStageHeight == true && _registeredObjects[$disp].fitStageWidth == true)

    // adjust proportionally to fill stage width or height;
    if (_registeredObjects[$disp].fitStageHeight == true)
    $disp.scaleX = $disp.scaleY
    if (_registeredObjects[$disp].fitStageWidth == true)
    $disp.scaleY = $disp.scaleX
    ( $disp.scaleX > $disp.scaleY ) ? $disp.scaleY = $disp.scaleX : $disp.scaleX = $disp.scaleY;

    i want to implement also minWidth and minHeight and change the way the arguments are passed to be something more friendly like a tween call where i can pass args in no specfic order… instead of just true or false

  6. I created a site last year with this class. it worked great. Check it out at CX Media. Thanks Julian! I hope everyone benefits from the little bit I contributed in march last year. I’ve been straying from flash a bit lately into html/css/js. hopefully I can get some more flash work soon! Happy freelancing.

  7. Pingback: Great liquid layout classs for Actionscript 3 « Fluid Web Design : Blog

Leave a Reply

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