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.

Las 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 );
}

Bug en la función updateBitmap() de MovieMaterial en Papervision3D 2.0 GreatWhite

Etiquetas: updateBitmap() drawBipmap()

Esta semana me he vuelto a topar con este bug de la clase MovieMaterial en Papervision 2.0 GreatWhite.

Si utilizamos un MovieClip como material, utilizando MovieMaterial, y este vá a cambiar en algún momento, pero no queremos utilizar el atribute animated para conservar recursos, podemos llamar a la funcion updateBitmap() para actualizar el material solo cuando sea necesario. El problema es que en esta versión de Papervision, la función updateBitmap() definida en MaterialObject3D, está vacía (literalmente).

Para solucionar este inconveniente, podemos llamar a la función drawBitmap de la clase MovieMaterial. Por ejemplo:

`MovieMaterial(plano.material).drawBitmap()`

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.

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.

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

-Imagen de cristal sin vaho:

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes:

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.

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.

Y el código (el Actionscript, el PHP lo saqué de Google) es este: