Using the drop shadow filter

The DropShadowFilter class lets you add a drop shadow to a variety of objects in Flash. The shadow algorithm is based on the same box filter that the blur filter uses (see Using the blur filter). Several options are available for the style of the drop shadow, including inner or outer shadow and knockout mode.

For more information on the drop shadow filter, see DropShadowFilter (flash.filters.DropShadowFilter) in the ActionScript 2.0 Language Reference.

The following procedure uses the Drawing API to draw a square on the Stage. When you move the mouse pointer horizontally along the Stage, this code modifies the distance from the square that the drop shadow appears, whereas moving the cursor vertically modifies how much the drop shadow blurs.

To use the drop shadow filter:

Create a new Flash document and save it as dropshadow.fla.

Add the following ActionScript to Frame 1 of the Timeline:

// import the filter classes
import flash.filters.DropShadowFilter;
// create a movie clip called shapeClip
this.createEmptyMovieClip("shapeClip", 1);
// use the Drawing API to draw a shape
with (shapeClip) {
    beginFill(0xFF0000, 100);
    moveTo(0, 0);
    lineTo(100, 0);
    lineTo(100, 100);
    lineTo(0, 100);
    lineTo(0, 0);
    endFill();
}
// position the shape
shapeClip._x = 100;
shapeClip._y = 100;
// click the square, increase shadow strength
shapeClip.onPress = function():Void {
    dropShadow.strength++;
    shapeClip.filters = [dropShadow];
};
// create a filter
var dropShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 0.4, 10, 10, 2, 3);

var mouseListener:Object = new Object();
// create and apply a listener that controls the filter when the mouse moves
mouseListener.onMouseMove = function():Void {
    dropShadow.distance = (_xmouse / Stage.width) * 50 - 20;
    dropShadow.blurX = (_ymouse / Stage.height) * 10;
    dropShadow.blurY = dropShadow.blurX;
    shapeClip.filters = [dropShadow];
};
Mouse.addListener(mouseListener);

The first section of code creates a new movie clip and uses the Drawing API to draw a red square. The second section of code defines a mouse listener, which is called whenever the mouse moves. The mouse listener calculates the drop shadow's distance and level of blurring based on the current x and y positions of the mouse pointer, and reapplies the drop shadow filter. If you click the red square, the drop shadow's strength increases.

Select Control > Test Movie to test the Flash document.

Move the mouse pointer along the x-axis to change the value of the drop shadow's distance, and move the mouse pointer along the y-axis to change the amount of blur applied to the movie clip instance.

You can also create drop shadows and apply them to dynamically loaded images. The following procedure demonstrates how you can load an external image and apply a drop shadow that follows the mouse pointer. The further the pointer moves away from the image's upper-left corner, the more horizontal and vertical blurring is applied to the image.

To create a drop shadow that follows the mouse pointer:

Create a new Flash document and save it as dropshadowmouse.fla.

Add the following ActionScript to Frame 1 of the Timeline:

import flash.filters.DropShadowFilter;
System.security.allowDomain("http://www.helpexamples.com");
var dropShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 0.8, 10, 10, 2, 2);
// Load and position the image on the Stage.
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip):Void {
    target_mc._x = (Stage.width - target_mc._width) / 2;
    target_mc._y = (Stage.height - target_mc._height) / 2;
};
this.createEmptyMovieClip("img_mc", 10);
var img_mcl:MovieClipLoader = new MovieClipLoader();
img_mcl.addListener(mclListener);
img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);

// When mouse moves, recalculate the position of the drop shadow.
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function():Void {
    var p1:Number = img_mc._y - _ymouse;
    var p2:Number = img_mc._x - _xmouse;
    var degrees:Number = Math.atan2(p1, p2) / (Math.PI / 180);
    dropShadow.distance = Math.sqrt(Math.pow(p1, 2) + Math.pow(p2, 2)) * 0.5;
    dropShadow.blurX = dropShadow.distance;
    dropShadow.blurY = dropShadow.blurX;
    dropShadow.angle = degrees - 180;
    img_mc.filters = [dropShadow];
};
Mouse.addListener(mouseListener);

The first section of this code defines a drop shadow instance, loads an external image, and repositions the image at the center of the Stage. The second section of code defines a mouse listener, which you call whenever the user moves the mouse pointer around the Stage. Whenever the mouse moves, the event handler recalculates the distance and angle between the mouse pointer and the upper-left corner of the image. Based on this calculation, the drop shadow filter is reapplied to the movie clip.

Select Control > Test Movie to test the Flash document.

When you run the SWF file, the drop shadow follows the mouse pointer. The closer you move the mouse pointer to the upper-left corner of the image on the Stage, the less of a blur effect is applied to the image. As the mouse pointer moves further from the upper-left corner of the image, the drop shadow effect becomes more apparent.

You can also apply drop shadows to dynamically loaded semitransparent PNG images. In the following procedure, the drop shadow filter is applied only to the solid area of the PNG, not the transparency.

To apply a drop shadow to a semitransparent image:

Create a new Flash document and save it as dropshadowTransparent.fla.

Add the following ActionScript to Frame 1 of the Timeline:

import flash.filters.DropShadowFilter;
System.security.allowDomain("http://www.helpexamples.com");
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip):Void {
    target_mc._x = (Stage.width - target_mc._width) / 2;
    target_mc._y = (Stage.height - target_mc._height) / 2;
    var dropShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 0.5, 10, 10, 2, 3);
    target_mc.filters = [dropShadow];
};
mclListener.onLoadError = function(target_mc:MovieClip):Void {
    trace("unable to load image.");
};
this.createEmptyMovieClip("logo_mc", 10);
var my_mcl:MovieClipLoader = new MovieClipLoader();
my_mcl.addListener(mclListener);
my_mcl.loadClip("http://www.helpexamples.com/flash/images/logo.png", logo_mc);

This ActionScript code uses the MovieClipLoader class to load an image and apply a drop shadow filter when the image is completely loaded from the remote server.

Select Control > Test Movie to test the Flash document.

Flash loads a PNG image with a transparent background. When you apply the drop shadow filter, only the opaque (nontransparent) portion of the image has the filter applied.

Flash CS3