Graphic Effects Learning Guide for Flash: Filters

Filters add interesting visual effects to text, buttons, and movie clips. You can apply filters to your graphics using the Adobe Flash Professional CS5 workspace or by using ActionScript at runtime.

Filters are most often associated with applying drop shadows, blurs, glows, and bevels to graphic elements. A feature unique to Flash Professional is that you can animate the filters using motion tweens. For example, if you create a ball with a drop shadow, you can simulate the look of the light source moving from one side of the object to another by changing the position of the drop shadow from its beginning and ending frames in the Timeline.

After you apply a filter, you can change its options at any time or rearrange the order of filters to experiment with combined effects. You can enable or disable filters or delete them in the Properties panel. When you remove a filter, the object returns to its previous appearance. You can view the filters applied to an object by selecting it; doing so automatically updates the filters list in the Properties panel for the selected object.

For more information on filter basics, see the About filters section of the Flash Professional online help as well as the filters section of the Flash glossary.

You can apply one or more filters to selected objects using the Properties panel. Each time you add a new filter to an object, it is added to the list of applied filters for that object in the Properties panel. You can apply multiple filters to an object, as well as remove filters that have been previously applied. Applying different filters affects the appearance of a movie clip instance (see Figure 1).

To apply a filter, select a movie clip, button, or text object on the Stage and then click the Add filter button in the lower left corner of the Properties panel (see Figure 2).

The filter you select is applied to the object and the controls for the filter settings appear in the Properties panel.

You can create a filter settings library that allows you to easily apply the same filter or sets of filters to an object. Flash Professional stores the filter presets you create in the Properties panel under the Filters area, seen when a compatible object is selected on the Stage. You can save, delete, assign, or rename presets by clicking the Presets button at the bottom of the Properties panel.

For more information on working with filters, see the Working with filters and Applying filters sections of the Flash Professional online help.

Use the Drop Shadow filter's Hide object option to create a more realistic look by skewing the shadow of an object (see Figure 3). To achieve this effect, you need to create a duplicate movie clip, button, or text object, apply a drop shadow to the duplicate, and use the Free Transform tool to skew the duplicate object's shadow.

To create a skewed drop shadow:

1. Select the movie clip or text object whose shadow you want to skew.
2. Duplicate (select Edit > Duplicate) the source movie clip or text object.
3. Select the object in the background and skew it using the Free Transform tool (Q).
4. Apply the Drop Shadow filter to the duplicated movie clip or text object, and select the Hide object option (see Figure 4). The duplicated object is hidden from view, leaving only the skewed shadow.

5. Adjust the Drop Shadow filter settings and the angle of the skewed drop shadow until you achieve the desired look.

You can animate movie clips that have filters applied to them. In Flash Professional, tweens are attached directly to the objects they are animating. Keyframes along the Timeline show the points at which the characteristics of the animating object have changed—including its position, transformations, and filters. By creating a motion tween and changing the filter properties at different keyframes, you can easily animate filters to create light source effects, highlights, bevels, and distortions. Use the Motion Editor to fine-tune your animations and effects (see Figure 5).

For more information on using the Motion Editor, please see the Editing property curves with the Motion Editor section of the Flash Professional online help as well as the Motion Editor section of the Flash glossary.

If you use ActionScript to apply the filters to an instance, you can also use a displacement map filter or convolution filter, which are not available in Flash Professional. Because filters are applied to the vector definitions, there is no file size overhead related to storing a bitmap image within the SWF file. You can also write ActionScript that modifies an existing filter applied to a text field, movie clip, or button to create dynamic effects.

Let's try applying a basic filter effect using ActionScript code. An easy example to get started with involves applying a bevel filter. In the steps below, we've included a code example.

To apply a bevel filter:

1. Create a new ActionScript 3 FLA file called bevel.fla.
2. Rename Layer 1 to assets.
3. Create a new movie clip that contains a graphic or image, and assign the instance name my_mc.
4. Create a new layer above the assets layer and name it actions.
5. Select Frame 1 of the actions layer and add the following ActionScript:

6. Select Control > Test Movie to test the document.
7. Save the file.

For information on the parameters you can pass to the Bevel filter, see the BevelFilter class in the ActionScript 3 Reference for the Flash Platform.

Applying different types of filters with code works pretty much the same way. However, different filters require different information when you apply the filter. For example, the color matrix filter requires an array.

You access the array of filters applied to an object through standard ActionScript calls using the DisplayObject.filters property. This returns an array that contains each filter object currently associated with the movie clip. By adding more than one filter to an object's filters array, you can apply multiple effects. The effects will be applied in the order they are listed in the array.

