GreenSock


TransformMatrixProxy – Tween skewX, skewY, and more

Posted in Transforming, Tweening by jack on the April 15th, 2008
Version 1.6, Updated 6/19/2008
  • Compatibility: Flash Player 8 and later (AS2 and AS3 versions)
  • File Size added to published SWF: About 1Kb

Get this class when you join Club GreenSock

DESCRIPTION

TransformMatrixProxy has two primary features/benefits:

  1. It allows you to dynamically define ANY point around which all transformations (like rotation, scale, skew) occur. Basically, it’s like setting the registration point for any MovieClip/DisplayObject wherever you want!
  2. It allows you to easily skew a MovieClip/DisplayObject by setting a simple property which also means it is completely tweenable.

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

The “localRegistration” always corresponds to the DisplayObject’s inner coordinates whereas the “registration” is based on the DisplayObject’s parent’s coordinates, so it’s very simple to control it whichever way you prefer.

Once you create a TransformMatrixProxy, it is best to always control your MovieClip’s/DisplayObject’s relevant properties through the TransformMatrixProxy so that the values don’t become out of sync. If you directly change the properties of the target, you’ll need to call the calibrate() method on the proxy. It’s usually best to create only ONE proxy for each target, but if you create more than one, they will communicate with each other to keep the transformations and registration position in sync (unless you set ignoreSiblingUpdates to true).

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 :-)

Author: Jack Doyle, (e-mail: jack -at- greensock.com)
Copyright 2008, GreenSock (This work is subject to the terms here.)

3 Responses to 'TransformMatrixProxy – Tween skewX, skewY, and more'

Subscribe to comments with RSS

  1. theRemix said,

    on April 16th, 2008 at 12:31 am

    Awesome!

    good work this is very useful, i’ll be donating soon.

  2. Ryan said,

    on July 21st, 2008 at 10:09 am

    Man, I wish I would have found this before I started a certain project about a month ago… this looks awesome. Next time I suppose.

  3. jankees said,

    on January 11th, 2009 at 6:56 am

    I love it! Thanks a million!

Leave a Reply