Flash Tutorials: Learn how to create Displacement Map Filters with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Displacement Map Filter & Animation

 

Free Flash Tutorial

 

 

Flash 8 Pro introduces many graphic filters including the Displacement Map Filter which allows you to distort a Movie Clip based on a bitmap's color values. The Displacement Map Filter distorts the colors in one object based on the color of another object. This gives you a distorted effect.

The DisplacementMapFilter class uses the pixel values from the specified BitmapData object (called the displacement map image) to perform a displacement of another object on the Stage, such as a Movie Clip instance. You can use this filter to achieve a warped or mottled effect on a BitmapData or Movie Clip instance.

Here is how the DisplacementMapFilter class works. The Displacement Map Filter is applied with the use of ActionScript. For each pixel in the destination bitmap, the DisplacementMapFilter class does the following:

In this tutorials you will create the Flash Movie below, learn how to swap the images and learn how to edit the code so that the animation is triggered on different type of events like mouse roll over. Here is one of the Movies that you will be creating using the Displacement Map filter:

Note: If the Movie below is not animating - refresh your web page: Ctrl F5

 

Example: Download the Flash file Draw 221a


Flash Movie which uses the Displacement Map Filter. (If not animating refresh - Ctrl F5)

 

Important Cross Ref: If you are new to filters I suggest that you return here after first reading the tutorial: Creating Filters with ActionScript

 

Quick Link: Setting up the Document

Quick Link: Importing the Images

Quick Link: Preparing the Movie Clip Symbols
Quick Link: Preparing the Main Stage

Quick Link: The ActionScript

Quick Link: Understanding the ActionScript

Quick Link: Swapping the Images
Quick Link: Animating On Roll Over

 

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

 

Important Note: These Filters only work in Flash Professional 8. The filters are not available in Flash 8 Basic or any of the earlier versions of Flash such as Flash MX04/MX/5.

 

If you don't know what version you are using go to: Help > About Flash and you will see the logo:

 


Step One: Setting up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Go to: Modify > Document (Ctrl J)
  3. Set the size. Mine is: 300 x 385 px
  4. Set the Frame rate to: 24 fps
  5. Click: OK
  6. Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player. It also needs to be set to ActionScript 2 otherwise you will get error messages. It is best to set these options right from the start.

  7. Go to: File > Publish Settings
  8. If the Flash Tab is not selected, select it:
  9. Note: This Tab will not be visible unless the Flash box (under the Formats Tab) is selected: .

  10. For Version select: Flash Player 8
  11. For ActionScript version select: ActionScript 2
  12. Click: OK

  13. Save the Flash file and name it: Displacement-Map.fla

    Your properties should now look something like this: Window > Properties > Properties (Ctrl F3)


    Property Inspector.


Step Two: Importing the Images

For the next section you will need to have two pictures saved to your computer. You can either use theses or two of your own. One image will be used as a displacement map and one that will be warped.

  1. Right click (Mac: Ctrl + click) on the pictures below and select: Save Picture As...
  2. Name the white foreground image:map.jpg
  3. Name the blue background image: target.png
     
    Right click on the pictures map.jpg & target.png and save them.

    Note: Now the images need to be imported to Flash.

  4. Import the images: File > Import > Import to Library
  5. Select the two images: map.jpg & target.png
  6. Click: Open


Step Three: Preparing the Movie Clip Symbols

Now that the images are imported, we need to place them into their own Movie Clips. This will make it easier to swap in different images later on. First lets place the map image into a Movie Clip of its own.

Map Image. This is the blue background image.

  1. Create a new Symbol: Insert > New Symbol (Ctrl 8)
  2. In the dialog box give it the name: myMapMC
  3. For type select: Movie Clip
  4. Click: OK
  5. If the Library is closed, open it: Window > Library (F11)
  6. Drag and drop the map image from the Library into the new Movie Clip. Drag: map.jpg

    Note: Setting the registration points are necessary for a realistic effect.

  7. If the Info Panel is closed, open it: Window > Info (Ctrl+I)
  8. With the image still selected, change both the X and Y points in the Info panel to: 0.0


    Image registration set to: 0.0

    Target Image. The above process need to be repeated with the target image. The target image contains the foreground image.

  9. Create a new Symbol: Insert > New Symbol (Ctrl 8)
  10. Give it the name: myTargetMC
  11. For type select: Movie Clip
  12. Click: OK

  13. Drag and drop the target image from the Library into the new Movie Clip. Drag: target.jpg
  14. Change both the X and Y points in the Info panel to: 0.0

    Note: You should now have four symbols in your Library: Window > Library (F11)


    Library Panel.


