Simple Skew Animation with ActionScript 3


I couldn’t find any good examples on simple tween of a skew effect in actionscipt 3 so I thought I’d share what I came up with.

The problem is that skew is not a property on the MovieClip like x or height or others you’re used to tweening with fl.transitions. To apply a skew effect in AS3 you need to use a matrix transform like this:

    import flash.geom.Matrix;
    var matrix:Matrix = new Matrix();
    matrix.b = _y * Math.PI/180;
    matrix.c = _x * Math.PI/180;
    matrix.concat(target.transform.matrix);
    my_mc.transform.matrix = matrix;

or

    import flash.geom.Matrix;
    var matrix:Matrix = new Matrix(1, _y * Math.PI/180, _x * Math.PI/180, 1, 0, 0);
    my_mc.transform.matrix = matrix;

where _y or _x is the skew angle in radians. Unfortunately when you update a property of the transform matrix like

my_mc.transform.matrix.b = _y * Math.PI/180;

it doesn’t update the movieclip. You need to actually re-assign the matrix to trigger an update. So you can’t simply tween the my_mc.transform.matrix.b directly. Here’s my solution.

    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import flash.geom.Matrix;

    var mymatrix:Matrix = new Matrix(1,0,0,1,0,0);

    function reassignMatrix(e:TweenEvent) {
        bg.transform.matrix = mymatrix;
    }

    var bgTweenSkew = new Tween(mymatrix, 'b', Regular.easeOut, mymatrix.b, Math.tan(_y * (Math.PI/180)), 10);
    bgTweenSkew.addEventListener(TweenEvent.MOTION_CHANGE, reassignMatrix);

Note this will overwrite the scale and rotation properties, which are a part of the transform matrix. See the Adobe livedocs for more information.


Leave a Reply