Applying Filters with ActionScript

Applying Filters with ActionScript

You can apply filters using the Flash user interface in Flash Professional 8, or using ActionScript in Flash Basic 8 or Flash Professional 8. You can apply each filter effect 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 lets you modify an existing filter that you applied to a text field, movie clip, or button.

At this point, you might want to 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 start out with is applying a bevel filter. We have provided an example here for you.

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];
  4. Select Control > Test Movie to test the document.

Applying different filters with code works pretty much the same way. However, some 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.filters.ColorMatrixFilter;
    System.security.allowDomain("http://www.helpexamples.com/");
    var mcl_obj:Object = new Object();
    mcl_obj.onLoadInit = function(target_mc:MovieClip):Void {
    var myElements_array:Array = [1, 0, 0, 0, 100,
    0, 1, 0, 0, 100,
    0, 0, 1, 0, 100,
    0, 0, 0, 1, 0];
    var myColorMatrix_filter:ColorMatrixFilter =
    new ColorMatrixFilter(myElements_array);
    target_mc.filters = [myColorMatrix_filter];
    }
    this.createEmptyMovieClip("img_mc", this.getNextHighestDepth());
    var img_mcl:MovieClipLoader = new MovieClipLoader();
    img_mcl.addListener(mcl_obj);
    img_mcl.loadClip(
    "http://www.helpexamples.com/flash/images/image2.jpg", img_mc);

    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 set to 100% by using a color matrix filter.

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

    • Using the Convolution Filter (Learning ActionScript 2.0 in Flash > Animation, Filters, and Drawings > Working with Filters Using ActionScript > Using the Convolution Filter)

    • Using the Displacement Map Filter (Learning ActionScript 2.0 in Flash > Animation, Filters, and Drawings > Working with Filters Using ActionScript > Using the Displacement Map Filter)

 

Applying Multiple Filters with ActionScript

You access the array of filters applied to an object through standard ActionScript calls using the MovieClip.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 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

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:

// does 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 code such the following ActionScript instead:

// works
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.filters.BlurFilter;
    //create a new movie clip called holder_mc
    var holder_mc:MovieClip = createEmptyMovieClip("holder_mc", 10);
    //create a nested movie clip called img_mc
    holder_mc.createEmptyMovieClip("img_mc", 20);
    //load an image into img_mc
    holder_mc.img_mc.loadMovie(
    "http://www.helpexamples.com/flash/images/image2.jpg");
    //apply a blur filter
    holder_mc.filters = [new BlurFilter(10, 10, 2)];
    //position the movie clip on the Stage
    holder_mc._x = 75;
    holder_mc._y = 75;
    //adjust the blur filter when the mouse moves
    holder_mc.onMouseMove = function() {
    var tempFilter:BlurFilter = holder_mc.filters[0];

    tempFilter.blurX =
    Math.floor((_xmouse / Stage.width) * 255);
    tempFilter.blurY =
    Math.floor((_ymouse / Stage.height) * 255);
    holder_mc.filters = [tempFilter];
    };

    The previous code is split into three sections. The first section imports the flash.filters.BlurFilter class so that you don’t have to use the fully qualified class name when you refer to the BlurFilter class. The second section of code creates a couple of movie clips and loads an image into one of the nested clips. The third section of code responds to the mouse movement on the Stage and adjusts the blur accordingly.

  3. Select Control > Test Movie to test the Flash document. When you move the mouse cursor along the x-axis it modifies the blur filter’s blurX property. Moving the mouse cursor 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.

Comments