You can apply filters using the Flash CS4 user interface, or you can apply filters or groups of filters 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 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 related to storing a bitmap image within the SWF file. You can also write ActionScript that modifies an existing filter applied to a text field, movie clip, or button to create dynamic effects.

This section describes the process of adding a filter to a movie clip instance using ActionScript.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

This guide assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

Applying a filter with ActionScript

Let's try applying a basic filter effect using ActionScript code. 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 ActionScript 3 FLA file 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];

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

For information on the parameters you can pass to the bevel filter, see the BevelFilter section of the Flash CS4 Professional ActionScript 3 Language Reference.

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 ActionScript 3 FLA file 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 Loader 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.

   For more information on the color matrix, see the ColorMatrixFilter section of the Flash CS4 Professional ActionScript 3.0 Language Reference.

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 Filtering display objects section of Programming ActionScript 3.0 for Flash.

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

   • For more information on the Convolution filter, see the ConvolutionFilter class.
   • For more information on the Displacement Map filter, see the DisplacementMapFilter class.

For more information on the variety of filters available, please see the Available display filters section of Programming ActionScript 3.0 for Flash.

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

Because the previous code snippet returns a copy of the filters array, it modifies the duplicate. The following code example adds a blur filter to the end of an object's existing filter list:

// 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

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.

// 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 ActionScript 3 FLA file 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];
   }

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

Where to go from here

For more examples of working with filters at runtime, check out the Filter Workbench sample in the Programming ActionScript 3.0 for Flash online documentation. You can download the source files from the following link:

• Flash_ActionScript3.0_samples_CS4.zip (ZIP, 14.9 MB)

Visit other sections of the Graphic Effects Learning Guide for Flash to dive into whatever topic interests you.

About the author