Flash tutorial training on animating filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Animating Filters with ActionScript

See Full Version: This is a shortened click by click version of a: Full Length 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.

 


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 Movie Clip still selected type 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:
  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)

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

Important: There is considerably more information in the See Full Version of this: Tutorial


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