Previous Page
Next Page

Recipe 10.6. Applying Advanced Filter Effects (Emboss, etc.)

Problem

You want to apply an advanced filter effect, such as embossing, edge detection, etc.

Solution

Use a ConvolutionFilter object.

Discussion

The flash.filters.ConvolutionFilter class allows you to apply many effects ranging from brightness and contrast changes to more dramatic effects such as embossing, blurring, edge detection, and sharpening.

The convolution filters require an array of values that define a matrix to apply, so you can map each pixel to a new bitmap surface by combining adjacent pixel values. (The actual linear mathematics used are beyond the scope of this book.) The ConvolutionFilter class simplifies the application of such effects so you don't need to know matrix multiplication or how to apply the pixel mapping. Instead, all you need to know are the basics of the effects of the array of matrix values.

The ConvolutionFilter constructor defines all default values for parameters. However, once an effect is applied, you'll need to define nondefault values for at least the first three parameters. The first two parameters define the dimensions of the matrix, and the third parameter is an array of the matrix values.

The first parameter defines the number of columns, and the second parameter defines the number of rows. The following is an example matrix with four columns and two rows:

1  2  3  4
5  6  7  8

Although you can define matrices with nearly any dimension, all the effects discussed in this book require square matrices (matrices with equal numbers of rows and columns).

The values for the third parameter (the array of matrix values) are specified from left to right and from top to bottom. For example, the preceding matrix example could be described with the following array:

[1, 2, 3, 4, 5, 6, 7, 8]

A square matrix with a 1 in the center surrounded by zeros has a neutral effect. The following code example applies such a matrix to a display object; the matrix would cause no noticeable effect:

sampleSprite.filteres = [ConvolutionFilter(3, 3, [0, 0, 0, 0, 1, 0, 0, 0, 0])];

When the sum of matrix values is 1, as with this example, there is no effect on brightness. Higher sums cause an increase in brightness, and lower sums produce less brightness. The following example increases the brightness of the display object without any additional effects:

sampleSprite.filteres = [ConvolutionFilter(3, 3, [0, 0, 0, 0, 2, 0, 0, 0, 0])];

The following example applies a blur to a display object. However, since the sum of the matrix values is greater than 1, it makes the object brighter. In this case, the brightness effect is so great that it makes it difficult to even distinguish the blur effect:

sampleSprite.filters = [new ConvolutionFilter(3, 3, [1, 1, 1, 1, 1, 1, 1, 1, 1])];

You can correct unintentional brightness issues by applying a divisor. The divisor does not affect the intended effect (such as a blur or sharpen effect) while correcting unintended brightness. To reset to the default brightness for the object, use a divisor that is equal to the sum of the matrix values. Specify the divisor as the fourth parameter. The following example applies the same blur as in the preceding example, but it uses a divisor to reset the brightness:

sampleSprite.filters = [new ConvolutionFilter(3, 3, [1, 1, 1, 1, 1, 1, 1, 1, 1], 9)];

For all the effects discussed in this chapter, the effect increases as the center value decreases and decreases as the center value moves increases. For example, the preceding blur effect is lessened if the center value is 2. Note: you'd also have to change the divisor to keep the same brightness.

A more detailed discussion of convolution filters is beyond the scope of this book. If you want to learn more about convolution filter theory and devise your own matrices for directional effects, you can read the technical details at http://www.cee.hw.ac.uk/hipr/html/convolve.html.

Also, all examples in this chapter are nondirectional. For example, the blur in the preceding example is nondirectional, which means it does not appear as a motion or radial blur.


See Also

Recipes 10.7, 10.8, and 10.9


Previous Page
Next Page
Converted from CHM to HTML with chm2web Pro 2.85 (unicode)