SOME RANDOM DUDE

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.

Demo

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

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.

Download the Source

This code is at a stable point, yet is still missing some crucial features that would make it easier to use and more powerful. This is one of the rare instances where I will be actively and continually developing upon this codebase, so updates should be happening on a semi-regular basis. If you like what you see here and/or think it may be useful for you, please support this project by adding it to your del.icio.us bookmarks.

View/Download the source of the full presentation or Download only the layout organizers source code.

This code is licensed under the GNU Public License. Make this code better (please), and (for everyone’s sake) share it.

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

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);
}

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);
}