Here's the third installment of my mini-series on Flex graphics tricks. These do not only apply to Flex, they apply to Flash as well. My particular focus here is using graphics filters within a Flex application.

Graphics filters allow you to perform bitmap-level effects on any DisplayObject... thus any object that can be displayed in Flex. Filters enable everything from blurs, glows, and dropshadows all the way to color processing, sharpening, and edge detection. This sounds very daunting, however they are really pretty easy to get started with.

In this post, I am going to cover the basics... Blur, DropShadow, Glow, Bevel, and ColorTransform. Perhaps in another post I'll dig into DisplacementFilters and ConvolutionFilters for more advanced techniques.

All of these examples begin with the same gear image that we've used in the previous two examples:

Filters can be applied using either ActionScript or MXML. These examples show how to apply the filters using ActionScript.

First, let's take a look at a simple Blur filter. This filter is about as easy as it gets. You can specify the amount that the object should be blurred in both the x and y directions, and also the quality. The quality of a filter determines the number of iterations of processing the filter effect. A higher quality thus requires more iterations, and is more cpu intensive, however it achieves a better result. You do not need to specify all attributes on a filter, there are default values. All of my examples show how to set all of the parameters for the filter.

var filter : BlurFilter = new BlurFilter();
filter.blurX = blurX.value;
filter.blurY = blurY.value;
filter.quality = quality.value;
image.filters = [ filter ]

Another simple, yet much loved and much used filter is the DropShadowFilter. Using this class, you can add a drop shadow to anything... Yes anything. You can add a shadow to anything on the display list. Its quick, easy, and works great:

var filter : DropShadowFilter = new DropShadowFilter();
filter.blurX = blurX.value;
filter.blurY = blurY.value;
filter.quality = quality.value;
filter.alpha = _alpha.value;
filter.angle = angle.value;
filter.color = color.selectedColor;
filter.distance = distance.value;
filter.inner = inner.selected;
image.filters = [ filter ];

Here are a few more examples; Glow and Bevel. I won't bore you with the code for these, b/c it is almost the same as what is shown above. You can see that it is quite simple. You just need to create a filter instance, and set the object.filters array to that filter instance.

>

You can also alter or enhance the colors of your images (or any other display object) using a ColorMatrixFilter. In this case, you are basically creating a matrix that is used to process the pixels of the image. You can use this technique to add or remove color, enhance contrast, or take away all color. This is a very powerful image manipulation technique.

var filter : ColorMatrixFilter = new ColorMatrixFilter();
var matrix:Array = new Array();
matrix = matrix.concat([r.value, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, g.value, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, b.value, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, _alpha.value, 0]); // alpha
filter.matrix = matrix;
image.filters = [ filter ];

Filters get a whole lot more interesting when you start applying multiple filters at a time. Filters are applied to an object as an array. I don't believe there is a limit to the number of filters you can apply to an object. However, keep in mind that the more filters you have, the more cpu required to render your components.

Here's an example how to quickly add 3 filters to an image:

var b : BlurFilter = new BlurFilter();

var d : DropShadowFilter = new DropShadowFilter( 15 );

var g : GlowFilter = new GlowFilter( 0xFF0000, 1, 5, 5, 2, 1, true );

image.filters = [ b, d, g ]

... and here is the output:

You can check out all of the previously described examples in a live example at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/filters.html

You can view the full source code at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/srcview/

You can download the full source code at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/filters/srcview/filters.zip

As I mentioned before, I am not covering DisplacementFilters in this post, but here are a few examples of what can be done using DisplacementFilters.

Bending The Rules:
Using displacement filters to create interactive MDI-Windowing effects.
http://www.cynergysystems.com/blogs/page/andrewtrice?entry=bending_the_rules

WebCam Displacement:

You can see a full write up on that one at:
http://www.cynergysystems.com/blogs/page/andrewtrice?entry=displacementmapfilter_webcam_tons_o_fun

For more detailed information on filters, one of the best places to start would be the Adobe Flex language reference.

Read more from Andrew Trice.