You can animate movie clips that have filters applied to them. In Flash CS4, tweens are attached directly to the objects they are animating. Keyframes along the timeline show at which points the characteristics of the animating object have changed—position, transformations, and filters included. 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.

This section describes the process of animating a filter effect using the Flash workspace in one example and ActionScript in another.

Requirements

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

Flash CS4 Professional

• Try
• Buy

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.

Animating filters using the Flash user interface

Follow these steps to add a filter manually in Flash:

1. Create a new ActionScript 3 FLA file and save it as anifilter.fla.
2. Create or add a movie clip instance on the Stage at Frame 1.
3. Select the instance and open the Filters tab.
4. Click the Add filter (page icon) button and select Glow from the pop-up menu.
5. In the Filters tab, change the Blur X and Blur Y values to 25.
6. Right-click frame 1 of the Timeline and choose the Add Motion Tween option. Notice that Flash CS4 automatically adds 24 frames along the Timeline. Select the movie clip instance and drag it to a new location on the Stage.
7. Select the Motion Editor tab to view the animation in the Motion Editor panel. Scroll down the list of animated properties until you reach the Filters section.

8. Right-click frame 24 of the Blur X row of the Glow filter properties. Insert a keyframe (see Figure 5).

   

   Figure 5. The Motion Editor panel is a new addition to Flash CS4 which allows you to easily edit all aspects of your tweened animations.

   (+) View larger

9. Change the Blur X value associated with the new keyframe to 5.
10. Select Control > Test Movie to test the animated filter.

Note: Flash CS4 Professional supports advanced control over every editable property in a tween with the Motion Editor. For more information, please see the Editing property curves with the Motion Editor section of Using Flash CS4 Professional.

Animating filters with ActionScript

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 animFilter.fla.
2. Draw a graphic on the Stage, select it, and then select Modify > Convert to Symbol.
3. Name the movie clip symbol and then click OK.
4. Select the movie clip instance on the Stage and then type my_mc in the Instance Name text box in the Property inspector.
5. Add the following ActionScript to Frame 1 of the Timeline:
   

   import flash.filters.GlowFilter;
   var dir:Number = 1;
   my_mc.blur = 10;
   my_mc.filters = [new GlowFilter()];
   my_mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
   
   function enterFrameHandler(event:Event):void
   {   
   	my_mc.blur += dir;
   
   	if ((my_mc.blur >= 30) || (my_mc.blur <= 10)) {
   		dir *= -1;
   	}
   	var filter_array:Array = my_mc.filters;
   	filter_array[0].blurX = my_mc.blur;
   	filter_array[0].blurY = my_mc.blur;
   	my_mc.filters = filter_array;
    }

   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.

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

Filters and Flash Player performance

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 display correctly 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 each frame. When a movie clip is modified by rotating, resizing, or otherwise changing its appearance, the player redraws the clip and its effects. Note that translating (moving) a movie clip does not cause a redraw. For more information on bitmap caching, see the section on Runtime bitmap caching.

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 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% performance improvement.

Where to go from here

Try to animate different filter types to see the effects. Pay attention to the performance and rendering quality as you experiment.

To learn more 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.

About the author