{"id":160,"date":"2009-01-18T00:00:52","date_gmt":"2009-01-18T07:00:52","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=546"},"modified":"2009-01-18T00:00:52","modified_gmt":"2009-01-18T07:00:52","slug":"matrix-3-point-skew","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=160","title":{"rendered":"Matrix() 3 Point Skew"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]\r\n\r\nvar box:Sprite = createSprite(&quot;Rect&quot;, 0, 0, 100, 100, 0xFF0000);\r\n\r\nvar d0:Sprite = drag(createSprite(&quot;Ellipse&quot;,  -5, -5, 10, 10));\r\nd0.x = d0.y = 200;\r\n\r\nvar d1:Sprite = drag(createSprite(&quot;Ellipse&quot;,  -5, -5, 10, 10));\r\nd1.x = 200\r\nd1.y = 300;\r\n\r\nvar d2:Sprite = drag(createSprite(&quot;Ellipse&quot;,  -5, -5, 10, 10));\r\nd2.y = d0.y;\r\nd2.x = 300;\r\n\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\n\r\nfunction onLoop(evt:Event):void {\r\n \r\n\tvar m:Matrix = new Matrix();\r\n\tm.scale((d2.x - d0.x) \/ 100,(d1.y - d0.y) \/ 100);\r\n\tm.translate(d0.x, d0.y);\r\n\t\r\n\tm.c =  (d1.x - d0.x) \/ 100\r\n\tm.b =  (d2.y - d0.y ) \/ 100\r\n\t\r\n\tbox.transform.matrix = m;\r\n}\r\n\r\nfunction createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {\r\n\tvar s:Sprite = new Sprite();\r\n\ts.graphics.beginFill(col);\r\n\ts.graphics&#x5B;&quot;draw&quot; + shape](xp, yp, w, h);\r\n\taddChild(s);\r\n\treturn s;\r\n}\r\n\r\nfunction drag(target:*):*{\r\n\ttarget.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });\r\n\treturn target;\r\n}\r\n\r\nstage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });\r\n<\/pre>\n<p>The above creates a red rectangle that can be skewed by dragging 3 points. Why is this so cool you ask?<\/p>\n<p><a data-asruffle-linked=\"true\" href=\"http:\/\/shapevent.com\/1\/entit\/blockbox.swf\" target=\"blank\">This is why (move your mouse)<\/a> <span class=\"asruffle-link\" data-swf=\"{&quot;url&quot;:&quot;http:\\\/\\\/shapevent.com\\\/1\\\/entit\\\/blockbox.swf&quot;,&quot;title&quot;:&quot;blockbox&quot;,&quot;width&quot;:550,&quot;height&quot;:400,&quot;missing&quot;:false,&quot;allowScriptAccess&quot;:false}\"><button type=\"button\" hidden aria-expanded=\"false\">Play demo<span class=\"screen-reader-text\">: blockbox<\/span><\/button><\/span><\/p>\n<p>The above was written in flash 7, before the Matrix object existed. So in order to create it I used <a href=\"http:\/\/ericlin2.tripod.com\/skew\/skewDone5.html\">this technique from Eric Lin<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)] var box:Sprite = createSprite(&quot;Rect&quot;, 0, 0, 100, 100, 0xFF0000); var d0:Sprite = drag(createSprite(&quot;Ellipse&quot;, -5, -5, 10, 10)); d0.x = d0.y = 200; var d1:Sprite = drag(createSprite(&quot;Ellipse&quot;, -5, -5, 10, 10)); d1.x = 200 d1.y = 300; var d2:Sprite = drag(createSprite(&quot;Ellipse&quot;, -5, -5, 10, 10)); d2.y = d0.y; d2.x = 300; addEventListener(Event.ENTER_FRAME, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,118,22],"tags":[3,4],"class_list":["post-160","post","type-post","status-publish","format-standard","hentry","category-displayobject","category-matrix","category-movieclip","tag-actionscript","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=160"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/160\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}