Tutorial training on creating multiple Flash Filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Create Multiple Filters with ActionScript

See Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

219 Drawing
Flash Compatibility: Flash 8 Pro Only !!    (Not Flash 8 Basic or MX04/MX)

Publish Settings: Flash Player 8 or higher

ActionScript Settings: ActionScript 2 Only !!

Written by: Phil Schulz

Length: 1300 words plus 7000 word reference section

Assumed Knowledge: General knowledge of Flash and ActionScript

Difficulty: Easy - Medium

 

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. At the end of the tutorial 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.

 

Step One: Setting up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Go to: File > Publish Settings
  3. If the Flash Tab is not selected, select it:
  4. For Version select: Flash Player 8
  5. For ActionScript version select: ActionScript 2
  6. Click: OK
  7. Import a Photo: File > Import > Import to Stage (Ctrl R)
  8. Convert photo to a Movie Clip: Modify > Convert to Symbol (F8)
  9. Give the Movie Clip an appropriate name: myMovieClip
  10. For type select: Movie Clip
  11. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  12. With the Symbol, Text or Button still selected type 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:
  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

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

Important Note: There is considerably more information in the full version of this tutorial. See Full Version of this: Tutorial

 

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

See Full Version of this: Tutorial


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