Liquid Area issue with Greensock & Gaia

Question

I have a flash file that I'm trying to change backgrounds for each page. The background itself changes nicely but I'm having a problem getting the background to scale to the stage size. I'm using Greensock's Liquid Area to try and handle it and it does well with a single background but as soon as I introduced more my code choked..

package com.picturesite.pages
{
    import com.gaiaframework.api.*;
    import com.gaiaframework.debug.*;
    import com.gaiaframework.events.*;
    import com.gaiaframework.templates.AbstractPage;
    import com.greensock.TweenMax;
    import com.greensock.easing.*;
    import com.greensock.layout.*;

    import flash.display.*;
    import flash.events.*;

    public class IndexPage extends AbstractPage
    {   
        public var bg1:MovieClip;
        public var bg2:MovieClip;
        public var bg3:MovieClip;
        public var bg4:MovieClip;
        public var bg5:MovieClip;
        public var bg6:MovieClip;
        public var newBG:MovieClip;
        public var bBar_mc:MovieClip;   


        var releaseGaia:Function = Gaia.api.afterTransitionOut(onAfterTransitionOut, true);

        public function IndexPage()
        {
            super();
            alpha = 0;

        }
        override public function transitionIn():void 
        {
            super.transitionIn();
            bg2.visible=bg3.visible=bg4.visible=bg5.visible=bg6.visible=false;
            TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete});     

            var ls:LiquidStage = new LiquidStage(this.stage, 960, 760, 960, 760);
            var area:LiquidArea = new LiquidArea(this, 0, 0, 960, 760);
            area.attach(newBG, ScaleMode.PROPORTIONAL_OUTSIDE);
            ls.update();
        }

        override public function transitionOut():void 
        {
            super.transitionOut();
            TweenMax.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete});
            Gaia.api.removeAfterTransitionOut(onAfterTransitionOut);
        }

        private function onAfterTransitionOut(e:GaiaEvent):void
        {
            var newBG:MovieClip;

            switch(Gaia.api.getCurrentBranch())
            {
                case Pages.HOME :
                    newBG = bg1;
                    break;

                case Pages.PACKAGES :
                    newBG = bg2;
                    break;

                case Pages.PHOTOS_SAMPLES :
                    newBG = bg3;
                    break;

                case Pages.VIDEOS_SAMPLES :
                    newBG = bg4;
                    break;

                case Pages.TESTIMONIES :
                    newBG = bg5;
                    break;

                case Pages.CONTACT :
                    newBG = bg6;
                    break;

            }

            TweenMax.allTo([bg1,bg2,bg3,bg4,bg5,bg6], .5, {autoAlpha:0});
            TweenMax.to(newBG, .5, {alpha:1, onComplete:releaseGaia});  

        }

    }
}

Answer 1

I'm not really sure about the thing, but this line:

TweenMax.to(this, 0.3, {alpha:0, onComplete:transitionOutComplete});

maybe fades out everything. If I saw it well on the library's homepage, that code hides everything, because the code sets alpha to 0 in 0.3 secs. Is that right? If so, then maybe change this to newBG, if you want to fade the newBG object out. So far it seems you fade out the whole thing.

So:

TweenMax.to(newBG, 0.3, {alpha:0, onComplete:transitionOutComplete});

Or in onAfterTransitionOut, put

this.alpha = 1;

Hope this helps or gives you some idea.