Posted on Saturday 30 September 2006
The Fuse animation kit makes it easy not only to animate objects but also filter properties. Changing a blur filter's strength in a smooth manner is as simple as telling an object to go from point A to point B.
One of the most underused filters in Flash 8 is the DisplacementMapFilter. With some imagination and a dash of math, it can be quite powerful. For example, one can create a displacement map that will warp an object as if it had perspective (a trapezoid transformation). No need to split the object in tiny triangles and fake it: just apply the DisplacementMap and you have perspective. Here's some code to generate a map that will transform a square into a trapezoid with a large top and a small bottom:
function createPerspectiveMap(width, height)
{
var bmp:BitmapData = new BitmapData(width, height, false, 0xffffff);
for(var j = 0; j < height; j++)
{
for(var i = 0; i < width; i++)
{
var col = 127 + j/height*(i - width/2)/width*2*127;
bmp.setPixel(i, j, col);
}
}
return bmp;
}
Here the displacement info is only in the blue channel but you could add some other info in the other channels to get more complicated effects. The effect is limited to 128 pixels of displacement before showing some distortion.
The next logical step is to use Fuse to animate a DisplacementMapFilter. Here one only needs to modify DisplacementMap_scaleX and the perspective is made stronger or softer. Here's an example and the source. Admitedly, it's not all that impressive, but just try to do that in Flash 7! The effect will remind some of window animations in Mac OS X and the new Windows version (obviously with a lot of tweaking). Fuse uses Robert Penner's easing equations so it's easy to get 'overshooting' and 'bouncing' effects. With some imagination, this kind of transformation can be added into pseudo-3d engines that are used for experience sites and the like. Lots of fun in perspective (okay, bad joke).
P.S. In case you're wondering, I generated the displacement map in Flash, then I took a screenshot, and imported it in the library of the displacement map test as generating it on the fly takes a couple of seconds. It's important to export as lossless (GIF/PNG) because the edges will be rough otherwise.
