How Did You Do That?

The hands on my home page have gotten quite a bit of comment, and I thought I'd say something here about how it’s done rather than answer those hundreds of pleading emails about it (there were at least two).

Image Capture

I started with a series of movies of my hands against the sky, taken with my trusty Cannon SD400. I grabbed the frames I wanted, and adjusted the image curves in Photoshop until higher contrast gave me silhouettes.

Bezier Curves for Quick Download

Because I wanted a small final size and flexibility in working with the hands, I created outlines of the shapes in Illustrator, before bringing the shapes into Flash.

The final .swf file is 33k, pretty small when you consider the video-like feeling the hands bring.

Animation

Next I used a series of these hand outlines to animate hands placing and playing with menu elements. This was the fun part, and the long part.

Page Integration

Finally, I integrated the Flash movie into the html page I wanted to use for my home page.

It was important to keep the body of the page in html, for the search engines and for consistency with other pages in my site. However integrating the hands with the white box and dhtml menuing was tricker than it may sound. In fact, until recent programming breakthroughs with dhtml menus, it was impossible to move a flash element under a pulldown menu that’s not in that flash movie.