Distorsionar Imagenes usando Flash 7

Hola, tengo una clase para distorcionar imagenes hecha por Andre Michelle que carga un simbolo de la biblioteca para luego transformarlo, pero necesito que pueda cargar cualquier Movieclip. La idea es crear un codigo 100% actionscript que pueda cargar imagenes externas para usarlo en una galeria. Si alguien me puede ayudar seria genial.

Ejemplo-------------------->

Código :

this.createEmptyMovieClip("clip", 1);
this.clip.createEmptyMovieClip("image", 1);
this.clip.image.loadMovie("http://www.tuservidor.com/imagenes/imagen01.jpg");
Pimagen = this.clip.image;
var plane:DistortImage = new DistortImage(clip, Pimagen, 2, 3);
clip.plane = plane;
clip.plane.setTransform(-20,100,100,100,80,0,0,0)

esta es la clase:

Código :

/********************************************** 
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) [url]http://www.andre-michelle.com[/url] 
    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 }; 
      } 
} 

Modo de uso de la clase sin modificacion:

Código :

this.createEmptyMovieClip("clip", 1);
var plane:DistortImage = new DistortImage(clip, "image", 2, 3);
clip.plane = plane;
clip.plane.setTransform(-20,100,100,100,80,0,0,0)

Gracias de antemano,

Tomas

gracias por postear 100 lineas de código ¿estas concursando por algún premio al post mas largo ?

en fin después de leer hasta la 5º linea de tu post (no leo mas que eso)

las imágenes que se cargan con loadMovie en mi experiencia me cuesta luego modificaras, redimensionarlas etc...

mejor cárgala con loadClip es un poco mas complicado pero creo que así te debería funcionar

Hola

LO q tenes q hacer es asignar el efecto una vez cargada la imagen. Para cargar la imagen usa MovieClipLoader y en el evento onLoadInit, asignas el efecto.

En este post de hace un rato explico como hacerlo http://www.cristalab.com/foros/viewtopic.php?t=37015&highlight=

saludos!

PD: algun ejemplo de ese efecto hay??

Hola, si hay un ejemplo, lo puedes descargar en la pagina de Andre Michelle:

http://recycle.andre-michelle.com/zips.unsorted/image.freetransform.zip

gracias por tu respuesta!

Hola , trate de hacer los cambios pero no me da resultado, primero cambie la clase para que reciba symbolId como un movieclip y no como un string, despues logre capturar las dimensiones, pero aun no logro que se cargue la imagen. Como la cargo?

Gracias,

Tomas

primero que nada necesitas que flash sepa donde tienes las clases para eso vas a
configuración de publicación (click) luego en la pestaña flash/ versión de ActionScript pulsas configuración y añades una nueva ruta
luego en tu fla solo importas la ruta (import)

Código :

this.createEmptyMovieClip("contenedor");
var listener:Object = new Object();
var mclContenedor:MovieClipLoader = new MovieClipLoader();
listener.onLoadComplete = function(target_mc:MovieClip) {
   trace("imagen cargada");//DESDE ACÁ empiezas ha hacer las acciones que quieras 
};
mclContenedor.addListener(listener);
mclContenedor.loadClip("galeria.swf", contenedor);

Gracias

Gracias, aunque todavia no me funciona, pero seguire intentando.

Ya me funciono, pero tuve que poner manualmente el ancho y alto ya que no funcionaba con el mloader, me entregaba un valor de 0 como ancho, gracias de todos modos.

Hola, me interesó mucho la publicación, ando trabajando con algo similar... Pero lo que yo quiero hacer es que flash cache una imagen que un usuario haya cargado al servidor... Qué esa imagen se cargue después en mi movieClip para poder distorcionar la imagen... Se podrá!! Gracias.. Saludos y buen día