Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Working with filters using ActionScript > Using the blur filter

Using the blur filter

The BlurFilter class lets you apply a blur visual effect to a variety of objects in Flash. A blur effect softens the details of an image. You can produce blurs that range from creating a softly unfocused look to a Gaussian blur, a hazy appearance like viewing an image through semi-opaque glass. The blur filter is based on a box-pass blur filter. The quality parameter defines how many times the blur should be repeated (three passes approximates a Gaussian blur filter).

For more information on this filter, see BlurFilter (flash.filters.BlurFilter) in the ActionScript 2.0 Language Reference.

The following procedure blurs a dynamically loaded image based on the mouse pointer's current position on the Stage. The further the pointer is from the center of the Stage, the more the image is blurred.

To blur an image based on the mouse pointer's position:

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

   import flash.filters.BlurFilter;
   System.security.allowDomain("http://www.helpexamples.com");
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
       // Center the target_mc movie clip on the Stage.
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
   };
   this.createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
   var blur:BlurFilter = new BlurFilter(10, 10, 2);
   
   var mouseListener:Object = new Object();
   mouseListener.onMouseMove = function():Void {
       /* Moving the pointer to the center of the Stage sets the blurX and blurY properties to 0%. */
       blur.blurX = Math.abs(_xmouse - (Stage.width / 2)) / Stage.width * 2 * 255;
       blur.blurY = Math.abs(_ymouse - (Stage.height / 2)) / Stage.height * 2 * 255;
       img_mc.filters = [blur];
   };
   Mouse.addListener(mouseListener);
   

   The first section of this code loads and positions a dynamically loaded image on the Stage. The second section defines a listener that is called whenever the mouse moves. You calculate the amount of horizontal and vertical blurring based on the mouse pointer's current position on the Stage. The further you move the pointer away from the center of the Stage, the more blurring is applied to the instance.

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

   Move the mouse pointer along the x-axis to modify the amount of horizontal blurring. The instance blurs more when the pointer moves farther away from the horizontal center of the Stage. Moving the pointer along the y-axis causes the vertical blurring to increase or decrease, depending on the distance from the vertical center of the Stage.

   TIP

   When you use a blur filter, using values for blurX and blurY that are powers of two (such as 2, 4, 8, 16, and 32) can be computed faster and give a 20% to 30% performance improvement.

   CAUTION

   Setting a blur value lower than 1.03125 disables the blur effect.

Flash CS3