Flash training courses: Gradient Glow Filters & ActionScript.	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Create a Gradient Glow Filter with ActionScript

Free Flash Tutorial

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.

In this tutorials you will create the following Gradient Glow Effect:

Example: Download the Flash file Draw 217a

 

Back Light effect created with a Gradient Glow Filter.

 

 

Example: Download the Flash file Draw 217b

 

The Gradient Glow has been stretched by changing the Filter settings

 

 

 

Example: Download the Flash file Draw 217c

The Gradient Glow has been set as a two color shadow.

 

 

 

Example: Download the Flash file Draw 217d

The Gradient Glow has been set to give an internal contour.

Note: A filter is not applied if the resulting image exceeds 2880 pixels in width or height. For example, if you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the limit of 2880 pixels.

Important Cross Ref: This tutorial shows you all the ActionScript including all the options available through the parameters. But it only briefly describes how to apply this to an object within Flash or how to edit the parameter settings. If you are not familiar with this I suggest that you return here after first reading the tutorial: Creating Filters with ActionScript

 

Quick Link: Go straight to: Gradient Glow Filter ActionScript

Quick Link: Go straight to: Gradient Glow Parameter Settings

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 

Important Note: These Filters only work in Flash Professional 8. The filters are not available in Flash 8 Basic or any of the earlier versions of Flash such as Flash MX04/MX/5.

 

If you don't know what version you are using go to: Help > About Flash and you will see the logo:

 

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)

Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player. It also needs to be set to ActionScript 2 otherwise you will get error messages. It is best to set these options right from the start.

2. Go to: File > Publish Settings
3. If the Flash Tab is not selected, select it:

Note: This Tab will not be visible unless the Flash box (under the Formats Tab) is selected: .

4. For Version select: Flash Player 8
5. For ActionScript version select: ActionScript 2
6. Click: OK
   
   
7. Create a Movie Clip, Button or Text and place it on the Stage: Movie Clip, Button or Text

This is my Movie Clip:


My Movie Clip before the Gradient Glow has been applied.

8. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
   
9. With the Movie Clip still selected type an Instance Name: myObject


My Movie Clip with an instance name: myObject

Step Two: The ActionScript

1. In the Timeline insert a new Layer:
2. Name the Layer: ActionScript
3. Select Frame 1 of the Actionscript Layer: Frame 1
4. Open the Actions Panel: Window > Actions (F9)
5. If Script Assist is on, Switch it off:

   Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

6. Type the following into the Actions Panel:

   // Makes the filter available to use in the Movie.
   import flash.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];

   // Creates a variable with info about the Filter settings.
   var myGradientGlowFilter = new GradientGlowFilter (0, 0, colors, alphas, ratios, 35, 25, 1.2, 1, "outer", false);

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

   Note: It is possible to write this code in a more compact form. The Arrays do not need to be separated out but can be directly included in the parameter settings. I prefer to spread it out as it is easier to edit. But if you wish you could write the code like this: // Makes the filter available to use in the Movie. import flash.filters.GradientGlowFilter; // Creates a variable with info about the Filter settings. var myGradientGlowFilter = new GradientGlowFilter (0, 0, [0xFF99FF, 0xFFFFFF, 0x990000], [0.5, 0.4, 0.3], [0, 50, 255], 35, 25, 1.2, 1, "outer", false); // Applies the filter to the object named myObject. myObject.filters = [myGradientGlowFilter];

    

7. 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:

[0x990000, 0xFFFFFF, 0xFF99FF]
[0.5, 0.4, 0.3]
[0, 50, 255]
(0, 0, colors, alphas, ratios, 35, 25, 1.2, 1, "outer", false)

This is what each of the above settings does:

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

Settings: Arrays & Parameters

The Arrays (lists) define the colors and color attributes that you want to use. These Arrays are set within the [Square Brackets]. The first Array sets the colors to be used. You can have as many colors as you want. I have used three:

[0x990000, 0xFFFFFF, 0xFF99FF]

