Flash Tutorials: Learn how to create multiple Filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Create Multiple Filters with ActionScript

 

Free Flash Tutorial

 

 

In this Flash tutorial you will learn how to apply multiple filters to a single object with ActionScript. This can be added to a variety of objects in Flash including Movie Clips, Buttons & Text. In this example I will place a photo in a Movie Clip and apply the Drop Shadow and Glow Filters. The Glow Filter gives this photo an soft frame effect and the Drop Shadow filter gives the photo a shadow behind the picture making it look as if it is raised of the page in a 3D fashion.

 

Here is an example of what you will create in this tutorial:

Example: Download the Flash file Draw 219a


Flash Movie Clip with Drop Shadow & Glow Filters applied.

 

To keep the ActionScript simple I have used only two filters but the code can easily be adapted to use with any number or combination of filters. You will see that the code is very straight forward and easy to change from one combination of filters to another. I will show you how to add additional filters and there is a full reference section enabling you to look at any particular filter in detail. In the example below I have used all the bells and whistles. The following filters are included: Bevel; Drop Shadow; Glow; Gradient Bevel; Gradient Glow and Color Matrix Filter:

Example: Download the Flash file Draw 219b


Flash Movie Clip with six filters applied.

Important Cross Ref: This tutorial shows you all the ActionScript 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: Adding Additional Filters
Quick Link: Go straight to: Filter 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)
  2. 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.

  3. Go to: File > Publish Settings
  4. If the Flash Tab is not selected, select it:
  5. Note: This Tab will not be visible unless the Flash box (under the Formats Tab) is selected: .

  6. For Version select: Flash Player 8
  7. For ActionScript version select: ActionScript 2
  8. Click: OK
  9. Note: For the next section you will need to have a Photo saved to a location that you can find. If you want use my Jpeg photo. Right click (Mac: Ctrl + click) on the photo and select: Save Picture As...


    Right click on the photo and save the picture.

  10. Import a Photo: File > Import > Import to Stage (Ctrl R)
  11. Convert photo to a Movie Clip: Modify > Convert to Symbol (F8)
  12. Give the Movie Clip an appropriate name: myMovieClip
  13. For type select: Movie Clip
  14. This is my Movie Clip:


    My Movie Clip before the filters have been applied.

    Note: It is possible to apply many Filters directly to a photo using Linkage from the Library. In this tutorial I am not using the Linkage system but placing the Jpeg into a Movie Clip.

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

  17. 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 (or paste) the following into the Actions Panel:

    // Makes all possible filters available to use in the Movie.
    import flash.filters.*;

    // Creates variables with info about the Filter settings
    var myGlow = new GlowFilter (0x000066, 0.7, 9, 9, 3, 3, true, false);
    var myDrop = new DropShadowFilter(12, 45, 0x000000, .6, 8, 8, 1, 2, false, false, false);

    // Applies the filters to the object named myObject
    myObject.filters = [myGlow, myDrop];

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


Step Three: Adding Additional Filters

For each Filter you wish to add you will have to add to additional sections of code. Here I have added in the Blur filter:

Example: Download the Flash file Draw 219c


Flash Movie with the Blur filter added to the Drop Shadow & Glow.

Below in red is the additional code that I have added to get the blur effect. There are two sections. The variable setting up the Blur Filter parameters and the myBlur added to the myObject Array (list).

// Makes all possible filters available to use in the Movie.
import flash.filters.*;

// Creates variables with info about the Filter settings
var myGlow = new GlowFilter (0x000066, 0.7, 9, 9, 3, 3, true, false);
var myDrop = new DropShadowFilter(12, 45, 0x000000, .6, 8, 8, 1, 2, false, false, false);
var myBlur = new BlurFilter(10,2,3);

// Applies the filters to the object named myObject
myObject.filters = [myGlow, myDrop, myBlur];

You can add as many filters as you want. Below is an example of a Movie with seven Filters: Glow; Drop Shadow; Bevel; Gradient Bevel; Gradient Glow; Color Matrix and Blur.

Example: Download the Flash file Draw 219d


Flash Movie Clip with seven filters applied.

This is the actionScript for the above Movie:

// Makes all possible filters available to use in the Movie.
import flash.filters.*;

