Applying Flash Filters Using AS3

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Beginner

Filters are readymade effects which you can apply to all visual objects in Flash. This tutorial will teach you how to apply, customize, and remove these filers from any object using ActionScript 3.0. This is a beginner tutorial that does not require you to have any advanced AS3 skills. The example below shows how the Blur, Glow, Bevel, and Drop Shadow filters were applied to an image:

All display objects have a special filters property which can add filters to. We will explain how to manipulate this property to add whatever filters you wish to it. This tutorial is divided into the following sections:

  1. Preparing the FLA.
  2. Applying a Filter.
  3. Removing a Filter.
  4. Customizing Filters.

Preparing the FLA

Start off by creating a new FLA in AS3 format. We need to create the object which we are going to apply our filters to. Use the Rectangle Tool to draw a square on stage. Once you have that on stage, press F8 to convert it to a MovieClip Symbol.

AS3 Filters - Square Symbol

In order to easily manipulate this object via ActionScript we need to give it an instance name. Select your new MovieClip and access the Properties Inspector. Set my_mc as the instance name of this object.

AS3 Filters - Properties Inspector

Our MovieClip is now ready for ActionScript. Right-click the only frame you have on the timeline and select Actions to open up the Actions panel and start coding.

Applying a Filter

We are going to explain the uses of the four basic filters, namely BlurFilter, GlowFilter, BevelFilter, and DropShadowFilter. There are a number of advanced filters such as GradientGlowFilter and GradientBevelFilter which we will not explore in this tutorial.

Before being able to use any Filter in your project you must import the relevant ActionScript package to your project. You can do this by using the import keyword to do that. At the top of your code type the following to import ALL the filters into your project:

import flash.filters.*;

That should allow us to use any Filter we want in our project.

The process for applying a specific filter to a specific object involves two main steps:

  1. Creating an instance of the filter.
  2. Adding that instance to the filters property of the object.

The first step for instantiating a filter is the same process for any class. You simply use the var keyword to create a variable and the new keyword to create a new instance of the required class. Type the following to do this trick:

import flash.filters.*;

var myBlur:BlurFilter = new BlurFilter();
You can learn more about AS3 Variables by reviewing our tutorial on this topic.

The next step simply requires us to add this to the filters property of our object. This property is not a regular property, but it an array. This means that we should use the square brackets to set its value or use the array push() method to add something to it. To keep things simpler we are just going to use the square brackets to do this:

import flash.filters.*;

var myBlur:BlurFilter = new BlurFilter();
my_mc.filters = [myBlur];

That should do it, to see your filter applied test your movie by going through Window>Text - or alternatively press Ctrl+Enter to do the same thing.

AS3 Filter - Blur Applied

The blur effect is a bit subtle because we did not configure the filter. We are going to do that later.

If you would like to add more than one to your object you can do that by instantiating another filter and then passing it together with the previous one to the filters property. The example below adds a Glow effect:

import flash.filters.*;

var myBlur:BlurFilter = new BlurFilter();
var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myBlur, myGlow];

You should note that you need to separate your filters by a coma , inside the same square brackets as they are values of an array.

AS3 Filters - Blur Glow Applied

You can add as many filters as you wish by simply adding them to your filters array. It is really simple.

Removing Filters

For some reason you might want to remove a filter you added from an object. This is not a complicated process. All you have to do to delete all your filters is simply set the value of the filters property to empty square brackets. This clears an array of all its contents:

import flash.filters.*;

var myBlur:BlurFilter = new BlurFilter();
var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myBlur, myGlow];

my.filters = [];

Testing the code above will produce the MovieClip without any filters applied to it at all.

AS3 Filters Removed

Customizing Filters

It is possible to customize each filter with different attributes before applying the filter to an object. These attributes may be customized at the time the Filter is instantiated or they could be later changed using Filter properties. In this tutorial we are going to use the slow method for modifying the properties after a Filter is instantiated. For example, if you would like to modify the transparency of a Glow filter you can do that by using the alpha property of that filter:

import flash.filters.*;

var myGlow:GlowFilter = new GlowFilter();
myGlow.alpha=0.5;
my_mc.filters = [myGlow];

It is important to note that you need to modify the properties of a filter before you apply that filter to an object. Attempting to change it afterwards will affect the actual filter on the object. The following code is WRONG:

import flash.filters.*;

var myGlow:GlowFilter = new GlowFilter();
my_mc.filters = [myGlow];
myGlow.alpha=0.5; // THIS WILL NOT WORK. MUST CHANGE THE PROPERTY BEFORE APPLYING THE FILTER.

Each filter has a number of different properties that could be customized. You may use all of none We are going to go through these one by one.

The Blur Filter

The Blur Filter has the following properties:

Example of use:

import flash.filters.*;

var myBlur:BlurFilter = new BlurFilter();
myBlur.quality = 3;
myBlur.blurX = 10;
myBlur.blurY = 10;
my_mc.filters = [myBlur];

You can test this code to generate the following result:

AS3 Filters - Modified Blur

The Glow Filter

The Glow Filter has the following properties:

Example of use:

import flash.filters.*;

var myGlow:GlowFilter = new GlowFilter();
myGlow.inner=true;
myGlow.color = 0x000000;
myGlow.blurX = 20;
myGlow.blurY = 20;
my_mc.filters = [myGlow];

You can test this code to generate the following result:

AS3 Filters - Modified Glow

The Bevel Filter

The Bevel Filter has the following properties:

Example of use:

import flash.filters.*;

var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.FULL;
myBevel.distance = 10;
myBevel.highlightColor = 0xFF0000;
myBevel.shadowColor = 0xFFFF00;
myBevel.blurX = 20;
myBevel.blurY = 20;
my_mc.filters = [myBevel];

You can test this code to generate the following result:

AS3 Filters- Modified Bevel

The DropShadow Filter

The DropShadow Filter has the following properties:

Example of use:

import flash.filters.*;

var myShadow:DropShadowFilter = new DropShadowFilter();
myShadow.distance = 10;
myShadow.color = 0xFF0000;
myShadow.blurX = 10;
myShadow.blurY = 10;
myShadow.quality = 3;
my_mc.filters = [myShadow];

You can test this code to generate the following result:

AS3 Filters - Modified DropShadow Filter

This concludes our tutorial. I hope that you learnt something new from it. Feel free to post any questions or comments you have the Republic of Code Forum.

- End of Tutorial