Flash Article

Flash graphic effects learning guide

Animating filters

You can animate movie clips that have filters applied to them. Objects on separate keyframes that are joined by a tween have their 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 comes at the end of the animation sequence.

To animate a filter using the Flash user interface:

1. Create a new Flash document 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 (+) 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. Select Frame 15 on the Timeline and press F6 to insert a new keyframe.
7. Select the movie clip instance again and open the Filters tab.
8. Change the Blur X and Blur Y values to 2.
9. Right-click (Windows) or Control-click (Macintosh) and select Create Motion Tween from the context menu.
10. Select Control > Test Movie to test the animated filter.

Note: Flash CS3 Professional supports advanced control over tweening with the custom easing control panel. With the tween selected, click on the Edit button in the Properties inspector to access the easing controls.

Flash prevents motion tweens from functioning incorrectly in the event of a missing filter at one end of the tween, or filters applied in a different order at each end. 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, Flash corrects the inconsistent use of the filter in the motion tween. In this case, Flash applies the filter settings used on the first frame of the tween—a drop shadow with a knockout.

For more information on how Flash prevents animations from functioning incorrectly, see the following section of Flash LiveDocs: Using Flash > Special effects > About filters > About Animating Filters.

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 Flash 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;
   }

   Note: The code sample above is written in ActionScript 3.0 and must be used within an ActionScript 3.0 file (the default Flash CS3 setting).

   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 Flash document 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 Flash 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.

Page 4 of 8

Previous Page

Next Page