Tutorial:Filters (AS3)

From Anipedia

Matt here again.

Today, I'm going to teach you about filters on AS3. Filters are a really versatile part of Flash and were introduced in Flash 8.

var blur:BlurFilter = new BlurFilter(4, 4, 3);
var dropShadow:DropShadowFilter = new DropShadowFilter(0, 90, 0x000, .5, 50, 50, 2, 3, false, false, false);
var glow:GlowFilter = new GlowFilter(0x00FF00, .75, 25, 25, 1, 3, false, true);
var button:Sprite = new Sprite();
button.graphics.beginFill(0xFF0000);
button.graphics.drawCircle((stage.stageWidth/2) - button.width, (stage.stageHeight/2) - button.height, 100);
button.graphics.endFill();
button.filters = [blur, dropShadow];
addChild(button);

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	button.filters = [glow];
}

var button:Sprite = new Sprite();
button.graphics.beginFill(0xFF0000);
button.graphics.drawCircle((stage.stageWidth/2) - button.width, (stage.stageHeight/2) - button.height, 100);
button.graphics.endFill();
button.filters = [blur, dropShadow];
addChild(button);

Anyways, make a circle with any fill. Making a circle is not different than making a rectangle. The only difference is the last parameter specifies radius instead of height and width. You'll notice I added some code to the x and y values to make it centered. Go ahead and try screwing around with the radius. It'll stay centered.

var blur:BlurFilter = new BlurFilter(4, 4, 3);

Next, I added a blur filter. Filters in AS3 are finicky because they want a lot of parameters before they'll show up. Here, the 3 arguments are blurX, blurY, and quality. Quality is a weird one because it's an integer, and not a string. 1 means low, 2 means medium, and 3 means high.

var dropShadow:DropShadowFilter = new DropShadowFilter(0, 90, 0x000, .5, 50, 50, 2, 3, false, false, false);

The next filter added was a drop shadow filter. You can see how complex the code is. But it's really no different than the actual palette inside the program. A lot of the options are the same. The parameters here are distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, and hide object. The last three are booleans, so they have to be true or false.

var glow:GlowFilter = new GlowFilter(0x00FF00, .75, 25, 25, 1, 3, false, true);

I then added a glow filter. The parameters are color, alpha, blurX, blurY, strength, quality, inner, and knockout.

button.filters = [blur, dropShadow];

You have to add your filters to an array attached to the object. In this case, I only attached the first two I created.

button.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick (evt:MouseEvent):void{
	button.filters = [glow];
}

I then created a function that changed up the filters when the button gets clicked. The glow replaces both the drop shadow and blur filters. Since I had knockout set to true, the fill in the circle is hidden.

• Click on "Player" to view

-Matt