Flash Article

Flash graphic effects learning guide

Applying filters with ActionScript

You can apply filters using the Flash user interface in Flash CS3 Professional, or using ActionScript in Flash CS3 Basic or Flash CS3 Professional. You can apply each filter effect or group of effects to movie clips, buttons, or text fields using ActionScript.

If you use ActionScript to apply the filters to an instance, you can also use a displacement map filter or a convolution filter, which are not available in the Flash user interface. Filters are applied to the vector definitions, so there is no file size overhead of storing a bitmap image within the SWF file. You can also write ActionScript that allows you to modify an existing filter that you applied to a text field, movie clip, or button for dynamic effects.

Let's try applying a basic filter effect using ActionScript code. There are many examples in the Flash documentation (see the following list); however, an easy example to get started with involves applying a bevel filter. In the steps below, we've included a code example.

To apply a bevel filter:

1. Create a new Flash document called bevel.fla.
2. Create a new movie clip that contains a graphic or image, and give it the instance name my_mc.
3. Select Frame 1 of the Timeline, and add the following ActionScript:
   

   import flash.filters.BevelFilter;
             
   // define a bevel filter
   var bevel:BevelFilter = new BevelFilter(4, 45, 0x99CCFF, 1, 0x003399, 1, 10, 10, 2, 3);
   
   // set strength
   bevel.strength = 5;
   
   // apply the filter to my_mc
   my_mc.filters = [bevel];
   
   

   Note: For information on working with ActionScript packages, such as flash.filters.BevelFilter, see the following section of Flash LiveDocs: Programming ActionScript 3.0 > ActionScript language and syntax > Packages and namespaces > Packages.

4. Select Control > Test Movie to test the document.

For information on the parameters you can pass to the bevel filter, see the following section of Flash LiveDocs: ActionScript 3.0 Language and Components Reference > All Classes > BevelFilter class (flash.filters.BevelFilter).

Applying different filters with code works pretty much the same way. However, different filters need different information when you apply the filter. For example, the color matrix filter requires an array. You can use the color matrix filter to modify the brightness of an instance, as the following example demonstrates.

To apply a color matrix filter:

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

   import flash.display.*;
   import flash.net.URLRequest;
   import flash.events.Event;
   import flash.filters.ColorMatrixFilter;
   
   var pictLdr:Loader = new Loader();
   var pictURL:String = "http://www.helpexamples.com/flash/images/image2.jpg";
   var pictURLReq:URLRequest = new URLRequest(pictURL);
   pictLdr.load(pictURLReq);
   pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
   addChild(pictLdr);
   
   function imgLoaded(event:Event):void
   {
       var myElements_array:Array = [1, 0, 0, 0, 10
       0, 1, 0, 0, 100,
       0, 0, 1, 0, 100,
       0, 0, 0, 1, 0];
       var myColorMatrix_filter:ColorMatrixFilter = new ColorMatrixFilter(myElements_array);
     pictLdr.content.filters = [myColorMatrix_filter];
   }
   
   

   This code dynamically loads a JPEG image using a MovieClipLoader instance. After the image has completely loaded and has been placed on the Stage, the instance's brightness is altered by using a color matrix filter.

   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).

   For more information on the color matrix, see the following section of Flash LiveDocs: ActionScript 3.0 Language and Component Reference > All Classes > ColorMatrixFilter (flash.filters.ColorMatrixFilter).

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

   After you apply a filter, you can manipulate it using ActionScript, such as adjusting the filter properties or animating the filter. For more information, see the following sections: Adjusting Filter Properties with ActionScript and Animating Filters with ActionScript.

   Note: There are two additional filters that you can apply using ActionScript code, but they are not available using the Flash user interface: the convolution filter and the displacement map filter. For information on these filters see the following section of Flash LiveDocs:

   • For more information on the Convolution filter, see the ConvolutionFilter class (ActionScript 3.0 Language and Components Reference > All Classes > ConvolutionFilter class)
   • For more information on the Displacement Map filter, see the DisplacementMapFilter class (ActionScript 3.0 Language and Components Reference > All Classes > DisplacementMapFilter class)

See the following sections of Flash LiveDocs for examples of applying each filter using ActionScript code:

