Tutorials, extensions, and source files for ActionScript, Flash, and other Adobe products.


ColorTransform's Effects on Gradients

Posted April 28, 2009 by senocular

Here's something fun to try. Create two circles of the same size, next to each other in Flash. Give them both radial gradients from black to white - use the default in the color picker (and if you're clever enough, you ActionScripters out there can play along too).
For the second circle, open the Color panel and with the fill selected, add a new gradient stop in the exact center of the gradient. Do NOT change its color or modify its position at all - you want the color of that stop to be exactly as it would be as if the stop was not there.

Now convert each of the circles into their own movie clip symbols. On the stage, select both symbols together and open up the Property Inspector. Under Color Effect, select a Style of Advanced and give the R+, G+, and B+ (offset) values of 150. Observe.

What you see are the two different circles which previously looked exactly the same, now looking quite different. The circle with the extra stop shows the gradient basically stopping at that stop with the rest filled with a solid white.

This is one of those "flashisms". What Flash Player does with color transforms on gradients is applies the transforms to the gradient stops rather than the resulting gradient ramp. Because of this, as seen in this demonstration, extra stops can cause a complete change in final appearance though they may not have caused any changes previously.

More specifically, with the first circle (2 stops), you have an inital ramp from 0,0,0 to 255,255,255. When the color transform is added, you end up with 150,150,150 to 405,405,405 which clamps to 150,150,150 to 255,255,255 - a smooth transition between those two (sets of) values. With the second circle you initially have 0,0,0 to 128,128,128 to 255,255,255. This is smooth at first, but with the transform it becomes 150,150,150 to 278,278,278 to 405,405,405, or 150,150,150 to 255,255,255 to 255,255,255. You now have two distinct ramps because of the transform applied to the stops and the clamping of color values to their maximum of 255.