Video Training – Tutorials

Beginners Flash Tutorial – Filters in AS3

December 11, 2008 at 2:42 pm Leave a comment

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Beginners Flash CS3 Training Video

Beginners Flash Tutorial – Filters in AS3

Filters in Actionscript 3.0
In this beginners Flash tutorial we’ll create some filters using Actionscript 3.0. The power of Actionscript 3 allows us to create powerful filter effects and add them to any object. If you’re familiar with blend modes in graphic applications such as Photoshop you’ll recognise some of the blend modes that we’ll be looking at, if your not we’ll go through and explain exactly what each type of effect does. We’ll look at four common filters the drop shadow filter, the bevel filter, the blur filter and the glow filter. We’ll add each of these filters to four separate rectangles and go through their different properties. By the end of this Flash tutorial you will have a fundamental understanding of how to write ActionScript code to create and apply filters to dynamically created graphics and objects.

First we’ll briefly go through creating a basic rectangle for our filter effects;

We create a new Sprite object called filterEffect, this Sprite object will hold all our graphic information. A Sprite is just a movie-clip without a timeline; think of it as a container.

var filterEffect:Sprite = new Sprite();

Using the lineStyle() method we declare the outline properties of the rectangle. This method has 3 parameters available to it, thickness of the line measured in pixels, colour of the line measured in hexadecimal format and finally alpha scale that’s measured in percent (1 = 100%, .25 = 25%). In our code below we have a 2px black line with a 100% alpha property. We assign this method to graphics property of the Sprite object and assign the graphics property to our filterEffect Sprite object.

filterEffect.graphics.lineStyle(2,0x000000,1);

We use the beginFill() method to choose the colour of the rectangle. The beginFill() method has 2 parameters colour and alpha scale, for our code we’ve used a shade of red and set the alpha scale to 90%.

filterEffect.graphics.lineStyle(2,0x000000,1);

Now that we have the colour and outline properties it’s time to draw out the rectangle. Drawing the rectangle itself is pretty straight forward, using the drawRect() method we set the properties we require for the rectangle. The drawRect() method requires 4 parameters, X and Y values, and width and height. The X and Y values indicate the position of where you want to draw out the rectangle, and the width and height determine the size of the rectangle. In our code we’ve positioned the rectangle to a position of 50px by 50px and set the size to 100px by 100px.

filterEffect.graphics.drawRect(50,50,100,100);

Using the X and Y properties we set the position of the Sprite object on the stage to 50px respectively.

filterEffect.x = 50;
filterEffect.y = 50;

Bevel Filter Effect
The first filter we’ll look at is the bevel filter, using the bevel filter gives objects a three dimensional effect. The bevel class allows us to customize the bevel by changing angle, blur and placement properties of the bevel. Below we’ll create a bevel filter and add it to the rectangle we have just created.

First thing we need to do is create a new bevel filter object. We’ll name this bevel object “bevel”. We can manipulate the bevel by adding some parameters; there are a number of different parameters available to us shown below. We’ll be focusing on distance and angle, the distance measures how far or much the bevel gives off a 3d effect and the angle measures the angle of the actually bevel itself. For our code below we’ve given the bevel a distance of 4.0 and a 45-degree angle.

Parameters Available

(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0×000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurry:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = “inner”, knockout:Boolean = false)

var bevel:BevelFilter = new BevelFilter();
  bevel.distance = 4.0;
  bevel.angle = 45;

We want to make sure that our Sprite object is using the Sprite object is using the correct filters, that means adding the “bevel” filter we’ve just created.

filterEffect.filters = [bevel];

All there’s left to do is add everything to the display list so it’s visible when the file is previewed. Using the addChild() method we add our filterEffect Sprite object to the stage.

addChild(filterEffect);

Bevel Filter Code in Full

var filterEffect:Sprite = new Sprite();
var bevel:BevelFilter = new BevelFilter();
bevel.distance = 4.0;
bevel.angle = 45;
filterEffect.filters = [bevel];
filterEffect.graphics.lineStyle(2,0x000000,1);
filterEffect.graphics.beginFill(0x3174d0,.9);
filterEffect.graphics.drawRect(50,50,100,100);
filterEffect.x = 50;
filterEffect.y = 50;
addChild(filterEffect);

Drop Shadow Filter
We’ve already covered most the code above means, so for the next few examples we’ll just be looking at the code that we haven’t already looked at. In this example we’ll be creating another common filter effect, the drop shadow filter. In the example below we’ll create a new drop shadow object and alter some of its properties to get the effect we want.

Parameters Available

(distance:Number = 4.0, angle:Number = 45, highlightColor:Uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:Uint = 0×000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurry:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = “inner”, knockout:boolean = false)

