Liquid area doesn't seem to respect 'strict' mode

[mikaL]

Hi,

 

I'm just getting started with LiquidStage. I just can't figure this out, & didn't find anything in forums or demos:

 

Let's say I want a pane, with some UI controls, on the left side of the screen (=stage). It should always be 40 pixels from top, 60 pixels from bottom, and be 1/3 of the screen width. Minimum size is 100x100 pixels.

 

So I created a LiquidArea:

 

area = new LiquidArea(stage, 0, 40, stage.stageWidth / 3, stage.stageHeight - 60, 0xFF0000, 100, 100, 99999999, 99999999, false, null, true);

 

and 2 pinpoints:

topLeft = new PinPoint(0, 40, stage);

bottomRight = new DynamicPinPoint(stage, getBottomRight);

 

and a getter function:

 

private function getLeftPaneBR(): Point {

return new Point(stage.stageWidth / 3, stage.stageHeight - 60);

}

 

and then attach a UIComponent to the area

 

area.pinCorners(topLeft , bottomRight, true, 0, null, true);

area.attach(_leftPane, ScaleMode.STRETCH);

 

...but no matter what I change the strict, reconcile, et. etc. values, when I scale the player window the area gets scaled somehow proportionally: the 60 pixels from bottom doesn't stay 60, and 1/3 becomes about a half when the stage gets larger???

 

thanks,

 

Mika

[GreenSock]

I see a few problems:

 

1) You're using stage.stageWidth and stage.stageHeight when determining your LiquidArea's size. Remember, one of the really convenient things about LiquidStage is that it allows you to build at a particular size (for example, a 600x400 stage) and then pin your objects accordingly and LiquidStage will figure out what to do when the stage actually expands (or contracts) to the browser size. Let's say your FLA was built to 600x400. You should use THOSE measurements for your LiquidArea rather than stage.stageWidth/stage.stageHeight because the latter are the already STRETCHED values.

 

2) If you want it to fill 1/3rd of the screen width, you can simply create a PinPoint at that spot (according to your original dimensions) - no need to do the DynamicPinPoint thing. For example, if your native stage width is 600 pixels (before any stretching), you'd set your PoinPoint's x to 200 (1/3rd of 600). When the stage gets stretched, that PinPoint gets stretched right along with it (proportionally). Think of the stage like a piece of rubber that gets stretched out to fit the browser.

 

Let me know if that helps - if not, it'd be super helpful if you could post a simple FLA that demonstrates the issue so that we can tinker with it and publish it to see the problem.

[mikaL]

Thanks, I'll try that.

 

Actually that 1/3 thing is not what I'm after, it was just something I tried at first to get the hang of things. What I need to do is something like this:

 

I have a UI control A ("left pane") that may resize, both when the user drags its edge, and when the whole stage gets resized, it could maintain some relative size, such as 1/3 . Then I have controls B, C, D whose left edges should stay 10 pixels to right from A's left edge. B, C, D are stacked vertically so that B's top is at stage top, D's bottom is at stage bottom, and C fills the space between B and D. And it gets more complicated than this (e.g. I also need some items to be evenly spaced, and the controls contain other controls whose positions are relative to the container) but the general idea is that I need to have my UI controls chained together so that moving some edge moves others.

 

I probably haven't quite understood the way that Areas and Pinpoints work: I find it a little awkward to specify top_left and bottom_right to constrain an area, and then attach a DisplayObject to the area. Instead, or additionally, I'd like to use guidelines, that you could attach a DisplayObject's edge to. Maybe I could implement a dynamic guideline system using PinPoints, dynamic or static?

[GreenSock]

Just to be clear, LiquidStage wasn't intended to be a whole layout system that'd work like the Flex framework or something (having objects look for other objects and move over or resize to make room, etc.). It was intended to be for pinning objects to areas on the stage and accommodate even complex nesting and also be flexible enough to let you change the positions of things on the fly and have it respect those changes.

 

Technically you could get very complex behavior and do things just like the Flex framework with LiquidStage using DynamicPinPoints but again, that's not really what it was designed for. I may create something like that eventually or enhance LiquidStage to make doing that type of thing easier.

 

Oh, and about creating areas and then attaching things, you might want to check out the static LiquidArea.createAround() method because it can make that process easier (or more intuitive). It allows you to just say "create a LiquidArea around this object..." and it'll size it and position it accordingly.