Typographic animation

The Planet of the Drums tour brings some of the loudest, most intense electronic music to over 25 North American cities. Coupled with imagery of damaged/destroyed audio devices, it is important that planetofthedrums.com typography and navigation brings forth the same loudness to engage users into the experience. The solution? FontLab’s sideprogram, FontFlasher, and the development of a fully dynamic and customisable navigation system (with tricks) in Flash. This tutorial will show you how, using typographic animations in Flash, we came up with the effects you see on the website.

The navigation works in an iPod-esque fashion, scrolling to the right to take you further into the site, and to the left to bring you back. To maintain the distortion, we gave the motion a random quality, moving at different increments at a time.

In order to better distinguish the white type from the underlying white image, we tried to almost separate the two with resolutions. As a result, the 85pt Helvetica Bold looks as though it could be 8-bit.

The navigation buttons were also designed to have various states, which included the up (standard white), inactive (hashed white, for forthcoming sections), mouse over (solid green) and visited (hashed green) states. We’ll show you exactly how these elements were produced both in FontFlasher and Flash, and leave you with a very powerful resource for future development.