Jump to content
Search Community

Liquid Stage with parallax asset

squibn test
Moderator Tag

Recommended Posts

Hi there,


I sure hope someone can help with my liquid stage issue, as its essential I get it working as my whole site hinges on it!!


Basically, I've incorporated Liquid Stage into my Gaia built site and itreally works a treat! ...But (there's always a but!!;)) ....the home page has a placed asset in it which is a swf that makes use of a parallax effect, where the placement of the mouse controls the scrolling to the left and right of a MovieClip. This works fine by itself, but when placed within my Gaia framework the "wheels fall off!!"


I'm pretty sure this is because the parallax placed swf references the stage, and wondered if there was a work round, or alternative solution? It doesn't have to be a placed swf, it could be actually within the framework, but this is just how I like to build my sites.


My code is this....within my Gaia project...


package pages{
import com.gaiaframework.templates.AbstractPage;
import com.gaiaframework.events.*;
import com.gaiaframework.debug.*;
import com.gaiaframework.api.*;
import flash.display.*;
import flash.events.*;
import gs.*;

import com.greensock.layout.*;

public class HomePage extends AbstractPage {

	public function HomePage() {
	override public function transitionIn():void {
		TweenLite.to(this, 0.3, {alpha:1, onComplete:transitionInComplete});
	override public function transitionOut():void {
		TweenLite.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete});
	override public function transitionInComplete():void {



	public function init():void {
		var myContainer:MovieClip = new MovieClip();


		var ls:LiquidStage=new LiquidStage(this.stage,1624,668,1024,668);
		var area:LiquidArea=new LiquidArea(this,0,0,1624,668);
		area.attach(myContainer, ScaleMode.PROPORTIONAL_OUTSIDE);



code within my swf asset...


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

var easeType = Expo.easeOut;

var xmouse:Number = 0;
var xPct:Number = 0;
var speed:Number = 2;

stage.addEventListener(MouseEvent.MOUSE_MOVE, render);

function render(e:MouseEvent):void
if( e.stageX > stage.stageWidth/2) {

	xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512

	xmouse = ((stage.stageWidth/2) - e.stageX); //512


xPct = Math.round ((xmouse/stage.stageWidth) * 200);

var skyXto:Number = ((xPct/100) * (sky_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;

TweenMax.to(sky_mc,speed, {x:skyXto, ease:easeType});

var fieldXto:Number = ((xPct/100) * (scrollPanel.width - stage.stageWidth)/2) + stage.stageWidth/2;

TweenMax.to(scrollPanel,speed, {x:fieldXto, ease:easeType});



I appriciate that this may be one for the Gaia forum, but thought I'd try here first as my project uses Liquid Stage?


Any help would be fantastic, and alleviate a huge amount of head scratching!!


Here's hoping!


Link to comment
Share on other sites

I am not a Gaia person nor do I have time to build a test bed and construct a full solution, but I do have an idea I'd throw out there - what if instead of basing your size/position on the stage, you created a Sprite that shares the same parent as your sub loaded swf and is wired up to LiquidStage so that it resized appropriately? Don't forget to draw a box in it so that it has a width and height.

Link to comment
Share on other sites

Hi Greensock,


Apologies, I didn't mean to sound like I wanted you to work it all out for me :oops: ...just frustrated that I couldn't work it out myself...I'll get to the bottom of it tho that's for sure:)....just might take me a while!... I'll look into your suggestion tho that's for sure!


Kudos for such an amazing set of Classes by the way...love em!



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