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

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:

• Gets the color from (x,y) in the map bitmap
• Calculates an offset based on that color
• Looks up that offset location (x+dx,y+dy) in the source bitmap
• Writes that pixel to the destination (x,y), if boundary conditions permit

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: