ActionScript 3 Liquid Layout Manager
Simple class that repositions objects passed to it when a stage resize event occurs.
Class is designed to simplify creating flexible or liquid layouts in Flash CS3. For a project I had I needed to create a flexible layout, so rather than creating a set of functions etc that resized the various objects I wrote this class.
It is simple and probably not as optimised as it could be, but does support the features I needed it to well.
Class positions elements using proportions of the stage, rather than specific values. I felt it was simpler to specify a value of 100 for absolute bottom or right, or 50 for middle etc.
Read Class documentation for usage directions.
Class Features
- Ability to set a min Stage size at which point the layout manager will not reposition objects
- Layouts are proportionally based
- Use either clip reg point or clip natural center for positioning
- Public method for accommodating changes in content dimensions
View Example
Here is an example; http://www.noponies.com/dev/as3_stage_manager (Resize the browser window to see it work, click pink square!)
Source Files
Here are the source files; AS3 Stage Manager Source Files, v1.2
Dependencies
Flash CS3
February 19th, 2008 at 6:59 am
Great!
February 20th, 2008 at 3:41 am
Hi,
I’ve detected an little bug… when you change only one scale axis (height or width) and reach the limit(useMinStageSize = true) the other axis stop responding… I make a change…
//function reflows the cip if a resize event occurs
private function setLayout():void {
if (useMinStageSize) {
if (stage.stageWidth >= XminSize) {
managedObject.x = (stage.stageWidth * .01) * xAxis – xAmount;
}
if (stage.stageHeight >= YminSize) {
managedObject.y = (stage.stageHeight * .01) * yAxis – yAmount;
}
return;
}
//set the position of our objects
managedObject.x = (stage.stageWidth*.01)*xAxis – xAmount;
managedObject.y = (stage.stageHeight*.01)*yAxis – yAmount;
}
… thanks for sharing
February 20th, 2008 at 10:47 am
thks again..
also very nicely done
February 20th, 2008 at 1:56 pm
Nice fix freddy.
I’ll incorporate it into the source.
March 3rd, 2008 at 11:38 am
I test it on FireFox. I got the debugging error.
TypeError: Error #2007: Parameter type must be non-null.
at flash.events::EventDispatcher/addEventListener()
at StageManager$iinit()
at stage_fla::MainTimeline/stage_fla::frame1()
there is anyway to make it work on fireFox…
Thanks for sharing. It is wonderful class.
LD
March 3rd, 2008 at 12:37 pm
Thats a strange error. I’m having trouble reproducing that one. How are you instantiating the class on your maintimeline?
Are you doing it like this?
var stageTest3:StageManager = new StageManager(test_txt, 100, 50, 100,0, true)
addChild(stageTest3)
March 3rd, 2008 at 12:50 pm
yes, I use your code from the example.
var stageTest3:StageManager = new StageManager(test_txt, 100, 50, 100,0, true)
addChild(stageTest3)
Is that wrong?
Thanks for your quick reply and help.
LD
March 3rd, 2008 at 12:54 pm
I also test your current example link on your site. It has same error. Did you have an update version that I missing?
LD
March 3rd, 2008 at 1:43 pm
No, it should be the same. What version of Firefox are you using? I just changed it to use swf object embedding. Seems firefox does not like the RunActive Content javascript that Flash uses by default. Perhaps that is causing the issue..
March 3rd, 2008 at 2:19 pm
I use Firefox/2.0.0.12. and I had used RunActive Content javascript that Flash uses by default…
you think I would update the firefox? Or any ideas for this solution.
Thanks Dail.
March 3rd, 2008 at 2:28 pm
I’m using firefox beta 3. I’m going to work soon, where I have firefox 2. I’ll test that and see how it works.
March 3rd, 2008 at 2:36 pm
Sweet!!! I am looking for it. Hope you have a good day and Thanks.
March 8th, 2008 at 7:15 am
how to set a object to the top-left = at x = 0 and y = 0. If I do
var stageTest:StageManager = new StageManager(Black, 0, 0, 50, 50, true)
it is top left but it?Ǭ¥s only showing the half of the oject at the stage, so just 50% of the objects width and height.
pleae help !
March 8th, 2008 at 12:40 pm
Roman,
That is how it should be working with that set up. If you want it to show the entire clip then change the 50’s to 0’s. var stageTest:StageManager = new StageManager(Black, 0, 0, 0, 0, true). Read the class documentation, as it describes how to position elements.
March 14th, 2008 at 6:13 am
can you update your class to include a few things?
1) being able to scale just the width or height of the object?
box1._x = Stage.width/2;
box1._height = Stage.height-(box1._y*2);
2) can you make it compatible with tweenlite? so when you resize it waits until the resize is complete then it tween lites the pieces into place?
March 14th, 2008 at 12:46 pm
Looks like you could make those changes to it yourself. Just add in the actionScript you have written.
For tweenLite, you will have to disable the resize listener when a tween starts, and renable it when the tween stops. Look at the tweenlite documentation for the way to write those functions.
A longer term adjustment is adding in a “stop listening for resize” event listener to the class. If I get a chance, I’ll look into it.
April 12th, 2008 at 5:40 am
This works just fine.. Thanks!
April 17th, 2008 at 12:58 pm
works pretty well, quite easier to implement than Senocular’s layout class. Thanks!
April 17th, 2008 at 11:56 pm
Rich,
Thanks. This class is in for some big updates over the next week. Baiscally I’m removing the need to use AddChild, and some other error checking. I had to use it for a later project and got tired of the addChild.
May 18th, 2008 at 8:10 am
Hi great class one question i’m trying to amend some of the code so i can resize if i want to, to the stage for background image and bottom bar
private function reSizeClip(resizeClipo:Boolean):void
{
if(resizeCip)
{
if(stage.stageWidth >= XminSize)
{
managedObject.width = stage.stageWidth;
}
return
}
managedObject.width = stage.stageWidth;
}
but it resizes averything any ideas how i could do it better
May 19th, 2008 at 12:15 pm
Luke,
Yeah, it will resize everything, as you are changing the entire behavior of the class. Perhaps write another little class to handle stretching out your content?
May 20th, 2008 at 12:01 am
HI i wrote a static function in the end
private static var isResizeing:Boolean;
private static var target:MovieClip;
public static function reSizeClip(stage:Stage, isResizeing:Boolean, target:MovieClip):void
{
if(isResizeing){
target.scaleX = stage.stageWidth;
}
target.scaleX = stage.stageWidth;
}
Hope you dont mind i will extend it to work with why as well at some piont
cheers
May 20th, 2008 at 11:54 am
Luke,
Of course I don’t mind. You can change it around to suit your purposes.
June 11th, 2008 at 7:40 pm
Hello Dale – great job!
Im not too familiar with class scripts. If i have a flash file currently in process and i want to add your effects/stuff onto it, how would i do that? [Document class errors it.]
THANKS
June 12th, 2008 at 3:25 pm
In your .fla
var stageTest:StageManager = new StageManager(Black, 50, 100, 0, 100, false)
addChild(stageTest)
June 12th, 2008 at 3:55 pm
Thanks for replying Dale.
are you saying include that in a new movie clip in the actions frame? (or the main actions frame?)and have StageManager in the Document class? If so, I cant seem to have it work.
StageManager.as is the only file that needs to be in the same folder with my .fla, correct?
THANKS!
June 13th, 2008 at 3:33 pm
much needed help!
June 13th, 2008 at 8:45 pm
NVM, how stupid of i
June 25th, 2008 at 9:06 am
This is a great class but I was wondering: how can you add movieclip resizing to it?
For example if I needed to have a movieclip set to the stage width at all times.
June 25th, 2008 at 12:54 pm
JM,
Thats currently not in this implementation of the class. There are been some requests for that functionality, so I might try to add it in.
June 25th, 2008 at 10:17 pm
That would be awesome if you implemented it. It works great but would be even better if that functionality were built in instead of hacking some code into the timeline to resize the mc’s.
June 26th, 2008 at 5:25 pm
JM,
I’ve created a new version of this class which supports resizing clips and will add it to the site over the next few days.
June 27th, 2008 at 12:57 am
So nice to ear that!
Congrats on the hard work you are sharing with the community. Your blog is getting heavy here
keep it up!
August 5th, 2008 at 3:33 am
Hi~ Thanks for your nice work
But I am finding a solution to remove the StageManager say in a particular scene.
Can you please kindly suggest a way to remove/or temporally disable the stagemanger to a particular element?
Thanks!
August 5th, 2008 at 12:00 pm
Samuel,
At the moment there is no public method to do that. I know that’s an oversight, and I have corrected it in a newer implementation of this Class. I’m just adding the finishing touches to it, and when its done, I’ll add it to the site.
October 15th, 2008 at 1:28 pm
I haven’t used this manager yet, but wonder if anyone would know how to calculate positions for instances to snap onto whole pixel rather than 0.5 as it is causing blurred edges. Any info on this much appreciated.
November 7th, 2008 at 5:50 pm
Is there any way to get full screen on a video player to work. Everything centers fine but when I click the full screen button now, it doesn’t show up properly because it is not reading the top left corner. Any Ideas? Thaks in advance
November 9th, 2008 at 7:54 pm
Dave,
This is a pretty old class, superseded by a newer class. To do what you are trying to do, you have to remove your object from this class. I don’t recall it having a method to do so.
Use this class; ACTIONSCRIPT 3 FLEXIBLE LAYOUT CLASS
December 6th, 2008 at 9:49 pm
hey dale-
i’m new and learning. is this version the simplest way to implement a full screen browser for a site?
also, any recommendations on how to learn to implement? i’m brand new, so i’m just trying to figure out how to use one of your class for my first site. appreciate any suggestions.
cheers.
January 14th, 2009 at 6:58 am
This is absolutely great! Liquid layout stages that are easy to implement are few and far between. I can only think of one other that is as easy as this one, but you have to pay for it. So, let me say a big thank you! Nice work
February 10th, 2009 at 4:38 am
Hello.
When I load for example a movieclip in center of stage and this movieclip contain a pixel font, this will not display correctly. As we know the pixel font work perfectly in integer number but obviusly the reposition of a movieclip depends of resolution of monitor, so: how can I adjust a movieclip in x and y in integer number?
Thanks a lot.
April 2nd, 2009 at 10:56 am
I love you! this is ace, and combined with your NpFullBrowserBg works acesome!
April 4th, 2009 at 4:31 pm
Hi. This class seems great for positioning objects upon resize but i’m wondering how to call a dynamically created object (see below) as opposed to a movieclip that sits on the stage.
For example:
var globeHolder:Sprite = new Sprite();
var globe:Globe = new Globe();
var stageTest:StageManager = new StageManager(globe, 0, 0, 0, 0, false)
addChild(stageTest);
I tried globe and globeHolder but neither would get recognized. Do i have to tweak the parameter inside the class from InteractiveObject to something else?
Any help much appreciated. Cheers!
April 5th, 2009 at 9:46 am
Add your globe instance to the displaylist first.
April 6th, 2009 at 6:16 am
You know what I had the globe instance added already to the display list. Actually, it turned out to be a bonehead error on my part and i didn’t realize 50, 50 was the center point as opposed thinking to 0, 0 which for whatever reason had my instance just out of view of the stage. Should’ve read the perfect instructions better. My fault. This class is awesome. Cheers!
May 25th, 2009 at 8:11 am
hi,
whiles using you layout manager I noticed the height of the layout is always zero, even with items added to it.
I don’t know where that is so but i would like to propose a solution and add my 2cents worth.
How about for every element/display object added, you increment layouts
height by height += diaplayObjecyHeight + vGap; the same formula can also be used to calculate the width of the layout component.
July 14th, 2009 at 4:09 pm
Hey Dale, thanks for your great class stage,
did you finally a new version of this class which supports resizing clips
thanks
July 14th, 2009 at 9:11 pm
@Laurent
No, I’ve not added that capability into the class yet.