Jump to content
Search Community

LiquidStage/Area centering problems

illustratordavid test
Moderator Tag

Recommended Posts

Hi

 

I'm struggling to get liquidStage and liquidArea to put my sprites in the correct place. I have uploaded a demo of where I've got to using the documentation at http://davidjennings.co.uk/temp/liquidStage.htm. The large white area i'm trying to center to the stage and the transparent horizontal strip that looks like it is sitting behind is supposed to be placed bottom center.

 

Here is my Actionscript 3 code

package
{
import com.greensock.layout.*;
import com.greensock.transform.*;

import flash.display.*;
import flash.events.Event;
import flash.geom.Point;
import flash.geom.Rectangle;

import nl.demonsters.debugger.MonsterDebugger;

public class designLSmain extends Sprite
{

	private var ls:LiquidStage;
	private var area:LiquidArea;

	private var debugger:MonsterDebugger;

	public function designLSmain()
	{	
		// Init the debugger
		debugger = new MonsterDebugger(this);
		MonsterDebugger.trace(this, "designerLSMain loaded");

		var ls:LiquidStage = new LiquidStage(this.stage, 550, 400, 550, 400);		

		// page in the center
		var page:Sprite = new Sprite();
		page.graphics.beginFill(0xFFFFFF,1);
		page.graphics.drawRect(0,0,350,200);
		page.graphics.endFill();
		addChild(page);

		// pages overview below
		var pagesOverview:Sprite = new Sprite();
		pagesOverview.graphics.beginFill(0xFFFFFF,0.6);
		pagesOverview.graphics.drawRect(0,0,600,100);
		pagesOverview.graphics.endFill();
		addChild(pagesOverview);

		ls.attach(pagesOverview, ls.BOTTOM_CENTER);

		var area:LiquidArea = new LiquidArea(this, 50, 70, 300, 100);
		area.attach(page, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.CENTER, AlignMode.CENTER);
		area.preview = true;

		ls.addEventListener(Event.RESIZE, onLStageUpdate);
	}

	private function onLStageUpdate(event:Event):void {
		MonsterDebugger.trace(this, "LS Resized");
	}

}
}

 

Please could someone suggest where i'm going wrong

 

Thanks

David

Link to comment
Share on other sites

A few things:

 

1) Did you build your FLA at 550x400? You certainly don't need to, but the 2nd and 3rd parameter that you pass the LiquidStage constructor should be the native width and height of your FLA. Your code said 550x400, so I just wanted to make sure. It almost looks like you built it at a much larger size (tough to say without seeing your file).

 

2) When you "pin" or "attach" something, it doesn't move the object to that point - it merely pins the current position of that object and keeps the relative distance to the PinPoint consistent. So, for example, I could have a square in the upper left corner of the stage and then attach() it to the BOTTOM_RIGHT and as long as the stage was at the native size, you'd never see that object move. It'd stay in the upper left corner. But as soon as I start resizing the stage, the square would move with the bottom right corner (like it's attached with an invisible string). So make sure you place your objects where you want them initially, THEN attach() them. This approach delivers a lot more flexibility - it's not a deficit in LiquidStage. Many other systems just force the object to be right up against a particular boundary but LiquidStage is extremely flexible and maintains relative distances.

 

Does that help?

Link to comment
Share on other sites

Hi,

 

Thank you for replying. It's a Actionscript project created inside Flash Builder 4 so i've just added the meta data line

 

package
{
import com.greensock.layout.*;
import com.greensock.transform.*;

import flash.display.*;
import flash.events.Event;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextField;

import nl.demonsters.debugger.MonsterDebugger;

[sWF(width="1000", height="600", frameRate="25")]
public class designLSmain extends Sprite
{

	private var ls:LiquidStage;
	private var area:LiquidArea;

	private var debugger:MonsterDebugger;


	public function designLSmain()
	{	
		// Init the debugger
		debugger = new MonsterDebugger(this);
		MonsterDebugger.trace(this, "designerLSMain loaded");

		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;

		var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 700, 400);		

		var i:int = 0;
		//for (var i:int=0; i<12; i++) {
			// page in the center
			var page:Sprite = new Sprite();
			page.graphics.beginFill(0xFFFFFF,1);
			page.graphics.drawRect(0,0,350,200);
			page.graphics.endFill();
			addChild(page);
			// set initial page position
			page.x = (this.stage.width/2) - (page.width/2);
			page.y = (this.stage.height/2) - (page.height/2);

			var txtlabel:TextField = new TextField();
			txtlabel.text = String(i);
			page.addChild(txtlabel);
		//}

		// pages overview below
		var pagesOverview:Sprite = new Sprite();
		pagesOverview.graphics.beginFill(0xFFFFFF,0.6);
		pagesOverview.graphics.drawRect((this.stage.width/2)-300,this.stage.height,600,100);
		pagesOverview.graphics.endFill();
		addChild(pagesOverview);

		ls.attach(pagesOverview, ls.BOTTOM_CENTER);


		var area:LiquidArea = new LiquidArea(this, 50, 70, 300, 100);
		area.attach(page, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.CENTER, AlignMode.CENTER);
		area.preview = true;

		ls.addEventListener(Event.RESIZE, onLStageUpdate);
		stage.addEventListener(Event.RESIZE, resizeStage);

		stage.dispatchEvent(new Event(Event.RESIZE));
	}

	private function resizeStage(event:Event):void {
		MonsterDebugger.trace(this, "stageResize");
	}

	private function onLStageUpdate(event:Event):void {
		MonsterDebugger.trace(this, "LS Resized");
	}

}
};

 

...to see if that would help. I've replaced the previous example http://davidjennings.co.uk/temp/liquidStage.htm

 

This now separates the 2 sprites but the stage seems to be limited to an area in the top left which i'm now trying to sort out expanding the stage to the full browser window

 

Thanks

David

Link to comment
Share on other sites

Ah, I see the problem - you're positioning your objects according to the stage's width/height instead of the native dimensions. Remember, one of the really convenient things about LiquidStage is that it allows you to build at a known size initially (in your case 100x600) and pin things accordingly and then LiquidStage will do the adjustments for you as the stage changes size.

 

So, for example, let's say the native size is 1000x600 but when you load the swf in the browser, the browser's size is double that (2000x1200). To position something in the middle of the screen, your code is using the current stage dimensions, so it would say "the center of the stage is 2000/2 by 1200/2, so x:1000, y:600". Then you attach it to your 1000x600 LiquidStage, so at this point it's at the very bottom right corner of the LiquidStage's size. Then LiquidStage says "okay, the real stage is bigger, so let's stretch things out and adjust everything accordingly", so your object would move with the PinPoint to which it was attached, meaning it gets moved down and over. See the issue?

 

There is a way to pin an object according to the stage's current size rather than according to its native size (reconcile:false), but I think it'd be easier to just use x/y coordinates based on your native size. For example:

 

BAD:

page.x = (this.stage.width/2) - (page.width/2);
page.y = (this.stage.height/2) - (page.height/2);

 

GOOD:

page.x = (1000/2) - (page.width/2);
page.y = (600/2) - (page.height/2);

Link to comment
Share on other sites

Hi,

 

I just wondered if there are any known problems with using Text Layout Framework in a liquidArea.

 

I'm currently adding the Text Layout Framework to a sprite inside a sprite which is in the liquidArea, the text appears fine in the root of the app, but inside it is added (looking in debugger) but is not visible.

 

Thanks

David

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