The Displacement Map Filter Demystified
Flash Professional 8 introduced a number of exciting new visual filters — such as drop shadow, blur, glow, and bevel — which reproduce many of the corresponding filters of Photoshop and Fireworks. Of these, most are available via the Property inspector’s Filters tab. All filters are accessible to ActionScript, but a few actually require programming. One of these is the DisplacementMapFilter class, which distorts images based on the colors or transparency in a special reference map.
I just started a new article series on Community MX to explain the displacement map filter in visual terms. My intent is to illuminate the somewhat overwhelming sample code provided in the ActionScript 2.0 Language Reference. The first article is free content, and teaches what the DisplacementMapFilter class is and how to use it to reposition pixels in an imported graphic file. In future installments, you will learn how to produce a handful of very cool visual effects that are only possible with ActionScript, including a magnifying class, fisheye lens, and ripples.
February 5th, 2007 at 12:29 pm
Does it work pretty much the same way as the photoshop displacement filter?
Also, can you use a B&W flv?
March 27th, 2007 at 9:27 am
var,
Wow, sorry for this late response! I missed your post, somehow. To answer your questions, a) yes and no: the concept of Flash’s displacement map is similar to the one in Photoshop, but accessed differently; in addition, ActionScript gives you more control over its implementation than Photoshop does; b) yes, you can use displacement maps on video, whether color or black-and-white.
March 30th, 2007 at 6:37 am
Hi, I read all your tutorial on the displacement map filter (parts 1-3), This has been a great help. What I’m dying to find out though is whether an animated displacement map can be created. i.e. Lets say the that the map_mc in which the gradients are kept is tweened along the timeline. So that the gradient values appear to be shifting. I really want the disp. map to create a animated ripple effect.
I’m guessing this may have something to do with actionscript API, but If I could create it with tweened movie clip this would be a fantastic breakthrough.
Thanks
April 1st, 2007 at 12:07 pm
Jay,
You betcha, animated displacement maps are possible.
There’s a part 4 on the way for that series, and I’ll go into ripples in that one ( — not sure when I’ll get to that article, but it’s definitely coming). No matter what, some level of ActionScript is required, because you do need that
BitmapDataobject to display the distortion. I hadn’t thought of tweening the displacement map itself, but that should certainly work, in theory.July 19th, 2007 at 4:10 am
Hi Dave,
I’ve continued to play around with your displacement tutorial but i’m a bit stuck on something.
I have applied a (static) displacement map to the bitmapData object, and then set up a function on enterframe that draws an (animated) movieclip into the BDO. So the result being as if the movie clip were moving behind a lense/warp effect. The problem I now have is that the continously invoked draw function leaves a trace of all previous draws.
Is there a way of using the clear() method?
July 24th, 2007 at 11:20 am
I’ve realised from other examples of working with the BD obj, that you can fade out previous draws by applying a blur to the BDO. This isn;t quite giving the desired effect though as I don’t require any traces of the prevous draw.
:-S
July 25th, 2007 at 11:26 am
Jay,
Aha, I see what you’re after (I think) … different sort of animation than I visualized at first. Have you experimented with the optional transparency parameter of the
BitmapDataconstructor? By default, it’s set totrue, which may be causing what you’re seeing.July 31st, 2007 at 4:29 am
Hi again,
I found a make-do solution or probably the limitation of the BD obj. If the movie clip that is being drawn into the BD obj has a solid background colour then it will leave no traces of the previous drawing. So I just set up the BD obj to cover the whole stage, and then size the solid colour the same size as the stage. I suppose this would then limit me to only drawing into one level of the BD obj as the next layer up would obscure it (if it had a solid background). + I would need to load any further graphics into the next level up in the movie.
I’m trying to push this effect as far as it can go, Iand trying to see if I can use it to create Z_O_O_M distortion and perspective by applying a few maps to one image. Do you think this will effect playback performance?
July 31st, 2007 at 7:13 am
Dear Dave,
I’m also stuck with a simple animation i’m trying to create with an array, I guess I might have overlooked a simple detail somewhere:
I have arranged some movieclip instances on the stage (_root) at author-time and would like to hold them in an array. I can’t seem to get the loop at the end of this script to work: Any help would be hugely appreciated.
Basically what want to end up with is a load in animation, by setting the array’s visibilty to false initially, then looping through a function to set each indexes visibilty to true, with a setInterval variable so that it dosen’t happen too quickly. From there I could add a tween to the loop and fade the array instances in one by one.
shapes = _root[”eye1″,”eye2″,”nose1″,”dots1″,”lips1″];
trace(shapes);
//apply some properties to the array
shapes[_root]._xscale = 50;
shapes[_root]._visible = true;
_root.onEnterFrame = function() {
for (var i:Number =0; i