Image Distortion

[ds.pixeled]

ok basically here's my problem: i have a cube that rotates, and i need the image to rotate on the side of it. i don't know how to do it with scripting, so i was just going to distort it in flash to match it. it's only 15 frames, not exactly a lot. so i have no problem with it. the problem is i can't distort an image file in flash, or at least not a .bmp file. does anyone have a solution? i have swift 3d and i know i can import them as textures and apply them that way, but that's still a mit time consuming and i can loose a lot of image quality off of that and there's no way to really have the size be exact. so does anyone know how i can fix this so it works? i only have a few days to do this so if you guys could get back to me quickly that'd be great!

quick note: if any of you aren't sure what i mean and are mac users, you know the interface for the OS X installation how it flips over like a rotation cube? bingo.

[Xeef]

/**********************************************
DistortImage class
Availability
Flash Player 6.

Description
Tesselate a movieclip into several triangles
to allow free transform distorsion.

Method summary for the DistortImage class
getBounds - returns the original bounding box
setTransform - distort image by the passsed
rect coordinates.

###############################################
thanks to peter joel for his transformation
math code and thomas wagner for the basic idea.

(C) http://www.andre-michelle.com
free to use !
**********************************************/


class DistortImage
{
private var parent: MovieClip;
private var symbolId: String;

private var width: Number;
private var height: Number;

private var xMin: Number, xMax: Number, yMin: Number, yMax: Number;

private var hseg: Number;
private var vseg: Number;

private var hsLen: Number;
private var vsLen: Number;

private var points: Array;
private var triAngles: Array;

function DistortImage( parent: MovieClip, symbolId: String, vseg: Number, hseg: Number )
{
this.parent = parent;
this.symbolId = symbolId;
this.vseg = vseg;
this.hseg = hseg;

if ( arguments.length > 4 )
{
width = arguments[ 4 ];
height = arguments[ 5 ];
}
else
{
getImageSize();
}

init();
}

private function getImageSize()
{
var getDimension: MovieClip = parent.attachMovie( symbolId , "getDimension" , 0 );
width = int( getDimension._width );
height = int( getDimension._height );
getDimension.removeMovieClip();
}

private function init(): Void
{
points = new Array();
triAngles = new Array();

var ix: Number;
var iy: Number;

var w2: Number = width / 2;
var h2: Number = height / 2;

hsLen = width / ( vseg + 1 );
vsLen = height / ( hseg + 1 );

var x: Number, y: Number;

for ( ix = 0 ; ix < vseg + 2 ; ix++ )
{
for ( iy = 0 ; iy < hseg + 2 ; iy++ )
{
x = ix * hsLen;
y = iy * vsLen;
points.push( { x: x, y: y, sx: x, sy: y } );
}
}

for ( ix = 0 ; ix < vseg + 1 ; ix++ )
{
for ( iy = 0 ; iy < hseg + 1 ; iy++ )
{
createTriAngle( ix, iy, 1, [ points[ iy + ix * ( hseg + 2 ) ] , points[ iy + ix * ( hseg + 2 ) + 1 ] , points[ iy + ( ix + 1 ) * ( hseg + 2 ) ] ] );
createTriAngle( ix, iy,-1, [ points[ iy + ( ix + 1 ) * ( hseg + 2 ) + 1 ] , points[ iy + ( ix + 1 ) * ( hseg + 2 ) ] , points[ iy + ix * ( hseg + 2 ) + 1 ] ] );
}
}

xMin = yMin = 0;
xMax = width;
yMax = height;

render();
}

private function createTriAngle( x: Number, y: Number, align: Number, vertices: Array ): Void
{
var n: Number;
var triAngle: MovieClip;

n = triAngles.length;

triAngle = parent.createEmptyMovieClip( 't_' + n , n );

var inner: MovieClip = triAngle.inner = triAngle.createEmptyMovieClip( 'inner' , 0 );
var mask: MovieClip = inner.createEmptyMovieClip( "mask" , 0 );
var image = inner.attachMovie( symbolId , "img_" , 1 );

inner._rotation = -45;

mask.beginFill( 0 );
mask.moveTo( -1 , -1 );
mask.lineTo( 101 , -1 );
mask.lineTo( -1 , 101 );
mask.lineTo( -1 , -1 );
mask.endFill();

triAngle.setMask( mask );

image._xscale = 10000 / hsLen;
image._yscale = 10000 / vsLen;

if ( align == 1 )
{
image._x = -x * 100;
image._y = -y * 100;
}
else
{
image._rotation = -180;
image._x = ( x + 1 ) * 100;
image._y = ( y + 1 ) * 100;
}

triAngle.vertices = vertices;
triAngles.push( triAngle );
}

function setTransform( x0 , y0 , x1 , y1 , x2 , y2 , x3 , y3 ): Void
{
var w = width;
var h = height;
var w2_0 = x1-x0;
var w2_1 = x2-x3;
var h2_0 = y1-y0;
var h2_1 = y2-y3;

for ( var p in points )
{
var point = points[p];

var gx = ( point.x - xMin ) / w;
var gy = ( point.y - yMin ) / h;
var bx = x0 + gy * ( x3 - x0 );
var by = y0 + gy * ( y3 - y0 );

point.sx = bx + gx * ( ( x1 + gy * ( x2 - x1 ) ) - bx );
point.sy = by + gx * ( ( y1 + gy * ( y2 - y1 ) ) - by );
}

render();
}

private function render(): Void
{
var t: Number;
var tmc: MovieClip;
var inner: MovieClip;
var vertices: Array;
var p0, p1, p2;

var atan2: Function = Math.atan2;
var sqrt: Function = Math.sqrt;
var cos: Function = Math.cos;
var tan: Function = Math.tan;

var arm,p0x,p0y,dx10,dy10,dx20,dy20,ap1,ap2,da12;

for ( t in triAngles )
{
tmc = triAngles[t];

inner = tmc.inner;
vertices = tmc.vertices;

p0 = vertices[0];
p1 = vertices[1];
p2 = vertices[2];

tmc._rotation = (180/Math.PI)*(-(da12=((ap1=atan2(dy10=p1.sy-(p0y=tmc._y=p0.sy),dx10=p1.sx-(p0x=tmc._x=p0.sx)))-(ap2=atan2(dy20=p2.sy-p0y,dx20=p2.sx-p0x)))/2)+ap1);
tmc._yscale = 100 * tan( da12 );
inner._xscale = sqrt(dx20*dx20+dy20*dy20)/(arm=100/(Math.SQRT1_2 * 2)/cos(da12))*100.5;
inner._yscale = sqrt(dx10*dx10+dy10*dy10)/arm*100.5;

}
}

function getBounds(): Object
{
return { xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax };
}
}

[bitterclarence]

Thanks a lot for pasting that code, very useful.

Does anyone happen to know whether there is a version of an image distortion class in existance that is designed to allow transformation of dynamically loaded jpgs? (the class above expects a library item with a link id).

[ds.pixeled]

in the end i just got swift 3d and did it through that. it exports as a .swf file then you can just load that externally.

[tox0tes]

Can someone please explain to me how to use this class file.

I have created DistortImage.as in the same directory as my file DistortImage.fla, I have a movieclip in library called "blue" that is linked to AS 2.0 as "DistortImage" and for export as "blue".

Then, in frame 1 of DistortImage.fla, I have actionscript:

import DistortImage;
attachMovie("blue", "blue", this.getNextHighestDepth());

When I export the .fla, all I see is the movieclip "blue" on the stage but it does not distort as I wanted it to. I attached the .fla if you need it.