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 (1224) - 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
August 7th, 2008 at 1:52 pm
This looks really interesting. Just thought I’d let you know the source files seem to be missing.
August 7th, 2008 at 11:34 pm
Stan,
Its up there, under the post,
http://www.blog.noponies.com/wp-content/uploads/npflexlayout.zip
August 16th, 2008 at 10:42 am
Great work!
Really complete and organized, my mum would like to have you home
Docs and examples are so sweet to make your work useable for others non code expertise.
Thanks for the effort!
August 19th, 2008 at 4:32 pm
i cant download the files… an 404 error appears and the class you post here depends on import noponies.ui.NpFlexLayoutItem; that is not available…
August 19th, 2008 at 4:38 pm
Francisco,
http://www.blog.noponies.com/wp-content/uploads/npflexlayout.zip
August 26th, 2008 at 7:29 am
This is really awesome
August 26th, 2008 at 2:28 pm
[...] – Flexible Layout Class [...]
August 31st, 2008 at 10:06 am
[...] ActionScript 3 Flexible Layout 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. http://www.blog.noponies.com/archives/109 [...]
September 3rd, 2008 at 5:36 am
Great Class, very simple but I detect some bugs when using width and resize it in full screen … I think it could accept more parameters like maxwidth, maxheight and so on … but it?Ǭ¥s a great job so far
September 3rd, 2008 at 11:33 am
Ricardo,
What bugs in particular are you seeing?
September 4th, 2008 at 1:10 am
[...] ActionScript 3 Flexible Layout 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. http://www.blog.noponies.com/archives/109 [...]
September 12th, 2008 at 3:01 pm
Dale , try using width property then change the player to fullscreen. It will produce some unexpected results
September 12th, 2008 at 4:20 pm
Ricardo,
OK, I’ll look into whats going on.
September 17th, 2008 at 8:29 am
thanks for your great class. i think everybody can use this. unfortunately i’ve found a little bug:
- create a scene with 800×600 dimensions.
- add an object “square” to align at the bottom right corner, with x and y set to 1. with an offsetX and offsetY of lets say -30. add a minX property of 770.
resizer.addTarget(square, {x:1, y:1, offSetX:-30, offSetY:-30, minX:770});
- i you resize the stage width below 800 it x-clips correctly but if you resize at the same time the height of the stage it won’t continue to y-align at the bottom.
i hope you can understand the bug. it’s difficult to explain.
thanks for your time.
September 17th, 2008 at 5:35 pm
Iwan,
I’ll look into it, when I get a chance.
October 24th, 2008 at 6:19 pm
[...] public links >> actionscript3 ActionScript 3 Flexible Layout Class Saved by analogchainsaw on Thu 23-10-2008 generalrelativity ?جø¬? Quick Maths 1: Projectiles and [...]
November 8th, 2008 at 2:41 am
Thank you so much!! You saved my life :p
November 24th, 2008 at 11:26 pm
I don’t know if this is a bug or not, but I’ve noticed that you cannot set an offSetX property that pushes the object off the edge of the stage. I have an object that was added to the stage with ActionScript, I then threw it into the FlexLayout manager, aligned it to the center of the stage, and tried to set it so that the regPoint would have been a negative X value.
I can send ya an example if you’d like.
November 25th, 2008 at 12:16 am
Adam,
Sure, send something through, and I’ll have a look when I next get the chance.
November 25th, 2008 at 7:08 pm
You can download a zip of the test I ran here.
http://storage.duromedia.com/layout_test.zip
Basically I have a container movie, lets call it a preloader, that loads in another swf that is the same size as the preloader swf. When I try and align it to the center, and then do an offSetX which would push part of the loaded swf off the edge of the stage, it wont go any further than the 0,0 value of the stage.
November 28th, 2008 at 10:30 am
good class mate.
but how to ease the elements automatically ?
December 21st, 2008 at 6:28 pm
[...] Layout – get the class HERE I got this class from http://www.blog.noponies.com also. Like I said…I gotta drop some cash on that [...]
February 11th, 2009 at 4:46 pm
I’ll be trying this out. I was planning on writing this very tool myself but thought I’d Google it first. Glad I did!
February 21st, 2009 at 1:27 pm
I’ve been encountering an error (likely my own causing):
1180: Call to a possibly undefined method NpFlexLayoutItem.
This happens even when I merely import the class. Has anyone else encountered this?
Again, I assume it’s something I’m doing wrong, but I figured I’d mention it here in case someone else has run into this.
Any suggestions would be greatly appreciated:)
February 21st, 2009 at 10:18 pm
Is the NpFlexLayoutItem in the noponies.ui package?
Are you using the beta, or the stable release?
February 23rd, 2009 at 8:25 pm
Dale: Yes, the class was correctly placed.
I figured out my issue…. I had placed the .as files in a nested directory. Once I moved them up to the root of my Class dir. everything worked great. So, I guess it was a pathing issue w/in the packages (maybe)…..
February 23rd, 2009 at 9:41 pm
I’ve found a bug where the updateObjectProps method does not work when certain combinations/values of parameters are set.
this doesn’t work (offSetY doesn’t update):
stageTest.addTarget(elpomefial, {x:0, y:0,useClipRegPoint:true,offSetX:-133,offSetY:getOffset(”y”)});
stageTest.updateObjectProps(elpomefial, {x:0, y:0,offSetX:-133,offSetY:getOffset(”y”)});
if I change x to 1, then it works:
stageTest.addTarget(elpomefial, {x:1, y:0,useClipRegPoint:true,offSetX:-133,offSetY:getOffset(”y”)});
stageTest.updateObjectProps(elpomefial, {x:1, y:0,offSetX:-133,offSetY:getOffset(”y”)});
this works too:
stageTest.addTarget(elpomefial, {y:0,offSetY:getOffset(”y”)});
stageTest.updateObjectProps(elpomefial, {y:0,offSetY:getOffset(”y”)});
Thoughts?
February 23rd, 2009 at 9:41 pm
Forgot to mention that this affects both the stable and beta versions.
February 23rd, 2009 at 10:24 pm
Looks like my problem might be related to Adam’s problem. If I don’t use a negative offsetX value I can get it to work.
February 23rd, 2009 at 10:57 pm
Now for my final post (I think). Without extensive testing (sorry), it looks like you MUST specify a non-zero minX value (even a negative number) for things to calculate properly. Same likely applies for the Y dimension.
Hope that helps someone.
February 24th, 2009 at 4:02 am
Yeah, thats an issue still to be fixed in the 2.0 release.
March 10th, 2009 at 4:58 pm
Many sites have a bitmap image that fills the background and resizes with browser, but also maintains it’s aspect ratio. Could you add this functionality?
March 10th, 2009 at 9:21 pm
That feature will be in an updated version of the class.
March 30th, 2009 at 2:46 pm
Hi, very useful (and simple to use) class, thanks for sharing! I’m also needing to have a full-background image that resizes within ratio… is there a way for me to force this functionality while waiting for the updated version?
April 1st, 2009 at 9:59 am
Great class, thanks. But I can’t get it to work with absolute pixel values. For example: I want to pin an object first to where it was with it’s absolute pixel value and later tween it to its relative stage position.
// CODE EXAMPLE
liquidStage.addTarget(myMC,{x:myMC.x, y:myMC.y});
liquidStage.tweenObject(myMC, 2, {x:1, y:.1, offSetX:-myMC.width, easing:Elastic.easeOut}
In the first line the mc is just positioned way off screen. It seems the absolute pixel values are treated as percentage. Or am I missing some special parameters to tell the class to treat it as absolute pixel values?
May 28th, 2009 at 2:09 pm
Dear,
Thnx for the great package. Very handy. However, I have the following problem. I want to use your package to position movieclips instantiated in actionscript 3:
var test = new MovieClip;
myStage.addTarget(test, {x:.5, y:.5});
but I get following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at NpFlexLayoutItem()
at noponies.ui::NpFlexLayout/addTarget()
at main_fla::MainTimeline/frame1()
I checked to code and found that _resizeTarget.stage is null (NpFlexLayoutItem). Can this be solved?
geetings from Belgium
May 29th, 2009 at 10:35 am
Hi,
I was wondering if there ware any tutorials available on using your class ? I’ve scanned trough the site and could not find any.
I would be very great full if you could write one !
Thanks a ton in advance !
July 21st, 2009 at 1:10 am
[...] The NpFlexLayout ?߬±¬ª?¶Àú¬Ø?®¬Æ¬æ?®¬Æ¬°?ß‚Äù¬®?¶¬ù¬•?߬ƂǨ?•?í‚ÄìDisplayObjects?ß?°‚Äû?•¬??í?•¬±‚Ǩ?£‚Ǩ‚Äöhttp://www.blog.noponies.com/archives/109 [...]