Quick Links

Education Edu

Simulations Sims

Math Tools Math

Games Games

Generative ArtArt

Actinoscript Prog

Farmville Farm

 

 


Alkanes

Gradient Toolkit

Click the above-left picture of the Gradient Toolkit applet to start the application full screen.

 
 

Gradient Toolkit

An Exercise with Components

Ever have one of those days when you decide that, once and for all, you're not going to draw cartoonish pictures like a "designer" but simply write the code that does it instead, but then you can't to work right? No? Uh, Me neither. However, those gradients sometimes can be a chore.

So, while attempting to simulate clouds, I decided to create a circular "cloudlet" -- a white-ish/grey ball with radial gradients and fading alpha. Something so simple that every first week Flash student does it by hand in his sleep. Afterall, I've been using actionscript to draw circles forever. And I've managed to copy and use Adobe's gradient example previously. So how difficult could this really be?

Of course, I'm not talking about the standard simple gradient, but the one that uses that matrix with gradient box and all those funky parameters like spread method, interpolation, focal point ratio, etc. The standard gradient needs to have a color, alpha, and ratio for each of its 2 or more colors. But you also need to dutifully copy those other tricky parameters that Adobe includes in its examples.

Gradients for Dummies

And unlike all the smart people out there who would simple carefully read and understand Adobe's Actionscript 3.0 Language and Reference, I tend to be someone that gets better understanding from twiddling sliders and radio buttons.

Anyway, I created an applet that lets you play with all the inputs to the gradient to see firsthand what they do.

Insights

I learned a little bit from this. For example, RGB rather than LINEAR_RGB for interpolation creates much darker transitions between colors. Sometimes that's definitely what you want. Sometimes it's just the opposite. Snapping between PAD, REFLECT, and REPEAT, especially for radial gradients really makes it obvious what those terms mean. And, if you need to use the focal point ratio and box rotation, I simply can't image someone doing calculations to generate such without doing some few iterations to sucessively approximate the desired effect. But, with this little tool, you can see it in real time. I included three colors in the gradient. If you play with the ratios, e.g., ratio 2 = 255, ratio 3 = 0, you can effectively make it act as if there were only 2 colors.

The best part is that when you achieve your desired gradient, you can just copy the code from the text box and past it into the first frame of your timeline to generate the same gradient. Sweet. If you absolutely must have the code, write me.

Result 1

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

For those who prefer to see it maximized.

Result 2

Gosh! Somebody actually reads my blog. Hi mom! And for the benefit of the person that wanted a more capable gradient tool, here's a new version that includes 4 colors and permits the use of circles instead of just squares. This is for the purpose of making eyes containing whites, 2-color irises, and pupils. And so that the white of the eye can be distinguished from the background, you can also change the background color.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

For those who prefer to see it maximized.

Eyes via Gradients

Here's an example of a forward and left looking eye done with the 4 color gradient tool. The right looking eye could be done both by rotating within the gradient or rotating the symbol itself.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player