Step Four: Preparing the Main Stage

So, we have our images in Movie Clips of their own. Let's bring them onto the Main Stage. First you need to make sure that the you are in the main Stage. Then place the new Movie clips into the correct position. Lastly they will need Instance names so that the ActionScript can reference them. This is particularly important.

  1. If the Edit Bar is not open, open it: Window > Tool Bars > Edit Bar (Flash MX04 only)
  2. Return to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:

    Map Image: Time to set up the background image.

  3. If the Library is closed, open it: Window > Library (F11)
  4. Drag and drop onto the Stage: myMapMC
  5. With the Movie Clip still selected change both the X and Y points in the Info panel to: 0.0
  6. Note: Now there is an Instances of the Movie Clips on Stage. We can only reference it through Actionscript if it has an Instance Names.

  7. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  8. Give your Movie Clip an Instance name: myMap


    Movie Clip's Instance Name: myMap.

    Warning: Instance Names are case sensitive and you should never use spaces!

    Size: You will now have a long Movie Clip on the stage:


    MC on the Stage.

    With this effect the background image moves slowly to the left and when the image gets to the end the animation stops. To make the animation last for a reasonable period of time I have used a long image. If you look in the Property Inspector you will see the width is: 2200 pixels wide.

    A filter is not applied if the image exceeds 2880 pixels in width (or height). Thus it is possible to stretch the image just as little further.

    Target Image: This is the foreground image. The target Movie Clip should be above the map movie clip. If you wish you can use separate layers for each of the Movie Clips.

  9. Drag out from the Library and drop onto the Stage: myTargetMC
  10. With the Movie Clip still selected change both the X and Y points in the Info panel to: 0.0
  11. Give your Movie Clip an Instance name: myTarget


    Movie Clip's Instance Name: myTarget.


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)


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.
  2. // Import the filter and required classes.
    import flash.filters.DisplacementMapFilter;
    import flash.display.BitmapData;
    import flash.geom.Point;

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

  4. 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);

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

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


Step Seven: Expand Your Creativity
- Swapping Images

Now that you have created the Movie it is very easy to change the images to create new effects. Let's quickly change the image we used for the target by importing another image and swapping it over.

  1. Right click (Mac: Ctrl + click) on the picture below and select: Save Picture As...
  2. Name the image: target_swap.png
Right click on the picture and save it as: target_swap.png
  1. Import the image: File > Import > Import to Library
  2. Select the image: target_swap.png
  3. Click: Open

  4. On the Stage, double click the target Movie Clip to open it in Symbol Editing Mode. Edit: myTargetMC
  5. As long as the Edit bar is visible you will now see the Movie Clip name displayed: Window > Toolbars > Edit Bar


    You know you are editing the MC as the name is visible: myTargetMC

  6. Select the: Image
  7. In the Properties Inspector click: Swap
  8. Select the image you just imported: target_swap.png
  9. Click: OK

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

    You should have something like this:

    Note: If the Movie below is not animating - refresh your web page: Ctrl F5

     

    Example: Download the Flash file Draw 221b


    Flash Movie which uses the Displacement Map Filter (If not animating refresh - Ctrl F5)

This swapping can as easily be done with the map image as well.


Step Eight: Expand Your Creativity
- On Roll Over Event

Take the interactivity up a notch by using a onMouseMove or onRollOver event instead of the onEnterFrame event used in this example.

Example: Download the Flash file Draw 221c


Click and roll over the image to make it animate. Roll out and it will stop.

This the Movie Above is identical to the Movie that you already created in this tutorial except that it has a few additional lines of ActionScript to trigger the animation on roll over and stop the animation on roll out. Below is the ActionScript used. The additional code is in red:

// 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 on mouse roll over.
myTarget.onRollOver = function() {
   // 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;

      
// Stops animation on mouse roll out.
      myTarget.onRollOut = function() {
         delete onEnterFrame;
      };

   };
};

This tutorial was an introduction to the DisplacementMapFilter now available in Flash 8 Pro and is intended to be used as a starting point to apply more realistic effects. It should be used in conjunction with other filters, such as the BlurFilter, and ColorMatrixFilter as well as alpha properties to create things as complex as realistic shadows, or something as simple as a flag waving in the wind. You might like to look at the example on my web site: www.wasimsingh.com Thanks, Wasim.

Have fun.

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

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


47118 visitors to this page since 18 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.