Fullscreen LiquidArea, LiquidStage Image Sizes

[brantseibert 0 Likes (Newbie)]

Hi,

 

PROBLEM

I have a parent MC that fills the screen using LiquidArea. The parent MC has children MCs which I swap out to change the background image. This all works great if the children are all the same dimension, but does not work if the children have different aspect ratios.

 

OBJECTIVE:

I would like to place images of different dimensions into a single Movie Clip. The images are background pictures that fill the screen. I will then pan wide images horizontally and tall images vertically.

 

One way to think of it is the parent should act like a mask -- and the portions of the children that fall outside the mask should not effect the scaling calculations of the parent.

 

CODE:

- The document is 1000 x 600

- activeMC is 1000 x 600

- pic1 is 2000 x 1200 (the large size allows it to scale and stay crisp)

- pic2 is 2000 x 1800 (600 pixels higher than pic1)

- pic3 is 2400 x 1200 (400 pixels wider than pic1)

 

I placed pic1 inside activeMC and it fills the screen perfectly with this:

 

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

mainLiquidArea.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE);

 

But, when I add pic2 or pic3 to activeMC, pic1 no longer fills the screen on large monitors.

 

ANALYSIS:

I assume that the issue is: when I add children (pic1, pic2, pic3) to the parent (actvieMC), LiquidArea code calculates sizes based on the largest width and height (2400, 1800). Instead, I want the Liquid Area to stay in the 1000x600 ratio and have the extra portions of pic2 and pic3 simply fall outside the viewable stage. I will then use TweenLite to pan the images horizontally or vertically across the viewable area.

 

Thanks.

[GreenSock 17,900 Likes (Superhero)]

If you attach() something to LiquidArea, it will affect it according to your instructions (AlignMode and ScaleMode). So you'd create conflicts if you tried tweening the attached object(s) also because TweenLite would be telling it to go to one place and LiquidArea would be telling it to go to another (when the stage resizes at least). You could certainly attach() the object to have it scaled and positioned in a particular way and then release() it and tween it, but if the stage resizes after that point, the object won't adjust. See what I mean?

 

If you want to replace your child objects and force LiquidArea to re-analyze the contents and position/scale it accordingly, you should be able to simply call update() on the LiquidArea. If that doesn't work, just release() and then attach() the object.