Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swammy

LiquidArea vertical alignment

Recommended Posts

I'm trying to migrate to the newer version of liquidstage that uses liquidArea as opposed to the pinobject/stretchObject I'm used to.

 

I'm trying to accomplish a top bar that stretches horizontally and always remains at the top, with a bottom bar that stretches horizontally and is attached to the bottom until the minHeight is reached. Before I would just pinObject to the BOTTOM.CENTER or TOP.CENTER to achieve the effect, but it seems that my liquid area always remains centered, so while the mc's I attached do respect the TOP.CENTER and BOTTOM.CENTER of the liquidArea, the area itself is not aligning to the top of the stage. Here is my code:

 

var ls:LiquidStage = new LiquidStage(this.stage, 950, 768, 950, 768);
var lsBG:LiquidArea = new LiquidArea(this, 50, 50, 850, 668, 0xff0000);
lsBG.preview = true;
lsBG.attach(topBar, LiquidScaleMode.WIDTH_ONLY, LiquidAlignMode.CENTER, LiquidAlignMode.TOP);
lsBG.attach(bottBar, LiquidScaleMode.WIDTH_ONLY, LiquidAlignMode.CENTER, LiquidAlignMode.BOTTOM);

 

As long as I'm scaling above my minWidth and Height everything works as planned, but once I go below the 950x768 the top and bottom of the area both begin to go off screen rather than the top staying at y:50, and the bottom being cut off.

 

Am I misusing this feature? Should I be using multiple areas?

Link to comment
Share on other sites

It sounds like you just need to do this before creating your LiquidStage:

 

this.stage.align = StageAlign.TOP_LEFT;

 

Basically, what you're describing has to do with how Flash is aligning your overall stage in the player which isn't controlled by LiquidStage (this is by design - I wanted to allow you to align it in whatever way you wanted). Just make sure you set your stage's align property before creating your LiquidStage instance because it adjusts itself based on the alignment mode.

 

Let me know if that works for you.

Link to comment
Share on other sites

............................................________

....................................,.-‘”...................``~.,

.............................,.-”...................................“-.,

.........................,/...............................................”:,

.....................,?......................................................\,

.................../...........................................................,}

................./......................................................,:`^`..}

.............../...................................................,:”........./

..............?.....__.........................................:`.........../

............./__.(.....“~-,_..............................,:`........../

.........../(_....”~,_........“~,_....................,:`........_/

..........{.._$;_......”=,_.......“-,_.......,.-~-,},.~”;/....}

...........((.....*~_.......”=-._......“;,,./`..../”............../

...,,,___.\`~,......“~.,....................`.....}............../

............(....`=-,,.......`........................(......;_,,-”

............/.`~,......`-...............................\....../\

.............\`~.*-,.....................................|,./.....\,__

,,_..........}.>-._\...................................|..............`=~-,

.....`=~-,_\_......`\,.................................\

...................`=~-,,.\,...............................\

................................`:,,...........................`\..............__

.....................................`=-,...................,%`>--==``

........................................_\..........._,-%.......`\

...................................,<`.._|_,-&``................`\

 

Sorry for wasting your time, Jack. But thank you for the solution and the great updates.

Link to comment
Share on other sites

By the way, I just posted an update that made a couple of tweaks (sorry for the inconvenience) like shorter names for the constants classes (LiquidScaleMode is now just ScaleMode and LiquidAlignMode is just AlignMode, and its values are Strings instead of ints). I added a DynamicPinPoint class too. No massive changes, but you may need to adjust a few lines of your code to accommodate the new names. I try hard to avoid making changes like this, but since it has only been out a few days I wanted to quickly push the tweaks up now before too many people start using it. :)

 

Feel free to offer any suggestions/input.

Link to comment
Share on other sites

Great. I always look forward to your liquidstage updates as I've used the original in so many projects. Is the layout directory missing from the svn? I don't see it in my repository anymore.

 

Also, I have my new LS project working great in FF, but for some reason in IE it always starts at the default movie height/width and doesn't fill the page with the liquidarea. As soon as I resize everything snaps into place. I tried a ADDED_TO_STAGE listener to run a resize event but it didn't seem to work.

 

One last question, only because I couldn't find it in the documentation but I'm sure you've devised a way to do it: Lets say I wanted a liquid area to fill up one half of the width of my page, and center amovie clip within it, so that as the page stretches, the area always maintains 50% width, and the attached clip always centers within the area. Is that currently possible? Right now I'm using the resize listener to do all the math, but it's getting very cumbersome as the items on stage continue to grow.

 

Thanks for everything.

Link to comment
Share on other sites

I'll check into the first render issue - I think I know what can address that. As for filling half the screen, that should be as easy as:

//create the LiquidStage (assumes you built the swf at 550x400)
var ls:LiquidStage = new LiquidStage(this.stage, 550, 400, 550, 400);

//create a LiquidArea that's half the width of the stage:
var area:LiquidArea = new LiquidArea(this, 0, 0, 275, 400);

//by default, the LiquidArea pins itself to the TOP_LEFT and BOTTOM_RIGHT PinPionts, but we'll change that to TOP_LEFT and BOTTOM_CENTER:
area.pinCorners(ls.TOP_LEFT, ls.BOTTOM_CENTER, true);

//if you want "mc" to just float in the center (not scaling to fill the area), just do this:
area.attach(mc, ScaleMode.NONE, AlignMode.CENTER, AlignMode.CENTER);

 

That should do it. Let me know if that helps.

Link to comment
Share on other sites

Great. I always look forward to your liquidstage updates as I've used the original in so many projects. Is the layout directory missing from the svn? I don't see it in my repository anymore.

 

No, since LiquidStage is a membership benefit of Club GreenSock ("Shockingly Green" and corporate levels), it is not in the svn which is open to members of all levels. It would be a bit of a nightmare for everyone involved if I added it there because it would require password authentication and multiple svn repositories, etc. Just snag 'em from the zip instead. There will be a "My Account" section on the web site soon where you'll be able to log in and get all your bonus downloads and do other stuff too. Stand by for that :)