// Creates variables with info about the Filter settings
var myGlow = new GlowFilter(0x000066,.7,9,9 3 3,true,false);
var myDrop = new
DropShadowFilter(12,45,0x000000,.6,8,8,1,2,false,false,false);
var myBevel = new
BevelFilter(7,45,0xff99ff,0.4,0x000000,0.4,16,8,5,3,"inner",false);
var myGradientBevel = new
GradientBevelFilter(3,225,[0x990000,0xFFFFFF,0xFF99FF],[.3,.3,.3],[0,100,255],8,16,6,1,"inner",false);
var myGradientGlow =
new GradientGlowFilter (0,0,[0xFF99FF,0xFFFFFF,0x990000],[0,.7,.7],[0,50,255],35,25,1.2,1,"outer",false);
var myColorMatrix =
new ColorMatrixFilter([0,1,0,0,-80,0,0,1,0,-80,.5,0,1,0,-80,0,0,0,1,0 ]);
var myBlur =
new BlurFilter(10,2,3);

// Applies the filters to the object named myObject.
myObject.filters = [myGlow,myDrop,myBevel,myGradientBevel,myGradientGlow,myColorMatrix,myBlur];


Step Four: Filter Parameter
Settings

For each filter you will need to play with the parameters (settings) to get the effect that you require. The filter is controlled by the section between the parenthesis (Brackets). This is the parameters that I have used for the Glow filter:

(0x000066,.7,9,9 3 3,true,false)

The rest of this tutorial is reference pages for the parameter settings for each filters as illustrated in the Flash Movies used in this tutorial. It is not necessary to read in full but rather look up the parameters of individual filters as needed. If you want more in depth information about a particular filter look up at the specific tutorial for that filter.

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial
Drop Shadow Filter:
Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial

Important Cross Ref: This tutorial only briefly describes how to apply 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



Step Five: Bevel Filter Parameters

In this section detailed information is given on each of the BevelFilter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:

(7,45,0xff99ff,0.4,0x000000,0.4,16,8,5,3,"inner",false);

Here is what the parameters set:

Distance, Angle, Highlight Color, Highlight Alpha, Shadow Color, Shadow Alpha, Blur X, Blur Y, Strength, Quality, Type, Knockout.

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 212a & 212b


My Settings

212a


Default Settings

212b

Here are my parameter setting compared to the default setting:

Parameter
  My Setting   Default

Distance:
 

7

  4
Angle:
  45   45
Highlight Color:
  0xff99ff   0xffffff
Highlight Alpha:
  0.4   1
Shadow Color:
  0x000000   0x000000
Shadow Alpha:
  0.4   1
Blur X:
  16   4
Blur Y:
  8   4
Strength:
  5   1
Quality
  3   1
Type
  "inner"   "inner"
Knockout
  false   false

 

Distance: Any number - Default = 4
Number The offset distance of the bevel. Valid values are in pixels. The default value is 4.

Angle: 0 to 360 degrees - Default = 45
The angle of the bevel. Valid values are from 0 to 360 degrees. The default value 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. If distance is set to 0, the effect is not offset from the object and, therefore, the angle property has no effect.

Highlight Color: Hexadecimal number - Default = 0xFFFFFF (see notes on color below)
The highlight color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0xFFFFFF.

Highlight Alpha: 0 to 1 - Default = 1
The transparency value of the highlight color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

Shadow Color: Hexadecimal number - Default = 0x000000 (see notes on color below)
The shadow color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0x000000.

Shadow Alpha: 0 to 1 - Default = 1
The transparency value of the shadow color. This value is specified as a normalized value from 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

Blur X: 0 to 255 - Default = 4
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 = 4
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: 1
The strength of the imprint or spread. Valid values are from 0 to 255. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. 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: "inner", "outer" and "full" - Default: "inner"
The type of bevel. Valid values are "inner", "outer" and "full". Inner bevels the inside of your object, outer the outside which gives a shadow type effect and full does both inner and outer.

Example: Download the Flash file Draw 212c


An example of a Bevel set to Full.

Knockout: true or false - Default: false
Applies a knockout effect (true), which effectively makes the object's fill transparent and reveals the background color of the document. The default value is false (no knockout). True and false are case sensitive and must be in typed in lower case only: true or false

Notes on Color:
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

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 hexadecimal numbers in ActionScript:

Correct syntax: 0xff00ff

Correct syntax: 0xFF00FF

In-correct syntax: 0Xff00ff

In-correct syntax: 0XFF00FF

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Six: Blur Filter Parameters

In this section detailed information is given on each of the BlurFilter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:

(10,2,3);

Here is what the parameters set:

