Filters in ActionScript - Drop shadow and blur

08 October, 2009

Filters are a great way to add a bit of effect to a MovieClip, and are really quick and easy to do with Flash. But what if you're adding your MovieClips dynamically and you want to add a filter to them? Well today we look at how you can add the same filters with ActionScript that you can through the normal interface. And it's really easy!

We can use the same code for both ActionScript 2 and ActionScript 3, so we only need one set of instructions.

We're going to look at two filters today - a drop shadow and a blur. These filters are really easy to add to a MovieClip with ActionScript, so let's get started.

First let's take a look at the blank MovieClip, and then what it looks like with the filters applied:

On the left we have the plain MovieClip - just a blue square. In the centre is the same MovieClip but with our drop shadow filter applied to it through ActionScript. And on the right is the blue square again, but this time with a blur filter applied to it.

First we'll look at how to apply the drop shadow filter. It's quite simple and just a matter of adding in the right parameters. For the sake of simplicity, we've added all the parameters to match the default values by Flash when you choose the filter through the interface. Let's see the code:

And that's all the code we need to add our drop shadow filter to our MovieClip. That sure is a long string of values though. Here's a break down of what they all are, in order obviously:

• distance - this is how far behind the object the shadow is
• angle - the angle the shadow is on: 0 for horizontal, 90 for directly below the object
• color - the hex value of the colour you want the shadow to be
• alpha - this is the opacity of the shadow: 0 to 1
• blurX - the amount of horizontal blur applied to the shadow
• blurY - the amount of vertical blur applied to the shadow
• strength - the strength of the shadow which is a bit different to the opacity
• quality - the quality of the shadow: 1 for low, 2 for medium or 3 for high
• inner - sets whether the shadow is inside the object or outside
• knockout - whether the original object is visible or not
• hidden - essentially hides the object by bringing the shadow in front of it

So in our example we've used the same values as Flash gives as default when you choose a drop shadow filter through the interface.

We only need three lines of code to get the filter working. The first is to import the filter library so we can access it through ActionScript. The second line is where we declare our filter, and set up all the values which will dictate the attributes of our filter. Out filter is called fltDropShadow. And our third line simply adds the filter to our MovieClip with the instance name of my_mc_dropshadow.

Now let's take a look at the ActionScript we use to make our blur filter - the MovieClip on the right side of the example above.

This time it's even easier as we have less parameters to deal with.

Again we have to import the filter, this time the BlurFilter.

Next we declare our filter. We only need three parameters:

• blurX - the amount of horizontal blur
• blurY - the amount of vertical blur
• quality - the quality of the blur: 1 for low, 2 for medium or 3 for high

With our fltBlur declared, and Flash's default values put in, we just need to add our filter to our my_mc_blur MovieClip.

Let's take a look at what all this code looks like together, as we've used in our example:

And that's all there is to it. We recommend you have a play with these filters, and change the values to see the effect it has on the output. When you're confident with these two, have a play with other filters in the library.

Adding filters with ActionScript it easy.

As always, you can download the source code we used for this example: filters_in_actionsript.zip.

ferrari_chris