{"id":48,"date":"2010-04-29T14:33:40","date_gmt":"2010-04-29T21:33:40","guid":{"rendered":"https:\/\/www.zacwitte.com\/?p=48"},"modified":"2010-04-29T14:33:40","modified_gmt":"2010-04-29T21:33:40","slug":"simple-skew-animation-with-actionscript-3","status":"publish","type":"post","link":"https:\/\/zacwitte.com\/?p=48","title":{"rendered":"Simple Skew Animation with ActionScript 3"},"content":{"rendered":"

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.<\/p>\n

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:<\/p>\n

    import flash.geom.Matrix;\n    var matrix:Matrix = new Matrix();\n\u00a0 \u00a0 matrix.b = _y * Math.PI\/180;\n\u00a0 \u00a0 matrix.c = _x * Math.PI\/180;\n\u00a0 \u00a0 matrix.concat(target.transform.matrix);\n\u00a0 \u00a0 my_mc.transform.matrix = matrix;\n<\/pre>\n
or<\/p>\n
    import flash.geom.Matrix;\n    var matrix:Matrix = new Matrix(1, _y * Math.PI\/180, _x * Math.PI\/180, 1, 0, 0);\n    my_mc.transform.matrix = matrix;\n<\/pre>\n
where _y or _x is the skew angle in radians. Unfortunately when you update a property of the transform matrix like<\/p>\n
my_mc.transform.matrix.b = _y * Math.PI\/180;<\/pre>\n
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.<\/p>\n
    import fl.transitions.Tween;\n    import fl.transitions.easing.*;\n    import fl.transitions.TweenEvent;\n    import flash.geom.Matrix;\n\n    var mymatrix:Matrix = new Matrix(1,0,0,1,0,0);\n\n    function reassignMatrix(e:TweenEvent) {\n        bg.transform.matrix = mymatrix;\n    }\n\n    var bgTweenSkew = new Tween(mymatrix, 'b', Regular.easeOut, mymatrix.b, Math.tan(_y * (Math.PI\/180)), 10);\n    bgTweenSkew.addEventListener(TweenEvent.MOTION_CHANGE, reassignMatrix);\n<\/pre>\n
Note this will overwrite the scale and rotation properties, which are a part of the transform matrix. See the Adobe livedocs<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[6],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-tech","tag-actionscript"],"_links":{"self":[{"href":"https:\/\/zacwitte.com\/index.php?rest_route=\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zacwitte.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zacwitte.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zacwitte.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zacwitte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":0,"href":"https:\/\/zacwitte.com\/index.php?rest_route=\/wp\/v2\/posts\/48\/revisions"}],"wp:attachment":[{"href":"https:\/\/zacwitte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zacwitte.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zacwitte.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}