Animated drop shadow

July 20th, 2009 in Flash

Let’s see how to add an animated dropshadow filter to a Movie clip with actionscript 3.

1. Create a new flash file (Actionscript 3.0) and save it as AnimateShadow.fla.

2. Rename ‘layer1′ to ‘plane’. Import a png file of a plane on the stage. Convert it into a movie clip and set its instance name to plane_mc.

3. Create a new ‘actions’ layer. With its first frame selected, open the actions panel.

4. First, let’s declare a drop shadow filter and set its properties.
To help you to decide what values to set to the properties of the DropShadowFilter, you can open the filters panel. Add a DropShadow filter to the plane and play with the values until you get what you desire.

Screenshot

Now remove the filter that you’ve just applied with the filters panel as all happens in the code.
In the code, set the filter property with your values :

var shade:DropShadowFilter = new DropShadowFilter();
shade.color = 0x333333;
shade.blurX = 0;
shade.blurY = 0;
shade.angle = 90;
shade.distance = 120;
shade.alpha = .5;

5. Next add an ENTER_FRAME event listener to the stage so that we can animate the plane and its shadow :

stage.addEventListener(Event.ENTER_FRAME, animateShadow);

6. To finish we write the animateShadow function. First we increment the x position of the plane by 5, then we modify the values of the property of the DropShadowFilter by increasing its blurX and blurY properties. Finally, we apply the filter to the plane_mc movie clip by setting the plane_mc’s filters properties to an array that contains the ’shade’ filter. (The filters properties holds an array as we can apply silmutaneous filters to the same object).

function animateShadow(event:Event):void{
	plane_mc.x += 5;
	shade.blurX += 0.2;
	shade.blurY += 0.1;
	plane_mc.filters = [shade];
}

7. Here’s the final code. Test the movie to see it in action.

var shade:DropShadowFilter = new DropShadowFilter();
shade.color = 0x333333;
shade.blurX = 0;
shade.blurY = 0;
shade.angle = 90;
shade.distance = 120;
shade.alpha = .5;

stage.addEventListener(Event.ENTER_FRAME, animateShadow);

function animateShadow(event:Event):void{
	plane_mc.x += 5;
	shade.blurX += 0.2;
	shade.blurY += 0.1;
	plane_mc.filters = [shade];
}