How To Apply filters with AS3

The DropShadowFilter class lets you add a drop shadow to display objects. The shadow algorithm is based on the same box filter that the blur filter uses. You have several options for the style of the drop shadow, including inner or outer shadow and knockout mode. You can apply the filter to any display object (that is, objects that inherit from the DisplayObject class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects.

The GlowFilter class lets you apply a glow effect to display objects. You have several options for the style of the glow, including inner or outer glow and knockout mode. The glow filter is similar to the drop shadow filter with the distanceangle properties of the drop shadow filter set to 0. You can apply the filter to any display object (that is, objects that inherit from the DisplayObject class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects.

The use of filters depends on the object to which you apply the filter:

• To apply filters to display objects use the filters property (inherited from DisplayObject). Setting the filters property of an object does not modify the object, and you can remove the filter by clearing the filters property.
• To apply filters to BitmapData objects, use the BitmapData.applyFilter() method. Calling applyFilter() on a BitmapData object takes the source BitmapData object and the filter object and generates a filtered image as a result.

If you apply a filter to a display object, the value of the cacheAsBitmap property of the display object is set to true. If you clear all filters, the original value of cacheAsBitmap is restored.

This filter supports Stage scaling. However, it does not support general scaling, rotation, and skewing. If the object itself is scaled (if scaleX and scaleY are set to a value other than 1.0), the filter is not scaled. It is scaled only when the user zooms in on the Stage.

A filter is not applied if the resulting image exceeds 2880 pixels in width or height. If, for example, you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the limit of 2880 pixels.

In this Flash actionscript 3.0 tutorial you will see how to apply some filters like glow and dropshadow to an object with a mouse click in actionscript, using an eventlistener.

The first thing we need to do is prepare a movieclip, so make some object to apply this effect to I did a blue ball as you can see above. Then right click it and convert it to a movieclip.

Now go to the properties panel and give it an instance name I named mine “ball”.

That’s all we need to do on the stage so open the actionscript panel and we are ready to do some actionscripting, I have made all the description text inline with the code, so you can just copy and paste the code into your own flash project and it should work.

All comments are with “//” so they wont interrupt the code in flash.

//First we declare two filter instances one glowfilter and naming it "filt"
//the other is a dropshadow filter and we name it "filt_shadow"
var filt:GlowFilter = new GlowFilter;
var filt_shadow:DropShadowFilter = new DropShadowFilter;

//here we add some properties to the two filters, the glow filter we give a color.
filt.color = 0xFF0000;

//and how much it should blur.
filt.blurX = 7;
filt.blurY = 7;

//then the dropshadow filter, also how much it should blur on the object.
filt_shadow.blurX = 4;
filt_shadow.blurY = 4;

//and finally an alpha, the alpha goes from 1 to 0, 1 being fully visible and 0 is transparent, then of cause .5 is just in between.
filt_shadow.alpha = .4;

//here we add two eventlisteners to the ball, to listen to when the mouse button is down and when its released again,
//if the mouse is down we call the function "dragMovie" and if the mouse is up we call the "dropMovie".
ball.addEventListener(MouseEvent.MOUSE_DOWN, dragMovie);
ball.addEventListener(MouseEvent.MOUSE_UP, dropMovie);

//this is the dragMovie function
function dragMovie(event:MouseEvent):void
{
    //tells flash to start dragging the object we refer to.
    this.startDrag();
    //this line adds our two filters to the object, notice we use [ ] and not ( ), also separate the two filters by a comma.
    this.filters = [filt,filt_shadow];
}

//this is the dropMovie function.
function dropMovie(event:MouseEvent):void
{
    //tells flash to stop dragging the object.
    this.stopDrag();
    //setting the filters to none.
    this.filters = [];
}

I hope you can see how easy it actually is to use actionscript when we break down the code into separate lines.