Jump to content
GreenSock

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

LiquidStage transform Component

Recommended Posts

Hello,

 

I got LiquidStage via my club purchase.

I'm tired of trying resize a textarea.

In my swf (750x500) the textarea should have always width of 250, the height should be dynamicly.

But if the window is smaller than 500 pixels height, the textarea doesn't fit the height.

 

Is my code correct?

			TweenPlugin.activate([LiquidPositionPlugin]);
		var ls:LiquidStage = new LiquidStage(this.stage, 750, 500, 400, 80);
		var area:LiquidArea = new LiquidArea(this, 500, 0, 250, 500, 0x313f19);
		area.pinCorners(ls.TOP_RIGHT, ls.BOTTOM_RIGHT, true, 1, {ease:Elastic.easeOut});
		area.preview = true;
		area.attach(aTextArea, ScaleMode.STRETCH, AlignMode.CENTER, AlignMode.CENTER);

Link to comment
Share on other sites

If you want only the height to get affected, your scale mode should be ScaleMode.HEIGHT_ONLY (your code said ScaleMode.STRETCH). Also, you might want to set the stage's align to top left, like stage.align = "TL" before you create your LiquidStage.

Link to comment
Share on other sites

Thanks. Your code works, but if I put this component into a movieclip, it fails. And this is my problem.

 

Check this small fla which has only this code and on the stage a movieclip with this component.

liquidExample.zip

Link to comment
Share on other sites

As indicated in the docs, the objects you attach() to a LiquidArea must share the same parent as the LiquidArea. You set it up so that your LiquidArea was the root but you attached a nested object. You can create a LiquidArea inside your MovieClip if you want. And even offset the x/y position so that it lines up in the MovieClip's parent coordinate space where you want. Kinda like this:

 

stage.align = "TL"
var ls:LiquidStage = new LiquidStage(this.stage, 750, 500, 400, 80);
var area:LiquidArea = new LiquidArea(this.preArea, 34, -55, 250, 500, 0x313f19);
area.pinCorners(ls.TOP_RIGHT, ls.BOTTOM_RIGHT, true, 1, {ease:Elastic.easeOut});
area.preview = true;
area.attach(preArea.aTextArea, ScaleMode.HEIGHT_ONLY, AlignMode.CENTER, AlignMode.CENTER);

Link to comment
Share on other sites

Thank you, this works, but I become irritated when I try the next step: This area should just fill in the half height (because another on should be under the first). So I change the height-parameter from 500 to 250:

var area:LiquidArea = new LiquidArea(this.preArea, 34, -55, 250, 250, 0x313f19);

But then the are is smaller than 50% if the stage is smaller than on start. But it should always have the half height and a fix width of 250 pixel.

 

Or should I change the pin Corners?

 

I don't get it, I spent two hours of trying methods in the docs, changing parameters and so on. This plugin doesn't seem to be intuitive (but the tween classes do).

Link to comment
Share on other sites

Sorry to hear about your frustration. Dealing with liquid layouts is inherently more complex than tweening (well, most of the time). Of course I could make it very, very basic and just allow specific PinPoints and not accommodate nesting or different stretch modes, alignments within areas, etc. but I'm not a fan of inflexible systems like that. LiquidStage is built to give you a bunch of flexibility but I can see why it'd be challenging to dive in and get your first layout working.

 

In your case, if you want the LiquidArea to always fill 50% of the height, then yes, you'd want to pin the bottom corner of the LiquidArea to the RIGHT_CENTER PinPoint of the LiquidStage. See what I mean?

 

stage.align = "TL"
var ls:LiquidStage = new LiquidStage(this.stage, 750, 500, 400, 80);
var area:LiquidArea = new LiquidArea(this.preArea, 34, -55, 250, 250, 0x313f19);
area.pinCorners(ls.TOP_RIGHT, ls.RIGHT_CENTER, true, 1, {ease:Elastic.easeOut});
area.preview = true;
area.attach(preArea.aTextArea, ScaleMode.HEIGHT_ONLY, AlignMode.CENTER, AlignMode.CENTER);

Link to comment
Share on other sites

I see. If I want just 40% height, I create a new pin, right?

 

Where you got the coordinates 34, -55 from? These have to been x, y from preArea.aTextArea? In my .fla these are -50,-22, or I am wrong?

Link to comment
Share on other sites

Those values represent the offset necessary to make the LiquidArea line up where you wanted it since your preArea's x/y position was in a funky spot. Basically, imagine putting a rectangle INSIDE your preArea at those coordinates - it would make it line up with the root level at the spot you wanted (I believe). See what I mean?

 

And yes, if you want it to be 40%, just create a new PinPoint that's exactly 40% down on the native stage size. (let me know if you need me to explain that more)

Link to comment
Share on other sites

  • 4 weeks later...
And yes, if you want it to be 40%, just create a new PinPoint that's exactly 40% down on the native stage size. (let me know if you need me to explain that more)

I tried to fix PinPoints in another project.

var area:LiquidArea = new LiquidArea(this, 0, 0, 100, 100, 0x313f19);
			scheinecke1 = new PinPoint(1,1,this);
			scheinecke2 = new PinPoint(100,100,this);
			scheinecke2.addEventListener(Event.CHANGE, onPointupdate);

I want to create the points as you see here, ohne at 1,1 and one at 100,100.

 

But by debugging I found out: function update in LiquidStage.as change the coordinates of the second point. Why? How could I avoid this?

Link to comment
Share on other sites

Can you please post an example FLA that demonstrates the problem you're seeing? Your PinPoint's x/y values shouldn't change unless they're DynamicPinPoints. I didn't quite understand what you saw happening that shouldn't be happening, so a super simple example would be very helpful.

 

I added this code to an FLA and I never got a trace() no matter how much I resized the stage:

 

var ls:LiquidStage = new LiquidStage(this.stage, 550, 400);
var area:LiquidArea = new LiquidArea(this, 0, 0, 100, 100, 0x313f19);
var scheinecke1:PinPoint = new PinPoint(1,1,this);
var scheinecke2:PinPoint = new PinPoint(100,100,this);
scheinecke2.addEventListener(Event.CHANGE, onPointupdate);

function onPointupdate(event:Event):void {
trace(scheinecke2);
}

Link to comment
Share on other sites

Okay, it was my fault at other place in the code. Flash called the quoted code before the MovieClip was added to stage. With the event added_to_stage it works.

 

Sorry for causing confusion.

Link to comment
Share on other sites

And yes, if you want it to be 40%, just create a new PinPoint that's exactly 40% down on the native stage size. (let me know if you need me to explain that more)

I set a normal PinPoint:

ls.RIGHT_CENTER_MINUS_15PIX = new PinPoint(ls.CENTER, (RIGHT_CENTER-15));

And I add a EventListener for the stage, so that a new function will set the point new if the stage is resized?

Link to comment
Share on other sites

I don't understand where you're adding that code or why you're defining the x-coordinate as a PinPoint (it should be a number). Did you edit the LiquidStage class itself or something by adding a public RIGHT_CENTER_MINUS_15PIX property? Sorry, I'm just very confused by what you're doing. If you just want a PinPoint that starts out at 15 pixels above the center of the native stage and moves proportionally according to the overall stage size, you'd do:

var myPin:PinPoint = new PinPoint(ls.CENTER.x, (ls.CENTER.y - 15), ls.stageBox);

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.

×