ActionScript and creating Flash Displacement Map Filters.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Displacement Map Filter & Animation

Free Flash Tutorial

Step Six: Understanding The ActionScript

The code consists of 4 main steps: Importing necessary classes, setting up parameters for the displacement map filter, applying the filter, and animating the filter.

1. Importing necessary classes. The DisplacementMapFilter is the main class used to create the effect. The BitmapData class, and Point class are required to prepare parameters for the displacement map filter.

// Import the filter and required classes.
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;

2. The following parameters of the displacement map filter are required:
   
   BitmapData: Object that will be used as the displacement map.
   Point: Object which contains the offset of the upper-left corner of the target movie clip from the upper-left corner of the map image.
   componentX: Describes which color channel to use in the map image to displace the x result.
   componentY: Describes which color channel to use in the map image to displace the y result.

   Note: Possible values for componentX, and component Y are 1 (red), 2 (green), 4 (blue), and 8 (alpha).

   scaleX The strength of the effect in the x plane.
   scaleY The strength of the effect in the y plane.

   Note: Higher numbers mean more displacement.

The displacement map accepts a BitmapData object, NOT a movie clip object as its first parameter. The following piece of code grabs the bitmap information of a movie clip and places it in a BitmapData object.


// 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);

Note: Look out for a bad draw
This code is for debugging purposes only!! In order to test if you are drawing your bitmap data object correctly. This will give you a visual representation of what you are actually drawing:

//create an empty movie clip named "debugClip"on the next available level
createEmptyMovieClip("debugClip", this.getNextHighestDepth());
//attach the bitmap data to the movie clip on the next available level
debugClip.attachBitmap(mapBitmap, this.getNextHighestDepth());

Warning: Make sure you remove this code as it is for de-bugging only!!

In this case, the Point parameter is simple since during the stage and image set up section of this tutorial , all applicable points were set to 0.0.The remaining parameters are straightforward:

// 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;

Now that all the parameters are prepared, we can send them all to the DisplacementMapFilter object using this line of code:

// Send all the above variables to the filter.
var filter:DisplacementMapFilter = new DisplacementMapFilter(mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY);

3. At this stage, we now have the filter ready to be applied. In Flash 8 Pro, filters are applied to Movie Clip instances via the filters property of the Movie Clip object. The filters property is an array of all the filters applied to that specific clip. Therefore, in order to see the effect, we must add the DisplacementMapFilter object to a filter list array, then assign the filter list array to the filters property of the target movie clip. All filters are applied in this fashion.

   // 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;

   Note: If you test your flash file at this point. You should see the filter applied. A nice effect on its own, but let's animate it.

4. Animation follows the following steps: Change position of the map, change the offset to match the new position, apply the new offset to the filter, and finally, apply the filter to the target clip.

   // 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;
   };

Test your flash file now, and you should have the finished effect.