Flash Tutorials: Animating Filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Animating Filters with ActionScript

 

Free Flash Tutorial

 

 

In this Flash tutorial you will learn how to animate filters 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 a Glow Filter. The Glow Filter gives the photo an soft frame effect. If you click on the image the soft glow animates to envelopes the image. If you move your mouse away the filter will animate back to a soft frame.

 

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

Example: Download the Flash file Draw 220a


Flash Movie Clip with an animated Glow Filter. Click and roll over the image

To keep the ActionScript simple I have used only one 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.

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: The ActionScript - Using Variables to Animate Filters

Quick Link: Understanding the Code - Using Variables to set the Parameters

Quick Link: The ActionScript: Alternative Code (Extra Reference Section)

Quick Link: Changing Multiple Parameters

Quick Link: Changing Complex Parameters
Quick Link: Color & Bitwise Binary Operators (Extra Reference Section)

 

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 filter has been applied.

  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 - Using Variables to Animate Filters

  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 the filter available to use in the Movie.
    import flash.filters.GlowFilter;

    //Creates a variable that will control the X & Y blur.
    var myBlur = 10;

    // Creates a variable with info about the Filter settings.
    var myGlow = new GlowFilter(0x000066,.7,myBlur,myBlur,3,3,true,false);

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

    // Creates an on mouse roll-over function (event).
    myObject.onRollOver = function() {
       // Refreshes the function continuously.
       this.onEnterFrame = function() {
          // Adds 12 to the current X & Y blur settings.
          // This number controls the speed of the animation.
          myBlur += 12;
          // Re-creates the variable with info about the Filter settings.
          var myGlow = new GlowFilter(0x000066,.7,myBlur,myBlur,3,3,true,false);
          // Re-applies the filter to the object named myObject.
          myObject.filters = [myGlow];
          // Stops this function running when the blur setting goes over 130.
          if (myBlur > 130) {
             delete this.onEnterFrame;
          }
       };
    };

    // Creates an on mouse roll-out function (event).
    myObject.onRollOut = function() {
       // Refreshes the function continuously.
       this.onEnterFrame = function() {
          // Subtracts 12 from the current X & Y blur settings.
          myBlur -= 12;
          // Re-creates the variable with info about the Filter settings.
          var myGlow = new GlowFilter(0x000066,.7,myBlur,myBlur,3,3,true,false);
          // Re-applies the filter to the object named myObject.
          myObject.filters = [myGlow];
          // Stops this function running when the blur setting goes under 20.
          if (myBlur < 20) {
             delete this.onEnterFrame;
          }
       };
    };

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

    Note: There is an alternative method to the above code which is shorter and easier. I have not used it here as it is not quite as flexible. If you are interested you can see it here: Alternative ActionScript


Step Three: Understanding the Code
- Using Variables to set the Parameters

 

As explained in other tutorials that parameters control the filter and gives the object (in this case a photo) its look. Changing the parameters changes the look of the object. The parameters are set with this section of code:

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

Cross Ref: I have explained parameters in detail in a previous tutorial and so will not repeat it here. If you are not familiar with Filter parameters and how to set them I recommend that you read the tutorial: Creating Filters with ActionScript

The parameters can be set directly like this:

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

But they can also be set with variables. This enables them to be changed . This variable is initially given a value by this line:

var myBlur = 10;

I placed a variable in the parameters located where information is stored about the X blur and the Y blur. Both the X & Y blurs are set with the same variable:

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

The value of the variable is changed with this line. It adds 12 to itself:

myBlur += 12;

The animation is switched off with this:

if (myBlur > 130) {
         delete this.onEnterFrame;
      }

The reverse effect is created with this:

myBlur -= 12;

The reverse effect is switched off with this:

if (myBlur < 20) {
         delete this.onEnterFrame;
      }


Step Four: Changing Multiple Parameters

In this example I change several parameters at once. Each parameter has it's own variable. Thus several variables are used to change several of the filter parameters at once.

Here is an example of several parameters animating at once:

Example: Download the Flash file Draw 220c


Click and roll over the image. The filter properties will continually change.

This is the ActionScript used to change the Glow Filter's parameters:

// Makes the filter available to use in the Movie.
import flash.filters.GlowFilter;

// Creates variables that define the parameter settings
var myColor = 0x000066;
var myAlpha = 0.7;
var myBlurX = 12;
var myBlurY = 12;
var myStrength = 3;
var myQuality = 3;
var myInner = true;
var myKnockout = false;

// Creates a variable with info about the Filter settings.
var myGlow = new GlowFilter(myColor,myAlpha,myBlurX,myBlurY,myStrength,myQuality,myInner,myKnockout);
// Applies the filter to the object named myObject.
myObject.filters = [myGlow];

