|
|
|
 |
|
|
|
|
|
||||||
|
||||||
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
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.
Right click on the pictures map.jpg & target.png and save them.
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.
Target Image. The foreground image.
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.
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.
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.
// 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;
};
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.
Right click on the picture and save it as: target_swap.png
You should have something like this:
Note: If the Movie below is not animating - refresh
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.
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
|
•
20661 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.
|
