Flash Tutorials: Using Variables to Animate Filters.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Animating Filters with ActionScript

 

Free Flash Tutorial


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

 

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 2    <<   Previous      Intro   1   2   3   4   5     Next   >>      


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