Tag Archives: noise

Perfect gradients in Flash

As most of you Flash developers most likely have experienced, Flash (and Photoshop for that matter) doesn’t create perfectly smoothed gradients!
The common trick is to apply a little noise in Photoshop (or similar) and save as an image.
The exact same idea was behind this “PerfectGradient” class. I simply wanted to be able to create gradient backgrounds with less banding and without loading a jpg/png.
Obviously this is not alway the best solution – sometimes you don’t want noise in the image and sometimes there is no banding problems with your colors – but for some cases, especially large background gradients, this could be very useful.

This class only supports rectangle gradients with two colors – either in linear or radial gradient style , but feel free to extend it. The syntax is easy, below is an example:
private var _linearBrightA:PerfectGradient = new PerfectGradient(500, 1000, 0xBBBBBB, 0xCCCCCC, Math.PI * .5, "linear", true, false, "lighten");
The parameters in the constructor are: width, height, color 1, color 2, gradient rotation, gradient style, use noise, use blur, blendmode for the noise and blur overlay.

Take a look here to see some different examples (click to switch between different examples). Every example has 3 PerfectGradients – one with only noise, one with both noise and blur, and one withoout any (clean gradient).

The banding issues are hard to see on small screen resolutions.

Download the example and class here

Distortion Engine version 1

distort
Some time ago I developed some distortion classes in order to achieve an rgb split effect and some random perlin noise. I found out that a small “engine” for those purposes would sometimes be very useful (at least to me), so today I finally had time to wrap it up.

To call it an engine is maybe a bit overstated, actually it’s just a quick way to set up different types of distortion and change the amount of distortion applied.