Previous Project | Next Project

A Demo of Most of The Filters and How to Use Gradients in AS3

Click on the button below to cycle through most of the filters available in AS3. I also included some code that is useful for making shiny objects using gradients.

An example of using the blur filter can be found in the Psychedelic Stage Light demo.

Source Code


package {

import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.filters.*;
import flash.geom.Matrix;
import flash.events.MouseEvent;


public class Filters extends Sprite {


var b : Sprite = new Sprite(); // button
var t : TextField = new TextField; // text on button
// define our filters
var f_glow : GlowFilter = new GlowFilter();
var f_shadow : DropShadowFilter = new DropShadowFilter();
var f_bevel : BevelFilter = new BevelFilter();
var f_blur : BlurFilter = new BlurFilter();
var f_colorMatrix : ColorMatrixFilter =
new ColorMatrixFilter([1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]);
var f_convolution : ConvolutionFilter =
new ConvolutionFilter(3, 3, [0.5, 1, 0.5, 1, 0, 1, 0.5, 1, 0.5], 3);
var f_gradientBevel : GradientBevelFilter =
new GradientBevelFilter(5, 225, [0xFFFFFF, 0xCCCCCC, 0x000000], [1, 0, 1], [0, 128, 255], 8, 8, 2, 1, BitmapFilterType.INNER, true);
var f_gradientGlow : GradientGlowFilter =
new GradientGlowFilter(0, 45, [0xFFFFFF, 0xFF0000, 0xFFFF00, 0x00CCFF], [0, 1, 1, 1], [0, 63, 126, 255], 50, 50, 2.5, 1, BitmapFilterType.OUTER, false);


var n : int = 0;

function Filters() {

// setup the button and event listener
makeShinyButton(0x00550B, 0x50FE65, 150, 50);
b.x = (stage.stageWidth - b.width) / 2;
b.y = (stage.stageHeight - b.height) / 2;
addChild(b);
b.addEventListener(MouseEvent.MOUSE_DOWN, changeFilter);
}

function changeFilter(e : MouseEvent) {

// apply a new filter
switch (n) {
case 0: b.filters = [ f_glow ]; t.text = "Glow"; break;
case 1: b.filters = [ f_shadow ]; t.text = "Drop Shadow"; break;
case 2: b.filters = [ f_bevel ]; t.text = "Bevel"; break;
case 3: b.filters = [ f_blur ]; t.text = "Blur"; break;
case 4: b.filters = [ f_colorMatrix ]; t.text = "Colour Matrix"; break;
case 5: b.filters = [ f_convolution ]; t.text = "Convolution"; break;
case 6: b.filters = [ f_gradientBevel ]; t.text = "Gradient Bevel"; break;
case 7: b.filters = [ f_gradientGlow]; t.text = "Gradient Glow"; break;
default: n = -1; b.filters = null; t.text = "Click Me"; break;
}
n++;
t.x = (b.width - t.width) / 2;
}

function makeShinyButton(c1 : int, c2 : int, w : int, h : int) {

var g : Graphics = b.graphics;
//Create a Matrix instance and assign the Gradient Box
var matr : Matrix = new Matrix();

// draw a solid blue rectangle first
g.beginFill(c1);
g.drawRoundRect(0, 0, w, h, h);

// draw a gradient going from dark to light
matr.createGradientBox(w, h, Math.PI / 2, 0, 0 );
g.beginGradientFill(GradientType.LINEAR, [c1, c2], [1, 1], [0, 255], matr, SpreadMethod.PAD);
g.drawRoundRect(2, 2, w-4, h-4, h-4);

// add a white gradient on the top for "bubble" effect
matr.createGradientBox(w * 0.88, h * 0.4, Math.PI / 2, 0, 0);
g.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [1, 0.02], [0, 255], matr, SpreadMethod.PAD);
g.drawRoundRect(w * 0.06, 4, w * 0.88, h * 0.4, h * 0.4);

t.defaultTextFormat = new TextFormat(null, 20, 0x000000);
t.text = "Click Me";
t.autoSize = TextFieldAutoSize.LEFT;
t.y = (b.height - t.height) / 2;
t.x = (b.width - t.width) / 2;
t.selectable = false;
b.addChild(t);
}

}

}