tween de color.

he visto ultimamente en varios sites, cambios de colores con suavizados, si bien es fácil de hacer, es un efecto que se ve bien.

el truco consiste en asignar valores r, g, b iniciales y finales, hacer el cálculo y luego convertilo a hexadecimal, luego de esto, cambiar el color al clip.

aquí un código de ejemplo, utilizando la clase tween de fmx2004, para una vida más simple y feliz

copiar, pegar y probar =)
[code]
//clase tween fmx2004
import mx.effects.Tween;
//funcion que cambia de RGB a hexadecimal.
function rgb2hex (r:Number,g:Number,b:Number):Number{
return r << 16 | g << 8 | b;
}
/*
dibuja un rectangulo
recibe un clip, x, y, alto y ancho
*/
function drawRect(c:MovieClip, x:Number, y:Number, ancho:Number, alto:Number):Void{
with(c){
moveTo(x,y);
lineTo(ancho,y1);
lineTo(ancho,alto);
lineTo(x,alto);
lineTo(x,y);
}
}
//callbak para el tween
onTweenUpdate = function(val : Array) : Void
{
//asignamos el nuevo color.
myCol.setRGB(rgb2hex(val[0],val[1],val[2]));
}
//callban para el tween end.
onTweenEnd = function (val : Array) : Void
{
//asignamos el nuevo color.
myCol.setRGB(rgb2hex(val[0],val[1],val[2]));
//los colores actuales serán los iniciales de la proxima vez.
clip.R = val[0];
clip.G = val[1];
clip.B = val[2];
//el señor está desocupado ahora.
clip.busy = false;
}
//funcion invocada por los botones.
setColor = function (i:Number):Void{
if(!clip.busy){
//sacamos los respectis rgb en base al indicie y el array colores.
var R = colores[i].R;
var G = colores[i].G;
var B = colores[i].B;
//no mas press por el momento.
clip.busy = true;
//tween.
myTween = new Tween(this, [clip.R,clip.G,clip.B], [R,G,B], 500);
}
}
//crea los botones, recibe un indice.
function createBtn(n:Number):Void{
var c = this.createEmptyMovieClip("btn"+n,getNextHighestDepth());
//acomoda en y
c._y = 102;
//acomoda en c.
c._x = 0 +( n*20 );
//este lo usamos luego, para asignar el color en el tween.
c.index = n;
//lo pintamos usando el array colores y el indice en que vamos.
c.beginFill(rgb2hex(colores[n].R,colores[n].G,colores[n].B),100);
//dibujamos el rect del boton.
drawRect(c,0,0,18,18);
c.endFill();
//funcion a ejecutar al ser presionado.
c.onPress = function (){
//aqui le pasará el index a la funcion en root.
//el que usará para setear el nuevo color.
this._parent.setColor(this.index);
};
}
//este es el clip que cambiará de color.
this.createEmptyMovieClip("clip",getNextHighestDepth())
//lo pintamos de negro
clip.beginFill(0,100);
//le dibujamos un cuadro
drawRect(clip,0,0,98,98);
//teminamos de pintar.
clip.endFill();
//colores Iniciales, para el clip principal.
clip.R = 0;
clip.G = 0;
clip.B = 0;
//objeto de color con target en nuestro clip.
myCol = new Color(clip)
//flag de ocupado en false, para deshabilitar botones.
clip.busy = false;
//colores
colores = [{R:255,G:204,B:51},{R:0,G:102,B:153},{R:0,G:153,B:0},{R:153,G:0,B:51},{R:102,G:102,B:102}];
//crea los botones en base al largo de array colores.
for ( var n = 0; n < colores.length; n ++){
createBtn (n)
}
stop();
[/code]

7 Comments

Jesús said:

Muy bien pensado y explicado, y con esos comments mucho más.
Felicidades Kada.
pd: Se extrañaban esos tutoriales tuyos. :)

Nico said:

Excelente la explicación como siempre.

Saludos,

raul said:

very nice =)

dago135 said:

un 100 como siempre kada!! thanx

Muy ilustrativo el ejemplo, gracias!. :)

Mono said:

Buena explicacion!
No es más fácil usando setTransform()? Ahi te ahorras la conversión a HEX. Solo trabajas con RGB y los valores Alpha para cada color.

new Color(MC).setTransform({ra:-100, rb:255, ba:-100, bb:255, ga:-100, gb:255, aa:100, ab:0});

NibblesMX said:

yo hice algo parecido, pero con setTransform como dice mono.

www.danov.com/~evilnibble/color.html