LiquidStage and Gaia positioning [SOLVED - THANKS!]

[Zync]

Hey all,

 

OK so I know this isn't the GAIA support forums, but I've been trying to figure out how LiquidStage works exactly between SWF's now for about 4 days and I just cant seem to crack it. So heres a bit of background.

 

I've setup a new site in the Gaia panel as 900x600.

Its set to center horizontal and vertical.

I've created a liquidstage object in the main.as and get the instance of it by using LiquidStage.defaultStage static var.

 

The liquid stage object is there and I can attach clips to it fine. But I'm trying to achieve a couple of things:

 

I want a logo up the top right cornor of my fullscreen flash site to always be there and move accordingly if the browser is resized.

A Navigation bar pinned to the bottom of the screen that automatically adjusts its horozontal position to the midpoint of the stage.

 

At the moment tho the site repositions itself to the center of the screen when i resize the browser and the logo doesnt stay up the top right. It kind of moves aroud.

 

has anyone ever done this before with Gaia and could shed a bit of light on some positioning code?

 

Thanks

[GreenSock]

I'm not a Gaia user (although I've heard good things about it and I love the fact that it uses TweenLite/Max ) - have you read this thread?:

viewtopic.php?f=3&t=2895&p=15863

 

Does that help at all?

[Zync]

Yeah that's pretty much the setup that I have, but I don't think LiquidStage attaches itself to the top left corner of the main stage.

 

How GAIA works, (in a nutshell) with positioning is that you define your site, say 900 x 600 for example. It goes and creates all the pages at 900x600 and (when called for) it loads them into a movieclip container called view.

If you center the site using the gaia panel, it creates code so that when the stage is enlarged, it centers the site (in this case 900x600) to be exactly in the center of the screen. This is great and all except when it comes to pinning elements like a logo or nav bar. The top left of the view container gets shifted along x and y to center it up on the stage. I can get the amount shifted along x and y but I think I'm stuck with liquidStage. Although it should be possible with Liquid stage, I just can't wrap my head around how to update LiquidStage's dimensions when the stage re-sizes.

 

Any help with that would be awesome. Will turn it into a video tutorial too.

[GreenSock]

Does Gaia force you to have the container centered? Can you tell it to leave it in the upper left corner?

 

LiquidStage allows you to use whatever stageAlign you want (so long as you set it before you create the LiquidStage), but if Gaia is repositioning things too, it sounds like maybe it's battling with LiquidStage for control of things (just a guess). I know folks have used Gaia and LiquidStage successfully together, though, so it sure seems like it should be possible for you too.

[Zync]

I can leave the container in the upper left corner, but I do want the site positioned in the center (where the main content will be), I just want some elements outside of the flow and to be fixed to the liquidstage, eg the logo and nav bar.

I've seen sites that use LiquidStage and Gaia so it's definitely possible. As from the other post I'm creating my LiquidStage instance on the main.swf file which holds the view holder. So technically the liquidstage should be outside of the holder and stretch to span the entire stage.

 

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

		super.onAddedToStage(event);

		trace(this.stage.stageWidth, this.stage.stageHeight);
		var ls:LiquidStage = new LiquidStage(this.stage, this.stage.stageWidth, this.stage.stageHeight);

 

Then from main homepage.swf I attach a bluesquare movieclip to the liquidStage instance like so:

 

private function init():void 
	{
		this.stage.addEventListener(Event.RESIZE, stageResize);

		var ls:LiquidStage = LiquidStage.getByStage(this.stage)
		ls.attach(blueSquare, ls.TOP_RIGHT);
	}

 

And this kinda works, except it doesnt stick to the top right. If I enlarge the stage along X, the square gets push out of the viewable area and if I enlarge the stage along Y, it stays at the top of the view container and not the top of the stage. I think its definitely something either with my structure of the elements on my page or the way I'm adding it to liquidstage. By itself liquidstage works flawlessly so thats definitely not the prob. Is there a way to trace how big the dimensions of liquidstage is at any given time?

[Zync]

ZOMG I'm a complete idiot sometimes. Sorry it just clicked then when you said can you leave the site in the upperleft corner. If I leave the view position fixed and not center it via the GAIA panel, I can just add the view to the liquidstage instance and let LS handle the positioning but its awesome self.

So now my logo is fixed in the top right corner cos its not having to deal with GAIA's site positing and the content is always in the center thanks to liquid stage.

 

	override protected function onAddedToStage(event:Event):void
	{
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		super.onAddedToStage(event);
		ls = new LiquidStage(this.stage, this.stage.stageWidth, this.stage.stageHeight);

		view.addEventListener(Event.ADDED_TO_STAGE, viewAdded);
	}

	private function viewAdded(e:Event):void 
	{
		removeEventListener(Event.ADDED_TO_STAGE, viewAdded);
		ls.attach(view, ls.CENTER);
	}