Creating a BevelFilter

It is remarkably simple to add a bevel filter to any DisplayObject using the filters property. You can also apply a bevel filter to a BitmapData object by calling the applyFilter() function.

The two classes that you can use are: BevelFilter or GradientBevelFilter. In the example below I use the BevelFilter because it is slightly more simple. Almost all the properties are the same, except that the GradientBevelFilter class lets you choose more than 2 colors, as well as the ratios and alpha values. Here is a GradientBevelFilter example.

Here is an example that lets you set all the BevelFilter properties and see how it affects the image on to which the filter is applied.


Most of the properties are quite self explanatory. The quality property can be set using constants defined in the BitmapFilterQuality class (high = 3, medium = 2, and low = 1). But the documentation also says that the allowed quality values are from 0 - 15, but you decrease the performance by setting the quality value higher than 3.
There are also constants for the bevel type using the BitmapFilterType class.

Adobe LiveDocs:

• DisplayObject
• BitmapData
• BevelFilter
• GradientBevelFilter
• BitmapFilterType
• BitmapFilterQuality

I'm also using the BindingUtils class to bind the bevel filter properties to the inputs (so that when the inputs change, the filter properties change too).