 |
| Applying Filter Effects |
| Return to the Tutorials page |
| |
|
Goal: To apply Glow, Drop Shadow and Blur filters to separate objects using ActionScript 3.0.
Imported classes: flash.display.Sprite, import flash.filters.GlowFilter,
import flash.filters.DropShadowFilter and import flash.filters.BlurFilter
Methods: lineStyle(), beginFill(), endFill(),
moveTo(), lineTo() and addChild()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will recycle the code from Triangles.as to place three triangles on the stage and then apply a different filter
to each triangle.
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it Filters and save it inside the FlasherAS3_PartI
folder. In the Document Class box of the Properties panel, type Filters and then save the changes.
Open a new ActionScript file, name it Filters and then save it inside the Code folder.
You now have fourteen separate files on your computer:
In the FlasherAS3_PartI folder -
LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla, CircleEllipse.fla, Sprites.fla, MovieClips.fla and
Filters.fla.
In the Code subfolder -
LineCurve.as, Triangles.as, RectanglesSquare.as, CircleEllipse.as, Sprites.as, MovieClips.as and Filters.as.
Keep both Filters files open as we will be working with both of them simultaneously.
|
|
Return to Filters.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your
changes.
|
|
Return to Filters.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class Filters extends Sprite
Line 04: {
Line 05: public function Filters()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save the changes.
|
|
This tutorial will require the Sprite, GlowFilter,
DropShadowFilter and BlurFilter classes so let's import them now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.filters.GlowFilter;
Press Return/Enter.
On line 5 type: import flash.filters.DropShadowFilter;
Press Return/Enter.
On line 6 type: import flash.filters.BlurFilter;
Press Return/Enter to add a blank line on line 7.
Place your cursor at the end of line 11 and press Return/Enter.
All of our filter code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's add some filters!
|
|
We need to place three triangle Sprites on the stage. Why re-invent the wheel? Let's recycle some code. The triangle code below was taken from
Triangles.asCode folder.
Beginning on line 12 type the following:
Line 12: var triangle1:Shape = new Shape();
Line 13: triangle1.graphics.lineStyle(2, 0x000000);
Line 14: triangle1.graphics.beginFill(0xFF0000, 1);
Line 15: triangle1.graphics.moveTo(200, 100);
Line 16: triangle1.graphics.lineTo(200, 100);
Line 17: triangle1.graphics.lineTo(275, 225);
Line 18: triangle1.graphics.lineTo(125, 225);
Line 19: triangle1.graphics.endFill();
Line 20: addChild(triangle1);
Line 22: var triangle2:Shape = new Shape();
Line 23: triangle2.graphics.lineStyle(2, 0x000000);
Line 24: triangle2.graphics.beginFill(0x00FF00, 1);
Line 25: triangle2.graphics.moveTo(375, 50);
Line 26: triangle2.graphics.lineTo(375, 50);
Line 27: triangle2.graphics.lineTo(525, 50);
Line 28: triangle2.graphics.lineTo(450, 175);
Line 29: triangle2.graphics.endFill();
Line 30: addChild(triangle2);
Line 32: var triangle3:Shape = new Shape();
Line 33: triangle3.graphics.lineStyle(2, 0x000000);
Line 34: triangle3.graphics.beginFill(0x0000FF, 1);
Line 35: triangle3.graphics.moveTo(275, 375);
Line 36: triangle3.graphics.lineTo(275, 375);
Line 37: triangle3.graphics.lineTo(400, 250);
Line 38: triangle3.graphics.lineTo(100, 350);
Line 39: triangle3.graphics.endFill();
Line 40: addChild(triangle3);
Let's upgrade these Shapes to Sprites while we're at it. Make the following changes:
Line 12: var triangle1:Sprite = new Sprite();
Line 22: var triangle2:Sprite = new Sprite();
Line 32: var triangle3:Sprite = new Sprite();
Your code should look like this: [ view code ]
Save the changes and then test the movie. On the stage are our three colorful triangles.
Now it is time to explore our filter options!
|
|
ActionScript 3.0 includes nine filter classes that you can apply to display objects and BitmapData objects:
Bevel filter, Blur filter, Drop shadow filter, Glow filter, Gradient bevel filter, Gradient glow filter,
Color matrix filter, Convolution filter and the Displacement map filter.
Note: All but the last three filters can be applied manually in the Properties panel of a Flash document. The last three are available
through ActionScript only.
In this tutorial we will be applying the Glow, Drop Shadow and Blur filters to the three triangles.
|
|
|
Place your cursor at the end of line 20 and press Return/Enter.
On line 21 type: triangle1.filters = [new GlowFilter(0xFF6699, .75, 25, 25, 2, 2, false, false)];
Your code should look like this: [ view code ]
A filter is applied to an object by adding the filters keyword
(Example: triangle1.filters). This informs Flash that a filter should be applied to the triangle1
display object.
The next step is to determine what type of filter will be a used. In this case it is the Glow Filter which is defined as
new GlowFilter.
The GlowFilter has several property options contained in an array: color, alpha (transparency), blurX, blurY,
strength (intensity), quality (low, med, high).
There are two more properties to be established and both are Booleans (true or false). The first is inner which specifies
if the glow is an inner glow. The last is knockout which specifies whether the object has a knockout effect. A value of
true makes the object's fill transparent and reveals the background color of the document. The default value is false (no knockout effect).
Let's return to line 21 and look at the specifics of triangle1's Glow Filter.
Line 21: triangle1.filters = [new GlowFilter(0xFF6699, .75, 25, 25, 2, 2, false, false)];
Here is the translation:
- The object triangle1 has a filter applied to it.
- The filter is a new instance of the Glow Filter.
- The Glow Filter has the following property settings:
color = 0xFF6699 (deep rose pink)
alpha = .75 (75% visible)
blurX = 25 (blurred horizontally - accepts values between 0 & 255)
blurY = 25 (blurred vertically - accepts values between 0 & 255)
strength = 2 (The higher the value the stronger the glow - accepts values between 0 & 255)
quality = 2 (The number of times to apply the filter. Usual usage is values 1, 2 or 3. The best quality is 3.)
inner = false (No inner glow)
knockout = false (No knockout glow effect)
Save the changes and test the movie. You will see a rosy pink glow around the red triangle...
|
|
|
Place your cursor at the end of line 31 and press Return/Enter.
On line 32 type: triangle2.filters = [new DropShadowFilter(5, 45, 0x666666, 1, 5, 5, 1, 1, false, false, false)];
Your code should look like this: [ view code ]
Just like the previous example, a filter is first applied to the object by using the filters keyword
(Example: triangle2.filters). This informs Flash that a filter will be applied to the triangle2
display object.
The next step is to determine what type of filter will be a used. In this case it is the Drop Shadow Filter which is defined as
new DropShadowFilter.
The DropShadowFilter has several property options contained in an array: distance, angle, color, alpha,
blurX, blurY, strength, quality, inner, knockout, hide object. The last three properties are
Booleans (true or false).
Let's return to line 32 and look at the specifics of triangle2's Drop Shadow Filter.
Line 32: triangle2.filters = [new DropShadowFilter(5, 45, 0x666666, 1, 5, 5, 1, 1, false, false, false)];
- The object triangle2 has a filter applied to it.
- The filter is a new instance of the Drop Shadow Filter.
- The Drop Shadow Filter has the following property settings:
distance = 5 (The offset distance for the shadow, in pixels.)
angle = 45 (The angle of the shadow. Valid values are 0 to 360 degrees.)
color = 0x666666 (gray shadow)
alpha = 1 (fully visible)
blurX = 5 (blurred horizontally - accepts values between 0 & 255)
blur Y = 5 (blurred vertically - accepts values between 0 & 255)
strength = 1 (The higher the value the stronger the shadow - accepts values between 0 & 255)
quality = 1 (The number of times to apply the filter. Usual usage is values 1, 2 or 3. The best quality is 3.)
inner = false (No inner shadow)
knockout = false (No knockout shadow effect which makes the object's fill transparent & reveals the background color of the document.)
Hide object = false (Indicates whether or not the object is hidden. A true value indicates only the object's shadow is visible.)
Save the changes and test the movie. This time the green triangle has acquired a drop shadow!
|
|
The Blur Filter is the easiest of the bunch as it only requires three property values: blurX, blurY and quality.
Place your cursor at the end of line 42 and press Return/Enter.
On Line 43 type: triangle3.filters = [new BlurFilter(5, 5, 2)];
Your code should look like this: [ view code ]
- The object triangle3 has a filter applied to it.
- The filter is a new instance of the Blur Filter.
- The Blur Filter has the following property settings:
blurX = 5 (blurred horizontally - accepts values between 0 & 255)
blurY = 5 (blurred vertically - accepts values between 0 & 255)
quality = 2 (The number of times to apply the filter. Usual usage is values 1, 2 or 3. The best quality is 3.)
Save the changes and test the movie. This time we see a blurred blue triangle in addition to a glowing red triangle and a
green triangle with a drop shadow. Fun stuff!
|
|
Each of these filters can be altered to suit. Have a play with the settings in your free time and get to know how far you can take each to achieve
different results!
To place the three triangles on the stage, we copied and pasted the code to reuse it. Hmmm...bet there's a much more efficient way to do that.
Find out how in the next tutorial... [ Inheriting Classes tutorial ]
|
|
| |
|
 |
 |
