520 Animation, Filters, and Drawings
The different properties of the gradient bevel filter control the way the filter is applied. The
colors of the gradient bevel are set in the colors array. The actual distribution of colors in each
portion of the rectangle is determined by the ratios array. The distance property determines
the offset distance, or how many pixels away from the object the bevel edge is applied. The
blurX and blurY properties control the sharpness of the colors in the bevel; higher values
effectively make the bevel wider and softer, while lower values make the bevel thinner and
sharper. The angle property is the theoretical light source falling on the object, thus causing a
highlight and shadow effect on the object’s edges. The
strength property controls the spread
of the colors: a lower strength value mutes the colors, as in the example; a higher strength
value makes the outer numbers in the array stronger, forcing the middle colors in the array to
be less prominent. Finally,
knockout and type properties determine how and where the bevel
filter is applied to the whole object: whether the filter knocks out the object and where it
is placed.
One of the more complicated concepts to apply in the gradient bevel filter is the color
distribution. To understand how the colors in a gradient bevel are distributed, think first of
the colors you want in your gradient bevel. Because a simple bevel has the understood
concepts of highlight color and shadow color, you can apply the same concepts to understand
the gradient bevel filter: you have a highlight gradient and a shadow gradient. The highlight
appears on the top left corner, and the shadow appears on the bottom right corner. There are
four colors in the highlight and four in the shadow. However, you have to add another color
(the base fill color), which appears where the edges of the highlight and shadow meet. There
are nine colors for the colors array, which you can see in the previous diagram.
The number of colors in the colors array determine the number of elements in the alphas and
ratios array. The first item in the colors array corresponds to the first item in the alphas array
and in the ratios array, and so on. Because you have nine colors, you also have nine values in
the alphas array and nine in the ratios array. The alpha values set the alpha transparency value
of the colors.
The ratio values in the ratios array can range from 0 to 255 pixels. The middle value is 128;
128 is the base fill value. For most usages, to get the bevel effect you want, you should assign
the ratio values as follows, using the example of nine colors:
■ The first four colors range from 0 through 127, increasing in value so each value is greater
than or equal to the previous one. This is the first bevel edge, say, our highlight.
■ The fifth color (the middle color) is the base fill, set to 128. The pixel value of 128 sets the
base fill, which appears either outside the shape (and around the bevel edges) if type is set
to outer; or inside the shape, effectively covering the object’s own fill, if the type is set
to inner.
To Next Page
Loading...