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 [...]
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.
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.
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.
Tags: AS3, displacement, flash
June 23rd, 2010 at 16:56
I was wondering if you could re-post the example swf as it seems to have been moved/removed, or if you could show the code you used in the top example of the book cover. I am trying to replicate that effect but I don’t know where to start with the code segment you posted.
Regards
August 16th, 2010 at 16:25
You link is dead, please, correct it.
August 16th, 2010 at 17:43
The link is working again, this is the actionscript code for using a displacement map:
// use bitmap from the library as the displacement map
var myMap = new LibraryBitmap(480,480);
var dmf = new DisplacementMapFilter(myMap,new Point(0,0),1,2,30,30);
shirt_mc.filters=[dmf];
If you want to use a dynamic perlin noise instead of a bitmap from your library:
// create a perlin noise instead of using a library bitmap
var myTest = new BitmapData(480,480);
myTest.perlinNoise(220, 220, 4, 4, true, true, 2, true, [new Point(0,0), new Point(0,0)]);