View Single Post
Old 02-16-2007, 11:06 PM   #13
six eyes
senocular's Avatar
Join Date: Jan 2003
Location: San Francisco, CA (USA)
Posts: 7,875
Send a message via ICQ to senocular Send a message via AIM to senocular Send a message via MSN to senocular Send a message via Yahoo to senocular

Here is a simple script as an exmaple for the triangle method (based on the image I posted earlier). Just change the linkage to a bitmap in your library and run it. As you play with it, you can see better how it works.
ActionScript Code:
import flash.display.BitmapData; import flash.geom.Matrix; // linkage for the image clip in the library to be distorted var bitmapLinkage:String = "yourLinkageHere"; // create a new bitmap from the item in the library var bmp:BitmapData = BitmapData.loadBitmap(bitmapLinkage); // create the movie clip to contain the distorted image var distort:MovieClip = this.createEmptyMovieClip("distort", 0); distort._x = 50; distort._y = 50; // add to it two movie clips that will house both triangles // each of these clips will be skewed in different ways // to "distort" the main movie clip var triangleTL:MovieClip = distort.createEmptyMovieClip("triangleTL", 0); var triangleBR:MovieClip = distort.createEmptyMovieClip("triangleBR", 1); // draw the bitmaps of each triangle triangleTL.beginBitmapFill(bmp); triangleTL.lineTo(bmp.width, 0); triangleTL.lineTo(0, bmp.height); triangleTL.endFill(); triangleBR.beginBitmapFill(bmp, null, true, true); triangleBR.moveTo(bmp.width, 0); triangleBR.lineTo(bmp.width, bmp.height); triangleBR.lineTo(0, bmp.height); triangleBR.endFill(); // array representing the corners of the distorted image var vertices:Array = [     {x:0, y:0},     {x:bmp.width, y:0},     {x:bmp.width, y:bmp.height},     {x:0, y:bmp.height} ]; // draw the interactive nodes in the distorted image movie clip drawNodes(); // this function adds control nodes used to distort the image function drawNodes():Void {     var node:MovieClip;     var n:Number = vertices.length;     for (var i:Number = 0; i<n; i++) {         node = distort.createEmptyMovieClip("node"+i, i+10);         node.point = vertices[i]; // keep a reference to the point this affects         node._x = vertices[i].x;         node._y = vertices[i].y;         // draw square shape         node.lineStyle(1,0);         node.beginFill(0xFFFFFF);         node.moveTo(-4, -4);         node.lineTo(4, -4);         node.lineTo(4, 4);         node.lineTo(-4, 4);         node.lineTo(-4, -4);         node.endFill();         // add interactivity         node.onPress = pressDragCorner;         node.onRelease = releaseDragCorner;         node.onReleaseOutside = releaseDragCorner;     } } // event handler for when starting to drag a node function pressDragCorner():Void {     this.onMouseMove = moveDragCorner; } // event handler for draging a node function moveDragCorner():Void {     this._x = this._parent._xmouse;     this._y = this._parent._ymouse;     // update the locations of the point this     // node affects with this node's position     this.point.x = this._x;     this.point.y = this._y;     // update the distortion     update();     updateAfterEvent(); } // event handler for when stopping a dragging node function releaseDragCorner():Void {     delete this.onMouseMove; } // updates the distorted image based on // the locations of the vertices points function update():Void {     // set top-left matrix     triangleTL.transform.matrix = new Matrix(         (vertices[1].x - vertices[0].x)/bmp.width, (vertices[1].y - vertices[0].y)/bmp.width,         (vertices[3].x - vertices[0].x)/bmp.height, (vertices[3].y - vertices[0].y)/bmp.height,         vertices[0].x, vertices[0].y     );         // x and y for tx and ty of the bottom-right matrix     // since there is no node directly relating to that point,     // it is calculated from vertices[2]'s position     var x:Number = vertices[3].x - (vertices[2].x - vertices[1].x);     var y:Number = vertices[1].y - (vertices[2].y - vertices[3].y);     // set bottom-right matrix     triangleBR.transform.matrix = new Matrix(         (vertices[1].x - x)/bmp.width, (vertices[1].y - y)/bmp.width,         (vertices[3].x - x)/bmp.height, (vertices[3].y - y)/bmp.height,         x, y     ); }

Last edited by senocular; 11-09-2007 at 10:25 PM.
senocular is offline   Reply With Quote