The Gradient Glow Filter lets you add a glow effect to a variety of objects in Flash including Movie Clips, Buttons & Text. A gradient glow is a glow with a color gradient that you can control. You can apply a gradient glow around the inner or outer edge of an object or on top of an object. A Gradient Glow creates a glowing back light effect, enhanced with gradient color. Glowed edges may make objects look three-dimensional. Adding a glowed effect to a graphic image gives the image a radiating appearance by applying highlight colours and shadow colours to the inside and or outside edges. Gradient Glows are used to as a visual effect to make text and images stand out.

In this tutorial you will learn the ActionScript needed to apply the Gradient Glow Filter to Text, Movie Clips and Button symbols. In addition to this I will describe the settings which enable you to customise the Gradient Glow Filter.

With the Symbol, Text or Button still selected type an Instance Name: myObject

Step Two: The ActionScript

In the Timeline insert a new Layer:

Name the Layer: ActionScript

Select Frame 1 of the Actionscript Layer: Frame 1

Open the Actions Panel: Window > Actions(F9)

If Script Assist is on, Switch it off:

Type (or paste) the following into the Actions Panel:

// Makes the filter available to use in the Movie. importflash.filters.GradientGlowFilter;

// The Arrays (lists) below must all have the same number of entries.
// Lists the colors to use in the Gradient.var colors:Array = [0xFF99FF, 0xFFFFFF, 0x990000];// Sets the transparency of each color.var alphas:Array = [0.5, 0.4, 0.3];// Set the position of each color. var ratios:Array = [0, 50, 255];

// Applies the filter to the object named myObject.
myObject.filters = [myGradientGlowFilter];

Test your Movie: Control > Test Movie(Ctrl Enter)

Step Three: Gradient Glow Filter Settings

In this section detailed information is given on each of the Gradient Glow Filter settings. I will first explain what each line does and then go through how to set each of the individual settings. This will enable you to set and edit the Filter correctly. This is done with these sections of code:

[Lists the colors to use in the Gradient]
[Lists the Alpha or transparency of each color]
[Lists the Ratios or position of each color]
(Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type & Knockout)

Distance: Any Number - Default = 4
The offset value set the distance from the edge of your shape. This defines when the gradient starts and ends. An offset gives a shadow type effect. If you want your gradient glow centred set the distance to 0. The default distance is 4.

Angle: 360 to -360 - Default = 45
The angle, in degrees. Valid values are 360 to -360. The default is 45. The angle value represents the angle of the theoretical light source falling on the object and determines the placement of the effect relative to the object. You can think of this like a shadow. If distance is set to 0, the effect is not offset from the object, and therefore the angle property has no effect.

Colors: 0x000000to 0xFFFFFF - Default: None
An array of colors that defines a gradient. The Colors are set in the color Array. This is a list of RGB hexadecimal color values to use in the gradient. For example, red is 0xFF0000, blue is 0x0000FF. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Alphas: 0 to 1 - Default = 1
The Alphas are set in the Alphas Array. They change the alpha (transparency) values for the corresponding colors in the colors array. Valid values for each element in the array are 0 to 1. For example, .25 sets a transparency value of 25%. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Ratios: 0 to 255 -No default but try first number 0, last number 255, intermittent numbers evenly spread. ie: 0, 128, 255
The ratios are set in the Ratio Array and control the color distribution. The Ratio spreads the colors through the gradient. Valid values are 0 to 255. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Blur X: 0 to 255 - Default = 4
The amount of horizontal blur. Valid values are 0 to 255. A blur of 1 or less means that the original image is copied as is. 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 = 4
The amount of vertical blur. Valid values are 0 to 255. A blur of 1 or less means that the original image is copied as is. 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: 1
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. A value of 0 means that the filter is not applied. The default value is 1.

Quality: 0to 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.