Combining Animation, Filters, and the Tween Class

You can use ActionScript, such as the Tween class, to animate filters at runtime, which enables you to apply interesting, animated effects to your Flash applications. In the following example, you see how to combine the Blur filter 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 creates a new MovieClipLoader instance and a listener for the movie clip loader.

   The listener object defines a single event handler function, onLoadInit, which is started once the image successfully loads and is available on the Stage. First the image is repositioned to the center of the Stage and 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. Figure 23 shows the final result.

   

   Figure 23. Using the Tween class to determine how the blur affects the target image