ActionScript 3: Cortar imagenes con BitmapData + copyPixels

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.Supongamos que queremos hacer un rompecabezas. Para ello queremos levantar una imagen y que ActionScript la desglose en piezas donde, cada pieza tiene un pedacito de imagen.



ActionScript no nos dejará cortar directamente una imagen, pero podemos usar algunas artimañas para realizarlo.

Para nuestro ejemplo usaremos ésta imagen del PezOjo! de 400px x 400px* que tenemos en la biblioteca del .fla. (porían usarse también imagenes externas o que estén en el escenario.
Esta imagen debe estar vínculada con el nombre de clase "imagen".

En un archivo externo .as generé la clase para poder cortar esta imagen de la biblioteca y el código (con explicaciones y todo) es el siguiente:

//creo el package importando todo lo que necesito: eventos, display y geom
package{
import flash.display.*;
import flash.events.*;
import flash.geom.*;

public class Cortar extends Sprite{
public function Cortar(){
//Creo el movieClip que mostraré al finalizar el script.
var mc:MovieClip = new MovieClip();
//Creo un bitmapData que contenga la imagen de la biblioteca
var cargaImagen:BitmapData = new imagen(0,0);
//Creo un bitmapData que va a contener la imagen recortada y defino su tamaño.
var img:BitmapData =new BitmapData(200,200);
//Creo un rectangulo que tomará el recorte de la imagen. (x de inicio, y de inicio, width, height). En este caso crearemos un cuadrado de 200x 200, que empezará desde la posición x100 y100 del bitmapdata.
var rectangulo:Rectangle = new Rectangle(200, 200, 400, 400);
//Este "Point" será el punto(x,y) dentro de IMG (si cambio la posición 0,0, el recorte se verá desplazado)
var punto:Point = new Point(0,0);
//Ahora producimos la magia del copyPixels: inserto en img el recorte de cargaImagen.
img.copyPixels(cargaImagen, rectangulo,punto);
//Creo un Objeto bitmap donde pondremos nuestro bitmapData final (sino no puedo meterlo en el escritorio)
var imgB:Bitmap = new Bitmap(img);
//Finalmente meto el Bitmap dentro de un movieclip y lo posiciono en el centro.
mc.addChild(imgB);
//Una vez añadido el Bitmap dentro del movieclip para que el punto de registro quede en el medio.
imgB.x=-(imgB.width/2); imgB.y=-(imgB.height/2);
//pongo el movieClip en el escenario
addChild(mc); mc.x=200; mc.y=200;
}
}
}

El resultado de este código (que, quitando los comentarios verás que es bastante breve) será esta imagen de 200px x 200px que tenemos aquí a la derecha*.

Fuera de esto solo queda jugar con la imaginación para que, a traves de algunos "for" armemos todas las fichas que necesitamos para el rompecabezas. o simplemente armar thumbnails recortados de imagenes. Creo que las utilidades de esto son varias.

Te dejo un link para descargar el archivo fuente de este post. Espero que te sirva.

DESCARGAR EL FLA

*Nota: Las imagenes fueron reducidas al 50% en éste post para con el fin de poder mostrarlas (en este post, la original tiene 200x200 y el recorte 100x100).

*Nota 2: Como siempre. Si te sirvió este post hacemelo saber, dejandome un comentario. También estaría bien que pases por los enlaces patrocinados donde seguramente encontrarás más cosas interesantes.