This file, the Macromedia Shockzone, has played on the Macromedia site for over two years now. It's the longest- playing Flash animation in the history of the world or at least it's the longest-playing Flash animation on the Macromedia site, which is still a pretty good reflection on the spot's design or maybe just a reflection on the amount of back-work the Macromedia web team has. Either way, even after two years ”an eternity on the web ”the spot looks good. The design itself is based on simplicity, consistency, and functionality.
At the time of the original design, connection speeds of 28.8 weren't guaranteed . The 14.4s were still out there and CPUs were in the 100s, not the 300s of today. This Shockzone spot was designed to creatively make the most of a limited environment. That's important, because limitations will always be present in the web environment. Learning to attack these limitations creatively has always been my biggest asset when designing.
For the purposes of this design, there are a couple of key concepts to keep in mind. First, I establish a consistent language for the introduction of text. For the brand, Macromedia, I decided to bring the word onscreen one letter at a time, literally, "visually downloading" it. Rather than seeing the web's natural "streaming" as an obstacle to seamless design, I have opted to use it to my advantage by utilizing this technique. Even better, this gradual construction of text forces the viewer to focus on the word being spelled out, thus encouraging retention. Second, color , while it rarely drives my design vision, greatly enhances the intended emotional cues. As the word "Shockzone" spells on to the screen, graceful spheres of color lead the way. This lends a softness and an elegance to what is a simple, and otherwise potentially mundane, text effect.
I once had the pleasure of working with Neville Brody, the amazing British designer, whom I recall saying to me (imagine a classic Brit accent ), "Hillman, it's all about consistency consistency, consistency, consistency."
It is indeed all about consistency. Throughout the spot, each time the key word "Macromedia" and sub-phrases "Shockzone," "Shockwave," and "Flash" appear, I utilize the same effects, gradually building "Macromedia," and accenting the sub-phrase with color. In addition, I establish uniformity through the use of one font face, and a palette of seven colors (from which I do not stray!). This kind of visual consistency serves a practical purpose in terms of messaging, as well as providing the design itself with a rhythm that mesmerizes the viewer.
The only other technique I use in the spot is an effect I call the split fade, which is more intriguing than a typical fade to black. This is a fade that uses three instances of text or three instances of an object to fade out to black. Visualize this: The three identical instances are stacked , one on top of the other, with the topmost as the primary focus. As the topmost instance fades and recedes to black, the second and third layers split vertically, and fade out. This vertical split is a matter of five to ten pixels, up for one layer and down for the other.
Finally, I add a film grain between transitions to give the spot depth. The result is a compelling text-driven animation that uses mood, rhythm, consistency, mystery, and simplicity to keep the viewer engaged.
This example of text animation represents an essential technique in my work ”that is, a focus on dynamic, rhythmic text movement. Rather than viewing the word as a static, whole entity, I try to look at each letter as having its own potential for motion. Words can break apart and spin back into place.