Blur X, Blur Y & Quality.

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 213a & 213b


My Settings

Draw 213a


Default Settings


Draw 213b

Here are my parameter setting compared to the default setting:

Parameter
  My Setting   Default

Blur X:
  10   4
Blur Y:
  2   4
Quality
  3   1

 

Blur X: 0 to 255 - Default = 4
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 = 4
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.

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.

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Seven: Drop Shadow Filter Parameters

In this section detailed information is given on each of the Drop Shadow Filter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:

(5,65,0xff3333,0.8,5,10,2,3,false,true,false)

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 214a & 214b



My Settings


Draw 214a


Default Settings


Draw 214b

Here are my parameter setting compared to the default setting:

Parameter
  My Setting   Default

Distance:
 

5

  4
Angle:
  65   45
Color:
  0xff3333   0x000000
Alpha:
  0.8   1
Blur X:
  5   4
Blur Y:
  10   4
Strength:
  2   1
Quality
  3   1
Inner
  false   false
Knockout
  true   false
Hide Object
  false   false

 

Distance: Any number - Default = 4
Number The offset distance of the filter. Valid values are in pixels. The default value is 4.

Angle: 0 to 360 degrees - Default = 45
The angle of the shadow. Valid values are 0 to 360˚. The default value 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. If distance is set to 0, the effect is not offset from the object, and therefore the angle property has no effect.

Color: 0x000000 to 0xffffff - Default: 0x000000
The color of the shadow. Valid values are in hexadecimal format 0xRRGGBB. The default value is 0x000000.
Sets the color of the filter. 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 shadow 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 = 4
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 = 4
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: 1
The strength of the imprint or spread. Valid values are from 0 to 255. The larger the value, the more color is imprinted and the stronger the contrast between the shadow and the background. 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.

Inner: false
Indicates whether or not the shadow is an inner shadow. The value true indicates an inner shadow. The default is false, an outer shadow (a shadow 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).

Hide Object: false
Indicates whether or not the object is hidden. The value true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

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

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Eight: 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

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Nine: Gradient Bevel Filter Parameters

In this section detailed information is given on each of the Gradient Bevel Filter settings. I will 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:

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

(3, 225, [0x990000,0xFFFFFF,0xFF99FF], [.3,1,.3], [0,100,255] 8, 16, 6, 1, "inner", false)

Each of the Parameter settings change the following

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

The Arrays are the part of the parameters. The Arrays (or lists) define the colors and color attributes that you want to use. The 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.3, 1, 0.3]
[0, 100, 255]

Default Settings. Most settings have 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 216b & 216c



My Settings


Draw 216b


Possible Default Settings


Draw 216c

Here are my setting compared to the default settings:

Parameter
  My Settings  
Possible Default Settings

Distance:
 

3

  4
Angle:
  225   45
Colors:
  0x990000,0xFFFFFF,0xFF99FF   0x000000,0xFFFFFF,0x666666
Alphas :
  0.3, 1, 0.3   1,1,1
Ratios:
  0, 100, 255   0,128,255
Blur X:
  8   4
Blur Y:
  16   4
Strength:
  6   1
Quality:
  1   1
Type:
  "inner"   "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. Note that the spread and look of the gradient is not simple as it is based on the values of the blurX, blurY, and ratios as well as the distance value. The default distance is 4.

Angle: 360 to -360 - Default = 45
The angle, in degrees. Valid values are 0 to 360. The default is 45. The angle value represents the angle of the theoretical light source falling on the object. The value determines the angle at which the gradient colors are applied to the object: where the highlight and the shadow appear, or where the first color in the array appears. The colors are then applied in the order in which they appear in the array.

Colors: 0x000000 to 0xFFFFFF - Default: None
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
An 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. If the numbers are close together the colors will be close together, if the number are far the colors will be spread apart. Valid values for each element in the array 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.

Think of a gradient as composed of stripes of various colors, blending into each other, each ratio value sets the position of the color on the radius of the gradient, where 0 represents one side of the gradient and 255 the other. For a typical usage, the middle value is 128, and that is the main base or fill value. In the example below there are nine colours:

Example: Download the Flash file Draw 216d

The Ratio value is: [16, 32, 64, 96, 128, 160, 192, 224, 235]


Ratios affect the position of the colors.

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 bevel 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 bevel effect. Possible values are:

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

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Ten: Gradient Glow Parameters

In this section detailed information is given on each of the Gradient Glow Filter settings. I will 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:

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

