Matrix() 3 Point Skew

[SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]

var box:Sprite = createSprite("Rect", 0, 0, 100, 100, 0xFF0000);

var d0:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
d0.x = d0.y = 200;

var d1:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
d1.x = 200
d1.y = 300;

var d2:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
d2.y = d0.y;
d2.x = 300;

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(evt:Event):void {
 
	var m:Matrix = new Matrix();
	m.scale((d2.x - d0.x) / 100,(d1.y - d0.y) / 100);
	m.translate(d0.x, d0.y);
	
	m.c =  (d1.x - d0.x) / 100
	m.b =  (d2.y - d0.y ) / 100
	
	box.transform.matrix = m;
}

function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
	var s:Sprite = new Sprite();
	s.graphics.beginFill(col);
	s.graphics["draw" + shape](xp, yp, w, h);
	addChild(s);
	return s;
}

function drag(target:*):*{
	target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
	return target;
}

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.

Leave a Reply

Your email address will not be published. Required fields are marked *