Close

Displacement maps in flash

A displacement map is an age-old filter that’s been around since the first versions of Photoshop. When you use a displacement map in photoshop, you take a single image and project it onto another image. The black & white values of the first image are then used to “displace” the pixels in the second image.
displace_example

The cool thing about flash is that you can apply these displacement maps not only on images, but on anything you have on the stage. This includes animations but also movies that can be manipulated by the user.

In this case I wanted to make editable text on a t-shirt look more like it’s really printed on the shirt.
displace_flash

View the working SWF example here!

The most amazing part (at least to me) is that this whole effect only takes three lines of code to implement:

var myImage = new MapImage(480,480);
var myDisplacement = new DisplacementMapFilter(myImage,new Point(0,0),1,2,30,30);
shirt_mc.filters=[myDisplacement];

To allow the user to save their creation as a JPG image, I used adobe’s JPEG encoder. I got this working very quickly thanks to this explanation by Henry Jones.