Buddy Alen turned me on to the Leo Burnett Agency Website, a fantastic bit of Flash website wizardry. Move the pencil around and click: the entire space zooms in and rotates into place. It has really great transition work too, just enough to be unexpected without being distracting. It really ‘moves well’…nice work.

What makes something move well? There are some good techniques at work here:

• Multi-plane Layered Movement — Notice how the letters are not moving at all the same speed? They are divided into groups, not all adjacent to each other, and move at different calculated speeds to create an illusion of depth. When you look outside a car passenger window at a big flat piece of land, and notice how the mountains in the distance move slower than the cows standing in the pasture, which themselves move slower than the trees by the guardrail at the side of the road…that’s the same idea. Traditional 2d cel animation uses this technique all the time…it’s at its most majestic in early Disney, and at its most shameful in 70s Japanese animation. It’s particularly mind-blowing in cartoons like Samurai Jack. Amazing action and art direction…these digital animation systems have really opened things up. It warms my heart to see multi-plane done well in a Flash piece…it’s not as easy as it looks to get it feeling right.

• Ease-In, Ease-Out — In the real world, things have weight and mass. When something starts moving, it first has to overcome inertia, so it starts slow and speeds up. In animation, simiulating this is called easing, and it makes the difference between something looking horrible and mechanical versus sophisticated and cool. You see it here as the zooming process begins and ends. It feels…luxurious. If you want to make your animation look cheap and crappy, just linearly interpolate your motion. Blah. Note that even South Park uses ease-in and ease-out…the motion is actually really good.

• Overlapping Action — Things are pretty dull when you know exactly what’s going to happen, especially if they are happening one after the other. By having two or more things happen at the same time, you can break some of that boredom. You can see this when the zooming is just about to come to an end, and other activity starts flowing across the screen. It’s a subtle, but lively touch. It’s a fine line, though; there’s a big difference between overlapping and competing action. Competing action splits the viewer’s attention–that’s great when you are doing magic tricks and don’t want the audience to see what you’re doing, but in motion design it means you’re just wasting money. The one time it’s useful is when you have something to hide, like swapping a complex vector image with a static bitmap just before you begin an alpha fade. You’d do this for realtime performance reasons–vectors are slow to refresh, especially lots of text, which means your fade will be choppy and ugly. It may no longer be an issue with Flash Player 8’s bitmap-backed vector cache scheme, but I’m starting to ramble…

<

p>If I have any critique at all, it’s that the slick interface steals attention from their portfolio. Because it’s more fun to zoom around, you’re unlikely to see the nifty content three or four levels deep. I didn’t even become aware of the other content until I accidentally clicked on one. Yeah, I wasn’t really paying that much attention, as I was thinking about how I’d code this up…

Be sure to click on the apples, which reveal more information about the agency’s founder and namesake, Leo Burnett. There was a cool tidbit about the use of the pencil icon: Leo liked big black pencils because big ideas came out of them. That makes sense to me…don’t ask me why.