Using the displacement map filter

The DisplacementMapFilter class uses the pixel values from the specified BitmapData object (called the displacement map image) to perform a displacement of an instance that's on the Stage, such as a movie clip instance or a bitmap data instance. You can use this filter to achieve a warped or mottled effect on a specified instance.

This filter is only available by using ActionScript. For more information on this filter, see DisplacementMapFilter (flash.filters.DisplacementMapFilter) in the ActionScript 2.0 Language Reference.

The following procedure loads a JPEG image and applies a displacement map filter to it, which causes the image to look distorted. Whenever the user moves the mouse, the displacement map is regenerated.

To distort an image with the displacement map filter:

Create a new Flash document and save it as displacement.fla.

Add the following ActionScript to Frame 1 of the Timeline:

import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.display.BitmapData;

var perlinBmp:BitmapData;
var displacementMap:DisplacementMapFilter;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip):Void  { 
     target_mc._x = (Stage.width - target_mc._width) / 2; 
     target_mc._y = (Stage.height - target_mc._height) / 2; 
     perlinBmp = new BitmapData(target_mc._width, target_mc._height); 
     perlinBmp.perlinNoise(target_mc._width, target_mc._height, 10, Math.round(Math.random() * 100000), false, true, 1, false); 
     displacementMap = new DisplacementMapFilter(perlinBmp, new Point(0, 0), 1, 1, 100, 100, "color"); 
     shapeClip.filters = [displacementMap]; 
};
var shapeClip:MovieClip = this.createEmptyMovieClip("shapeClip", 1);
shapeClip.createEmptyMovieClip("holderClip", 1);
var imageLoader:MovieClipLoader = new MovieClipLoader();
imageLoader.addListener(mclListener);
imageLoader.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", shapeClip.holderClip);

var mouseListener:Object = new Object();
mouseListener.onMouseMove = function():Void {
    perlinBmp.perlinNoise(shapeClip._width, shapeClip._height, 10, Math.round(Math.random() * 100000), false, true, 1, false);
    shapeClip.filters = [displacementMap];
};
Mouse.addListener(mouseListener);

This code loads a JPEG image and places it on the Stage. After the image is completely loaded, this code creates a BitmapData instance and uses the perlinNoise() method to fill it with randomly placed pixels. The BitmapData instance passes to the displacement map filter, which is applied to the image and causes the image to look distorted.

Select Control > Test Movie to test the document.

Move your mouse pointer around the Stage to re-create a displacement map by calling the perlinNoise() method, which changes the appearance of the JPEG image.

Flash CS3

Comments

scottr@benjerry.com said on Oct 11, 2007 at 7:58 AM :

I get compiler errors when I test this...

Line 8: 1046: Type was not found or was not a compile-time constant: Void.
Line 23:1046: Type was not found or was not a compile-time constant: Void.

swartz1999 said on Oct 18, 2007 at 5:31 PM :

scottr, you need to set the ActionScript version (in the Publish Settings) to ActionScript 2.0.

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000985.html