GreenSock

• Compatibility: Flash Player 8 and later (AS2 and AS3 versions)
• File Size added to published SWF: About 1Kb

Get this class free when you join Club GreenSock

DESCRIPTION

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. Just be careful because due to the nature of transform matrixes, tweening skew properties at the same time as rotation or scale can lead to unexpected results (skewing actually affects scale and rotation).

Tween the skewX and/or skewY for normal skews (which adjust scale to compensate), or skewX2 and/or skewY2 in order to skew without adjusting scale.

Nifty feature:: dynamically set the regisration point around which all transformations occur as well. 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. See the interactive demo below. Drag the registration point around, play with the properties, and click tween to see it in action and watch how the code works.

Get the AS2 and AS3 flavors of this class by joining Club GreenSock and becoming a "Really Green" or "Shockingly Green" member

PROPERTIES

• skewX : Number
• skewY : Number
• skewX2 : Number
• skewY2 : Number
• scale : Number
• scaleX : Number
• scaleY : Number
• rotation : Number
• registration : Point
• skewXRadians : Number
• skewYRadians : Number
• skewX2Radians : Number
• skewY2Radians : Number
• rotationRadians : Number
• registrationX : Number
• registrationY : Number
• outerRegistration : Point
• outerRegistrationX : Number
• outerRegistrationY : Number

USAGE

Simply create a new TransformMatrixProxy instance for any MovieClip/DisplayObject you'd like to control (like var tmp = new TransformMatrixProxy(my_mc)). Then when you change the property of the TransformMatrixProxy instance, it'll affect the MovieClip/DisplayObject. See the interactive demo above to interact with properties and watch exactly how the code works. It's pretty simple actually.

The AS2 version of this class uses scaleX and scaleY (1-based values where 1 = 100%) instead of _xscale and _yscale (100-based values where 100 = 100%) in order to match the AS3 version. Keep that in mind when scaling.

Already a Club GreenSock member and need the latest version?

Just e-mail questions@greensock.com and I'll send you the latest AS2 and AS3 files. Then bask in your super-cool status as a Club GreenSock member :-)