Beginning ActionScript 2.0 2006
.pdf
Chapter 14
quality — A Number from 0 to 15. This property is essentially a multi-pass setting. A higher number means that a more accurate glow will be applied upon the pixels of the object. A lower number means a rougher, less accurate glow with fewer gradient steps. An extremely low number coupled with high blur values can cause visible stepping.
strength — A Number value from 0 to 255. This value essentially determines the contrast of the gradient of the glow. The higher the number, the more the gradient is pushed to the outer edges of the glow. An extremely high strength can cause visible stepping as well as high opacity. The strength property should always be in balance with the quality and blur properties to achieve the desired results.
BevelF ilter
BevelFilter is similar to the bevel effects found in popular image editing programs. The object accepts properties that describe the highlight and shadow colors as well as strength and blur for each, enabling you to create interesting, almost-3D effects.
The properties of the BevelFilter and a description of each follow. These properties can be set within the constructor of the filter or defined as properties after the construction:
angle — A Number value from 0 to 360. This value is not in radians. It is important that 0 degrees on the flash stage is rotated 90 degrees so that 0 degrees is to the right.
blurX and blurY — These Number values (0 to 255) determine the amount that the bevel is blurred across the shape. The value is directly affected by the strength and quality properties.
distance — Determines the position of the bevel and emboss in relation to the object. It takes a Number value that is a number of pixels. The property is directly affected by the angle property.
highlightColor — A hexadecimal number in the 0xRRGGBB format.
highlightAlpha — A Number value from 0.0 to 1.0. This is the transparency value of the highlight.
shadowColor — A Number in the 0xRRGGBB format.
shadowAlpha — A Number value from 0.0 to 1.0. This is the transparency value of the shadow.
knockout — A Boolean that specifies whether the shape that has the bevel filter applied should be made invisible. If true, alpha values of the original object are retained, and the fill areas adopt the pixels visible beneath them on the stage. The property defaults to false.
quality — A Number from 0 to 15. This property is essentially a multi-pass setting. A higher number means that a more accurate bevel will be applied upon the pixels of the object. A
lower number means a rougher, less accurate bevel with fewer gradient steps. An extremely low number coupled with high blur values can cause visible stepping.
strength — A Number value (0 to 255) that essentially determines the contrast of the gradient of the bevel. The higher the number, the more the gradient is pushed to the outer edges of the bevel effect. An extremely high strength can cause visible stepping as well as high opacity. This property should always be in balance with the quality and blur properties to achieve the desired results.
type — A String. The allowable values are “inner”, “outer”, and “full”.
338
Applying Filter Effects
GradientGlowF ilter
The GradientGlowFilter is similar to the GlowFilter object. However, the colors that are used to describe the glow can have bands of color. The properties are almost identical to GlowFilter’s, but GradientGlowFilter requires color to be specified as an array of colors along with a ratios array that determines the ratio of colors through the gradient spread.
The properties of the GradientGlowFilter and a description of each follow. These properties can be set within the constructor of the filter or defined as properties after the construction:
alphas — An array of numbers. Each value is between 0.0 and 1.0.
blurX and blurY — These Number values (0 to 255) determine the amount the glow is blurred. They’re directly affected by the quality and strength properties.
colors — An array of hexadecimal numbers, each in the format 0xRRGGBB.
ratios — An array of numbers with a value of 0 to 255 in each array position. The value represents the amount each color is sampled at 100 percent through the gradient. An array of very high values can cause visual stepping.
inner — A Boolean. If set to true, the glow is overlaid onto the object and fades inward from the outer edges of the shape. The default is false, and the glow appears beneath the object and fades outward from the edges of the shape.
knockout — A Boolean that specifies whether the shape that has the glow filter applied should be made invisible. However, alpha values of the original object are retained, and the fill areas adopt the pixels visible beneath it on the stage.
quality — A Number value from 0 to 15. This property is essentially a multi-pass setting. A higher number means that a more accurate glow will be applied upon the pixels of the object. A lower number means a rougher, less accurate glow with fewer gradient steps. An extremely low number coupled with high blur values can cause visible stepping.
strength — A Number value (0 to 255) that essentially determines the contrast of the gradient of the glow. The higher the number, the more the gradient is pushed to the outer edges of the glow. An extremely high strength can cause visible stepping as well as high opacity. The strength property should always be in balance with the quality and blur properties to achieve the desired results.
GradientBevelF ilter
The GradientBevelFilter is similar to the BevelFilter object, except this object enables you to specify a range of colors to be used to render the bevel highlight and shadows.
The properties of the GradientBevelFilter and their descriptions follow. These properties can be set within the constructor of the filter or defined as properties after the construction:
alphas — An array of Number values, each between 0.0 and 1.0.
angle — A Number from 0 to 360. This value is not in radians. It is important that 0 degrees on the flash stage is rotated 90 degrees so that 0 degrees is to the right.
339
Chapter 14
blurX and blurY — These Number values (0 to 255) determine the amount that the bevel is blurred across the shape. They are directly affected by the strength and quality properties.
colors — An array of colors used to render the filter. All values must be in the hexadecimal format 0xRRGGBB.
distance — Determines the position of the bevel and emboss in relation to the object. Its value is a Number, the number of pixels. The property is directly affected by the angle property.
knockout — A Boolean that specifies whether the shape that has the bevel filter applied should be made invisible. If true, alpha values of the original object are retained, and the fill areas adopt the pixels visible beneath them on the stage. The property defaults to false.
quality — A Number value from 0 to 15. This property is essentially a multi-pass setting. A higher number means that a more accurate bevel will be applied upon the pixels of the object. A lower number means a rougher, less accurate bevel with fewer gradient steps. An extremely low number coupled with high blur values can cause visible stepping.
strength — A Number value (0 to 255) that essentially determines the contrast of the gradient of the bevel. The higher the number, the more the gradient is pushed to the outer edges of the bevel effect. An extremely high strength can cause visible stepping as well as high opacity. The strength property should always be in balance with the quality and blur properties to achieve the desired results.
type — A String. The allowable values are “inner”, “outer”, and “full”.
ConvolutionF ilter
ConvolutionFilter uses a matrix overlay to make modifications to the underlying pixels in a uniform, yet pixel-specific manner throughout the image. For example, this filter sharpens images and blurs images depending upon the matrix defined, and it can do a lot more. Convolution matrices are also very handy for comparing images or parts of images by comparing the different results of passing a convolution matrix over each image’s pixel set.
A matrix is often referred to as a kernel. It is a grid of numbers that overlays the image in sections repetitively until the entire image has been modified by the matrix. A matrix enables you to modify an image without losing the original attributes of the image, and it can be reversed to bring back the original image.
Each pixel in the image is the sum of each arithmetic operation in the matrix. The sum is then divided by some number to control the balance of the output. ActionScript provides the divisor property for this operation. The result is a value good for one pixel.
Value contrasts in different matrix positions give some pixel color values dominance over smaller values, while suppressing others. In this way you can target specific attributes such as high-contrast edges.
Known convolution matrix formulas give known results. When these known matrix arrays are input into the ActionScript ConvolutionFilter’s matrix, the image will sometimes burn or dodge. That is, the sum of the multiplication of the pixels increases the color value to a point that is out of the 0–255 range for all or some of the color’s RGB attributes. This is exactly why there’s a divisor. The divisor property
340
Applying Filter Effects
controls dodge and burn tendency by enabling you to cut down the output of your matrix. You can also set bias and clamping. Knowing this, you can use a convolution matrix for varying burn in effects and animations.
Many convolution matrices are already being published and listed with optimum divisor properties for Flash effects. Look around to see what’s out there before reinventing the wheel.
Here’s an example Gaussian blur matrix 9x9 kernal:
0 |
0 |
1 |
1 |
1 |
1 |
1 |
0 |
0 |
0 |
2 |
3 |
3 |
3 |
3 |
2 |
1 |
0 |
1 |
2 |
3 |
5 |
8 |
5 |
3 |
2 |
1 |
1 |
3 |
5 |
10 |
12 |
10 |
5 |
3 |
1 |
1 |
3 |
8 |
12 |
15 |
12 |
8 |
3 |
1 |
1 |
3 |
5 |
10 |
12 |
10 |
5 |
3 |
1 |
1 |
2 |
3 |
5 |
8 |
5 |
3 |
2 |
1 |
0 |
1 |
2 |
3 |
3 |
3 |
2 |
1 |
0 |
0 |
0 |
1 |
1 |
1 |
1 |
1 |
0 |
0 |
|
|
|
|
|
|
|
|
|
You use this matrix later to try out the ConvolutionMatrix.
The properties of the ConvolutionFilter and a description of each property follows. These properties can be set within the constructor of the filter or defined as properties after the construction:
alpha — This property is a Number. The property expects a value between 0.0 and 1.0. This is the alpha value of the new pixel value obtained from the matrix sum.
bias — This property is a Number. The property expects a value from 0 to 50. This number is added to all new pixel color values obtained from the matrix sum.
clamp — This property is a Boolean. Because a matrix can extend off the edges of the original image, pixel color values must be assumed. If true, the property tells the filter to use the last good pixel value along the edge of the image. If false, the filter uses the color and alpha property to obtain a pixel origin. The property defaults to true.
color — This property is a hexadecimal number. The property expects a value in hexadecimal format. The hexadecimal format is 0xRRGGBB. This property is used exclusively for generating origin pixel values when the matrix overlaps the edge of the source image.
divisor — This property is a Number. This number is used to divide the sum of the matrix arithmetic operations to balance the output color range. This can be especially helpful when using severe matrices and for balancing typical convolution operations such as Gaussian blurs.
matrix — The matrix is an Array. The array is made of lines and columns but they are listed linearly. For example, a 3x3 matrix grid results in a 9-position array. How the array is defined as a grid is determined by the matrixY and matrixX values. Each array value must be a number.
341
Chapter 14
An example 3x3 sharpen matrix might be
var myMatrix:Array.concat( [0, -1, 0]); var myMatrix:Array.concat( [-1, 8, -1]); var myMatrix:Array.concat( [0, -1, 0]);
This concatenation yields the full matrix:
[0,-1,0,-1,8,-1,0,-1,0]
matrixX — This property is a Number. This number defines the number of columns in the matrix.
matrixY — This property is a Number. This number defines the number of columns in the matrix.
preserveAlpha — This property is a Boolean. This property defaults to true. When true, the matrix arithmetic preserves the alpha value in the RGBA color value of the origin pixel. When set to false, the only the RGB is considered, and the pixel becomes opaque.
Try It Out |
Use a Known Gaussian Blur Matrix in the ConvolutionFilter |
This example specifies an image to be used within a movie clip. The results will be most interesting on images, but you can create vector graphics within the IDE or with the drawing methods described earlier.
1.Open a new Flash Document, name it gaussianBlur.fla, and save it in your work folder.
2.Select File Import Import to Stage.
3.Navigate to an image on your drive and select the image you would like to use.
4.When the image is on the stage, select the instance so that it is focused.
5.Select Modify Convert to Symbol.
6.Select Movieclip as the symbol type and give your instance a logical name, such as sampleImage, for the library.
7.With the movie clip selected, change its name in the properties panel to clip1. Use this name to reference your image in the ActionScript.
8.Click the first frame in the timeline, open the Actions panel, and type the following ActionScript function:
import flash.filters.*; clip1.onPress = function() {
var gaussianKernal:Array = [0, 0, 1, 1, 1, 1, 1, 0, 0]; gaussianKernal = gaussianKernal.concat([0, 1, 2, 3, 3, 3, 2, 1, 0]); gaussianKernal = gaussianKernal.concat([1, 2, 3, 5, 8, 5, 3, 2, 1]);
gaussianKernal = gaussianKernal.concat([1, 3, 5, 10, 12, 10, 5, 3, 1]); gaussianKernal = gaussianKernal.concat([1, 3, 8, 12, 15, 12, 8, 3, 1]); gaussianKernal = gaussianKernal.concat([1, 3, 5, 10, 12, 10, 5, 3, 1]); gaussianKernal = gaussianKernal.concat([1, 2, 3, 5, 8, 5, 3, 2, 1]); gaussianKernal = gaussianKernal.concat([0, 1, 2, 3, 3, 3, 2, 1, 0]); gaussianKernal = gaussianKernal.concat([0, 0, 1, 1, 1, 1, 1, 0, 0]); var gaus:ConvolutionFilter = new ConvolutionFilter(9,9);
gaus.divisor =200;
342
Applying Filter Effects
gaus.matrix = gaussianKernal; this.filters = [gaus];
};
9.Test your .swf by selecting Control Test Movie. Click the clip1 movie clip. Your image will become blurred.
How It Works
In this example you create a large 9x9 matrix to perform a high-quality Gaussian blur. Using the Array object, the matrix was constructed easily and logically using the concat Array method. Construct your matrix arrays using this method if for nothing more than mere readability by fellow developers. Also give the matrix kernel a name that makes sense to describe the matrix. In this case a Gaussian blur is fairly clear.
With a value of 15, the center pixel in the matrix is weighted far more than the surrounding pixels. A Gaussian blur also gradually decreases pixel weight concentrically from the center. Because of this the new pixel’s color is most similar to the center pixel but takes into account mixing in the color values of surrounding pixels in a sloped fashion. When applied to each pixel in the entire image, pixels that reside in proximity share attributes obtained by the surrounding pixels. Because neighboring pixels have approximately the same surrounding pixels, these pixels can often become similar, where once they may have had some degree of contrast. When you decrease neighboring pixel contrast in this fashion (not overall image contrast), the effect is a blurred effect. Because Gaussian blur creates relationships, it tends to be a blur that more closely approximates the blur of a camera or frosted glass. The Gaussian blur tends to preserve general shapes better than a simple blur matrix that simply interpolates a pixel’s nearest pixel values without a slope, causing an abrupt smeared look.
The blur doesn’t really require tinting, so the bias property isn’t set. This means that the baseline color is white. If you remove the divisor property and test the movie again you will see that the image turns white. The divisor property divides each pixel color value by the divisor, effectively moving the color range back into the visible. Try giving the divisor value a very low number; you’ll see that the matrix results are close to raw and you will see something closer to white. A higher value will produce lower values until you eventually reach black. Try several divisor values so that you can understand how it’s
affecting the output and that it’s a handy tool for not only creating excellent results, but that you can animate the divisor value to produce interesting burn in tween effects on any ConvolutionMatrix.
Also, the clamp property was not set. It defaults to true. Because clamp was defaulted to true, neither the color nor alpha property would have had any effect and so were left undefined.
The example required the use of the import statement. The entire filter set was imported using the import wildcard. After all filters are known, the import statement can be changed to be streamlined to import only those class definitions used.
ColorMatrixF ilter
The ColorMatrixFilter is somewhat similar in concept to the ConvolutionFilter object. However, the operation is a bit easier to understand, and the matrix is bound by the 4x5 RGBA transformation matrix. The fifth column position in each row is reserved for Altivec accelerator enhancements, which means they will be ignored unless the SWF is being played back on one of these machines.
343
Chapter 14
Each array position in the matrix is required to be a percentage in the format of 0.0 to 1.0. This decimal percentage represents the 0 to 255 range.
The ColorMatrixFilter has only one property, matrix, which can be set within the constructor of the filter or defined as a property after the construction.
The matrix property is an array that’s most easily created using the array concat method. The matrix is a grid of values that are multiplied (or subtracted, if you stipulate negative values) by the original pixel color’s RGBA set.
Here’s an example of a color matrix:
Var myMarix:Array = []; myMatrix.concat([.25, 0, 0, 0]); //Red myMatrix.concat([0, 1, 0, 0, 0]); //Green myMattrix.concat([0, 0, 1, 0, 0]); //Blue myMatrix.concat([0, 0, 0, 1, 0]); //Alpha
Try It Out |
Modify the Colors in a Bitmap |
In this example you remove color completely, creating a grayscale image. Then you use a color matrix to bring back a brownish aspect for a sepia hue. Later in this chapter these matrices are reused in a multiple filter effect.
This example specifies an image to be used within a movie clip. The results will be most interesting on images, but you can create vector graphics within the IDE or with the drawing methods described earlier instead.
1.Open a new Flash Document, name it sepiaTone.fla, and save it in your work folder.
2.Select File Import Import to Stage.
3.Navigate to an image on your drive and select the image you would like to use.
4.When the image is on the stage, select the instance so that it is focused.
5.Select Modify Convert to Symbol.
6.Select Movieclip as the symbol type and give your instance a logical name for the library, such as sampleImage.
7.With the movie clip selected, change its name in the properties panel to clip1. Use this name to reference your image in the ActionScript.
8.Click the first frame in the timeline, open the Actions panel, and type the following ActionScript function:
import flash.filters.*; clip1.onPress = function() {
var greyScaleKernal:Array = [.25, .25, .25, 0, 0]; greyScaleKernal = greyScaleKernal.concat([.25, .25, .25, 0, 0]);
greyScaleKernal = greyScaleKernal.concat([.25, .25, .25, 0, 0]); greyScaleKernal = greyScaleKernal.concat([0, 0, 0, 1, 0]);
var sepiaKernal:Array = [1.25, .25, 0, 0, 0]; sepiaKernal = sepiaKernal.concat([.25, 1, 0, 0, 0]);
344
Applying Filter Effects
sepiaKernal = sepiaKernal.concat([0, 0, 1, 0, 0]); sepiaKernal = sepiaKernal.concat([0, 0, 0, 1, 0]);
var greyScaler:ColorMatrixFilter = new ColorMatrixFilter(greyScaleKernal);
var sepiaToner:ColorMatrixFilter = new ColorMatrixFilter(sepiaKernal); this.filters = [greyScaler,sepiaToner];
};
9.Test your SWF by selecting Control Test Movie. Click the clip1 movie clip. Your image will become sepia toned.
How It Works
In this example you effectively turned down the saturation of all color channels and then brought back some minimal red.
First you reduced the each color channel equally to very minimal colors on all channels per color at 25 percent. This produces an even gray effect. Values higher than 25 percent would have produced black, or dark images, and smaller values would produce a burned image. Because the ColorMatrixFilter has no divisor property, you must be careful when choosing transformation ranges.
The red channel was mixed with just a bit of blue:
var sepiaKernal:Array = [1.25, .25, 0, 0, 0];
This effectively produces a red with just a slightly purple/pinkish tone without becoming fluorescent.
Because red and green are complementary, mixing the two will produce a muddy color. So to get a brownish tint, the green channel is augmented with just a slight bit of red:
sepiaKernal = sepiaKernal.concat([.25, 1, 0, 0, 0]);
Here red is introduced at 125 percent because no red existed in the green channel. This bumps up the green channel but gives it a very pale green. The red and green mix and produce a soft yellowy brown, as should be expected when you consider classic color theory.
When attempting to work with colors, it is important to understand the color wheel and how colors interact. Classic color theory books, such as Johnannes Itten’s books, can help prime you for color mixing theory. Plenty of web resources on color theory are available as well.
This example also showed the use of multiple filters. You learn about this aspect of filters more clearly later in this chapter. However, you can try and change the values present in the array declaration to see what happens.
DisplacementMapF ilter
The DisplacementMap is a clever filter that uses a known bitmap called a map bitmap to distort the x and y values of the original bitmap. A popular implementation for beginners is the waving flag effect, which uses a simple set of mirrored gradients with varying widths to create a wave-like motion on an animation. Be aware that random map bitmaps can produce startling effects.
345
Chapter 14
The properties of the DisplacementMapFilter and a description of each follows. These properties can be set within the constructor of the filter or defined as properties after the construction:
alpha — A Number value of 0.0 to 1.0. The property determines the alpha value of out-of- bounds displacements not covered by the map bitmap.
color — A hexadecimal number in the 0xRRGGBB format. The property determines the color value of out-of-bounds displacements not covered by the map bitmap.
componentX — A Number value of 1, 2, 4, or 8 (1 is red, 2 is green, 4 is blue, and 8 is alpha). The property tells the filter the color that should displace the x results.
componentY — A Number value of 1, 2, 4, or 8. (1 is red, 2 is green, 4 is blue, and 8 is alpha). The property tells the filter the color that should displace the y results.
mapBitmap — A Bitmap object that is used to displace the original image.
mapPoint — A flash.geom.Point object. This is an offset property that slides the mapBitmap into a different position in relation to the original image.
mode — A String. It has four possible values:
wrap — The default. Causes values that are out of bounds to wrap to the other side of the original image.
clamp — Uses the edge of the source image to extrude the values. ignore — Uses the source pixel of the original image.
color — Ignores all data and uses the color and alpha properties.
scaleX and scaleY — Number values. The x and y results of the filter are multiplied by these properties.
Cloning Filters
The clone method is a method of all filters. The clone filter provides an easy method for creating a copy of a filter that can be modified without affecting the original. Anyone who has attempted to copy an array by simply calling something like myNewArray = myArray; knows that any changes made to myNewArray are also reflected in myArray. This is the same for filters.
You could query your filter with a for-in loop and re-create the cloned filter using the variables found. The clone method automates this and is a very handy method to keep in mind when performing multipass filters with slight changes as well as when using filters such as the ConvolutionMatrixFilter to find different results by cross-referencing multiple filter results.
Applying Multiple Filters
Applying multiple filters is simple. You can use multiple instances of the same type filter. You can use any combination of filters on the object. The filters property of the movieClip object expects an array. You can specify a single filter by creating a single index array, or you can place multiple filters in order.
346
Applying Filter Effects
The filters will be applied in the order you list them. Set your filter array as null to clear all of the effects.
You can query the filters array using a for-in loop. This can allow you modify an existing set or find out how many filters have been applied. You can also copy the filters array and apply it to any other movie clip.
Following is an example for-in loop:
for(var i in myMovieClip.filters){ trace(i+” “+myMovieClip.filters[i]);
}
Once applied to a movie clip, the properties of a filter cannot be modified by referencing the filters array directly. For example, the following will fail:
yClip.filters = [myBlur]; myClip.filters[0].blurX = 0; myClip.filters = [myBlur];
You must access the filter directly and reapply the filter to the filters array. This means that if you have multiple filters and you intend to make a change to one filter, you must redefine the filters array. Using array methods such as slice on the filters array have no effect on the filters property.
You can, however, instantiate a new array to easily add filters to a clip, which has already had filters applied to it. For example, the following sample code adds a blur filter to a movie clip. Rather than redefine the filters property, the current state of the filters property is cached into a new array called cachedFilters. If any filters exist, they will now reside temporarily within this array. The new blur is pushed to the array, and then the filters property is redefined, effectively retaining the filter properties of the clip being modified:
var dropShadow:DropShadowFilter = new DropShadowFilter(); dropShadow.blurX = controlX;
dropShadow.blurY = controlY; dropShadow.quality = quality;
var cacheFilters:Array = handle.filters; cacheFilters.push(dropShadow); handle.filters = cacheFilters;
Try It Out |
Set Multiple Filters on an Object |
This example utilizes the ColorMatrixFilter example shown earlier in the chapter. You add a blur filter to an image that has already had two color filters applied to it without losing the color modifications.
The example specifies an image to be used within a movie clip. The results will be most interesting on images, but you can create vector graphics within the IDE, or with the drawing methods described earlier instead.
1.Open a new Flash Document, name it multiFilters.fla, and save it in your work folder.
2.Select File Import Import to Stage.
347