AS3: Applying a BlurFilter Effect

So I’m sitting here, having recently misplaced my glasses, and it’s become quite apparent to me that I can’t see. Somehow in the midst of the unfortunate circumstances I find the inspiration for my first tutorial:

The BlurFilter applies a blur to visual objects in your scene.
It is one of AS3’s various filter effects including: Glow, Drop Shadow, and Bevel
Play around with slider in the example above and you will see something similar to a Gaussian blur effect.

Let’s look at some code then, shall we?

Actionscript:

1
2
3
4
import flash.display.MovieClip;
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;

These are all the imports we should need in our package to achieve a blur effect.

Actionscript:

1
2
3
4
5
var filter:BitmapFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);
var myFilters:Array = new Array();
myFilters.push(filter);

blurredMC.filters = myFilters;
What we do here is:
  1. Create a new BitmapFilter of type BlurFilter
  2. Create an array which we add our filter to
  3. Apply our filter array to a specified object

Actionscript:

1
var filter:BitmapFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);

The BlurFilter constructor takes 3 parameters:

BlurFilter(blurX:Number = 4.0, blurY:Number = 4.0, quality:int = 1)
  • blurX: the amount of blur to apply in the X direction (0 – 255)
  • blurY: the amount of blur to apply in the Y direction (0 – 255)
  • quality: the number of blur passes (LOW, MEDIUM, HIGH)

The higher the blur values, the more blur you will see applied to your object. In the code above we set both of these values to 10. You can just as easily though blur in only the X or Y direction for a clever motion blur effect. Remember that the higher the blur value the more cpu intensive the blur becomes.

Note: The way that the blur passes are processed it is more efficient to use powers of 2. (2, 4, 8, 16, etc.)

You may have been confused that my example code has quality set to BitmapFilterQuality.HIGH, while the default parameters directly above show quality as an integer of 1. The quality in itself is just a value telling Flash how many times to apply the blur. Generally the pre-made quality types are sufficient, but if you need you can replace BitmapFilterQuality with an integer (0 – 15).

Actionscript:

1
2
var myFilters:Array = new Array();
myFilters.push(filter);

Here we create a new array myFilters and then push the BlurFilter we previously created into it.  If we were planning on applying multiple kinds of filters to our object, we would add each of them to this array.

Actionscript:

1
blurredMC.filters = myFilters;

Here we apply all of our filters (in this case the BlurFilter) to DisplayObject blurredMC.

In Flash

I guess I should mention that if you don’t want to deal with all this code crap, you can still apply filters to your object via the Filter’s tab. (Flash 8 and higher). You can find this at Window > Properties > Filters

Concluding..

So wraps up my first ever Flash tutorial! I hope it was exceedingly beneficial to you. Well, even if it wasn’t I would love to hear any constructive criticism.

I’ve provided the source to the example above. Enjoy!

Ben

4 thoughts on “AS3: Applying a BlurFilter Effect

  1. Kev Man

    Thank you for posting this. There are very few tutorials that are worth a crap and even fewer that deal with filters.

    You rock, for now.

Leave a Reply

Your email address will not be published. Required fields are marked *