Link to comment
Share on other sites

Also, I have my new LS project working great in FF, but for some reason in IE it always starts at the default movie height/width and doesn't fill the page with the liquidarea. As soon as I resize everything snaps into place. I tried a ADDED_TO_STAGE listener to run a resize event but it didn't seem to work.

You can call update() anytime on the LiquidStage to force a refresh. But I just updated it so it should ensure that it updates initially right away (after one frame actually).

Link to comment
Share on other sites

All of your suggestions work perfectly. The updated class fixed the IE problem, and many thanks for explaining the alignment case.

 

Steve

Link to comment
Share on other sites

Could there be racing issue going on with the update() call?

 

I found that when I used the following code, one of mc's (bttmMenu) didn't update its position:

var ls:LiquidStage = new LiquidStage(this.stage, 950, 600, 950, 600);
var lsBG:LiquidArea = new LiquidArea(this, 0, 0, 950, 600);
var area:LiquidArea = new LiquidArea(this, 525, 0, 425, 600, 0xff0000);

area.pinCorners(ls.TOP_RIGHT, ls.BOTTOM_CENTER, true);
area.attach(contentHold, ScaleMode.NONE, AlignMode.CENTER, AlignMode.CENTER);
lsBG.attach(bigBG, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.TOP);
lsBG.attach(topBar, ScaleMode.WIDTH_ONLY, AlignMode.CENTER, AlignMode.TOP);
lsBG.attach(bottBar, ScaleMode.WIDTH_ONLY, AlignMode.CENTER, AlignMode.BOTTOM);
ls.attach(bttmMenu, ls.BOTTOM_LEFT);

 

But when I moved the bttmMenu attach command directly below the liquidstage init, everything works fine:

var ls:LiquidStage = new LiquidStage(this.stage, 950, 600, 950, 600);
ls.attach(bttmMenu, ls.BOTTOM_LEFT);

var lsBG:LiquidArea = new LiquidArea(this, 0, 0, 950, 600);
var area:LiquidArea = new LiquidArea(this, 525, 0, 425, 600, 0xff0000);

area.pinCorners(ls.TOP_RIGHT, ls.BOTTOM_CENTER, true);
area.attach(contentHold, ScaleMode.NONE, AlignMode.CENTER, AlignMode.CENTER);
lsBG.attach(bigBG, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.TOP);
lsBG.attach(topBar, ScaleMode.WIDTH_ONLY, AlignMode.CENTER, AlignMode.TOP);
lsBG.attach(bottBar, ScaleMode.WIDTH_ONLY, AlignMode.CENTER, AlignMode.BOTTOM);

Link to comment
Share on other sites

Nope, this is simply caused by the fact that you didn't set the "reconcile" parameter to true (which would tell LiquidStage you want to pin the object according to the base/original stage size).

 

ls.attach(bttmMenu, ls.BOTTOM_LEFT, false, true);

 

I considered making "reconcile" true by default, but I wasn't sure which was more intuitive. By default, it pins an object where it is regardless of the stage's state (expanded or not), but if you want it to force it back to the original size, "reconcile" must be true. See what I mean? Feel free to offer suggestions.

Link to comment
Share on other sites

That was it. strange that moving the declaration up also seemed to fix it.

 

In my opinion, true by default is more intuitive only because in the IDE everything is being positioned relative to the fixed height width, so I would expect it to detect a new position any time that scale is different. To ask the object to behave otherwise seems like much more of a special case scenario for me.

 

Thanks for all the quick help and these incredible classes.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×