User Guide Cancel

Graphic filters

Search
Animate

Animate

Open app
  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

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:

  1. Create or add a component on stage.
  2. 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  
  1. Create or add a Button on stage from the Components Panel, and select the Button subsequently.
  2. 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.
  3. 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.
The Add Filter menu in the Property inspector

Apply or remove a filter

  1. Select a text, button, or movie clip object to apply a filter to or remove a filter from.

  2. 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

  1. Select the object to copy a filter from, and select the Filters panel.

  2. 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.

  3. 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

  1. Select the object to apply a filter preset to, and select the Filter tab.

  2. Click the button to open the drop-down.

  3. 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

  1. 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

  1. 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

  1. Apply the filter or filters to any selected object.

  2. Click the button to add a new filter.

  3. Select the filter and click the  button, and choose Save As Preset.

  4. Enter a name for the filter settings in the Save Preset As dialog box, and click OK.

Rename a filter preset

  1. Click the button, and add a new filter.

  2. Select the filter and click the button. Click Edit Presets.

  3. Double-click the preset name to modify.

  4. Enter a new preset name, and click OK.

Delete a filter preset

  1. Click the button, and add a new filter.

  2. Select the filter and click the button.

  3. Click Edit Presets.

  4. 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.

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.

  1. Select the object to apply a drop shadow to.

  2. In the Filters section of the Property inspector, click the button, and select Drop Shadow.

  3. 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

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

  1. Select the object with the shadow you want to skew.
  2. Duplicate (select Edit > Duplicate) the source object.
  3. Select the duplicated object, and skew it using the Free Transform tool (Modify > Transform > Rotate And Skew).
  4. 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.)
  5. In the Filters panel, select Hide Object to hide the duplicated object while leaving its shadow visible.
  6. Select Modify > Arrange > Send Backward to place the duplicated object and its shadow behind the original object that you duplicated.
  7. 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.

Text with the Blur filter applied

  1. Select an object to apply a blur to, and select Filters.

  2. Click the button, and select Blur.

  3. 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.

Text with the Glow filter applied

  1. Select an object to apply a glow to, and select Filters.

  2. Click the button, and select Glow.

  3. 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.

Text with a bevel applied

  1. Select an object to apply a bevel to, and select Filters.

  2. Click the button, and select Bevel.

  3. 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.

Text with a gradient glow applied

  1. Select an object to apply a gradient glow to.

  2. In the Filters section of the Property inspector, click the button, and select Gradient Glow.

  3. 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.

  1. Select an object to apply a gradient bevel to.

  2. In the Filters section of the Property inspector, click the button, and select Gradient Bevel.

  3. 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.

  1. Select an object to adjust the color for.

  2. In the Filters section of the Property inspector, click the button, and select Adjust Color.

  3. 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.

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

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy