Pixelando imágenes en Actionscript 3.0

Etiquetas: Bitmapdata threshold getPixel32 draw

Este post es una modificación de este experimento.

En el anterior recortaba una imagen en cuadrados, comprobando si contenían algún pixel transparente o no. En este divido la imagen en cuadrados, calculo el color que aparece mas veces en ese cuadrado, y creo un Shape relleno de ese color que coloco en las coordenadas del cuadrado.

La función que calcula el color dominante es esta:

 
public static function obtenerColorPrincipal( source:BitmapData):Array
{
	var n:Object = {};
	var a:Array = [];
	var p:int;
	var alphaValue:uint
 
	for (var x:int = 0; x < source.width; x += 10) 
	{
		for (var y:int = 0; y < source.height; y+= 10) 
		{
			p = source.getPixel32(x, y);
			alphaValue = p >> 24 & 0xFF;
			if (alphaValue > 0x00) {
				n[p] ? n[p]++ : n[p] = 1;
			}
		}
	}
 
	for (var c:String in n)
	{
		a.push ( { colour:c, count:n[c] } );
	}
 
	return a.sortOn( ["count"], Array.DESCENDING );
}
 

Efecto lupa en Actionscript 3.0

Etiquetas: BitmapData Bitmap smoothing mask drawCircle

En este ejemplo voy a tratar de explicar como se hace el "Efecto lupa" en Flash, con Actionscript 3.0.

Para simplificar voy a explicar la teoria basándome en una imagen que tengo en un MovieClip el escenario. Por supuesto esto se puede modificar para cargar imágenes externamente o como se necesite.

Los pasos que tenemos que seguir para crear el "efecto lupa" son estos:

-Crear una copia del MovieClip en BitmapData, y ponerla por encima a una escala mayor que el original:

 
//Creo un pantallazo del clip, lo pongo con una escala == zoom
var myBitmapData:BitmapData = new BitmapData(clip.width, clip.height);
myBitmapData.draw(clip);
var bmp:Bitmap = new Bitmap(myBitmapData);
bmp.smoothing = true;
contenedor.addChild(bmp);
contenedor.scaleX =  contenedor.scaleY = zoom;
addChild(contenedor);

-Poner a la copia una máscara circular, de manera que solo se vea el trozo de imágen tapado por la máscara:

 
//Le pongo una mascara del tamaño t al contenedor
mascara.graphics.beginFill(0x000000, 1);
mascara.graphics.drawCircle(0, 0, t);
contenedor.mask = mascara;
addChild(mascara);
 

-Añadimos un evento enterframe. Dentro de la función del evento vamos a mover la máscara siguiendo al ratón, y a recolocar la "copia grande":

 
addEventListener(Event.ENTER_FRAME,renderizar)
 

En la función del evento tenemos que mover la máscara para que siga al ratón, y recolocar la imagen grande para que el trozo que se vé sea el que corresponde a la imagen pequeña. La función es cuestión es esta:

 
private function renderizar(e:Event):void {
    //Calculo el porcentaje que tengo que mover el pantallazo
    var porcentajeX = clip.mouseX / clip.width;
    var porcentajeY = clip.mouseY / clip.height;
    //Recoloco el contenedor
    contenedor.x = -(contenedor.width - clip.width) * porcentajeX
    contenedor.y = -(contenedor.height - clip.height) * porcentajeY
    //Muevo la mascara
    mascara.x = escenario.mouseX;
    mascara.y = escenario.mouseY;
}
 

Adjunto fuentes con todos los materiales, por si queda alguna duda.

Comparar pixels de imágenes en Actionscript 3.0 con threshold

Etiquetas: BitmapData clone threshold

La función threshold permite hacer comparaciones pixel a pixel en una imagen. Por ejemplo, podemos separar todos los pixels mayores de un color de una imagen, y obtener otra imagen con esos pixels. La función threshold tiene 5 parámetros obligatorios (y varios opcionales):

threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint)

-sourceBitmapData: la imagen que vamos a utilizar

-sourceRect: rectángulo que define el area de la imagen de origen que vamos a utilizar

