Comunidad de diseño web y desarrollo en internet

Uso de la clase Color de Flash

En este tutorial explicaré de manera sencilla, el uso de la clase COLOR que está disponible desde flash player 5. Desde el constructor hasta un pequeño script que nos permita hacer transiciones de un color a otro con un easing sencillo, todo explicado a continuación.

El uso que le puedes dar a este tutorial va desde cambios de color a los fondos dinámicos o cambios de color a cualquier objeto, botón, moviec, etc.

El método setTranform consta de un objeto (que lo creamos con el constructor new Object ) que es el que nos permite dar las “coordenadas” de color que queremos dar, este objeto consta a su vez de las propiedades ra, rb, ga, gb, ba, bb, aa, ab.

Estas propiedades nos darán el valor de desplazamiento para los colores (R) rojo, (G) verde,  (B) azul y la transparencia (A) alfa. Cada propiedad del objeto funciona de esta manera:

  • ra es el porcentaje del componente rojo (de -100 a 100).
  • rb es el desplazamiento del componente rojo (de -255 a 255).
  • ga es el porcentaje del componente verde (de -100 a 100).
  • gb es el desplazamiento del componente verde (de -255 a 255).
  • ba es el porcentaje del componente azul (de -100 a 100).
  • bb es el desplazamiento del componente azul (de -255 a 255).
  • aa es el porcentaje de transparencia alfa (de -100 a 100).
  • ab es el desplazamiento de transparencia alfa (de -255 a 255).

Para este tutorial no nos meteremos con los porcentajes de los componentes (ra, ga, ba y aa), solo jugaremos con los desplazamientos de 0 a 255 así la propiedad nos deje un intervalo (-255 a 255).

Empecemos con algo sencillo, podemos ver simplemente que la clase color funcione y aprendamos (para los más principiantes) a crear el objeto del método setTranform():

Así que primero crearemos una nueva Movie Clip en el escenario, bueno los más avanzados pueden crearlo por AS, yo comenzaré por lo más sencillo, y el nombre que le daremos será “mc1”. Puede ser un cuadro de color negro o la figura que ustedes quieran, pero que el nombre de instancia sea este “mc1” y que sea negro para notar el script.

Luego en nuestro primer frame pondremos este codigo:

//Creamos el constructor para la clase color
mycolor = new Color(this.mc1);
//Creamos el famoso objeto
coltransf = new Object();
//Le damos valores a las propiedades del objeto
coltransf = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:255, aa:aa, ab:255};
//y taraaaaaaaaan, damos la orden que aplique los cambios
mycolor.setTransform(coltransf);

Así exportamos a swf y la película nos debe mostrar un cuadro, circulo, bueno lo que ustedes hayan hecho, de un color azul. Si es así vamos bien. Si sale negro deben mirar si copiaron bien el código o también esta ahí el archivo de nivel 1.

En este momento tenemos claro como funciona la clase Color para darle vía código propiedades de color y alfa a un objeto. Ahora pasaremos a algo un poco más complejo:

Con una función haremos que al pasar el Mouse por encima de un objeto este cambie de color  y al pasar fuera vuelva a otro estado. Digamos un simple rollOver y rollOut.

Para esto tendremos este código en el  primer frame:

//Creamos el objeto que no tiene que ser creado para cada instancia
objeto_color = new Object();
//creamos la funcion que le dara color al objeto
function colorIn(mc) {
//Creamos el constructor para la clase color mycolor = new Color(mc);
//Le damos valores a las propiedades del objeto
objeto_color = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:255, aa:aa, ab:255};
//y aplicamos
mycolor.setTransform(objeto_color);
}
//y creamos la funcion que le dara color cuando se haya pasado fuera
function colorOut(mc) {
//Le damos valores a las propiedades del objeto para que vuelva a ser NEGRO
objeto_color = {ra:ra, rb:0, ga:ga, gb:0, ba:ba, bb:0, aa:aa, ab:255};
//y damos la orden que aplique los cambios de vuelta
mycolor.setTransform(objeto_color);
}

Luego podemos copiar tantos objetos como queramos, teniendo en cuenta de nombrar cada instancia diferente, ejemplo: mc1, mc2, mc3, mc4, etc... y para cada instancia del objeto le asignaremos el siguiente script que llamará las funciones:

on (rollOver) {
_root.colorIn.call(this, this);
} on (rollOut){
_root.colorOut.call(this, this);
}

El resultado es un cambio de color con rollovers para cada instancia de objeto al que le hayamos puesto el script anterior, ustedes pueden probar cambiando los valores de las funciones y viendo el resultado… Creo que hasta acá la dificultad es normal. (ver archivo nivel 2.fla).

Ejemplo: Color Dinamico Nivel 2

Nota: el ejemplo fue ligeramente modificado en ancho y altura, para mostrarlo en el tutorial, en los archivos del tutorial se encuentra el original del autor.

Ahora sí a lo que vinimos, cambios de color dinámicos con “easing”. Lo que haremos es el mismo efecto anterior con un script mejorado un poco más complejo que dará como resultado el manejo del color azul  con easing, sí! solo el color azul, depende de sus comentarios y peticiones para hacerlo con todos los colores y el alfa… Además un poco más de tiempo, ya explicaré al final por qué.

Este es el código para el primer frame:

/*creamos la funcion *color* indicando las propiedades para cada 
instancia, asi creara un nuevo color con la propiedad *mycolor*,
un nuevo objeto con la propiedad *obj* y lo mas importante la
propiedad de color azul que sera *bb*/

function color(mc, mycolor, obj, bb, bf) {
//Creamos el constructor para la clase color
mycolor = new Color (mc);
//creamos el objeto para cada instancia
obj = new Object();
//establecemos el valor incial del azul en 0
bb = 0;
//establecemos la velocidad usada para el easing in y out
vel = 20;
//establecemos el valor final que queremos dar al azul
bf = 255;
/*creamos un controlador de evento que evaluara el valor del color
y le asignara el valor de la velocidad por cada frame hasta que llegue
al valor final del azul que queremos*/

mc.onEnterFrame = function() {
if (bb<bf) {
bb += vel;
obj = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:bb, aa:aa, ab:255};
mycolor.setTransform(obj);
//cortamos el evento cuando se llegue al valor final
} else if (bb == bf) {
delete mc.onEnterFrame;
}
};
//y creamos otro controlador de eventos para cuando se haga el rollout
mc.onRollOut = function() {
mc.onEnterFrame = function() {
if (bb>0) {
bb -= vel;
obj = {ra:ra, rb:50, ga:ga, gb:40, ba:ba, bb:bb, aa:aa, ab:255};
mycolor.setTransform(obj);
} else if (bb == 0) {
delete mc.onEnterFrame;
}
};
};
}

Y para cada instancia a la que queramos darle el efecto solo basta con ponerle este script.

on (rollOver) {
_root.color.call(this, this);
}

Y listo… Espero que les guste y más que todo que les ayude con sus proyectos. Este último script está, obviamente, en el archivo de Nivel 3.fla

Ejemplo: Color Dinamico Nivel 3

Nota: el ejemplo fue ligeramente modificado en ancho y altura, para mostrarlo en el tutorial, en los archivos del tutorial se encuentra el original del autor.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate