Liquid Stage but different Liquid Areas

[Air]

Dear Community I’m new to the liquid stage classes and I need your help

I try to nest different Liquid Areas to my Liquid Stage. I want the background area for holding and stretching my main background.

On top I want the Liquid Stage with more liquid Areas everything works but my background is always on top of the Logo, navigation and so on.

 

 

		public function Main():void
	{
		stage.scaleMode=StageScaleMode.NO_SCALE;
		stage.align=StageAlign.TOP_LEFT;
		var backgroundArea:LiquidArea=new LiquidArea(this, 0, 0, 1024, 810, 0xCCFFFF, 1024, 810, 99999, 99999, false, null, false);
		var ls:LiquidStage=new LiquidStage(this.stage, 1024, 810, 1024, 810);
		var contentArea:LiquidArea=new LiquidArea(this, 175, 50, 800, 700, 0xFF0000, 800, 700, 1700, 900, false, null, false);
		var myPin:PinPoint=new PinPoint(30, 100, ls.stageBox);
		backgroundArea.pinCorners(ls.TOP_LEFT, ls.BOTTOM_RIGHT, false, 0.8, {ease: Circ.easeInOut});
		contentArea.pinCorners(myPin, ls.BOTTOM_RIGHT, false, 0.8, {ease: Circ.easeInOut});

		trace(contentArea.parent);
		trace(stage.numChildren);
		addChild(menu);
		menu.x=offset;
		menu.y=240;
		addChild(topMenu);
		topMenu.y=offset;
		topMenu.x=700;
		copyrightBtn.Label="COPYRIGHT 2010";
		addChild(copyrightBtn)
		copyrightBtn.y=770;
		copyrightBtn.x=885;
		legalBtn.x=offset;
		legalBtn.Label="IMPRESSUM";
		addChild(legalBtn)
		legalBtn.x=offset;
		legalBtn.y=770;
		addChild(logo);
		addChild(mainBG);
		logo.scaleX=1.25;
		logo.scaleY=1.25;
		logo.y=offset;
		logo.x=offset;
		mainBG.mouseEnabled=false;


		addChild(backgroundArea);
		addChild(contentArea);
		mainBG.alpha=0.4;
		ls.attach(backgroundArea, ls.TOP_LEFT, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(legalBtn, ls.BOTTOM_LEFT, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(copyrightBtn, ls.BOTTOM_RIGHT, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(menu, ls.LEFT_CENTER, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(topMenu, ls.TOP_RIGHT, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(logo, ls.TOP_LEFT, false, true, 0.8, {ease: Circ.easeInOut});
		ls.attach(contentArea, myPin, false, true, 0.8, {ease: Circ.easeInOut});
		backgroundArea.attach(mainBG, ScaleMode.STRETCH, AlignMode.CENTER, AlignMode.CENTER);
		contentArea.preview=false;
		backgroundArea.preview=false;
		menu.btnAboutGT.addEventListener(ButtonEvents.OPENABOUTGT, handleMenuClick);
		menu.btnClients.addEventListener(ButtonEvents.OPENCLIENTS, handleMenuClick);
		menu.btnWork.addEventListener(ButtonEvents.OPENWORK, handleMenuClick);
		menu.btnContact.addEventListener(ButtonEvents.OPENCONTACT, handleMenuClick);
		topMenu.fullScreen.addEventListener(ButtonEvents.CHANGESCREENMODE, changeScreenMode);
	}

 

Is this even possible? Thank you for your help.

[GreenSock]

LiquidStage/LiquidArea don't change the stacking order of anything - you should be able to change the order in the display list however you please - just change the order that you addChild() them. Notice you addChild() your background after the others - that's why it's on top