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.
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.
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.
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.
Lee Brimelow has posted several helpful Pixel Bender examples on his blog at http://theflashblog.com/?cat=44.
The following video tutorials demonstrate the use of Pixel Bender filters in Animate:
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:
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.
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.
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.
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.
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.
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:
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.
The Drop Shadow filter simulates the look of an object casting a shadow onto a surface.
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.
In the Filters section of the Property inspector, click the button, and select Drop Shadow.
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.
Click the button, and select Blur.
The Glow filter lets you apply a color around the edges of an object.
Click the button, and select Glow.
Applying a bevel applies a highlight to the object that makes it appear to be curved up above the background surface.
Click the button, and select Bevel.
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.
In the Filters section of the Property inspector, click the button, and select Gradient Glow.
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.
The Adjust Color filter allows you to finely control the color attributes of the selected object, including contrast, brightness, saturation, and hue.
In the Filters section of the Property inspector, click the button, and select Adjust Color.
Adjusts the highlights, shadows, and midtones of an image.
Adjusts the brightness of an image.
Adjusts the intensity of a color.
Adjusts the shade of a color.