GreenSock


LiquidStage - Automatically Reposition/Stretch DisplayObjects in Full-Browser SWFs

Posted in Transforming, Tweening by jack on the November 8th, 2008

LiquidStage allows you to “pin” DisplayObjects to reference points on the stage or in other DisplayObjects so that when the stage is resized, the DisplayObjects are repositioned and stay exactly the same distance from the reference point(s) they’re registered to. It also allows you to define another pin point horizontally and/or vertically which will change the width/height of the DisplayObject when the stage is resized, stretching it visually. For example, maybe you want a logo Sprite to always maintain a particular distance from the bottom right corner. Or maybe you’d like a bar to snap to the bottom of the screen and stretch horizontally to fill the bottom of the stage. Here is an example of a real-world project that used LiquidStage.

  • Your DisplayObjects do not need to be at the root level - LiquidStage will compensate for nesting even if the DisplayObject’s ancestors are offset (not at the 0,0 position).
  • Repositioning/Resizing values are relative so if you pin an object and then move it, LiquidStage will honor that new position.
  • Not only can you pin things to the TOP_LEFT, TOP_CENTER, TOP_RIGHT, RIGHT_CENTER, BOTTOM_RIGHT, BOTTOM_CENTER, BOTTOM_LEFT, and LEFT_CENTER, but you can create your own custom PinPoints in any DisplayObject.
  • LiquidStage leverages the TweenLite engine to allow for animated transitions. You can define the duration of the transition and the easing equation for each DisplayObject individually.
  • x and y coordinates are always snapped to whole pixel values, so you don’t need to worry about mushy text or distorted images.
  • LiquidStage does NOT force you to align the stage to the upper left corner - it will honor whatever StageAlign you choose.
  • Optionally define a minimum width/height to prevent objects from repositioning when the stage gets too small.
  • LiquidStage only does its work when the stage resizes, so it’s not constantly draining CPU cycles and hurting performance.

More...