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
|