Just like in the previous example we create a new filter effect called dropShadow, in this case it’s a DropShadowFilter. We then add that filter effect to our Sprite object.

var dropShadow:DropShadowFilter = new DropShadowFilter();

dsEffect.filters = [dropShadow];

We’ll give our dropShadow some properties to alter the drop shadow effect. The first property we’ll give it is distance; the distance property alters the offset distance for the shadow, in pixels. The default value is 4. In our code we’ve given it a value of 50px.

dropShadow.distance = 50;

At the moment the drop shadow doesn’t look that realistic so we’ll add some blur to it using the blurX and blurY properties. The blurX and blurX properties dictate the amount of horizontal and vertical blur that’s added, valid values are 0 to 255.0 and the default value is 4.0. In our code below we’ve given the horizontal and vertical blur a value of 10.

dropShadow.blurY = 10;
dropShadow.blurX = 10;

Using the alpha property we’ll change the alpha scale of the drop shadow filter to 60%.

dropShadow.alpha = .6;

Drop Shadow Filter Code in Full;

var dsEffect:Sprite = new Sprite();
var dropShadow:DropShadowFilter = new DropShadowFilter();
dsEffect.filters = [dropShadow];
dropShadow.distance = 50;
dropShadow.blurY = 10;
dropShadow.blurX = 10;
dropShadow.alpha = .6;
dsEffect.graphics.lineStyle(1,0x000000);
dsEffect.graphics.beginFill(0x3174d0,.9);
dsEffect.graphics.drawRect(50,50,100,100);
dsEffect.graphics.endFill();
dsEffect.x = 200;
dsEffect.y = 50;

addChild(dsEffect);

Glow Filter Effect
The GlowFilter class lets us apply a glow effect to objects. In our example we’ll use the color and alpha properties to get the effect we want.

Parameters Available

(color:uint = 0xFF0000, alpha:Number = 1.0, blurX:Number = 6.0, blurry:Number = 6.0, strength:Number = 2, quality:int = 1, inner:Boolean = false, knockout:Boolean = false)

Like with the previous examples we create a new filter object and add it to our Sprite. In our code we create a new GlowFilter object called glow

var glow:GlowFilter = new GlowFilter();

  gEffect.filters = [glow];

We’ll give our GlowFilter 3 properties color, alpha and inner. Lets take a look a closer look at these 3 properties.

The color property indicates the colour of the glow in hexadecimal format.

glow.color = 0xFFFFCC;

The alpha scale we’ve already discussed earlier, we’ve given it an alpha scale of 80%.

glow.alpha = .8;

The inner property specifies whether the object has a knockout effect, this property has 2 values, true or false. True makes the object’s fill transparent and reveals the background colour of the document and false would indicate no knockout effect. In our code we’ve given it a value of false.

glow.inner = false;

Glow Effect Filter Code in Full;

var gEffect:Sprite = new Sprite();
var glow:GlowFilter = new GlowFilter();
gEffect.filters = [glow];
glow.color = 0xFFFFCC;
glow.alpha = .8;
glow.inner = false;
gEffect.graphics.lineStyle(1,0x000000);
gEffect.graphics.beginFill(0x3174d0,.9);
gEffect.graphics.drawRect(50,50,100,100);
gEffect.graphics.endFill();
gEffect.x = 350;
gEffect.y = 50;
addChild(gEffect);

Blur Filter Effect
The blur effect allows us to add a simple blur to any object. This can be good for creating navigation hovers or used in cartoon animations for extra effect.

Parameters Available

(blurX:Number = 4.0, blurry:Number = 4.0, quality = 1)

Again we go through the same process of first creating a new BlurFilter object and assigning it to the Sprite object.

var blur:BlurFilter = new BlurFilter();
bEffect.filters = [blur];

We’ll use the blurX and blurY properties to change the horizontal and vertical blur of the object. Both properties accept value between 0 and 255, for our code below we’ve given both a value of 10.

blur.blurX = 10;
blur.blurY = 10;
Blur Filter Code in Fullvar bEffect:Sprite = new Sprite();
var blur:BlurFilter = new BlurFilter();
bEffect.filters = [blur];
blur.blurX = 10;
blur.blurY = 10;
bEffect.graphics.lineStyle(1,0x000000);
bEffect.graphics.beginFill(0x3174d0,.9);
bEffect.graphics.drawRect(50,50,100,100);
bEffect.x = 50;
bEffect.y = 200;
addChild(bEffect);
We hoped you enjoyed this ActionScript / Flash Tutorial.

Entry filed under: ActionScript. Tags: actionscript 3 tutorial, Drawing with ActionScript, Flash Tutorial.