Flash Training: Learn how to create Displacement Map Filters with ActionScript.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Displacement Map Filter & Animation

Free Flash Tutorial

Step Five: The ActionScript

We have now set up our images and Stage. Now we will apply and animate the Displacement Map Filter using new ActionScript features in Flash 8 Pro. We will learn how to apply and animate displacement map effects using Actionscript. First we will create a new layer, and call it Actions. Placing actions in a different layer keep the .fla more organized.

1. If the Timeline click on the Insert Layer Button:
2. Name the layer: Actions
3. Click on the first Keyframe of the Actions Layer: Select 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 copy & paste) the following into the Actions Panel:

   // Import the filter and required classes.
   import flash.filters.DisplacementMapFilter;
   import flash.display.BitmapData;
   import flash.geom.Point;
   
   // Create an empty BitmapData variable with a width and height.
   // Notice that we assign the map's width and height to the object's width and height.
   var mapBitmap:BitmapData = new BitmapData(myMap._width, myMap._height);
   // Grab bitmap information from the map movie clip.
   mapBitmap.draw(myMap);
   
   // Creates a variables with info about the filter settings.
   var mapPoint:Point = new Point(0, 0);
   var componentX:Number = 4;
   var componentY:Number = 4;
   var scaleX:Number = 20;
   var scaleY:Number = 20;
   
   // Send all the above variables to the filter.
   var filter:DisplacementMapFilter = new DisplacementMapFilter(mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY);
   
   // Create a filter list array.
   var filterList:Array = new Array();
   // Add the displacement map filter to the array.
   filterList.push(filter);
   // Apply the set of filters to the target movie clip.
   myTarget.filters = filterList;
   
   // Creates an animated effect.
   // Updates on every frame.
   onEnterFrame = function () {
   // This conditional moves the map to the left until it reaches its end.
   if ((myMap._x+myMap._width)>(Stage.width)) {
      myMap._x -= 1.5;
      }
   
      // Calculate offsets between the map and the target clip.
      offsetX = myMap._x-myTarget._x;
      offsetY = myMap._y-myTarget._y;
   
      // Creates a new Point object based on the offsets.
      var newPoint:Point = new Point(offsetX, offsetY);
      // Updates the displacement map filter effect.
      filter.mapPoint = newPoint;
      // Applies the updated effect to the target clip.
      myTarget.filters = filterList;
   };

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