Flash tutorial training on the DisplacementMapFilter as used with ActionScript.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Displacement Map Filter

See Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

 

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)


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. Go to: File > Publish Settings
  7. If the Flash Tab is not selected, select it:
  8. For Version select: Flash Player 8
  9. For ActionScript version select: ActionScript 2
  10. Click: OK
  11. Save the Flash file and name it: Displacement-Map.fla


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
  4.  
    Right click on the pictures map.jpg & target.png and save them.
  5. Import the images: File > Import > Import to Library
  6. Select the two images: map.jpg & target.png
  7. 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
  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

    Target Image. 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


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. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  7. Give your Movie Clip an Instance name: myMap

    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.

  8. Drag out from the Library and drop onto the Stage: myTargetMC
  9. With the Movie Clip still selected change both the X and Y points in the Info panel to: 0.0
  10. Give your Movie Clip an 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:
  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: Explaining The ActionScript

See Main Tutorial for notes: Full Length Tutorial


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. Select the: Image
  6. In the Properties Inspector click: Swap
  7. Select the image you just imported: target_swap.png
  8. Click: OK

  9. 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)


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!

See Full Version of this: Tutorial


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