(0, 0, [0x990000, 0xFFFFFF, 0xFF99FF], [0.5, 0.4, 0.3], [0, 50, 255], 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)

The Arrays (or lists) are part of the parameters. The Arrays 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 Ratio (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]

Default Settings. Most parameter have a default setting. 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:

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

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial


Step Eleven: Color Matrix Parameters

In this section detailed information is given on each of the Color Matrix 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 the Matrix section of code:

[2,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0,0,1,0];

Important Note: If you wish you can type the Matrix in the standard format like this:

[2,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0,0,0,1,0];

Or like this:

[2,0,0,0,0, 0,1,0,0,0, 0,0,2,0,0, 0,0,0,1,0];

In the examples that follow I have spread the code out into a matrix. This makes it is much easier to understand and edit. If you wish to type the code in a matrix format make sure you don't get your commas (,) and semi colons (;) mixed up. If you do you will get errors. There is only one semi colons (;) which defines the codes end of line:

[2,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,2,0,0,   /* Blue */
 0,0,0,1,0]
;  /* Alpha Transparency */

If you wish you can leave out the gray comments and white space. I only add the comments to make the code easier to read and edit. It could just as well be typed like this:

[2,0,0,0,0,
 0,1,0,0,0,
 0,0,2,0,0,
 0,0,0,1,0];

 

You use the matrix to manipulate colors in Flash. The default setting is:



The default setting will have no effect on your image!

Example: Download the Flash file Draw 218a



Original Photo with natural colors.


The red & blue colors have been increased.

 

See how the RGB (Red, Green Blue) settings change the images color. Click on the Flash Movie below and move your Mouse cursor over the image:

Example: Download the Flash file Draw 218b


Matrix values change as your Mouse moves over: Click and move you mouse.


Matrix Settings
- Multiply or Add

The values in the first four columns are multiplied with the source red, green, blue, and alpha values respectively. The fifth column value is added (offset).


To double the red place a 2 in the red row:

[2,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Red has been doubled.


Instead I could use the offset to add a fixed amount of red. The maximum I can add is 255:


A hint of red.

[0,0,0,0,80,  /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Maximum red.

[0,0,0,0,255, /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

You can also add in color by increasing the alpha channel. Maximum is 1:


A hint of red.

[1,0,0,0.4,0,  /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Maximum red.

[1,0,0,1,0, /* Red */
 0,1,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Removing Color

Here the red has been removed:

[0,0,0,0,0,   /* Red */
 0,1,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


There is no red.


Here everything but the red has been removed:

[1,0,0,0,0,   /* Red */
 0,0,0,0,0,   /* Green */
 0,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


There is no green or blue.


Matrix Settings - Color Shift & Grayscale

If you want the amount of red in the source image to dictate the green value in the result image:

[1,0,0,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 0,0,1,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


Green is set by red value.

Here all the colors channels have been shifted to the wrong place :

[0,0,1,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 0,1,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors have been shifter to the wrong place!


Add the blue into the red column and all color information is set by the red channel thus all colors are the same:

[1,0,0,0,0,   /* Red */
 1,0,0,0,0,   /* Green */
 1,0,0,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors are set by red which gives black and white!


True Grayscale :

[.33,.33,.33,0,0,   /* Red */
 .33,.33,.33,0,0,   /* Green */
 .33,.33,.33,0,0,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */


All colors are set by red which gives black and white!



Matrix Settings - Brightness

Try to add or subtract a little of everything:


Brightness increased .

[1,0,0,0,50,  /* Red */
 0,1,0,0,50,   /* Green */
 0,0,1,0,50,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 


Brightness reduced.

[1,0,0,0,-50,  /* Red */
 0,1,0,0,-50,   /* Green */
 0,0,1,0,-50,   /* Blue */
 0,0,0,1,0 ]; /* Alpha Transparency */

 

Quick Links:    
Bevel Filter:
Info on Parameters Full Tutorial
Blur Filter:
Info on Parameters Full Tutorial

Drop Shadow Filter:

Info on Parameters Full Tutorial
Glow Filter:
Info on Parameters Full Tutorial
Gradient Bevel Filter:
Info on Parameters Full Tutorial
Gradient Glow Filter:
Info on Parameters Full Tutorial
Color Matrix Filter:
Info on Parameters Full Tutorial

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

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


21210 visitors to this page since 4 April 07 •

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

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 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.