Flash Tutorials: Glow Filters & ActionScript.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Create Flash Glow Filter with ActionScript

Free Flash 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 glow creates a soft, subtle effect and a low radiance glow creates a hard, bright glow effect, 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, giving a 3D look. The Glow Filter is similar to the Drop Shadow Filter with the distance and angle properties of the drop shadow set to 0.

Note: A Glow 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.

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.

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: Glow Filter ActionScript

Quick Link: Go straight to: 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 (or Button or Text) and place it on the Stage: Movie Clip

This is my Movie Clip:


My Movie Clip before the 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.GlowFilter;

   // 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];

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

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:

(0x6699ff,0.6,4,20,3,3,false,true)

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

My Settings Draw 215a

Default Settings Draw 215b

Here are my parameter setting compared to the default setting:

Parameter   My Setting   Default Color:   0x6699FF   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

Note: For more info on setting the color see the Tip below.

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.

Inner: false
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).

Knockout: false
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).

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

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