User Guide Cancel

Graphic filters

Last updated on 12 February 2022

About filters

Filter overview

Filters (graphic effects) let you add enriching visual effects to text, buttons, and movie clips. A feature unique to Animate is that you can animate the filters you apply using motion tweens.

Animate blend modes let you create composite images. Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. Blending modes also add a dimension of control to the opacity of objects and images. You can use Animate blending modes to create highlights or shadows that let details from an underlying image show through, or to colorize a desaturated image.

About animated filters

You can animate filters in the Timeline. Objects on separate keyframes joined by a tween have the parameters for corresponding filters tweened on intermediate frames. If a filter does not have a matching filter (a filter of the same type) at the opposite end of the tween, a matching filter is added automatically to ensure that the effect occurs at the end of the animation sequence.

To prevent motion tweens from functioning incorrectly if a filter is missing at one end of the tween, or if filters are applied in a different order at each end, Animate does the following:

If you apply a motion tween to a movie clip with filters applied to it, when you insert a keyframe at the opposite end of the tween, the movie clip automatically has the same filters, with the same stacking order, on the last frame of the tween as it did at the beginning of the tween.
If you place movie clips on two different frames with different filters applied to each, and you apply a motion tween between the frames, Animate first processes the movie clip with the most filters. Animate then compares the filters applied to the first movie clip against the filters that the second movie clip uses. If no matching filters are found in the second movie clip, Animate generates a dummy filter with no parameters and the color of the existing filters.
If a motion tween exists between two keyframes and you add a filter to the object in one keyframe, Animate automatically adds a dummy filter to the movie clip when it reaches the keyframe at the other end of the tween.
If a motion tween exists between two keyframes and you remove a filter from an object in one keyframe, Animate automatically removes the matching filter from the movie clip when it reaches the keyframe at the other end of the tween.
If you set filter parameters inconsistently between the beginning and end of a motion tween, Animate applies the filter settings of the starting frame to the interpolated frames. Inconsistent settings occur when the following parameters are set differently between the beginning and end of the tween: knockout, inner shadow, inner glow, and type of gradient glow and gradient bevel.

For example, if you create a motion tween using the drop shadow filter, and apply a drop shadow with a knockout on the first frame of the tween, and an inner shadow on the last frame of the tween, Animate corrects the inconsistent use of the filter in the motion tween. In this case, Animate applies the filter settings used on the first frame of the tween—a drop shadow with a knockout.

About filters and Flash Player performance

The type, number, and quality of the 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 Adobe® Flash® Player must process to correctly display the visual effects you’ve created. Adobe® recommends that you apply a limited number of filters to a given object.

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 of computers, or are unsure of the computing power available to your audience, set the quality level to Low to maximize playback performance.

About Pixel Bender filters

Adobe Pixel Bender™ is a programming language developed by Adobe that allows users to create custom filters, effects, and blend modes for use in Animate and After Effects. Pixel Bender is hardware independent and designed to run efficiently on a variety of GPU and CPU architectures automatically.

Pixel Bender developers create filters by writing Pixel Bender code and saving the code in a text file with the file extension pbj. Once written, a Pixel Bender filter can be used by any Animate document. Use ActionScript® 3.0 to load the filter and use its controls.

For more information about working with Pixel Bender in ActionScript, see ActionScript 3.0 Developer's Guide.

The following video tutorials demonstrate the use of Pixel Bender filters in Animate:

Working with filters

Enhanced in Animate

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 were previously applied. You can apply filters only to text, button, movie clip, components, and compiled clips objects.

You can create a filter settings library that lets you easily apply the same filter or sets of filters to an object. Animate stores the filter presets you create in the Filters section of the Property inspector in the Filters > Presets menu.

With Flash Professional CS6 and earlier versions, applying filters was restricted to movie clip and button symbols only. With Animate, you can now additionally apply Filters to Compiled Clips and Movie Clip components. This allows you to add various effects to components directly, at the click of a button (or two), making your applications look that much better. With Flash CS6, to add filters or other effects to components, one had to “wrap” it inside a movie clip symbol. That is:

Create or add a component on stage.
Right click on the component, and select Convert to Symbol.

With CS6 (and earlier versions), you could add filters or various other kinds of effects after wrapping the component inside a symbol. However, this was only a workaround, and not a suggested best practice. With Animate, you could add various filters to components by directly using the Filters, Color Effects, and Display Settings options available on the Properties Panel. To understand this key enhancement better, consider the following example: Adding Bevel filter to a Button component

Create or add a Button on stage from the Components Panel, and select the Button subsequently.
On the Properties Panel, click the button drop-down list in the Filters section and select Bevel filter. Properties and Values for the Bevel filter are displayed.
Modify or set appropriate values for any desired Property. For example, Blur X, Blur Y, Strength, Shadow, etc. You will notice the effects reflecting on the selected button simultaneously.

se_filtermenu — The Add Filter menu in the Property inspector

Apply or remove a filter