-destPoint: punto de la imagen de destino que corresponde a la esquina superior izquierda del rectángulo

-operation: operación que vamos a utilizar

-threshold: valor con el que comparamos cada pixel

Por ejemplo, si queremos separar los pixels mayores de 0xFFCCCCCC de los menores en una imagen, podemos utilizar:

 
img1.threshold(img1, new Rectangle(0, 0, 350, 242), new Point(0, 0), ">", 0xFFCCCCCC);
img2.threshold(img2, new Rectangle(0, 0, 350, 242), new Point(0, 0), "<=", 0xFFCCCCCC);

El código completo y los fuentes:

Comparando imágenes en Actionscript 3.0 con compare()

Etiquetas: BitmapData draw Bitmap compare

Esta prueba se me ha ocurrido hoy en el metro. Es algo muy sencillo, hacer una captura de un video, y compararla con la anterior para sacar los pixels diferentes y mostrar esta diferencia.

La comparación se puede hacer con la función compare de BitmapData:

 
  var df:BitmapData = BitmapData(bmd.compare(ant));
 

Hay que tener "cuidado" con esta función, ya que no siempre devuelve un objeto BitmapData. Según la ayuda de Flash:

Si los objetos BitmapData son equivalentes (con la misma anchura y altura e idénticos valores de píxeles), el método devolverá el número 0.

Si la anchura de los objetos BitmapData no es la misma pero la altura sí, el método devolverá el número -3.

Si la altura de los objetos BitmapData no es la misma pero la anchura sí, el método devolverá el número -4.

El video que he utilizado para la prueba es D.A.N.C.E., del grupo francés Justice.

Actionscript 2.0: Utilizar imágenes de la biblioteca

Etiquetas: attachBitmap BitmapData loadBitmap

El siguiente método muestra como añadir imágenes de nuestra biblioteca a la escena de la película, usando BitmapData y el método attachBitmap.

Guardar imágenes en AS3 con PNGEncoder y Base64

Etiquetas: PNGEncoder Base64 BitmapData Rectangle encodeByteArray

Para guardar una imagen en AS2 habia que almacenar los colores de todos sus pixels, y mandar una cadena de texto con los valores a un fichero en el servidor para que creara la imagen. Esto era viable para imágenes relativamente pequeñas, ya que tanto Flash como el servidor tardaban mucho en procesar los datos. Con AS3 han surgido varias clases que aprovechan el potencial de la clase ByteArray y optimizan el flujo de datos Flash/servidor. En este ejemplo utilizo las clases PNGEncoder y Base64 para guardar un dibujo hecho en flash y guardarlo en el servidor como PNG. El tamaño de la imagen es de 400x400, y el proceso no dura más de 2 seg.

Este es el código:

Crear reflejos por medio de Actionscript 3.0

Etiquetas: BitmapData Bitmap draw cachaAsBitmap createGradientBox beginGradientFill

Esta función recibe como parámetro un MovieClip y crea su reflejo. Para ello se copia la imagen del mc en un Bitmap y después de le aplica como máscara un degradado. Para modificar el reflejo se puede jugar con los valores de alphas y ratios con los que se crea el degradado.

Actionscript 3.0: utilizar imágenes de la biblioteca

Etiquetas: Bitmap BitmapData

Este ejemplo muestra como añadir al esenario imágenes de la biblioteca con Actionscript 3. Para ello hay que tenerlas vinculadas con un nombre de clase (en este caso material1), que es el que utilizaremos para crear el objeto en el escenario.

Guardar imágenes con BitmapData y PHP

Etiquetas: BitmapData draw getPixel getURL sendAndLoad

La idea es sencilla: Hacer un dibujo en Flash, y guardarlo como jpg ( o guardar el contenido de un clip, o hacer un pantallazo). El proceso es el siguiente:

"Calcar" el objeto que queremos guardar en un objeto BitmapData
Recorrer ese objeto para almacenar el color de cada pixel en un String.
Mandar ese String a un PHP para que nos "pinte" la imagen y la guarde.

El código Actionscript es este: