Tutorial FLASH - Tutorial para cambiar el color de un clip en Flash, usando ActionScript.

Versión Flash: MX 2004 y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Medio   |   Hits: 89916

Podemos teñir un clip del color que queramos exactamente igual que con las propiedades de color avanzadas, pero utilizando ActionScript, con el método Color.setTransform.

COMO HACERLO.
Para utilizar este método vamos a usar los mismos parámetros que en las propiedades de color avanzadas, así que si queremos saber los valores que vamos a necesitar para obtener un determinado color, solo tenemos que conseguir ese color directamente en el panel y apuntar los valores. En todo caso es muy útil para hacernos una idea del funcionamiento de este método.

En este ejemplo, haremos que la foto vaya adoptando las propiedades de color de los pequeños clips que hay a su lado. Haz click sobre ellos para iniciar el cambio.

 

 

Asignar un color a un clip mediante este método es cuestión de cuatro líneas:

myColor = new Color(clip);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
myColor.setTransform(myColorTransform);

Sólo hay que sustituir los valores de ra, rb, ga, gb, ba, bb, aa y ab por los que queramos. Los valores introducidos en este ejemplo son los que tiene un clip por defecto (100% de porcentaje y 0 de desplazamiento en todos los colores y en el alpha).

Por si lo queréis también, este es el código del ejemplo. Todo el código está en el primer fotograma:

//Creamos el Array con los valores iniciales de las propiedades de color de la foto
//es decir los que tiene cualquier clip cuando no lo hemos modificado.
//llamémosles "valores actuales".
valores=new Array(100,0,100,0,100,0,100,0);
//Esta función es la que hará que cambie el color
function cambiarColor(ra,rb,ga,gb,ba,bb,aa,ab){
//cambio es un Array donde se definen los nuevos valores que queremos dar al clip.
//llamemosles "valores de destino".
cambio=new Array(ra,rb,ga,gb,ba,bb,aa,ab);
//creamos el objeto Color y el objeto myColorTransform
foto.myColor = new Color(foto);
foto.myColorTransform = new Object();
//borramos el enterFrame del clip, por si hubiera alguno reproduciéndose a la mitad,
//y creamos uno nuevo
delete foto.onEnterFrame;
foto.onEnterFrame = function() {
//se insertan los valores actuales y se aplica el método al objeto Color.
this.myColorTransform = {ra:valores[0], rb:valores[1], ga:valores[2], gb:valores[3], ba:valores[4], bb:valores[5], aa:valores[6], ab:valores[7]};
this.myColor.setTransform(this.myColorTransform);
//aquí hacemos un bucle, que repasa todos los valores y los compara con los valores
//de destino. Si valor actual es menor que el de destino, le suma uno, y si
//es al contrario, le resta uno.
for (var contador=0;contador<8;contador++){
if (valores[contador]<cambio[contador]){
valores[contador]++;
}else if (valores[contador]>cambio[contador]){
valores[contador]--;
}
}
//si los valores actuales son iguales que los de destino, para el enterFrame.
if (valores.toString()==cambio.toString()){
delete this.onEnterFrame;
}
//este bucle escribe los valores actuales en las cajas de texto para que los veáis.
for (var contador=0;contador<8;contador++){
_root["valor"+contador]=valores[contador];
}
};
}
//Aquí asignamos las acciones a los botones. Se trata simplemente de llamar a la función
//con diferentes valores de destino.
verde_btn.onRelease=function(){
cambiarColor(88,-143,100,86,32,61,100,0);
}
amarillo_btn.onRelease=function(){
cambiarColor(0,239,-60,229,96,-11,100,0);
}
negativo_btn.onRelease=function(){
cambiarColor(-100,255,-100,255,-100,255,100,0);
}
azul_btn.onRelease=function(){
cambiarColor(43,-31,43,76,43,198,100,0);
}

Y este es el .fla, para verlo mejor: color_setTransform.fla

 

Tutoriales Flash relacionados

Efecto de sobreexposición de imágenes en Flash.