Realistic Shadow Effects using Filters

Paul — Wed, 11 Jun 2008 15:37:42 +0000

I have another simple but neat, little tutorial here on Flash CS3 filters. This time I’m not using Tweens at all. Our effect is going to use the MouseEvent.MOUSE_MOVE event to create the illusion of a light source coming from our cursor.

To begin with we are going to make our Shadows class. This class is going to extend MovieClip, have a DropShadowFilter pre-applied to it and a public method to change the drop shadow filters distance and angle.

public class Shadows extends MovieClip {
public static var All:Array;

protected var txtF:TextField;
protected var drop:DropShadowFilter;
protected var distance:Number;
protected var angle:Number;
protected var dropAlpha:Number;
protected var blurX:Number;
protected var blurY:Number;

public function Shadows() {
if(Shadows.All == null) Shadows.All = new Array();

distance = 0;
angle = 0;
dropAlpha = 1;
blurX = 0;
blurX = 0;
drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
Shadows.All.push(this);
}

public function lightSource(X:Number, Y:Number):void {
var dx:Number = (this.x + (this.width/2))-X;
var dy:Number = (this.y + (this.height/2))-Y;

angle = (180 * Math.atan(dy/dx)) / Math.PI;
if(dx < 0){
angle += 180;
}

distance = Math.sqrt(dy*dy + dx*dx)/10;
dropAlpha = 10/distance;
blurX = Math.abs(dx/20);
blurY = Math.abs(dy/20);

drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
}
}

I hope you can see what is going on in the code. I’m simply setting all my variables equal to 0 or 1, depending on what it’s for, and applying my filter in the constructor. Also note that I’m saving all my objects in a static array. This makes it easier to call all the lightSource() methods at once in a for loop later.

In the lightSource() method we have a little bit of math that you might be unfamiliar with.
My variables dy and dx stand for distance y or x and I’m setting them equal to the distance from the point given and the center of my ShadowObject.

angle is going to be the angle of the drop shadow and it needs to be in degrees. Math.atan() is called arc-tangent in the Trigonometry world and it gives your the value of the angle opposite the Y side of a right triangle in radians. If that doesn’t make sense, just know that it’s giving me that angle I need, but in the wrong units. I convert it by multiplying by 180 and dividing by PI. Math.atan() only returns a value between -pi/2 and pi/2 (-90 to 90 degrees) which only covers half a circle, so I have to check if we actually need the other side. And, that’s what my if() statement is for.

distance is calculated using the Pythagorean theorem C^2 = A^2 + B^2 (and then divided by 10 otherwise it’s just too much).

DropAlpha, blurX, and blurY are all set pretty clearly (blur has to be positive, thus the Math.abs() or absolute value).

Finally our function creates a new drop filter with our new values and applies it to our Shadow object.

Except for trying to remember the math involved, this one has been pretty easy so far, huh? Well then, let’s try using it in a project!

var str = new String("ClickPop");
var str2 = new String("Media");
var letter:Shadows;
var newX:Number = 30;
var overLetter:TextField;

for(var i=0; ilength; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 80;
overLetter = new TextField();
overLetter.text = str.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}
newX = 80;
for(i=0; ilength; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 180;
overLetter = new TextField();
overLetter.text = str2.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}

function changeLight(event:MouseEvent):void {
for(var i=0; iAll.length; i++) {
Shadows.All[i].lightSource(stage.mouseX, stage.mouseY);
}
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, changeLight);

So, there it is. I’m adding each letter to a different Shadow object so that their shadows move independently. I then update all the shadow light sources to the mouse’s X and Y coordinates every time the mouse moves. SO EASY!!

I have a few more ideas for cool effects that you can make with filters and I will probably post about them soon.

Download the Source Code for the example used in this post here: ShadowsSource.zip

ClickPopMedia » DropShadowFilter

Realistic Shadow Effects using Filters