// Creates an on mouse roll-over function (event).
myObject.onRollOver = function() {
   // Refreshes the function continuously.
   this.onEnterFrame = function() {
      // Changes the Alpha setting (transparency).
      myAlpha += .02;
      if (myAlpha > 1.1) {
         myAlpha = 0.2;
      }
      // Changes the Blur setting.
      myBlurX += .2;
      myBlurY = myBlurX;
      if (myBlurX > 50) {
         myBlurX = 12;
      }
      // Changes the Strength setting.
      myStrength += 1;
      if (myStrength > 100) {
         myStrength = 1;
      }
      // Changes the Quality setting.
      myQuality += 0.2;
      if (myQuality > 10) {
         myQuality = 1;
      }
      // Re-creates a variable with info about the Filter settings.
      var myGlow = new GlowFilter(myColor,myAlpha,myBlurX,myBlurY,myStrength,myQuality,myInner,myKnockout);
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
   };
};

// Creates an on mouse roll-out function (event).
myObject.onRollOut = function() {
   // Refreshes the function continuously.
   this.onEnterFrame = function() {
      // Changes the Blur setting.
      myBlurX = myBlurX - 10;
      myBlurY = myBlurX;
      // Re-creates a variable with info about the Filter settings.
      var myGlow = new GlowFilter(myColor,myAlpha,myBlurX,myBlurY,myStrength,myQuality,myInner,myKnockout);
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
      // Stops this function running when the blur setting goes under 30.
      if (myBlurX < 20) {
         delete this.onEnterFrame;
      }
   };
};


Step Five: Changing Complex Parameters

In this example I change the Glow Filter's Blur and Color setting. The blur is done as in previous examples but changing the color is more complex than changing other parameters. Color is defined by three parts the Red, Green and Blue (RGB). The first part of the number sets the red, the second the green and last part the blue. This means that you can't do a normal maths equation on a color setting as you might need to reduce the red, and increase the value of the green and blue. To do this you need to split the number into three, do the maths on each individually part and then combine the number again.

In the Glow filter the color is the only parameter setting which is a list (RGB). But other filters have parameters that have Arrays (lists) and Matrixes (also a type of list). In each case the parameter would need to be set with variables.

Cross Reference: You can see examples of Arrays and Matrixes here:

Here is the example that I use to demonstrate the color change:

Example: Download the Flash file Draw 220d


Click and roll over the image. The color will continually change.

This is the ActionScript used to change the Glow Filter's Color & Blur Parameters:

// Makes the filter available to use in the Movie.
import flash.filters.GlowFilter;

// Sets the Red, Green and Blue (RGB)value of the Filter color.
var myRed = 00;
var myGreen = 00;
var myBlue = 66;
// Adds the RGB colors together using a binary equation (sorry!!).
var myColor = (myRed<<16|myGreen<<8|myBlue);
// Creates the rest of the variables used in the parameter settings.
var myBlurX = 12;
var myBlurY = 12;

// Creates a variable with info about the Filter settings.
var myGlow = new GlowFilter(myColor,.9,myBlurX,myBlurY,3,3,true,false);
// Applies the filter to the object named myObject.
myObject.filters = [myGlow];

// Creates an on mouse roll-over function (event).
myObject.onRollOver = function() {
   // Refreshes the function continuously.
   this.onEnterFrame = function() {

      // Changes the RGB color setting.
      myRed += 6;
      myGreen -= 2;
      myBlue += 2;
      // Adds the RGB color setting back into a single number.
      myColor = (myRed<<16|myGreen<<8|myBlue);

      // Changes the Blur settings.
      myBlurX += 10;
      myBlurY = myBlurX;
      if (myBlurX > 130) {
         myBlurX = 130;
      }

      // Re-creates a variable with info about the Filter settings.
      var myGlow = new GlowFilter(myColor,.9,myBlurX,myBlurY,3,3,true,false);
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
   };
};

// Creates an on mouse roll-out function (event).
myObject.onRollOut = function() {
   // Refreshes the function continuously.
   this.onEnterFrame = function() {
      // Changes the Blur setting.
      myBlurX = myBlurX - 10;
      myBlurY = myBlurX;
      // Re-creates a variable with info about the Filter settings.
      var myGlow = new GlowFilter(myColor,.9,myBlurX,myBlurY,3,3,true,false);
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
      // Stops this function running when the blur setting goes under 30.
      if (myBlurX < 30) {
         delete this.onEnterFrame;
      }
   };
};

 

Note: I hope that the gray comments enable you to understand the code? Having said that there is one line of code that difficult to understand. That is the binary equation that stitches the color number back together again:

var myColor = (myRed<<16|myGreen<<8|myBlue);

If you have not seen this type of equation I would imagine that it is about as clear as mud! In truth you do not need to understand it to use the code (thankfully). But if you are interested I have explained it here: Color

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


20445 visitors to this page since 14 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.