LiquidStage – Automatically Reposition/Stretch DisplayObjects in Full-Browser SWFs
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.
TransformManager (AS3) – Interactively Scale/Rotate/Move DisplayObjects
TransformManager makes it easy to add interactive scaling/rotating/moving of DisplayObjects to your Flash or Flex application. It uses an intuitive interface that’s similar to most modern drawing applications. When the user clicks on a managed DisplayObject, a selection box will be drawn around it along with 8 handles for scaling/rotating. When the mouse is placed just outside of any of the scaling handles, the cursor will change to indicate that they’re in rotation mode. Just like most other applications, the user can hold down the SHIFT key to select multiple items, to constrain scaling proportions, or to limit the rotation to 45 degree increments.
TransformMatrixProxy – Tween skewX, skewY, and more
Ever wanted to tween the skew of a MovieClip/DisplayObject? The only way you can do it is to use the transform.matrix property which can be rather unintuitive. This class should save you some headaches. It’s primary purpose is to easily control skewX and skewY properties of any MovieClip/DisplayObject, but you can also use it to scale and rotate. You can even dynamically set the regisration point around which all transformations occur. Or tween its X and Y coordinates for interesting effects. The registration point is always according to the MovieClip’s inner coordinates whereas the outerRegistration is based on the MovieClip’s parent’s coordinates, so it’s very simple to control it whichever way you prefer.
TransformManager (AS2) – Scale/Rotate/Move any MovieClip
This class works with the TransformItem class to give the user the ability to scale, rotate, and/or move any MovieClip on the stage using an intuitive interface (similar to most modern drawing applications). When the user clicks on the TransformItem’s MovieClip, a selection box will be drawn around it along with four handles for scaling. When the user places their mouse just outside of any of the scaling handles, the cursor will change to indicate that they’re in rotation mode. Hold down shift to constrain scaling proportions or to limit rotation to 45 degree increments. This TransformManager class will handle multiple TransformItem instances, switching the selection boxes (so that only one is selected at a time) as well as updating the properties with a single call. See the TransformItem class for more details about features.