Applying Flash 8 Filters Using ActionScript

By Blue_Chi | Flash 8 | Intermediate

The new Flash 8 filters such as blur, drop shadow, and bevel are extremely easy to apply directly on objects at authoring time, but you may want to generate these effects using ActionScript to have more dynamic control over them. Generating these filters through ActionScript is not as straightforward as you might think it is, this tutorial will hopefully teach you how to do that easily. This tutorial is to be followed in Flash 8 and the created SWF files will have to be viewed on Flash 8 Player to show these effects. You are required to have some knowledge about the arrays class in ActionScript to be able to manipulate these filters.

Start off by creating a new FLA file, I am using the default settings: 550x400px stage running at 20fps and the background colour is white.

Create a circle using the Oval Tool (O), we don't need an outline for it, and you can set the colour it black. The exact size of it does not really matter, I made mine around 50px in diameter.

Use the black arrow to select the circle by clicking once on it. Now press on F8 on your keyboard to convert it to a Symbol, select Movie Clip and name your symbol "Circle MC".

While the circle movie clip is selected give it an instance name using the Property panel. Instance names allow us to refer to objects on the stage to control them via ActionScript. Give the circle the instance name circle_mc.

The stage is now ready for us to start scripting the filters for our movie clip. We are going to attach all our ActionScript to the frame and not the movie clip itself. Right click the only frame on the timeline and choose "Actions" to open up the ActionScript panel.

A little bit of theory

What makes the filters property different from the other basic properties is that it is an array which you have to add each filter you want to use to. The problem with the filter property is not in the fact that it is an Array, but in the fact that you can cannot edit this array directly. You will have to create a temporary array which you will be required to add your filters to and then will have to copy it to the filters property to apply it. This can be a lengthy process, but is it not really so hard to understand once you see it working. Lets do it.

To be able to apply a filter to our filters array, we will have to create our filter using the specified constructor for the filter. In this example, we will use the blur filter. We will name our filter myBlur.

var myBlur = new flash.filters.BlurFilter();

The other available filters are BevelFilter, BitmapFilter, ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter, DropShadowFilter, GlowFilter, GradientBevelFilter, and GradientGlowFilter. If you wish to create another filter, for example the GlowFilter, you will have access its class this way: flash.filters.GlowFilter.

As we said, we will have to edit a temporary array that we will then have to assign to our mail filters property. Our temporary array has to have the original value of our real filters property to be able to edit it. We can assign the original value to the temporary array at the time of creation.

var myTempFilters:Array = circle_mc.filters;

The instance name of our movie clip that we created earlier on is circle_mc. The name myTempFilters is the name that we have chosen for our temporary array. As you can see, we have applied the value of the filter property of the circle_mc.

Our temporary array is ready, we will now add our blur filter to it using the array method .push. This method is used to add a value to the end of the array. We will add the myBlur to our myTempFilters array this way:

myTempFilters.push(myBlur);

Our temporary array now has the blur filter in it, we will now have to assign this to our filter property at the circle_mc. It is easily done using the equal sign operator.

circle_mc.filters = myTempFilters;

This should do it, what we have scripted is essential this:

var myBlur = new flash.filters.BlurFilter();
var myTempFilters:Array = circle_mc.filters;
myTempFilters.push(myBlur);
circle_mc.filters = myTempFilters;

Our example above should generate a blur filter using the default settings of the effect. You can test the movie by pressing Ctrl+Enter on your keyboard to say the effect in action.

To modify these settings we can either assign values to each specific parameter at the time of the creation:

var myBlur = new flash.filters.BlurFilter(blurX:Number, blurY:Number, quality:Number );

A working example would be:

var myBlur = new flash.filters.BlurFilter(50,50,1);

Each filter has different parameters that you can learn more about using the ActionScript dictionary that accompanies Flash 8.

You can edit the parameters of any of the filters added by accessing it via its position in the temporary array. Our blur filter is the first on placed in the array, so it should have the position [0] in the array. For example, we can edit the quality parameter of our filter this way:

myTempFilters[0].quality=3;
circle_mc.filters=myTempFilters;

Remember that you always have to edit the temporary array and then you will have to assign its value to the real filters array.

This concludes our tutorial. Macromedia has created a quite cumbersome control method of the filters via ActionScript, it is not really hard to understand, but it does feel like it could have been easier if we were able to edit the main array instantly.

-End of Tutorial