Filters and Gradients

AS3

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.

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);

}

}

}

Languages: ActionScript • Ajax • Assembly • ASP • C • C++ • CSS • DHTML • HaXe • HTML/HTML5 • Java • JavaScript • JSON • jQuery • MySQL • OpenGL • Pascal • PHP • Visual Basic • XML

Software & Frameworks: Adobe Air • Adobe Flash • Android • Audacity • CoolEdit • Dreamweaver • Eclipse • Facebook Integration • FireBug • Flash Builder • FlashDevelop • Flex • Gimp • Illustrator • MacOS • Media Encoder • MS Office • Netbeans • Open Office • Photoshop • phpMyAdmin • TortoiseSVN • Visual Studio • Windows • XAMPP • UNIX