• Bevel filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Bevel filter
• Blur filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Blur filter
• Color Matrix filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Color matrix filter
• Convolution filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Convolution filter
• Displacement Map filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Displacement Map filter
• Drop Shadow filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Drop Shadow filter
• Glow filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Glow filter
• Gradient Bevel filter: Programming ActionScript 3.0 > Filtering display objects > Available display filters > Gradient Bevel filter
• Gradient Glow filter Programming ActionScript 3.0 > Filtering display objects > Available display filters > Gradient Glow filter

Applying multiple filters with ActionScript

You access the array of filters applied to an object through standard ActionScript calls using the DisplayObject.filters property. This returns an array that contains each filter object currently associated with the movie clip. By adding more than one filter to an objects filters array, you can apply multiple effects. The effects will be applied in the order they are listed in the array.

It's important to note that setting the filters property duplicates the filters array that you pass into it (demonstrated in the following example) and does not store the filter as a reference. When getting the filters property, it returns a new copy of the array. One negative implication of this approach is that the following code will not work:

// This will not work
my_mc.filters[0].push(myFilter);

// This will work:
import flash.filters.BlurFilter;
var filterList:Array = myClip.filters;
filterList.push(new BlurFilter(3,3,2));
myClip.filters = filterList;

The advantage of this is that you can copy the filters from one object, modify them and apply them to another object without worrying about affecting the original object's filters.

Adjusting filter properties with ActionScript

The array of filters applied to an object can be accessed through standard ActionScript calls using the MovieClip.filters property. By adding more than one filter to an object's filters array you can apply multiple effects. The filters will be applied in the order they are listed in the array. This returns an array that contains each filter object currently associated with the movie clip. Each filter has a set of properties unique to it. The filters can be accessed and modified just like a regular array object, although getting and setting the filters using the filters property returns a duplicate of the filters object instead of a reference.

Setting the filters property duplicates the filters array that you pass into it (demonstrated in the following example) and does not store the filter as a reference. When getting the filters property, it returns a new copy of the array. This allows you to copy the filters from one object, modify them, and apply them to another object without worrying about affecting the original object's filters. One negative implication of this approach is that the following code will not work:

// This will not work
my_mc.filters[0].blurX = 20;

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. In order to modify the blurX property, you need to use the following ActionScript code instead:

// This will work
var filterList:Array = my_mc.filters;
filterList[0].blurX = 20;
my_mc.filters = filterList;

The following example blurs an image based on the current position of the mouse pointer on the Stage. Whenever the mouse cursor moves horizontally or vertically, the blurX and blurY properties of the blur filter are modified accordingly.

To adjust a movie clip's filter properties:

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

   import flash.display.*;
   import flash.net.URLRequest;
   import flash.events.Event;import flash.filters.BlurFilter;
   var pictLdr:Loader = new Loader();
   var pictURL:String = "http://www.helpexamples.com/flash/images/image2.jpg";
   var pictURLReq:URLRequest = new URLRequest(pictURL);
   pictLdr.load(pictURLReq);
   pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded); 
   addChild(pictLdr);
   
   function imgLoaded(event:Event):void{
      pictLdr.filters = [new BlurFilter(10, 10, 2)];
      pictLdr.x = (stage.stageWidth - pictLdr.width) / 2;
      pictLdr.y = (stage.stageHeight - pictLdr.height) / 2;
      pictLdr.addEventListener(MouseEvent.MOUSE_MOVE, redrawEffect);
   } 
   		  
   function redrawEffect(event:MouseEvent):void{
      var tempFilter:BlurFilter = pictLdr.filters[0];
      tempFilter.blurX = Math.floor((event.stageX / stage.stageWidth) * 100);
      tempFilter.blurY = Math.floor((event.stageY / stage.stageHeight) * 100);
      pictLdr.filters = [tempFilter];}

   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).

3. The previous code example is split into three sections. The first section imports the flash.filters.BlurFilter class and other necessary packages so that you don't have to use the fully qualified class name when you refer to each class. The second section loads an image and assigns it to a display object with its initial settings. The third section of code responds to the mouse movement on the Stage and adjusts the blur accordingly.
4. Select Control > Test Movie to test the Flash document. When you move the mouse cursor horizontally along the x-axis it modifies the blur filter's blurX property. Moving the mouse cursor vertically along the y-axis modifies the blur filter's blurY property. The closer the mouse cursor is to the upper left corner of the Stage, the less blurring will be applied to the movie clip.

Page 3 of 8

Previous Page

Next Page