Ted On Flash: Dynamic Gradients via AS

Dynamic Gradients via AS

DIGG IT! 4 Comments Published Wednesday, February 16, 2005 at 10:34 AM .

There is a great trick for coloring gradients using Color.setTransform. I am working on a set of Container components for FLOW 2 and needed to color gradients dynamically for panels, dialogs, and windows.&

This is probably old school for some but the transform object lets you color objects with much more precision than setRGB.

1. Create a gradient ranging from Black to White.

2. Make the gradient a MovieClip and give it an instance name "myGradient"

3. Add the following AS to the timeline:

// create a color targeting myGradient
myGradientColor = new Color( myGradient )

// use setTransform to make the gradient slightly red
myGradientColor.setTransform( {ra:100, ga:70 , ba:70 } )

Here is a working SWF version with some controls for editing the gradient.

Cheers,

Ted Patrick

4 Responses to “ Dynamic Gradients via AS ”

# Ted Patrick February 16, 2005 10:57 AM

Looking at colors this way is very interesting. I keep finding great gradients when the bars are each 15 apart. In almost every case the colors are very warm and balanced.

Cheers,

ted ;)
# eokyere February 16, 2005 1:15 PM

Aaa .. didn't know that; beautiful! this shd come in handy along the line for something i'm currently working on. thx for sharing :)

cheers,
-- eokyere
# caseyc February 16, 2005 1:32 PM

I use a similar technique, I like to have a little more control so I make a b/w gradient (or any other grayscale artwork) and use the following to colorize it with 2 colors (one for black, one for white, everything in between is a mix of the two):

function getRGBPct(hex)
{
var clrobj = {};
clrobj.r = hex >> 16;
var temp = hex ^ clrobj.r << 16;
clrobj.g = temp >> 8;
clrobj.b = temp ^ clrobj.g << 8;

for(var i in clrobj)
{
clrobj[i] /= 255;
clrobj[i] *= 100;
}
return clrobj;
}

function colorize(mc,light,dark)
{
var clr = new Color(mc);
transobj = {};

c1 = getRGBPct(light);
c2 = getRGBPct(dark);

transobj.ra = c1.r - c2.r;
transobj.ga = c1.g - c2.g;
transobj.ba = c1.b - c2.b;

transobj.rb = 255 * (c2.r / 100);
transobj.gb = 255 * (c2.g / 100);
transobj.bb = 255 * (c2.b / 100);

clr.setTransform(transobj);
}
# Carlos Rovira February 17, 2005 3:01 AM

Great and useful tips! thanks for sharing, I'm using it in this moment and you can get beautiful gradients : )