Select a text, button, or movie clip object to apply a filter to or remove a filter from.
In the Filters section of the Property panel, do one of the following:
- To add a filter, click the button, and select a filter. Experiment with the settings until you get the desired look.
- To remove a filter, select the filter to remove in the list of applied filters, and click the Remove Filter button . You can delete or rename any presets.

Copy and paste a filter

Select the object to copy a filter from, and select the Filters panel.
Select the filter to copy, and click the button. In the drop-down click Copy Selected Filter. To copy all filters, choose Copy All Filters.
Select the object to apply the filter to, and click the button. In the drop-down, click Paste Filters.

Apply a preset filter to an object

Select the object to apply a filter preset to, and select the Filter tab.
Click the button to open the drop-down.
Select the filter preset to apply from the list of available presets at the bottom of the drop-down list.

When you apply a filter preset to an object, Animate replaces any filters currently applied to the selected objects with the filters used in the preset.

Enable or disable a filter applied to an object

By default all Filters stay enabled. Click the icon next to the filter name to disable the Filter in the Filter list. Click the X button next to the filter name to enable a Filter.

To toggle the enable state of the other filters in the list, Alt‑click (Windows) or Option-click (Macintosh) the enable icon in the Filter list. If you Alt‑click the icon, the selected filter is enabled, and all others filters in the list are disabled.

Enable or disable all filters applied to an object

Click the button, and select Enable All or Disable All from the drop-down.

To enable or disable all of the filters in the list, Control-click the enable or disable icon in the Filter list.

Create preset filter libraries

Save filter settings as preset libraries that you can easily apply to movie clip and text objects. Share your filter presets with other users by providing them with the filter configuration file. The filter configuration file is an XML file that is saved in the Animate Configuration folder in the following location:

Windows 7 and 8: C:\Users\username\AppData\Local\Adobe\Flash CC\language\Configuration
(Flash Professional CS6 or earlier versions only) Windows XP: C:\Documents and Settings\username\Local Settings\Application Data\Adobe\Flash CS6\language\Configuration\Filters\filtername.xml
(Flash Professional CS6 or earlier versions only) Windows Vista: C:\Users\username\Local Settings\Application Data\Adobe\Flash CS6\language\Configuration\Filters\filtername.xml
Macintosh: Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CC/language/Configuration/Filters/filtername.xml

Create a library of filters with preset settings

Apply the filter or filters to any selected object.
Click the button to add a new filter.
Select the filter and click the button, and choose Save As Preset.
Enter a name for the filter settings in the Save Preset As dialog box, and click OK.

Rename a filter preset

Click the button, and add a new filter.
Select the filter and click the button. Click Edit Presets.
Double-click the preset name to modify.
Enter a new preset name, and click OK.

Delete a filter preset

Click the button, and add a new filter.
Select the filter and click the button.
Click Edit Presets.
On the Edit Presets dialog, select the preset to remove, and click Delete.

Applying filters

Apply a drop shadow

The Drop Shadow filter simulates the look of an object casting a shadow onto a surface.

se_textDropShadow — Text with the Drop Shadow filter applied

For a sample of a drop shadow with a classic tween, see the Animate Samples page at www.adobe.com/go/learn_fl_samples. Download and decompress the Samples zip file and navigate to the Graphics\AnimatedDropShadow directory.

Select the object to apply a drop shadow to.
In the Filters section of the Property inspector, click the button, and select Drop Shadow.
Edit the filter settings:
- To set the width and height of the drop shadow, set the Blur X and Y values.
- To set the darkness of the shadow, set the Strength value. The higher the numerical value, the darker the shadow.
- Select the quality level for the drop shadow. High is approximate to that of a Gaussian blur. Low maximizes playback performance.
- To set the angle of the shadow, enter a value.
- To set the distance of the shadow from the object, set the Distance value.
- Select Knockout to knock out (or visually hide) the source object and display only the drop shadow on the knockout image.
- To apply the shadow within the boundaries of the object, select Inner shadow.
- To hide the object and display only its shadow, select Hide Object. Hide Object lets you more easily create a realistic shadow.
- To open the Color Picker and set the shadow color, click the Color control.

Create a skewed drop shadow

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

Select the object with the shadow you want to skew.
Duplicate (select Edit > Duplicate) the source object.
Select the duplicated object, and skew it using the Free Transform tool (Modify > Transform > Rotate And Skew).
Apply the Drop Shadow filter to the duplicated movie clip or text object. (It will already be applied if the object you duplicated already had a drop shadow.)
In the Filters panel, select Hide Object to hide the duplicated object while leaving its shadow visible.
Select Modify > Arrange > Send Backward to place the duplicated object and its shadow behind the original object that you duplicated.
Adjust both the Drop Shadow filter settings and the angle of the skewed drop shadow until you achieve the desired look.

Apply a blur

The Blur filter softens the edges and details of objects. Applying a blur to an object can make it appear as if it is behind other objects, or make an object appear to be in motion.

se_textBlur — Text with the Blur filter applied

Select an object to apply a blur to, and select Filters.
Click the button, and select Blur.
Edit the filter settings on the Filter tab:
- To set the width and height of the blur, set the Blur X and Y values.
- Select the quality level for the blur. High is approximate to that of a Gaussian blur. Low maximizes playback performance.

