Matrix() 3 Point Skew

Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]
  2.  
  3. var box:Sprite = createSprite("Rect", 0, 0, 100, 100, 0xFF0000);
  4.  
  5. var d0:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  6. d0.x = d0.y = 200;
  7.  
  8. var d1:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  9. d1.x = 200
  10. d1.y = 300;
  11.  
  12. var d2:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  13. d2.y = d0.y;
  14. d2.x = 300;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17.  
  18. function onLoop(evt:Event):void {
  19.  
  20.     var m:Matrix = new Matrix();
  21.     m.scale((d2.x - d0.x) / 100,(d1.y - d0.y) / 100);
  22.     m.translate(d0.x, d0.y);
  23.    
  24.     m.c =  (d1.x - d0.x) / 100
  25.     m.b =  (d2.y - d0.y ) / 100
  26.    
  27.     box.transform.matrix = m;
  28. }
  29.  
  30. function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
  31.     var s:Sprite = new Sprite();
  32.     s.graphics.beginFill(col);
  33.     s.graphics["draw" + shape](xp, yp, w, h);
  34.     addChild(s);
  35.     return s;
  36. }
  37.  
  38. function drag(target:*):*{
  39.     target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
  40.     return target;
  41. }
  42.  
  43. stage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });

The above creates a red rectangle that can be skewed by dragging 3 points. Why is this so cool you ask?

This is why (move your mouse)

The above was written in flash 7, before the Matrix object existed. So in order to create it I used this technique from Eric Lin.

This entry was posted in DisplayObject, MovieClip, matrix and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*