|
|
|
 |
|
|
|
|
|
||||||
|
||||||
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:
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 StageQuick 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:
Step One: Setting up the Document
Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player. It also needs to be set to ActionScript 2 otherwise you will get error messages. It is best to set these options right from the start.
Note: This Tab will not be visible unless the Flash box (under the Formats Tab) is selected:
.
Your properties should now look something like this: Window > Properties > Properties (Ctrl F3)
Property Inspector.
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.
Note: Now the images need to be imported to Flash.
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.
Note: Setting the registration points are necessary for a realistic effect.
Image registration set to: 0.0
Target Image. The above process need to be repeated with the target image. The target image contains the foreground image.
Note: You should now have four symbols in your Library: Window > Library (F11)
Library Panel.
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.
Note: Now there is an Instances of the Movie Clips on Stage. We can only reference it through Actionscript if it has an Instance Names.
Movie Clip's Instance Name: myMap.Warning: Instance Names are case sensitive and you should never use spaces!
Size: You will now have a long Movie Clip on the stage:
MC on the Stage.
With this effect the background image moves slowly to the left and when the image gets to the end the animation stops. To make the animation last for a reasonable period of time I have used a long image. If you look in the Property Inspector you will see the width is: 2200 pixels wide.
A filter is not applied if the image exceeds 2880 pixels in width (or height). Thus it is possible to stretch the image just as little further.
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.
Movie Clip's Instance Name: myTarget.
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.
Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on 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;
};
Step Six: Understanding The ActionScript
The code consists of 4 main steps: Importing necessary classes, setting up parameters for the displacement map filter, applying the filter, and animating the filter.
// Import the filter and required classes.
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
Note: Possible values for componentX, and component Y are 1 (red), 2 (green), 4 (blue), and 8 (alpha).
scaleX The strength of the effect in the x plane.
scaleY The strength of the effect in the y plane.
Note: Higher numbers mean more displacement.
The displacement map accepts a BitmapData object, NOT a movie clip object as its first parameter. The following piece of code grabs the bitmap information of a movie clip and places it in a BitmapData object.
// 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);Note: Look out for a bad draw
This code is for debugging purposes only!! In order to test if you are drawing your bitmap data object correctly. This will give you a visual representation of what you are actually drawing://create an empty movie clip named "debugClip"on the next available level
createEmptyMovieClip("debugClip", this.getNextHighestDepth());
//attach the bitmap data to the movie clip on the next available level
debugClip.attachBitmap(mapBitmap, this.getNextHighestDepth());Warning: Make sure you remove this code as it is for de-bugging only!!
In this case, the Point parameter is simple since during the stage and image set up section of this tutorial , all applicable points were set to 0.0.The remaining parameters are straightforward:
// 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;Now that all the parameters are prepared, we can send them all to the DisplacementMapFilter object using this line of code:
// 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;Note: If you test your flash file at this point. You should see the filter applied. A nice effect on its own, but let's animate it.
// 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;
};
Test your flash file now, and you should have the finished effect.
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
As long as the Edit bar is visible you will now see the Movie Clip name displayed: Window > Toolbars > Edit Bar
You know you are editing the MC as the name is visible: myTargetMC
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)
This swapping can as easily be done with the map image as well.
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!
Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates
•
12358 visitors to this page since
18 April 07 •
|
|
|
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.
|
Webwasp Community: