Accessibility
Flash logo

Adobe

 

Created:
26 May 2009
User Level:
Intermediate
Products:
Flash

Graphic Effects Learning Guide for Flash: Filters

Filters add interesting visual effects to text, buttons, and movie clips. Filters are most often associated with applying drop shadows, blurs, glows, and bevels to graphic elements. A feature unique to Adobe 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 Property inspector. 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 Property inspector for the selected object.

This section describes the process of adding a filter to a movie clip instance and creating a simple drop shadow effect.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

Prerequisite knowledge

This article assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

Applying filters

You can apply one or more filters to selected objects using the Property inspector. Each time you add a new filter to an object, it is added to the list of applied filters for that object in the Property inspector. 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).

Examples of filter effects

Figure 1. Various examples of filter effects applied to movie clip instances

(+) View larger

To apply a filter:
  1. Select a movie clip, button, or text object on the Stage to which you want to apply a filter. You can apply filters only to text, button, and movie clip objects.
  2. Select the Filter tab in the Property inspector.
  3. Click the Add filter (+) button in the lower left of the Property inspector and select a filter from the Filters pop-up menu (see Figure 2). The filter you select is applied to the object and the controls for the filter settings appear in the Property inspector.

    Add Filter menu in the Property inspector

    Figure 2. Adding a filter to the Filter tab in the Property inspector

  4. Notice that the filter's adjustable parameters fill the filter list area. Experiment with the filter settings until you get the look you want.

To remove a filter:
  1. Select the movie clip, button, or text object that you want to remove a filter from.
  2. Select the filter you want to remove in the list of applied filters.
  3. Click the Delete filter (trash can icon) to remove the filter.

You can create a filter settings library that allows you to easily apply the same filter or sets of filters to an object. Flash CS4 stores the filter presets you create in the Property inspector 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 Property inspector.

To enable or disable a filter applied to an object:
  1. Select the object on the Stage containing the filter.
  2. Select the filter in the filter list which you want to enable or disable.
  3. Click the Enable or disable filter button (eyeball icon) at the bottom of the filter list.

Note: Alt-click the eyeball icon to toggle the enable state of the other filters in the list To the opposite state of the selected filter.

To enable or disable all filters applied to an object:
  1. Select the object on the Stage containing the filter.
  2. Click the Add filter button (page icon) in the Property inspector and then select Enable All or Disable All from the pop-up menu.

At this point, you may want to try applying a basic filter effect yourself. An easy example to start with is applying a drop shadow, so try it out by using the following steps.

Creating a skewed drop shadow

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.

Skewing the Drop Shadow filter to create a more realistic-looking shadow

Figure 3. Skewing the Drop Shadow filter to create a more realistic 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 object option (see Figure 4). The duplicated object is hidden from view, leaving only the skewed shadow.

    The Hide object option of the Drop Shadow filter can be useful for creating realistic shadow effects.

    Figure 4. The Hide object option of the Drop Shadow filter can be useful for creating realistic shadow effects.

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

Where to go from here

For more information on working with filters during authoring, see the About filters section of the Using Flash CS4 Professional online documentation.

About the author

This content was authored by Adobe Systems, Inc.