Jump to content
Search Community

Full Browser - Liquid Stage

djedzed test
Moderator Tag

Recommended Posts

I was (and still am) in almost exactly the same position as you are - I am coming from AS2 background and am super new to GreenSock tools :)


My suggestion is to keep an eye on this thread:





Not only that I am trying to cover basics of LiquidStage and LiquidArea there but also some Tweening, Loading and Navigation basics too...


Soon I will post the full learning exercise I am doing for all the newbies like two of us to have a look at :)

Link to comment
Share on other sites

One of the nice things about LiquidStage is that it allows you to build your FLA at a particular size just the way it's supposed to look - and then pin things at that size so that when it stretches to the full browser, the objects get positioned according to whatever rules you set (like pin it to the BOTTOM_CENTER or whatever). In your case, you set up your FLA at 600x500 and you correctly told LiquidStage that size too. No problem. However, when you positioned your content_mc and nav_mc, you repositioned them based on the stage.stageWidth/stage.stageHeight which at that point (in the browser) did NOT reflect the 600x500 size! So you positioned them in the center of the stretched screen and THEN you pinned them, so when LiquidStage stretched out, it honored your pins and moved the objects accordingly.


The solution is simple: build your stuff at the initial stage size of 600x500 instead of using stageWidth/stageHeight, like so:


var ls:LiquidStage = new LiquidStage(this.stage, 600, 500, 200, 200);

content_mc.x = (600 - content_mc.width) / 2;
content_mc.y = (500 - content_mc.height) / 2;
ls.attach(content_mc, ls.CENTER);

nav_mc.x = (600 - nav_mc.width) / 2;
nav_mc.y = 500 - nav_mc.height;
ls.attach(nav_mc, ls.BOTTOM_CENTER);


I tested it and it seems to work just great :)

Link to comment
Share on other sites

  • 1 month later...

So the code from above hasn't changed much accept for me adding a liquidArea with a maxWidth and maxHeight.


import com.greensock.*;
import com.greensock.layout.*;
import com.greensock.easing.*;

stage.quality = StageQuality.HIGH;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
fscommand("fullscreen", "true");

var ls:LiquidStage = new LiquidStage(this.stage, 600, 500, 200, 200);

nav_mc.x = (600 - nav_mc.width) / 2;
nav_mc.y = 500 - nav_mc.height;
ls.attach(nav_mc, ls.BOTTOM_CENTER, true);

var area:LiquidArea = new LiquidArea(this, 0, 0, 600, 500, 0xFF000, 0, 0, 4500, 1000, true, null);

area.attach(myImage, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER);

area.preview = false;

ls.addEventListener(Event.RESIZE, onLiquidStageUpdate);
function onLiquidStageUpdate(event:Event):void {
	trace("updated LiquidStage");

//button code without the listeners and rollover states to slim down this post

function leftbutClick(event:MouseEvent){
TweenLite.to(myImage, 1, {x:"-1500", ease:Circ.easeInOut});
   trace("I am a left button");

function rightbutClick(event:MouseEvent){
TweenLite.to(myImage, 1, {x:"+1500", ease:Circ.easeInOut});
   trace("I am a right button");



What I am trying to achieve is to have this background slide left or right (and possibly up and down later) when the user clicks the respective button. So far so good accept when the browser is resized. Logically, the image will snap back to the center.


Example: http://sqango.com/greensock/


I assume that pinCorners, defaultStage or retroMode would help to solve this but I can't seem to grasp how to implement it. Another thing I would like to achieve is have the movement based on the current size of the image so that the three sections are always centered, rather than a fixed value (in this case 1500px). Should I be moving a liquidArea?


I guess what I am looking for is more a "how I should approach this scenario", in hopes that I can figure it out from there.


**Side note: (Is there a reason why the "strict" is no longer a parameter in liquid area?)


Thanks everyone, I appreciate the help and of course patience. . .

Link to comment
Share on other sites

Yeah, that's a rather complex setup - here are two options off the top of my head:


1) Use BitmapData so that you basically have a set size (like the stage size) that defines the display area for your images. When you scroll, just update your BitmapData so that it LOOKS like the image is scrolling in it. Kinda like it's a window through which you're seeing the scrolling images. The window is what's attached to the LiquidArea. That way you don't get messed up when you need to scroll the images all the way over to one side or the other, thus completely changing the position and size of the LiquidArea.




2) Just manually implement your logic. LiquidStage and LiquidArea can be extremely helpful in a lot of situations, but they cannot solve every problem or fit perfectly into every scenario.


Is there a reason why the "strict" is no longer a parameter in liquid area?

I'm not sure what you mean - it's still there.

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...