Learn how to animate filter with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Animating Filters with ActionScript: Alternative Code

 

Free Flash Tutorial

 

 

The ActionScript code shown here is an alternative to using the code as described in the main section of this tutorial Animating Filters with ActionScript. In the main section of the tutorial the parameters are changed with the use of variables. Here the parameters are changed directly. The code here is quicker and easier which is of course better. But it does have a draw back which I will explain after I have show you the ActionScript:

// Makes the filter available to use in the Movie.
import
flash.filters.GlowFilter;
// Creates a variable with info about the Filter settings.
var myGlow = new GlowFilter(0x000066,.7,10,10,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 X Blur parameter.
      myGlow.blurX += 12;
      // Sets the Y Blur to copy the X Blur.
      myGlow.blurY = myGlow.blurX;
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
      // Stops this function running when the blur setting goes over 130.
      if (myGlow.blurX > 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 X Blur parameter.
      myGlow.blurX -= 12;
      // Sets the Y Blur to copy the X Blur.
      myGlow.blurY = myGlow.blurX;
      // Re-applies the filter to the object named myObject.
      myObject.filters = [myGlow];
      // Stops this function running when the blur setting goes under 30.
      if (myGlow.blurX < 20) {
         delete this.onEnterFrame;
      }
   };
};

Here is an example of this Actionscript:

Example: Download the Flash file Draw 220b


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

In the above actionScript the parameters of the X & Y blur are changed directly by referring to them by their parameter name: blurX & blurY

To find out a particular parameters name use Code Hints or look up the Filter in the Help section.

Code Hints help you show you what to type. The hint shows the parameter name and the type of information separated by a colon.

blurX:Number

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:

Warning: Parameter names are case sensitive. In ActionScript most keywords show up in blue but the parameter names do not!

You can only use this method to change parameters that store simple information. In the example above I change the blur (the same as the example in the main section of the tutorial). The blur value can change from one number to another. Lets say 10 + 12 changes the blur from 10 to 22. Not all values are as simple. The number storing the information of a color is divided into three parts: Red, Green & Blue. To change a color accurately the number has to be split into three parts and calculated individually, then placed back together into a single number. With variables (as shown in the main tutorial) this is quite possible. But with more direct system shown here this would not be practical. I would avoid this system if you want to change things like:

Return to the Tutorial: Animating Filters with ActionScript

Quick Link: Tutorial Introduction: Animating Filters with ActionScript

 

Quick Link: Step Three: ActionScript - Using Variables to Animating Filters

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


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