Subscribe By RSS | Email

Animated drop shadow

July 20th, 2009 in Flash | 6 Comments

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.

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];
}

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!