Flash Filters & ActionScript

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Creating Filters with ActionScript

 

Free Flash Tutorial

 

: The flash.filters Package

 

Flash 8 Professional come with a set of filters that apply rich visual effects. These Flash Filters are similar to those in graphics programs. All the filters can be customised in many ways giving you control of the look and feel of the filters. The filters include Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel and Adjust Color. All these filters alter what an object looks like.

 

Most filters can be applied to Text, Movie Clips, and Buttons.

 

The filters can be applied with either with ActionScript or by using the Flash Filter Panel: Window > Properties > Filters

 

In this tutorials I will be looking at how to create a Glow Filter to a Movie Clip with ActionScript.

Cross Ref: If you want to create Filters without using ActionScript see the tutorial: Using Filters

 

Cross Ref: Learn how to use Filters to create an animated steam effect: Animating Smoke, Steam or Dry Ice

 

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

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

Example: Download the Flash file Draw 211a

 


Movie Clip with Glow Filter applied.

There are several advantages in creating filters in ActionScript.

Here are some examples of the Flash Filters:

No Filter
Blur Filter
Bevel Filter
Glow Filter
Gradient Glow Filter
Drop Shadow Filter
Gradient Bevel Filter


The same Filters applied to Text:

Flash Filters applied to text



An Oval with Multiple Filters applied:

Multiple Filters

 

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. If the General Tab is not selected, select it:
  3. Select Flash Document:
  4. Click: OK
  5. 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.

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

  9. For Version select: Flash Player 8
  10. For ActionScript version select: ActionScript 2
  11. Click: OK

 

Step Two: Creating an Object

Most filters can be applied to Movie Clips, Buttons and Text. There are some advanced filters that can only be applied to Movie Clips. In this tutorial I am going to apply a glow filter to a rectangle which I am going to place inside a Movie Clip:

  1. Select the Rectangle Tool: (R)
  2. Drag out a: Rectangle

  3. My rectangle.

  4. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)

  5. Double click in the centre of the rectangle to: Select the Rectangle

  6. Selected rectangle.

  7. Change any of the rectangles properties as appropriate: Change Properties

  8. My rectangle's properties.

  9. With the rectangle still selected go to: Modify > Convert to Symbol (F8)
  10. For Name type: myMovieClip
  11. For Type select: Movie Clip
  12. Click: OK

  13. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  14. With the rectangle still selected type an Instance Name: myMovieClip
  15. Note: The Movie Clip needs an Instance name so that the ActionScript can find the object to apply the filter to:


    The new Instance Name.


Step Three: The ActionScript

  1. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
  2. Rename Layer 1 to: Rectangle MC
  3. Insert a new Layer:
  4. Name the Layer: ActionScript
  5. Select Frame 1 of the Actionscript Layer: Frame 1

  6. Frame 1 of the ActionScript Layer is selected.

  7. Open the Actions Panel: Window > Actions (F9)
  8. If Script Assist is on, Switch it off:
  9. 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

  10. Type the following into the Actions Panel (further explanation is given in the next section):
  11. // Makes the filter available to use in the Movie.
    import flash.filters.GlowFilter;

    // Creates a variable with info about the Glow Filter settings
    var myGlowFilter = new GlowFilter (0xff00ff,1,25,25,2,3,false,false);

    // Applies the filter to the object named myMovieClip
    myMovieClip.filters = [myGlowFilter];

  12. Test your Movie: Test > Movie (Ctrl Enter)
  13. You should see something like this:


    The Glow Filter is applied to the rectangle.

  14. Close the Test Window:


Step Four: ActionScript
Code Hints

Much of the ActionScript in the previous section is reasonably straight forward but there is one section which could be confusing and is critical to understand if you want to get the most out of filters. This is the section of code that defines how the filter will look:

(0xff00ff,1,25,25,2,3,false,false)


Original Result

Changes to this section greatly effect the outcome. For example if I make some changes to this section of code my filter will look like this:

New code: (0x00ccff,1,100,5,1,3,false,true)

Example: Download the Flash file Draw 211b


Result from the edited code.


There are two things that you will need to know:

This part of the code is a series of settings that define what the filter will look like. Each of these settings is called a parameter. Each parameter is separated by a comma. All the parameters need to be set and set correctly.

Code Hints greatly help you understand what the you need to type and what the parameters are likely to achieve. When you use the Actions Panel Code Hints help you write code quickly and accurately. Code hinting includes information to help you achieve the correct syntax. The following shows you how to use the code hints.

Code Hints automatically appear in the yellow box as you type:


Actions Panel with Code Hints showing.

Tip: Code Hints should appear as you type but if you want to refresh the hints or cannot see them click the Code Hints button or press: Ctrl Spacebar. The Hints can be a bit buggy and don't always appear. If this happens move the cursor to the beginning of the parameter section and try again. Alas you may need to move the cursor several times.

Note: The hint in bold refers to the parameter where the cursor is located. In the above example the cursor is located in the section referring to the filter's color:

The code hint tells you:


Step Five: Filter Parameters

In this section detailed information is given on each of the GlowFilter parameters. This will enable you to set the Filter parameter's correctly. Additional help is given so that you will know how to look up the settings for other filters.

Alpha: 0 to 1 - Default: 1
In Flash Alpha means transparency or the alpha transparency value for the color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.

BlurX: 0 to 255 - Default: 6
The amount of horizontal blur. Valid values are 0 to 255. The default value is 6. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.

BlurY: 0 to 255 - Default: 6
The amount of vertical blur. Valid values are 0 to 255. The default value is 6. 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: true or false - Default: false
Specifies whether the glow should be seen inside the object. The value true indicates an inner glow. The default is false, an outer glow (a glow around the outer edges of the object). True and false are case sensitive and must be in typed in lower case only: true or false

Knockout: true or false - Default: false
Specifies whether the object has a knockout effect - removes the original shape and only the glow is visible. A value of true makes the object's fill transparent and reveals the background color of the document. The default is false (no knockout effect). True and false are case sensitive and must be in typed in lower case only: true or false

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

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

Other Parameters: If you use other filters they may have different parameters than those listed on this page. If you come across parameters that you do not understand it is easy to find help. Whilst in the Actions panel click inside the name of the filter such as GlowFilter and then click the help button at the top of the Actions panel: . This will take you to the Help Window and it will be open on the correct page. All the parameters for that filter will be listed. You will then be able to click on the parameter name to get additional information. That is how I got the information displayed on this page!!

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


16416 visitors to this page since March 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.