The next group of Arrays set the Alpha (transparency) and then the Ratios (position) of each color. Each of these Arrays must have the same number of entries as colors listed. I my case three in each list:

[0.5, 0.4, 0.3]
[0, 50, 255]

The Parameters are the remaining settings which are set within the (Parentheses):

(0, 0, colors, alphas, ratios, 35, 25, 1.2, 1, "outer", false)

Each of the Parameter settings change the following

Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type & Knockout.

Each of these settings has a default 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 217a & 217e

My Settings Draw 217a

Possible Default Settings Draw 217e

Here are my setting compared to the default settings:

Parameter   My Settings   Possible Default Settings Distance:   0   4 Angle:   0   45 Colors:   0xFF99FF, 0xFFFFFF, 0x990000   0x000000, 0x666666, 0xFFFFFF Alphas :   0.5, 0.4, 0.3   1,1,1 Ratios:   0, 50, 255   0,128,255 Blur X:   35   4 Blur Y:   25   4 Strength:   1.2   1 Quality:   1   1 Type:   "outer"   "inner" Knockout   false   false

Note: Colors & Ratios as written in Italics don't have an actual default. Your array could have any number of colors so there cannot be a default.

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

Note: 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

Tip: To find the colour code you want look at the color pallet in the Flash tool box:

The hexadecimal code is displayed at the top of the pallet.

Note: Do not write the number as displayed in the color pallet. You need to remove the # and replace it with Zero Ex: 0xff00ff

Case Sensitive: The Ex is case sensitive: 0Xff00ff will result in an error message. For this reason use lower case for the x. Correct syntax: 0xff00ff or 0xFF00FF

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.

Note: Think of the gradient glow filter as a glow that emanates from the center of the object (if the distance value is set to 0), with gradients that are stripes of color blending into each other. The first color in the colors array is the outermost color of the glow. The last color is the innermost color of the glow.

Each value in the ratios array sets the position of the color on the radius of the gradient, where 0 represents the outermost point of the gradient and 255 represents the innermost point of the gradient. The ratio values can range from 0 to 255 pixels, in increasing value; for example [0, 64, 128, 200, 255]. Values from 0 to 128 appear on the outer edges of the glow. Values from 129 to 255 appear in the inner area of the glow. Depending on the ratio values of the colors and the type value of the filter, the filter colors might be obscured by the object to which the filter is applied.

In the following code and image, a filter is applied to a black circle movie clip, with the type set to "full". For instructional purposes, the first color in the colors array, pink, has an alpha value of 1, so it shows against the white document background. The last color in the array, yellow, obscures the black circle to which the filter is applied:

Example: Download the Flash file Draw 217f

The Ratio values are: [16, 32, 64, 96, 128, 160, 192, 224, 235]

Ratios affect the position of the colors.

To achieve a seamless effect with your document background when you set the type value to "outer" or "full", set the first color in the array to the same color as the document background, or set the alpha value of the first color to 0; either technique makes the filter blend in with the background.

If you make two small changes in the code, the effect of the glow can be very different, even with the same ratios and colors arrays. Set the alpha value of the first color in the array to 0, to make the filter blend in with the document's white background; and set the type property to "outer" or "inner". Observe the results, as shown in the following images.

Example: Download the Flash file Draw 217g

First Alpha is 0 and Type is an Outer Glow.

 

Example: Download the Flash file Draw 217h

Inner Glow .

Note: Keep in mind that the spread of the colors in the gradient is complex as it is based on the values of the blurX, blurY, strength, and quality properties, as well as the ratios values.

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: 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.

Type: "outer" or "inner" or "full" - Default = "inner"
The placement of the glow effect. Possible values are:

• "outer": Glow on the outer edge of the object
• "inner": Glow on the inner edge of the object
• "full": Glow on top of the object

Knockout: true or false - Default = false
Specifies whether the object has a knockout effect. A knockout effect makes the object's fill transparent and reveals the background color of the document. The value true specifies a knockout effect; the default is false (no knockout effect).

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here