Filters

Filters are bitmapped effects that can be applied to any display object. They can be applied in the Flash IDE via the Filters panel or via ActionScript. Since this book is about ActionScript, Ill limit the discussion to the scripted methods of applying filters. The following filters are included in Flash 8:

• Drop shadow

• Blur

• Glow

• Bevel

• Gradient bevel

• Gradient glow

• Color matrix

• Convolution

• Displacement map

The convolution and displacement map filters can be applied only by ActionScript; there is no way to access those filters in the IDE.

Im not going to go into the details of each and every filter. They are documented in the Flash 8 help files, and an entire chapter (if not a whole book) could be devoted to them. But since I have enough material to cover in this book as it is, Im just going to give you an overview of their use and a couple of examples.

Creating a filter

Filters are created by using the new operator and the name of the filter, passing in the required parameters. For example, to make a blur filter, one of the simplest, you would say this:

 var blur:BlurFilter = new BlurFilter(5, 5, 3); 

In this case, the parameters are xBlur , yBlur , and quality . This example will blur an object 5 pixels on both axes, with a medium-quality blur.

Another thing to realize is that filters are in their own package, called flash.filters . So, you can put this at the beginning of the file:

 import flash.filters.BlurFilter; 

Alternatively, you can create your filter like this:

 new flash.filters.BlurFilter(5, 5, 3); 

If you want to import all the filters in the package, you can use this shortcut:

 import flash.filters.*; 

Now, you can create any type of filter directly.

So now you have a blur filter, but how do you make it blur a particular object?

Any movie clip has a property called filters . This is an array containing all the filters that have been applied to that object (whether they were applied by code or in the IDE), since any object can have multiple filters applied. You just need to get your blur filter into that array. Ideally, this would be as simple as applying a basic array operation, push , and saying myMC.filters.push(blur); . But alas, its not that easy. If no filters have been applied to an object, the filter property will be undefined , so there will be no array to push anything onto. And even if there is already an array there, Flash does not listen for changes to the filters array and wont take note of the change until a whole new array is assigned to filters .

If you know that the object doesnt have any filters applied, or you are willing to overwrite them, you can just make a brand-new array, stick your blur filter in it, and assign that new array to the filters property. Lets try that. Create a new document, and then create a movie clip with some graphics in it. I made another star this time, with the instance name star . (You can find my example in ch04_11.fla .) Now put the following code on the timeline:

 import flash.filters.BlurFilter; var blur:BlurFilter = new BlurFilter(5, 5, 3); var myFilters:Array = new Array(); myFilters.push(blur); star.filters = myFilters; 

Voila! You have a blurry star. You can shortcut this a little:

 import flash.filters.BlurFilter; var blur:BlurFilter = new BlurFilter(5, 5, 3); var myFilters:Array = [blur]; // makes new array with blur as element 0 star.filters = myFilters; 

Or shortcut it a lot:

 star.filters = [new flash.filters.BlurFilter(5, 5, 3)]; 

As long as you are creating a new array, putting your filter in it, and applying it to the filters property, Flash will be happy.

But what if you already have a filter applied and want to keep it, or worse yet, you arent sure if there are any filters? Heres the logic: First check if filters is undefined . If so, create a new array. If not, just grab the existing array, which will contain any existing filters. Then push your filter onto it and assign it back to filters . Heres how that looks:

 import flash.filters.BlurFilter; var blur:BlurFilter = new BlurFilter(5, 5, 3); if(star.filters == undefined) {    star.filters = new Array(); } var oldFilters:Array = star.filters; oldFilters.push(blur); star.filters = oldFilters; 

Try applying a filter to the star in the IDE. Youll see that both filters are applied.

Animating filters

Now that you know the basics of how to use filters with ActionScript, lets apply what youve already learned to make a really cool effect: an animated drop shadow. For this effect, use the following code (which you can find in ch04_12.fla ):

 import flash.filters.DropShadowFilter; var star:MovieClip; var starFilter:DropShadowFilter; init(); function init() {       starFilter = new DropShadowFilter();       starFilter.blurX = 20;       starFilter.blurY = 20; } function onEnterFrame(Void):Void {       var dx:Number = star._x - _xmouse;       var dy:Number = star._y - _ymouse;       starFilter.angle = Math.atan2(dy, dx) * 180 / Math.PI;       starFilter.distance = Math.sqrt(dx*dx + dy*dy) * .1;       star.filters = [starFilter]; } 

The class first stores a reference to the star symbol and the main filter. The init function creates the filter and sets some of its properties. The onEnterFrame function calculates the angle and distance from the mouse to the star, using trig that was covered in Chapter 3 (make sure the registration point of your object is centered for this one). It uses these to set the angle and distance properties of the drop shadow filter, and applies that filter to star . This turns out to be pretty simple. In fact, when I finished writing the code for this effect, I was surprised at just how short it turned out to be.