Apply a glow

The Glow filter lets you apply a color around the edges of an object.

se_textGlowFilter — Text with the Glow filter applied

Select an object to apply a glow to, and select Filters.
Click the button, and select Glow.
Edit the filter settings in the Filter tab:
- To set the width and height of the glow, set the Blur X and Y values.
- To open the Color Picker and set the glow color, click the Color control.
- To set the sharpness of the glow, set the Strength value.
- To knock out (or visually hide) the source object and display only the glow on the knockout image, select Knockout.
Using the Glow filter with the Knockout option
- To apply the glow within the boundaries of the object, select Inner Glow.
- Select the quality level for the glow. High is approximate to that of a Gaussian blur. Low maximizes playback performance.

Apply a bevel

Applying a bevel applies a highlight to the object that makes it appear to be curved up above the background surface.

se_textBevelFilter — Text with a bevel applied

Select an object to apply a bevel to, and select Filters.
Click the button, and select Bevel.
Edit the filter settings in the Filter tab:
- To set the type of bevel, select a bevel from the Type menu.
- To set the width and height of the bevel, set the Blur X and Y values.
- Select a shadow and highlight color for the bevel from the pop‑up color palette.
- To set the opacity of the bevel without affecting its width, set the Strength value.
- To change the angle of the shadow that the beveled edge casts, set the Angle value.
- To define the width of the bevel, enter a value for Distance.
- To knock out (or visually hide) the source object and display only the bevel on the knockout image, select Knockout.

Apply a gradient glow

Applying a gradient glow produces a glow look with a gradient color across the surface of the glow. The gradient glow requires one color at the beginning of the gradient with an Alpha value of 0. You cannot move the position of this color, but you can change the color.

se_textGradGlowFilter — Text with a gradient glow applied

Select an object to apply a gradient glow to.
In the Filters section of the Property inspector, click the button, and select Gradient Glow.
Edit the filter settings on the Filter tab:
- Select the type of glow to apply to the object from the Type pop‑up menu.
- To set the width and height of the glow, set the Blur X and Y values.
- To set the opacity of the glow without affecting its width, set the Strength value.
- To change the angle of the shadow that the glow casts, set the Angle value.
- To set the distance of the shadow from the object, set the Distance value.
- To knock out (or visually hide) the source object and display only the gradient glow on the knockout image, select Knockout.
- Specify a gradient color for the glow. A gradient contains two or more colors that fade or blend into one another. The color you select for the beginning of the gradient is referred to as the alpha color.
- To change a color in the gradient, select one of the color pointers below the gradient definition bar and click the color space that appears directly below the gradient bar to display the Color Picker. Sliding these pointers adjusts the level and position of that color in the gradient.
- To add a pointer to the gradient, click on or below the gradient definition bar. To create a gradient with up to 15 color transitions, add up to 15 color pointers. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. To remove a pointer, drag it down and off the gradient definition bar.
- Select the quality level for the gradient glow. High is approximate to that of a Gaussian blur. Low maximizes playback performance.

Apply a gradient bevel

Applying a gradient bevel produces a raised look that makes an object appear to be raised above the background, with a gradient color across the surface of the bevel. The gradient bevel requires one color in the middle of the gradient with an alpha value of 0.

Select an object to apply a gradient bevel to.
In the Filters section of the Property inspector, click the button, and select Gradient Bevel.
Edit the filter settings on the Filter tab:
- Select the type of bevel to apply to the object from the Type pop‑up menu.
- To set the width and height of the bevel, set the Blur X and Y values.
- To affect the smoothness of the bevel without affecting its width, enter a value for Strength.
- To set the angle of the light source, enter a value for Angle.
- To knock out (or visually hide) the source object and display only the gradient bevel on the knockout image, select Knockout.
- Specify a gradient color for the bevel. A gradient contains two or more colors that fade or blend into one another. The middle pointer controls the alpha color of the gradient. You can change the color of the alpha pointer, but you cannot reposition this color in the gradient.
  To change a color in the gradient, select one of the color pointers below the gradient definition bar, and click the color space that appears directly below the gradient bar to display the Color Picker. To adjust the level and position of that color in the gradient, slide these pointers.
  To add a pointer to the gradient, click on or below the gradient definition bar. To create a gradient with up to 15 color transitions, add up to 15 color pointers. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. To remove a pointer, drag it down and off the gradient definition bar.

Apply the Adjust Color filter

The Adjust Color filter allows you to finely control the color attributes of the selected object, including contrast, brightness, saturation, and hue.

Select an object to adjust the color for.
In the Filters section of the Property inspector, click the button, and select Adjust Color.
Enter values for the color attributes. The attributes and their corresponding values are as follows:

Contrast

Adjusts the highlights, shadows, and midtones of an image.

Brightness

Adjusts the brightness of an image.

Saturation

Adjusts the intensity of a color.

Hue

Adjusts the shade of a color.
To reset all of the color adjustments to 0 and return the object to its original state, click Reset Filter.

Get help faster and easier

New user?