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.