Jump to content
Search Community

liquidarea fixed width/height

SyntaxMind test
Moderator Tag

Recommended Posts

Does anyone have any tutorial on the autoareafit/liquidarea for min and max width and heights on stage resize? I am still having trouble understanding how this works. I make a simple mc 640 x 480 and want it to resize to a minimum of 320 x 240. I Enter the code below and get nothing out of the mc. Just the crop box scales but doesn't effect the movieclip. What am I missing?

 

import com.greensock.layout.*;

 

var ls:LiquidStage = new LiquidStage(this.stage, 1024, 768, 1024, 768);

var area:LiquidArea = new LiquidArea(this, 0, 0, 640, 480, 0xCC0000);

 

area.attach(box, {crop:true, minWidth:360, maxWidth:640, minHeight:240, maxHeight:480});

ls.attach(box, ls.CENTER);

area.preview = true;

Link to comment
Share on other sites

I assume "box" is your mc, right? And you're using the latest version of LiquidStage/LiquidArea/AutoFitArea? And why did you set crop:true if you're using the default scaleMode of "proportionalInside"? (typically crop:true is really only useful with "proportionalOutside")

 

Can you post a sample FLA that we can publish to see the issue? It doesn't need to be your production files - just something really simple.

Link to comment
Share on other sites

Bare with my logic please. Most of my coding practices this early is trial and error. There really is no need for you to see any files. It's just a box mc. I am just trying to figure out how the resize work. The crop is what I got when I saw the script on the site http://www.greensock.com/autofitarea. Figured since it kind of integrates with the liquidstage, I could use the same script.

 

Overall, I just want to find out how to make the box mc scale to the max size and min size when the browser is resized. Or is that now how it can work in liquidarea?

Link to comment
Share on other sites

I think one of the problems is that you set the minimum size of your LiquidStage to 1024x768. So when you collapse your window smaller, LiquidStage stops doing its thing below that size and your swf's stageAlign controls the placement of the whole thing. Maybe try setting the minimum width/height to 0 so you can see what happens.

 

Also, you attached "box" to BOTH the LiquidArea AND LiquidStage. Your code was basically saying "pin box so that it moves with the center of the screen and also attach it to the LiquidArea, filling the space and cropping it". You're giving it completely different marching orders. They'll conflict with each other. It can either be pinned to the center pin OR it can be attached to the LiquidArea and have it control its position.

 

Make sense?

 

So your code might look more like:

 

var ls:LiquidStage = new LiquidStage(this.stage, 1024, 768, 0, 0);
var area:LiquidArea = new LiquidArea(this, 0, 0, 640, 480, 0xCC0000);

area.attach(box, {crop:true, minWidth:360, maxWidth:640, minHeight:240, maxHeight:480});
area.preview = true;

Link to comment
Share on other sites

  • 2 weeks later...

Yes I understand that part now thanks. Only thing is the pin box was making it stick to the center of the stage. When I use var area:LiquidArea = new LiquidArea(this, stage.stageWidth / 2, stage.stageHeight / 2, 640, 480, 0xCC0000);, the center of the box seems to be pinned to the bottom right of the stage no matter where the registration point is. That ls.CENTER help me with that. So please tell what if you know why this box is pinning there?

Link to comment
Share on other sites

I'm having a hard time visualizing exactly what you're trying to describe, but I will say that this line looked like it very well may be the source of the problem:

 

var area:LiquidArea = new LiquidArea(this, stage.stageWidth / 2, stage.stageHeight / 2, 640, 480, 0xCC0000);

 

Keep in mind that the beauty of LiquidStage is that it allows you to build stuff at a SPECIFIC stage size (the size you built your FLA at) and then give it rules to follow when the stage changes size to fill the browser. Your code is taking the stage's CURRENT (stretched) size and cutting it in half to place the LiquidArea's top left corner. Typically it's best to use the size that you built the FLA at, like:

 

var area:LiquidArea = new LiquidArea(this, 1024 / 2, 768 / 2, 640, 480, 0xCC0000);

 

Hope that helps.

Link to comment
Share on other sites

Here let me link a file so you can better understand. http://ge.tt/9BpH0J5/v. Sorry about all of that. Hard to explain.

 

Well as you can see the box jumps to the right corner when I test the movie. Usually when using full browser flash, changing the registration point helps, but since registration doesn't matter in liquidstage, I am not sure why this is happening. Using stage.stageWidth / 2 or your 1024 / 2 causes the same result. Also I am noticing that the max height/width property works, but the min width/height seem not because I resize the browser very low it keeps scaling down to 0. Thanks for all the help by the way. Hope the file help.

Link to comment
Share on other sites

I'm confused because your code appears to be creating a box that starts at x:512, y:384 and is 640x480 which would make it in the lower right corner and even extend off the right/bottom edge because your stage was built at 1024x768. See what I mean? And when I test your FLA, it behaves EXACTLY as expected. Were you trying to do something different?

 

As far as the minWidth/minHeight, I'm not able to reproduce the problem. It works great for me - I wonder if you're using an old version of the class that didn't recognize the new syntax you're using? What version are you using? I'd definitely recommend downloading the latest one from your GreenSock account at https://www.greensock.com/account/

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.
×
×
  • Create New...