Playing with Light

Large.

You probably know how nifty Flash's built-in filters are. Dropshadows, glows, bevels, oh my! BUT, rather than activating these filters with the properties panel in Flash, why not take a peek under the hood and tweak them?

That's exactly what's going on up there. You see, each of those above green shapes is constantly redrawing its shadow relative to the yellow light source. It's actually a pretty easy technique to use, and it's a handy tool for faking light sources in your games and animations.

To actually use a filter in Flash, you'll first need to import it (import flash.filters.* where * is a wildcard OR the name of the specific filter you want). From there, you can just set up a var placeholder for the filter. Something like:

var myFilter;

Then we'll set that "myFilter" to a the filter we want. So...

myFilter = new DropShadowFilter(1,45,0,1,4,4,1,1,false,false,false);

What's up with all those numbers after the DropShadowFilter? Well, those are what we call arguments, and those are the specific parameters of the dropshadow. Flash has a nice built-in assistance tool that will fill you in on what each is. The ones I specifically messed with for the above .swf are the first two (1 and 45, the distance of the shadow and angle of the shadow, respectively).

Now at this point, it's important to note that the myFilter = new DropShadowFilter line is in the ENTER_FRAME of my movie clip - things will be changing, and I want to check for those changes every frame.

Let's take a look at MY version of the above line...
myFilter = new DropShadowFilter(distance*.05,newAngle,0,1,4,4,1,1,false,false,false);

The difference, of course, are the first two values. Those don't mean much without the backing code, so...
diffX = x - LightSource.main.newLight.x;
diffY = y - LightSource.main.newLight.y;
var distance = Math.sqrt(diffX * diffX + diffY * diffY);
newAngle = Math.atan2(diffY,diffX) * 180 / Math.PI;


What's going on? Well, we're first figuring the distance between the green object and the light source (subtract the light source's position from the green object's position for both axes). With our good buddy Pythagoras, we know the distance between two points is equal to the square root of the difference on each axis squared. Uh...C = the square root of A^2+B^2. Trust me. 


So there's the distance of the dropshadow! Note that I multiplied it by .05. That's because I wanted to keep the shadow from getting too crazy long. 


Now the meat - the ANGLE - of the dropshadow. The line starting with newAngle is where the magic happens. Using some trigonometric witchcraft known as the arctangent, Flash can calculate the angle between two objects. We just need the difference in positions (already got that, remember? diffX and diffY). And since Flash sees fit to deal with trig in radians, but rotation in DEGREES, we need to convert it. Easily done. Just multiply by 180/pi. Huzzah! Trig!