Jump to content
Search Community

Nested SWFs - LiquidStage

brantseibert test
Moderator Tag

Recommended Posts

Hi Jack,

 

I am building a template application using GAIA and Greensock. The default in GAIA is to create a nested page structure like this:

- index.swf

-- nav.swf

--- page.swf

---- asset (the assets can also be nested directly under index or nav)(below I insert the background image asset in index and that works)

 

QUESTION: What is the best practice for controlling the layout of assets (mc, button) of child SWFs?

 

The application I am building has a series of photos that fill the entire page.

------------------------------------ IndexPage.as ------------------------------------------------------

public function IndexPage()

{

super();

alpha = 0;

}

private function init():void {

var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600);

var la:LiquidArea=new LiquidArea(this,0,0,1000,600);

la.attach(backgroundMC, ScaleMode.PROPORTIONAL_OUTSIDE); // This works perfectly!

}

override public function transitionIn():void

{

super.transitionIn();

init();

TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete});

} // ... Gaia calls transitionIn() after initial load and i then call init().

----------------------------------------- NavPage.as -----------------------------------------

 

public function NavPage()

{

super();

alpha = 0;

 

homeBtn.addEventListener(MouseEvent.MOUSE_UP, onNavClick);

nav1.addEventListener(MouseEvent.MOUSE_UP, onNavClick);

nav2.addEventListener(MouseEvent.MOUSE_UP, onNavClick);

nav3.addEventListener(MouseEvent.MOUSE_UP, onNavClick);

nav4.addEventListener(MouseEvent.MOUSE_UP, onNavClick);

}

 

private function init():void {

var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600);

ls.attach(nav1, ls.BOTTOM_LEFT);

ls.attach(nav2, ls.BOTTOM_LEFT);

ls.attach(nav3, ls.BOTTOM_LEFT);

ls.attach(nav4, ls.TOP_RIGHT); // This works.

}

...

override public function transitionIn():void

{

//Gaia.api.afterGoto(onAfterGoto);

init();

super.transitionIn();

TweenLite.to(this, 0.3, {alpha:1, onComplete:transitionInComplete});

}

----------------------------------------- HomePage.as ---------------------------------------------------

But this code in the nested HomePage.as compiles but does not have any effect. (Strange thing is that it does center stuff when testing in flash but not when in a browser.)

public class HomePage extends AbstractPage

{

public var textContainer:MovieClip;

public var deviceContainer:MovieClip;

 

public function HomePage()

{

super();

alpha = 0;

}

 

private function init():void {

var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600);

ls.attach(deviceContainer, ls.CENTER);

ls.attach(textContainer, ls.CENTER); //This compiles but does not impact the layout.

}

 

public function homeIn():void {

var sceneHeight:Number = stage.stageHeight;

var sceneWidth:Number = stage.stageWidth;

var homeTimeline:TimelineLite = new TimelineLite();

homeTimeline.appendMultiple([TweenLite.from(deviceContainer, 1, {x:sceneWidth, delay:0, ease:Strong.easeOut}),

TweenLite.from(textContainer, 1, {x:-900, delay:0, ease:Strong.easeOut})],

0, TweenAlign.START, 1);

}

 

public function homeOut():void{

var sceneHeight:Number = stage.stageHeight;

var sceneWidth:Number = stage.stageWidth;

var homeTimeline:TimelineLite = new TimelineLite();

homeTimeline.appendMultiple([TweenLite.to(deviceContainer, 1, {x:sceneWidth, delay:0, ease:Strong.easeIn}),

TweenLite.to(textContainer, 1, { x: -900, delay:0, ease:Strong.easeIn } ),

TweenLite.to(this, 0.3, { alpha:0, delay:0, onComplete:transitionOutComplete } )],

0, TweenAlign.START, 1);

}

 

override public function transitionIn():void

{

init();

super.transitionIn();

TweenLite.to(this, 0.3, {alpha:1, delay:0, onComplete:transitionInComplete});

homeIn();

}

Sorry for being so verbose!

 

Thanks.

Link to comment
Share on other sites

Hm, so you're creating multiple LiquidStage instances for the same stage? I'd recommend creating one and then just use the static LiquidStage.getByStage() method to retrieve the instance anytime. Not that this is necessarily causing the problem you described, but I figured I'd mention it.

 

I'm not very familiar with Gaia, so I'm not sure how it affects things. Have you tried removing your tweens of textContainer and deviceContainer just to see if they get centered correctly then?

Link to comment
Share on other sites

I think the best way to solve this may be to discuss the generic question regarding nested SWFs:

 

QUESTION: What is the best practice for controlling the layout of assets (mc, button) of child SWFs?

 

p.s. I did remove the tweens and that solved the layout problem. But the tweens are essential, so I am not sure how that helps.

 

It would be great if you can help me understand the best practice for managing layouts in the context of nested SWF files.

 

Thanks again.

Link to comment
Share on other sites

One of the primary design objectives with LiquidStage was accommodating nested objects with ease. In fact, that was probably the most challenging part of engineering the class to begin with because things must be updated in a very specific order and take into account their parents' movement. So I guess what I'm saying is that there isn't a bunch of special instructions you need to follow in order to make nested objects behave correctly. It should "just work".

 

I was a bit confused about why you set up your tweens to make your objects go to the stage.stageWidth even though you apparently wanted them to be centered. Once you removed the tweens, you said it worked which leads me to believe that the problem simply had to do with how/where you're tweening things.

Link to comment
Share on other sites

With regard to your question, stage.stageWidth works great. First, in the FLA, I place the object where I want it. Then I simply bring the object to that point from off stage right.

 

The problem is not with the tween, it is with the layout. Currently, if the stage is not 1000x600, say it is 1264x700, the pinpoint should adjust to the center and the object should center. This works for the LiquidStage code that is in indexPage > navPage (one level of nesting), but not for code that is in indexPage > navPage > homePage (two levels of nesting).

 

If I understand you correctly, I should instead only declare one ls:LiquidStage in indexPage. What then is the syntax to reference that code in the parent to control the layout of objects in a child like indexPage > navPage > homePage? Can you post code with an example and I can learn the syntax from your example? Or is there a code example for referencing nested SWFs in docs?

 

Thanks.

Link to comment
Share on other sites

ls.update(); // Brilliant!

 

private function init():void {

ls = new LiquidStage(this.stage, 1000, 600, 1000, 600);

ls.update();

ls.attach(deviceContainer, ls.CENTER);

ls.attach(textContainer, ls.CENTER);

}

 

This simple command solved everything. Update is called each time a relevant event occurs. I assume my code is overly verbose, with multiple LiquidStages, and probably causing extraneous object calls (etc.) client side. But those issues are minor with such a small application. The benefit gained, on the other hand, is that this architecture provides a simple and powerful set of capabilities that are easily coded. After we clean up our application, I will post a sample application for others to see.

 

p.s. With regard to your question, all of the swf documents are the same dimension 1000x600.

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