Click by Click: Create a Glow Filter with ActionScript
See Full Version: This is a shortened click by click version of a: Full Length Tutorial
The Glow Filter lets you add a glowing luminance effect to a variety of objects in Flash including Movie Clips, Buttons & Text. A glow creates a surrounding highlight. A high radiance creates a soft, subtle glow and a low radiance creates a hard, bright glow, such as a neon glow. You have several options for the style of the glow, including inner or outer glow and knockout mode. Like a shadow a glowing image creates the effect of the image lifting off the page which gives the feeling of spatial 3D dimension. The Glow Filter is similar to the Drop Shadow Filter with the distance and angle properties of the drop shadow set to 0.
In this tutorial you will learn the ActionScript needed to apply the Glow Filter to Text, Movie Clips and Button symbols. In addition to this I will describe the parameters (settings) which enable you to customise the Glow Filter.
Here is an example of what you will create in this tutorial:
Example: Download the Flash file Draw 215a
Flash Movie Clip with Glow Filter applied.
Step One: Setting up the Document
Step Two: The ActionScript
// Makes the filter available to use in the Movie.
// Creates a variable with info about the Filter settings
var myGlowFilter = new GlowFilter (0x6699FF,0.6,4,20,3,3,false,true);
// Applies the filter to the object named myObject
myObject.filters = [myGlowFilter];
Step Three: Glow Filter Parameters
In this section detailed information is given on each of the Glow Filter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:
Here is what the parameters set:
Distance, Angle, Color, Alpha, Blur X, Blur Y, Strength, Quality, Inner Shadow, Knockout & Hide Object.
Each of these parameters has a default setting and if you are not familiar with the Filter it is often best to start with the default and then edit:
Example: Download both the Flash files Draw 215a & 215b
Here are my parameter setting compared to the default setting:
Parameter My Setting Default Color:
0xFF0000 Alpha: 0.6 1 Blur X: 4 6 Blur Y: 20 6 Strength: 3 1 Quality 3 1 Inner false false Knockout true false
Color: 0x000000 to 0xFFFFFF - Default: 0xFF0000
The color of the glow. Valid values are in the hexadecimal format 0xRRGGBB. The default value is 0xFF0000. In many programs color is written as a hexadecimal number. If you are not familiar with hexadecimal numbers they can be a bit tricky but in ActionScript they are always prefixed with Zero Ex and followed by six digits or letters: A Hexadecimal number as written in ActionScript: 0xFF00FF
Alpha: 0 to 1 - Default = 1
The transparency value of the color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.
Blur X: 0 to 255 - Default = 6
The amount of horizontal blur in pixels. Valid values are from 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.
Blur Y: 0 to 255 - Default = 6
The amount of vertical blur in pixels. Valid values are from 0 to 255. The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.
Strength: 0 to 255 - Default: 2
The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 2.
Quality: 0 to 15 - Default: 1
The number of times to apply the filter. Valid values are 0 to 15. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Filters with lower values are rendered more quickly. For most applications, a quality value of 1, 2, or 3 is sufficient. Although you can use additional numeric values up to 15 to achieve different effects, higher values are rendered more slowly. Instead of increasing the value of quality, you can often get a similar effect, and with faster rendering, by simply increasing the values of blurX and blurY.
Specifies whether the glow is an inner glow. The value true indicates an inner glow. The default is false, an outer glow (a glow around the outer edges of the object).
Applies a knockout effect (true), which effectively makes the object's fill transparent and reveals the background color of the document. The default is false (no knockout).
I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!
See Full Version of this: Tutorial
28202 visitors to this page since
23 March 07 •
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here
All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.