Animate Flash filters by changing complex parameters.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Animating Filters with ActionScript

 

Free Flash Tutorial


Step 5    <<   Previous      Intro   1   2   3   4   5    >>      

 

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

         

Step 5    <<   Previous      Intro   1   2   3   4   5    >>      


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