¿Quieres registrarte?

Pasar una imagen bitmap a blanco y negro con ActionScript 3

Por: penHolder
25 de Febrero del 2009
2905 de clabLevel
Otros artículos de penHolder
2,835 visitas

En actionscript 3 existe una clase llamada ColorMatrixFilter, que como el nombre lo dice es un filtro, por lo tanto debemos importarla desde flash.filters.ColorMatrixFilter. Esta clase permite aplicar una transformación a los valores de color y alfa de cada pixel de una imagen. la clase, como otros filtros puede aplicarse a cualquier objeto que herede de DisplayObject. Los filtros de esta clase crean a partir de una matriz de 4x5 que contenga los valores para cada canal RGB.

Supongamos que tenemos una imagen en la librería y queremos que al pasar el mouse por encima ésta se torne a balnco y negro. vamos a necesitar un par de variables para los valores de los canales RGB, un arreglo que contendra todos los valores tanto de RGB como de Alpha, y es el que recibira como argumento la clase ColorMatrixFilter; finalmente una instancia de la clase propiamente dicha:

Código :

import flash.filters.ColorMatrixFilter;
//
var imagen :Imagen;
var blackAndWhiteFilter :ColorMatrixFilter;
var redValue :Number;
var greenValue :Number;
var blueValue :Number;
var values :Array;
//
function attachImage():void
{
imagen = new Imagen();
imagen.addEventListener(MouseEvent.ROLL_OVER, convert);
addChild(imagen);
}


en la funcion convert() declararemos los valores...

Código :

function convert (e:MouseEvent):void
{
redValue = greenValue = blueValue = 0.5;
//
values = new Array();
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // red
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // green
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // blue
values = values.concat([ 0, 0, 0, 1, 0]); // alpha

//...
}

como esta clase es un filtro se aplica por medio de la propiedad filters de DisplayObject:

Código :

blackAndWhiteFilter = new ColorMatrixFilter(values);
imagen.filters = [blackAndWhiteFilter];




Es importante tener en cuenta que de los canales el mas importante es el rojo, seguido por el verde y el azul. En el ejemplo hemos usado el mismo valor para loe tres canales de mode que la variacion sera plana siendo 0 para el negro total y 1 para el blanco total; una vez que hayemos el rango general debemos cambiar lo valores para lograr mayores contrastes

Código :

redValue = 0.555;
greenValue = 0.355;
blueValue = 0.285;




El codigo completo quedaria...

Código :

import flash.filters.ColorMatrixFilter;
//
var imagen :Imagen;
var blackAndWhiteFilter :ColorMatrixFilter;
var redValue :Number;
var greenValue :Number;
var blueValue :Number;
var values :Array;
//
function attachImage ():void
{
imagen = new Imagen();
imagen.addEventListener (MouseEvent.ROLL_OVER, convert);
addChild (imagen);
}
//
function convert (e:MouseEvent):void
{

redValue = 0.555;
greenValue = 0.355;
blueValue = 0.285;
//
values = new Array();
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // red
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // green
values = values.concat([redValue, greenValue, blueValue, 0, 0]); // blue
values = values.concat([ 0, 0, 0, 1, 0]); // alpha
//
blackAndWhiteFilter = new ColorMatrixFilter(values);
imagen.filters = [blackAndWhiteFilter];
}
//
attachImage ();

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas actionscript_3 color

Comentarios | Enviar un comentario
Buen Tip, aunque estaría bien que el ultimo ejemplo pudiera volver a cambiarse a color al sacar el mouse del área activa.
Por: M@U
Buen Tip PenHolder (y)
Por: Zguillez
Buen Tip, aunque estaría bien que el ultimo ejemplo pudiera volver a cambiarse a color al sacar el mouse del área activa
Por: calinrock
Así me gusta un "tip" en el que explica cómo y qué es la Matriz ColorMatrixFilter, ¡así da gusto! con explicación de qué son los distintos colores y valores de la matriz, qué significa el "offset" y los canales R, G, B y Alpha. Me he quedado estupefacto (casi tan a gusto como después de esta pequeña crítica)
Por: Eliseo-blog
:o buen tip, no lo sabía
Por: [Ray]
Muy interesante el tip.
Por: Dano

calinrock-blog :

Buen Tip, aunque estaría bien que el ultimo ejemplo pudiera volver a cambiarse a color al sacar el mouse del área activa

El ataque de mis clones!

:wtf:
Por: M@U
Buen tip mi estimado, sobre mi comentario parece que hay dudas de como regresar al color normal, pues, le quitan el filtro:

Código :

//agregamos evento mouse OUT
imagen.addEventListener (MouseEvent.MOUSE_OUT, desconvert);
//y la funcion asi:
function desconvert(e:MouseEvent):void{
   imagen.filters = [];
   }

Por: jcruz
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.