It's important to note that setting the filters property duplicates the filters array that you pass into it (demonstrated in the following example) and does not store the filter as a reference. When getting the filters property, it returns a new copy of the array. One negative implication of this approach is that the following code will not work:

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. The following code example adds a Blur filter to the end of an object's existing filter list:

The advantage of this approach is that you can copy the filters from one object, modify them, and apply them to another object without worrying about affecting the original object's filters.

By adding more than one filter to an object's filters array, you can apply multiple effects. The filters will be applied in the order they are listed in the array. This returns an array that contains each filter object currently associated with the movie clip.

Each filter has a set of properties unique to it. The filters can be accessed and modified just like a regular array object, although getting and setting the filters using the filters property returns a duplicate of the filters object instead of a reference.

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. In order to modify the blurX property, you need to use the following ActionScript code instead:

The following example blurs an image based on the current position of the mouse pointer on the Stage. Whenever the mouse cursor moves horizontally or vertically, the blurX and blurY properties of the blur filter are modified accordingly.

To adjust a movie clip's filter properties:

1. Create a new ActionScript 3 FLA file and save it as adjust-filter.fla.
2. Rename Layer 1 to actions.
3. Select Frame 1 of the actions layer and add the following ActionScript to Frame 1 of the Timeline:

This code example is split into three sections. The first section imports the flash.filters.BlurFilter class and other necessary packages so that you don't have to use the fully qualified class name when you refer to each class. The second section loads an image and assigns it to a display object with its initial settings. The third section of code responds to the mouse movement on the Stage and adjusts the blur accordingly.

4. Select Control > Test Movie to test the document. When you move the mouse cursor horizontally along the x-axis, it modifies the blur filter's blurX property. Moving the mouse cursor vertically along the y-axis modifies the blur filter's blurY property. The closer the mouse cursor is to the upper left corner of the Stage, the less blurring will be applied to the movie clip.
5. Save the file.

For more information about working with filters and ActionScript, see the Filtering display objects section of the ActionScript 3 Developer's Guide.

You can use ActionScript, such as the Tween class, to animate filters at runtime. This approach allows you to apply interesting animated effects to your Flash applications.

In the first example, you apply a Glow filter to a movie clip instance. Using an enterFrame event handler, you animate the amount of glow that's applied to the movie clip.

To animate a filter using code:

1. Create a new ActionScript 3 FLA file document and save it as anim-filter.fla.
2. Rename Layer 1 to assets.
3. Draw a graphic on the Stage, select it, and then convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.
4. Select the movie clip instance on the Stage and then use the Properties panel to assign the instance name my_mc.
5. Create a new layer above the assets layer and name it actions.
6. Select Frame 1 of the actions layer and add the following ActionScript:

This code applies a glow filter to your movie clip instance on the Stage and defines an enterFrame event handler, which is responsible for animating the filter effect. The enterFrame event handler animates the glow filter between a blur of 10 and 30 pixels. After the animation is greater than or equal to 30, or less than or equal to 10, the direction of the animation reverses.

7. Save your changes to the file and then select Control > Test Movie to test the SWF file.

Here's an important thing to remember as you apply filters to movie clips in your files: The type, number, and quality of filters you apply to objects can affect the performance of SWF files as you play them. The more filters you apply to an object, the greater the number of calculations Flash Player must process to correctly display the visual effects you've created. For this reason, Adobe recommends that you apply only a limited number of filters to a given object.

The actual impact at runtime is heavily dependent on the screen area that the filters are being applied to and how often the player has to redraw the filter. The player will automatically cache movie clips with filters applied as bitmaps to avoid having to redraw them on each frame. When a movie clip is modified by rotating, resizing, or otherwise changing its appearance, the player redraws the clip and its effects.

Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range on computers, or if you are unsure of the computing power available to your audience, set the quality level to low in order to maximize playback performance.

Tip: When applying a Blur filter with ActionScript, using values for blurX and blurY which are powers of two (such as 2, 4, 8, 16, and 32) can be computed faster and offer the benefit of a 20–30 percent performance improvement.

You can use filters to create a wide range of effects to enhance your project. Check out the Available display filters section of the ActionScript 3 Developer's Guide for more information on the variety of filters available. Also check out the Pixel Bender section of the Graphic Effects Learning Guide to learn more about manipulating bitmaps and filters programmatically.

For more information about animation optimization and to see what's possible with animated filters, check out Grant Skinner's article, Varicose-g: High-performance graphics in Flash.