LiquidStage best practices?

[rynokins]

Hello, I'm looking to pin a movieclip to the bottom of the stage and stretch certain children of it depending on the resize of the stage (it's for a video player control strip that will resize on fullscreen). I'm trying to figure the best way to do this but I keep getting errors with each attempt. Can you help with some clues on how to deal with such an issue? Thanks

[GreenSock]

What errors are you getting?

 

It should be as simple as creating a LiquidStage instance, then create a LiquidArea that is positioned across the bottom of your screen. use LiquidArea's pinCorners() to pin it to the BOTTOM_LEFT and BOTTOM_RIGHT corners and set the scaleMode to ScaleMode.WIDTH_ONLY. attach() whatever objects you want to that LiquidArea and you're good to go.

[rynokins]

Hey - thanks for that - I am able to get the background of the control strip aligned to the bottom of the swf and stretching along with it's resizing. My question now is how do I set up PinPoints to anchor the buttons? Do I need to use DynamicPinPoint to calculate where the buttons should be? I've tried that on my play-pause button and it seems to move it based on a percentage distance from the right side of the background, rather than anchoring it to the same distance as the original placement...

 

var controlsStage:LiquidStage = new LiquidStage(controls_mc.stage, 400, 300);
var controlsArea:LiquidArea = new LiquidArea(controls_mc, 0, 0, 400, 56);

controlsArea.attach(controls_bkg, ScaleMode.WIDTH_ONLY, AlignMode.CENTER, AlignMode.BOTTOM);
var ppp:DynamicPinPoint = new DynamicPinPoint(controls_bkg, playPausePoint);
ppp.attach(controls_mc.playPause_mc);
function playPausePoint():Point {
var bounds:Rectangle = controls_bkg.getBounds(controls_bkg);
return new Point(bounds.x + 24, bounds.y + 28);
}

 

Should I set up LiquidAreas for each element in the player? Would that be overkill? Thanks so much for your help.

[GreenSock]

If I understand your goal correctly, I'd just put all your controls in a container Sprite and pin that one Sprite. See what I mean?

[rynokins]

I do want the timeline of the controls to stretch along with the swf resize, though — like the youtube player here: http://s.ytimg.com/yt/swf/watch_as3-vfl169211.swf

[GreenSock]

For that sort of thing, I'd pin your buttons to each edge of the screen (like the BOTTOM_LEFT for the buttons on the left and BOTTOM_RIGHT for the buttons on the right) and then for the stretchy one in the middle, I'd create a LiquidArea that fills the area inbetween the buttons - just pinCorners() like I mentioned earlier to the BOTTOM_LEFT and BOTTOM_RIGHT. Make sense?

 

Feel free to post a simple example FLA if you're still having trouble (don't post the GreenSock classes please). The example can be super simple - no need to post your production files.

[rynokins]

Hey - so I got that working and it's pretty sweet.

I simply attached the buttons to the LiquidStage and made and LiquidArea for the background so it would span the screen, and a separate LiquidArea for the timeline of the video.

 

One thing I don't understand though.

I have the video scrubber's x position set to update as the video plays, via some code:

scrubber.x = netStream.time * timeline.width / videoObject.duration;

 

This works great at the original size, but breaks on resize.

 

When I trace the scrubber's x position it's numbers make sense at the original size, they correspond with the width of the timeline accurately. On resize, when I make the movie larger, it seems like the 0x point that the scrubber is relative to moves — the same x position that traced out a positive number at the original size traces out a negative number when I make the swf wider. Is there a better way for me to calculate the x position for the scrubber? This is also a problem for dragging and seeking, which works ok at the original size but seems like it needs a different calculation when I resize.

 

Any thoughts?

Thank you again for your help with this.

[GreenSock]

Depending on your stageAlign, Flash actually slides the root object around (to center it or put it wherever). A simple solution would probably be to use your timeline's x position as the basis for your scrubber (I haven't seen how you built it, but I assume you could do:)

 

scrubber.x = timeline.x + (netStream.time * timeline.width / videoObject.duration);

 

You might want to set your stageAlign to TOP_LEFT although LiquidStage will work around whatever you do.

[rynokins]

Hey - your advice was spot on. I had to break all of the math calculations into their own functions so they could get the updated widths efficiently but I now have a scrubber that works at every size! Thanks for your help!!

[rynokins]

One thing to make a note of, possibly in your documentation — I just spent an entire frustrating day troubleshooting why portions of my design would not place correctly when I set my html embed code to be a different size than I originally designed the swf at. After much frustration and breaking it and rebuilding it I discovered that if I just set the stage's scaleMode to NO_SCALE I could set the embed code to be whatever size I wanted and everything would resize and move according to the design and rules I set up no problem.

 

stage.scaleMode = StageScaleMode.NO_SCALE;

 

I hope this can at leat help someone else avoid the frustration I was experiencing.

[GreenSock]

Hm, that's odd - LiquidStage actually does that internally for you on line 205. I don't see why you'd have to do that manually.