Actionscript 3 Layout Organizers Examples and Source Code

A while back, I posted a basic example of layout organizers and layout organizers applied to video. I kept talking about how cool I considered this idea to be, yet I had yet to truly explain the idea and (more importantly) the source code for people to download. I wanted to make sure the code was at a good spot before releasing it; I believe that is now the case. You will find examples, the basic gist on how it works and some possible reasons why layout organizers may just make your life easier.

Update: This code base has now been released under the name coordy. Read more.

Demo

Below is a demo of the basic functionality of layout organizers. View the demo full screen

You need the Flash Player to view this video.

At this point, I have created four simple layout organizers that fit my needs, although I already plan to make at least 3 more in the near future. Luckily, building new layout organizers is relatively simple due to the foundational code. There are two different methods of altering layout properties: just changing the layout organizer’s display properties (x, y, width, height) with the autoAdjustLayout properties set to true or changing the layout organizer’s properties with the autoAdjustLayout property set to false and then using the apply() method to iterate through each items to change its properties. See Code Examples below for more detail.

Advantages to Layout Organizers Over Flex Components

  • You don’t need Flex
    While these layout organizers will work in the Flex environment (as you can see above), you do not need Flex to reap the benefits of this code. For me, these layout organizers signify a valid replacement (at least for myself) of the Flex-based containers, which were one of the main reasons why I became interested in Flex to begin with.
  • Items controlled by layout organizers are not bound to any component
    One of the issues that bothered me about Flex containers is that once you put a DisplayObject in a container, it is literally in there. Therefore, creating transitions from one layout type to another was nearly impossible. This is not the case with these layout organizers.
  • Items can belong to infinite layout organizers
    DisplayObjects can belong to as many layout organizers as one desires since they are merely abstract controllers. Since all coordinate information exists in the layout organizer’s cell objects, the coordinate information persists after its items are moved. DisplayObjects are not bound to any organizer either. You can move an item however you desire and forget about the layout organizer altogether if you wish.
  • Layout organizers are light
    These organizers have far less features than Flex containers by design. Because of this, the footprint is much smaller. So when you do not need all the features Flex containers offer, layout organizers could act as an alternative.

How it Works

The basic explanation of how Layout Organizers work is that once a DisplayObject is added to an organizer’s layout, a cell object is created which points to the Display Object. The cell is the link between the organizer and DisplayObject. The cell contains all the coordinate information for that DisplayObject, so that even if a DisplayObject is moved, the coordinate information for it persists due to its corresponding cell. This is why DisplayObject can belong to an infinite amount of organizers, because the organizer merely handles its created cell objects which, in turn, have a link to the DisplayObject.

Organizers are merely abstract organizers, they do not need to be added/removed from the stage. Nonetheless, they have tweenable properties such as x, y, width, height, etc. When a display property such as width is altered, the layout organizer adjusts all the cells and the cell’s links to fit in the layout’s new dimension. This allows you to “tween” a layout organizer even though it does not truly exist on the stage.

Layout organizers will also adapt when cells/DislpayObjects are removed from the layout (the same will soon be the case for adding cells/DisplayObjects). This allows simple motion-based layout management capabilities.

Code Examples

Adding items to a layout organizer.

_organizer = new EllipseOrganizer(this, 400, 400);
for(var i:int=0; i<total; i++)
{
    var itm:Sprite = new Sprite();
    addChild(itm);
    _organizer.addToLayout(itm, false, false);
}

Tweening a layout organizer’s properties.

public function groupMotion(x:Number, y:Number, width:Number, height:Number):void
{
    _organizer.autoAdjustLayout=true;
    new Tween(_organizer, "x", Cubic.easeInOut, _organizer.x, x, 20);
    new Tween(_organizer, "y", Cubic.easeInOut, _organizer.y, y, 20);
    new Tween(_organizer, "width", Cubic.easeInOut, _organizer.width, width, 20);
    new Tween(_organizer, "height", Cubic.easeInOut, _organizer.height, height, 20);
}

Tweening a layout organizer’s elements individually width a custom tween function.

public function individualMotion(x:Number, y:Number, width:Number, height:Number):void
{
    _organizer.autoAdjustLayout=false;
    _organizer.tweenFunction=moveCell;
    _organizer.x=x;
    _organizer.y=y;
    _organizer.width=width;
    _organizer.height=height;
    _organizer.apply();
}

public function moveCell(cell:Cell):void
{
    new Tween(cell.link, "x", Cubic.easeInOut, cell.link.x, cell.x, 20);
    new Tween(cell.link, "y", Cubic.easeInOut, cell.link.y,  cell.y, 20);
}

19 thoughts on “Actionscript 3 Layout Organizers Examples and Source Code”

  1. As always–a great contribution to the design community. If only I understood what it meant. 😛
    Regardless, I had a lot of fun playing with the various settings and examples. Thanks SomeRandomDude! I hope to see MANY more articles this year. 🙂

  2. This is definitely a cool project. Good job! I would love to take a look at the code base (the link does not seem to work though) and possibly contribute to the work. Nice work again.

  3. Having fun playing around with the layouts. Looks amazing. Is it possible to add elements to say, a gridorganizer without having to think about the rows and/or columns? e.g. if you pass null as the amount of rows, that new elements will be added downwards autmatically, only taking the amount of cols in account?

    Thanks for the effort and source,

    Ben Smeets

  4. Hey Ben, at this point, the GridOrganizer needs a defined set of rows and columns on initialization in order to create the grid layout positions. I would love to come up with a way where that would not be necessary, but I can’t think of anything yet. If you have any ideas, by all means, let’s chat. 🙂

  5. Hey, thanks for a great classes. Just one question – Fit Grid Organizer – ? Is it separate organizer ( not included in classes package) or it can be achived somehow using simply Grid Organizer class ? Thanks.

  6. Hi, Looks pretty good – just the thing I was looking for. But the source code link doesn’t seem to work. Can you please get it working? Thanks in advance.

Leave a Reply

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