Flash Tutorial - Displacement Map Filter & Animation
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:
46188 visitors to this page since
18 April 07 •
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here
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.