Jump to content
Search Community

LiquidStage browser issue

nurge test
Moderator Tag

Recommended Posts

So I have a multi-swf site using LiquidStage / LiquidArea to handle the positioning and everything works perfectly in the IDE or when I run the swf by it's self.

If I run my html or open the swf in a browser almost all of my contents get shifted over and doesn't align/resize correctly.

I'm kinda at a loss as to why this is happening when it hits the browser.

My embed is:


I currently have FP11 installed but this site is built for FP10, could that be an issue?

Any help or insight would be greatly appreciated.

Link to comment
Share on other sites

As long as you're publishing to Flash Player 9 or later, you're fine. As far as what could be causing the problems, it's very difficult to troubleshoot blind, but I wonder if maybe you set the stage.align AFTER you created your LiquidStage (you should always do it BEFORE if at all). If you're still having trouble, please post a sample FLA that demonstrates the issue in as simple a manner as possible.

Link to comment
Share on other sites

I'm definitely publishing to FP10 and I completely understand the blind troubleshooting.

The stage.align is being set beforehand through our framework.

As for creating a sample fla that would be kinda tough since I have multiple .swfs loading in.

I can share the code and a link to a test location :


This is the function that gets called before we initialize the actual main swf. So basically it sets up "The Sock Magic"

public function preinitialize():void
		// TweenMax stuff
		TweenPlugin.activate( [ AutoAlphaPlugin, TintPlugin, RemoveTintPlugin, FrameLabelPlugin, FramePlugin, ColorTransformPlugin, ColorMatrixFilterPlugin, EndArrayPlugin, TransformAroundPointPlugin, ShortRotationPlugin  ] );



then I call the containers and set their initial position



private function _positionContainers( $event:Event=null ):void
		Bedrock.logger.debug( "STAGE WIDTH : " + this.stage.stageWidth + " AND STAGE HEIGHT : " + this.stage.stageHeight );

		var mcPreloaderContainer = Bedrock.api.getContainer( "preloader" );
		mcPreloaderContainer.x = ( this.stage.stageWidth / 2 );
		mcPreloaderContainer.y = ( this.stage.stageHeight / 2 );			

		var mcContentContainer = Bedrock.api.getContainer( "content" );
		mcContentContainer.x = ( this.stage.stageWidth / 2 );
		mcContentContainer.y = ( this.stage.stageHeight / 2 );

		var mcFooterContainer = Bedrock.api.getContainer( "footer" );
		mcFooterContainer.y = this.stage.stageHeight;

		var mcFooterContentContainer = Bedrock.api.getContainer( "footerContent" );
		mcFooterContentContainer.y = this.stage.stageHeight;

		var mcNavigationContainer = Bedrock.api.getContainer( "navigation" );
		mcNavigationContainer.y = 0;

		var mcHeaderContainer = Bedrock.api.getContainer( "header" );
		mcHeaderContainer.y = 0;


Then the LiquidStage gets built out


private function _createLiquidStage():void
		this._objLiquidStage = new LiquidStage( this.stage, 1024, 768, 1024, 768 );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "preloader" ), this._objLiquidStage.CENTER );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "content" ), this._objLiquidStage.CENTER );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "footer" ), this._objLiquidStage.BOTTOM_LEFT );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "footerContent" ), this._objLiquidStage.BOTTOM_CENTER );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "navigation" ), this._objLiquidStage.TOP_CENTER );
		this._objLiquidStage.attach( Bedrock.api.getContainer( "header" ), this._objLiquidStage.TOP_LEFT );

		var objLiquidBackgroundArea:LiquidArea = new LiquidArea( this, 0, 0, 1024, 768, 0x313f19, 1024, 768 );
		objLiquidBackgroundArea.preview = false;
		objLiquidBackgroundArea.attach( Bedrock.api.getContainer( "background" ), { scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE } );

		var objLiquidHeaderArea:LiquidArea = new LiquidArea( this, 0, 0, 1024, 135, 0x313f19, 1024, 135 );
		objLiquidHeaderArea.preview = false;
		objLiquidHeaderArea.attach( Bedrock.api.getContainer( "header" ), { scaleMode:ScaleMode.WIDTH_ONLY, vAlign:AlignMode.TOP});



Again this works all fine and dandy in the IDE and when run locally in FP.

I have a location where I have been testing but I would prefer to keep the location off the books if you will. What would be the best way to get you that info?

Link to comment
Share on other sites

Aha, I think I see the problem. You are setting up all your positions initially according to the stage's width/height instead of the original size at which you built your FLA. Remember, the beauty of LiquidStage is that you can just build your FLA at a particular (base) size and then tell LiquidStage how/where to pin things and then it will stretch/move things accordingly when the stage is different than the base/native size. So in your case, you are setting things up way off center initially and they get pinned there and then when LiquidStage adjusts to the new stage size, they move accordingly.


The solution should be pretty simple: use the base/native width/height instead of stage.width/height.

Link to comment
Share on other sites

Socks off to you Jack!

That did the trick. Thank you very much for the swift responses.

I do have to say that it was a little confusing and kinda tough for me to actually hard code a value when pretty much everything I build is so dynamic.

I'm not used to that kind of technique but it made perfect sense when you pointed it out.

I would need to place things based on the actual size of the stage not the size of what the stage might be.

The Sock comes through again!

Link to comment
Share on other sites

Uh oh looks like I spoke too soon.

I have the centering working properly but initially the LiquidAreas are not resizing.

My background and header are showing at the 1024 widths. They don't update until the browser is re-sized.

I tried adding .update calls but that didn't do the trick.

Am I missing something?

Link to comment
Share on other sites

Not sure - please post a super simple FLA that demonstrates the issue and I'll take a peek. No need to include the GreenSock classes. I just need to see your code and a visual example of what's going on in order to effectively troubleshoot.

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