splash
Posted By erik on April 14th, 2010

http://blog.eerkmans.nl/?p=241

Me and the guys from Bureau BlauwGeel have been working together on their new website: http://www.bureaublauwgeel.nl
 

The CMS-based website uses video files to create a dynamic, living and breathing background.

Each menu item has a background image that slowly zooms in to keep that dynamic feel.
 
Although the background and interface always adjust to the size of [...]

 

Archive for September, 2009

Displacement maps in flash

Posted By erik on September 17th, 2009

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.