Quickly Illuminate a Complex Idea

Shadow Element
Shroom jumps for an apple.

Of all the graphic arts, animation is the most technically demanding.

Animation, especially as used on the web, is a very broad term. Nowadays, anyone with a program that can interpolate frames can do “animation” after a fashion. Create a box, go forward a second, move the box, go forward another second, spin the box. Play it back. Look, it’s animation!

Unfortunately, much of what passes for animation on the web is only a slightly slicker version of that. An animation should have more going for it than just movement. It needs a communicative purpose.

“Acting with a pencil” was an old fashioned definition that’s still appealing. That’s what we mean when we talk about animation: using movement for a communicative purpose. That’s the art of animation—not spinning, whooshing logos accompanied by a driving techno beat.

For the innovative lawfirm of Fenwick & West, we animated this pretty holiday card that features their four locations and their commitment to creating opportunities.

The Stanford Graduate School of Business reminds alumni that half of the cost of their graduate education came from alumni contributions.

Ball Plant Carnations Dandelion Frost Gravel Leaves Logs Many Bubbles Money Plant Small Bubbles Snails Sprouts Starfish Stem Slices Tiny Rocks Water Weed Weeds

Some concepts are not inherently visual and require a bit of creativity to convey to an audience.

Blade Network Technologies, subsequently acquired by IBM, made innovative network computer equipment. This value proposition animation explains to Blade’s customers how they can simplify their network infrastructure using Blade’s products.

A collection of historical photos highlighting Stanford’s rich history was the inspiration for this video sent to alumni.

A train metaphor and a collection of student portraits anchor this thank you from the Stanford Graduate School of Business to the alumni who supported them.

Scanning AnimationModeling AnimationTool Paths AnimationMilling Animation

For, animations used in the navigation help buyers find their way through a variety of products aimed at particular stages of a complex industrial process: scanning, modeling, tool paths, and milling.

Motion graphics can communicate complex ideas more effectively than narration alone. This is a collection of shots, for Offroad Capital, that were dropped into short videos about technology companies. For these shots, there was no provided imagery.

Some of the animation we do is created using traditional cel-based animation—an Oxberry animation table with a peg registration compound—and some of it originates entirely within the computer.

Our motion graphics have been used in corporate videos to quickly illuminate complex concepts. Technology companies use us to explain what they do to investors and customers. Often, an animation can make a difficult concept clear in seconds.

Our animation work is often tightly bound to our work as digital compositors. We’re no stranger to rotoscoping articulated mattes in an effort to seamlessly blend two shots together. In our work, we use After Effects, Lightwave, Flash, Motion, Motor, together with many other tools. But it’s all in service of the communicative function of animation.

Case Study: Kids Online Network

Shroom is the main character of the Kids Online Network The main character of the Kids Online Network is Shroom. He's designed to appear to live his life inside the computer. Taking his cues from the computer’s internal clock, he eats breakfast, takes naps, and goes to bed at the same time as his young users. One of the educational goals of the CD is to teach young children about the concept and measurement of time.

The Kids Online Network was a grand idea. We wanted to create a place for prereading kids on the Internet—a cross between AOL and Nickelodeon perhaps. Using a connected CD, children ages three to six were to be offered the interactivity and immediacy that a CD-ROM provides together with the connectivity and mutability possible on the Internet.

We designed and built the environment, activities, and animations, but the project required a large corporate sponsor to continue. We thought we were close to a deal when Disney’s “Blast” site was announced. Blast tried to provide one website to serve children ages 2 to 15! Although Blast never did what the Kids Online Network would have done, the prospect of competing with Disney was just too daunting for our sponsors. Ah well…

Developing Kids Online Network, we created some proprietary techniques which makes possible certain complex effects. For example, we developed a sprite and path animation system which allows sprites with no transparent pixels to be fully anti-aliased and even appear partially transparent against a particular detailed background. No real time compositing is required when this animation is played. It sounds obscure, but it looks great and, if you’ve ever needed to do it, you’d appreciate how valuable it could be. It’s particularly well suited to animation on websites over static backgrounds.

Kids Online Network featured a spatial graphic interface for use by pre-reading children.

Kids Online Network featured a spatial graphic interface for use by pre-reading children.

The Kids Online Network trailer (1:40). Follow Shroom as he lives his life inside your computer. Kids Online Network was designed for pre-reading kids, ages three to six.

Kids Online Network Demo (15:28) is a low frame rate animation which illustrates an innovative sprite and path system that allowed for a 24/7 animated environment to be streamed over a low bandwidth connection.