Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
brantseibert

Bottom Loader Bar -- ScaleMode ?

Recommended Posts

Hi,

 

I am building a 10px high loader bar at the bottom of the screen that changes from white to red with the % loaded; I want it to expand to the full width of the screen on resize. But I can not get loaderBar to scale to the full width of the stage on resize.

 

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

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

mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE);

...

ls.attach(loaderBar, ls.BOTTOM_LEFT, ScaleMode.WIDTH_ONLY);

 

I get this error: 133 (line that has ls.attach instruction) "Warning: 3590: String used where a Boolean value was expected. The expression will be type coerced to Boolean."

 

By the way, I am using swfObject and the activeMC fills the screen perfectly on resize!

 

Thanks.

Link to comment
Share on other sites

Here's you're problem:

 

ls.attach(loaderBar, ls.BOTTOM_LEFT, ScaleMode.WIDTH_ONLY);

 

The 3rd parameter is supposed to be a Boolean value that determines whether or not you want to pin the object in strict mode or not (always keeping the same distance absolutely from the PinPoint), but you passed in ScaleMode.WIDTH_ONLY which is a String. Did you mean to attach() it to mainMC (the LiquidArea) instead of ls (LiquidStage)? Maybe this?:

 

mainMC.attach(loaderBar, ScaleMode.WIDTH_ONLY);

 

Also keep in mind that there's a LiquidArea.createAround() static method that you can use to create a LiquidArea exactly around a certain DisplayObject and it'll grow/shrink whenever the stage resizes. See the docs for more specifics at http://www.greensock.com/as/docs/tween/ ... stage.html

Link to comment
Share on other sites

What I am trying to do is described by you here: http://www.greensock.com/liquidstage/ "For example, you could have a bar snap to the bottom of the screen and stretch horizontally to fill the width of the stage. "

 

I almost got it using createAround(), but ...

 

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

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

mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE);

...

var loaderBarArea:LiquidArea=LiquidArea.createAround(loaderBar,ScaleMode.WIDTH_ONLY,AlignMode.LEFT,AlignMode.BOTTOM);

 

But this code snaps the loaderBar to the bottom of the mc which is set to PROPORTIONAL_OUTSIDE. Consequently, the loader bar disapeers when the browser screen is wider than the 10x6 ratio I defined. Thanks for your help.

Link to comment
Share on other sites

But this code snaps the loaderBar to the bottom of the mc which is set to PROPORTIONAL_OUTSIDE. Consequently, the loader bar disappears when the browser screen is wider than the 10x6 ratio I defined. Thanks for your help.

 

You sure? I just tested this and it worked great - the bar doesn't care about the size/position of the activeMC. It stays at the bottom of the screen (it only cares about the size of the stage). Please post an example FLA that demonstrates the problem (no need to include the GreenSock classes)

Link to comment
Share on other sites

Aha!

 

It is not the relative size (10x6 ratio) that causes this, rather the ABSOLUTE size of my movie (document). The bottom bar is only cut off if the browser window is shorter than the original movie height (600px).

 

----------

 

That raises another interesting challenge. Compare in a short browser window http://effectiveui.com/#/?env=design&pop=0&f=0 The design page for EffectiveUI does not cut off the bottom navigation even when browser window is very short. Can we do that with Greensock? Thanks.

Link to comment
Share on other sites

Absolutely - you can make the minimum size whatever you want. That's what the minWidth and minHeight parameters are for in the LiquidStage constructor. You can even make them 0, like:

 

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

Link to comment
Share on other sites

No, that did not do the trick. loaderBar still disapears when browser window is shorter than movie height.

 

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

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

mainMC.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE);

...

var loaderBarArea:LiquidArea=LiquidArea.createAround(loaderBar,ScaleMode.WIDTH_ONLY,AlignMode.LEFT,AlignMode.BOTTOM);

 

This is what I want it to do: http://effectiveui.com/#/?env=design&pop=0&f=0 Try scrunching the browser window up. Thanks.

Link to comment
Share on other sites

The reason the other way wasn't working for you is because your LiquidArea was being created exactly around wherever you placed loaderBar initially, and by default the upper left corner of the LiquidArea is pinned to the upper left corner of the stage, and the lower right is pinned to the lower right corner of the stage. So let's say the y-coordinate is 500 initially. When you make the stage smaller, the top left corner of your LiquidArea isn't moving because the top left corner of the stage isn't either (it's maintaining its distance from the upper left corner of the stage). It's working as it should, but you can get the behavior you want in either of the following ways:

 

1) Use the LiquidArea's pinCorners() method to pin the top left corner of the LiquidArea to the bottom left corner of your stage so that when the bottom of the browser moves up, so does your whole LiquidArea. Like this:

 

var loaderBarArea:LiquidArea = LiquidArea.createAround(loaderBar, ScaleMode.WIDTH_ONLY, AlignMode.LEFT, AlignMode.BOTTOM);
loaderBarArea.pinCorners(ls.BOTTOM_LEFT, ls.BOTTOM_RIGHT);

-OR-

 

2) Change is the size of your LiquidArea so that its upper left corner is at exactly 0, 0 on the stage. Instead of doing a LiquidArea.createAround() on loaderBar, do this:

 

var loaderBarArea:LiquidArea = new LiquidArea(this, 0, 0, 1000, 600);
loaderBarArea.attach(loaderBar, ScaleMode.WIDTH_ONLY, AlignMode.LEFT, AlignMode.BOTTOM);

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