Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Manipulating filter effects with code > Animating a filter by using ActionScript

Animating a filter by using ActionScript

You can use ActionScript, such as the Tween class, to animate filters at runtime, which lets you apply interesting, animated effects to your Flash applications.

In the following example, you see how to combine the BlurFilter with the Tween class to create an animated blur that modifies the Blur filter between a value of 0 and 10 at runtime.

To animate blurs using the Tween class:

1. Create a new Flash document and save it as animatedfilter.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.filters.BlurFilter;
   import mx.transitions.Tween;
   import mx.transitions.easing.*;
   
   this.createEmptyMovieClip("holder_mc", 10);
   holder_mc.createEmptyMovieClip("img_mc", 20);
   
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
       var myTween:Tween = new Tween(target_mc, "blur", Strong.easeInOut, 0, 20, 3, true);
       myTween.onMotionChanged = function() {
           target_mc._parent.filters = [new BlurFilter(target_mc.blur, target_mc.blur, 1)];
       };
       myTween.onMotionFinished = function() {
           myTween.yoyo();
       }
   };
   var my_mcl:MovieClipLoader = new MovieClipLoader();
   my_mcl.addListener(mclListener);
   my_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", holder_mc.img_mc);
   

   The preceding code is separated into three sections. The first section imports the required classes and packages. The second section creates a nested movie clip that is used to load an image and apply filters to the holder movie clip. The final section of code creates a new MovieClipLoader instance and a listener for the movie clip loader. The listener object defines a single event handler function, onLoadInit, that is started once the image successfully loads and is available on the Stage. First the image is repositioned to the center of the Stage, then a new Tween object is created that animates the movie clip and applies a blur filter of 0 and 10.

3. Select Control > Test Movie to test the Flash document.

Flash CS3