ClickPopMedia » Filters

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

Cool Rollover Effects with Filters

Paul — Wed, 28 May 2008 05:15:51 +0000

Above is a little example menu I made for a fake game called “Top Secret.” Don’t expect a game to start when you click on the Play button. Instead, when you click a button you will get a little menu to change the rollover effects of said button.

What I’m going to be talking about for the next… however long you read this, is how to recreate these cool effects for your own projects. Hopefully you will come up with some better ideas for using filters then just rollover effects.

Setting Up The Example:
I simply typed all the text you see using whatever font seemed nice. I then selected each TextField and broke them apart by pressing Ctrl+B twice. After making each button into a MovieClip and giving them appropriate instance names (i.e. the Play button has a name of “play_mc” and you can see this in the popup menu) I felt like it was high time to make some cool rollover effects!

Working w/ The Code:
I’m just going to talk about the one filter here, since the others are all pretty much the same.

To make a blur effect we need to create a new AS class file (one for each button). We are going to use Tweens, Filters, Events, and we are extending a MovieClip, so we need to import the apropriate library classes for those:

import flash.display.*;
import flash.events.*;
import flash.filters.*;
import fl.transitions.*;
import fl.transitions.easing.*;

The star in flash.events.*; just means “all of them” and it’s a quick way of importing lots of stuff at once.

Start out with making and applying our filter to get an idea of what we want:

blur = new BlurFilter(8, 4, 1); //blurX, blurY, quality
this.filters = [blur];

This is the default value/filter you see before you change any settings in my example movie above.

The filters property that I’m setting in the above code is an Array property of any DisplayObject (including Sprites, MovieClips, and any other children thereof). That is why I need the square brackets, because it’s an Array.

With the filter in place we need to check for our MOUSE_OVER and MOUSE_OUT events and tween the blur filter.

A Tween object can change any Number property of almost any object over time using easing functions. To read more on Tweens you can check out Intro to ActionScript 3.0 Tweening.

protected var blurX_tw:Tween;
protected var blurY_tw:Tween;

public function /*CONSTRUCTOR*/() {
this.addEventListener(MouseEvent.MOUSE_OVER, Over);
this.addEventListener(MouseEvent.MOUSE_OUT, Out);

blurX_tw = new Tween(blur, "blurX", Regular.easeInOut, 8, 8, 1);
blurX_tw.addEventListener(TweenEvent.MOTION_CHANGE, updateBlurFilter);
blurY_tw = new Tween(blur, "blurY", Regular.easeInOut, 4, 4, 1);
blurY_tw.addEventListener(TweenEvent.MOTION_CHANGE, updateBlurFilter);
}
protected function updateBlurFilter(e:TweenEvent):void {
this.filters = [e.currentTarget.obj];
}
protected function Over(event:MouseEvent):void {
blurX_tw.continueTo(0, 10);
blurY_tw.continueTo(0, 10);
}
protected function Out(event:MouseEvent):void {
blurX_tw.continueTo(8, 15);
blurY_tw.continueTo(4, 15);
}

Ah! Well there we go. We now have a tween that effects our X&Y blur. Notice that we have an event listener on those two tweens for TweenEvent.MOTION_CHANGE. This is because the blur filter that we are tweening is NOT the filter that is on our MovieClip. So for every step that the tween changes the blur values, we need to reapply the filter to our Button.

I’m sure you have noticed that I am making most of my functions and variables protected. This is because protected is just like private, but private will not be inherited by child classes and protected will. I want to keep inheritance because this way I can (and have) make a base class with all my effects and just have my button classes extend that base.

If you download the source for my example movie HERE, you will notice that I have almost all my code within the Rollover class and all my button classes are extending that one.

Once again, you can download the source for this tutorial and example movie here: TopSecret Example Source Code (ZIP – 958 KB)

If you are interested in some of the components I used or want to know more about working with colors, let me know in a comment and maybe I will make a separate tutorial on them.