ActionScript 3 Flexible Layout Class

ActionScript 3 NpFlexLayout Class

The NpFlexLayout Class is designed to simplify aligning DisplayObjects to stage dimensions and responding to changes in stage dimensions at run time by a user or between different users.

This supersedes a simpler implementation of this approach, called “ActionScript 3 Liquid Layout Manager”, which I’ll leave on the site.

As opposed to the LayoutManager class, the NpFlexLayout class is an actual layout manager, taking care of instantiating, destroying and passing on requests to instances of an internal class called NpFLexLayoutItem which wraps each displayObject passed to the NpFlexLayout Class.

Class Features

  • Position objects (x,y) on the stage as a proportion of the stages dimensions
  • offSet each displayObject (x,y) from where it would be by an absolute pixel value
  • set objects to stretch to fit either stage width / height or a proportion of stage dimensions
  • per object minX & minY settings where reflowing, resizing will cease
  • use either the clips registration point, or its visual center (width/height)
  • pause, resume displayObjects responding to resize events
  • update individual class properties at runtime
  • tween objects properties at runtime (uses internal simple tween method)
  • set tween easing
  • add, remove displayObjects from class

View Example
Here is an example; http://www.noponies.com/dev/as3_flexlayout/

Source Files
Here is the relevant source file; Flex Layout Files (1743) - 127.6 kB
By downloading, you agree to the terms of use, outlined here: http://www.blog.noponies.com/terms-and-conditions

Dependencies
None.

Version 2 Beta
Ok, here is a beta of version 2 of this class. Have a play and let me know of any issues.

I’ve updated the beta with an constrain resize property. Let me know how it works out in testing etc

http://www.blog.noponies.com/wp-content/uploads/NpFlexLayout-v2-Beta.zip