Mechanics of an Interactive Tour Bus
By Darleen Scherer
TVT Records, America's second largest independent record label, wanted to create a hip site that would grab customers' attention with entertaining and interactive visuals, and keep them at the site. After seeing our shop's Web site, which is based on changing themes designed using Adobe Photoshop 4.4 and Adobe Illustrator 8.0, TVT wanted a themed e-commerce site.
Our firm, Chopping Block, likes to add whimsy to its work. Socket, a team of programmers who share office space with us, built the back end.
After reviewing several ideas, TVT decided on a do-it-yourself theme in which visitors can personalize their site experience while they are navigating. The company further decided on a bus theme that would combine an Airstream trailer, a '50s hot rod, a custom van, and a touring van taking visitors on an excursion as they cruise for tunes (see Figure 1).
All the site's graphics, most of which are animated to enhance the live bus-tour experience, are line art created using Adobe Illustrator. While Illustrator is sometimes relegated to tasks such as type treatments and logo design, we decided to use it as the main art tool because it's vector based and can be imported easily into Flash, which we used to create the interactivity.
We focused our attention away from first-time Internet users and toward the kind of user who searches out extremely interactive sites with rich content. TVT agreed to an illustration-heavy theme, and because it sells music, streaming audio was very important. This is why we decided to build the site with Macromedia Flash and Generator.
Taking a Tour
When customers visit TVT's Web site, the first things they see are the driver-side mirror of the bus and an advertisement billboard. The site seems conservative at first, but if they click on the billboard, the hybrid bus comes closer and stops to load passengers for a musical tour. From there, customers take the wheel. Once they've hopped into the bus, they can shop on 12 screens. Each page features a piece of hidden art that might not make sense at first—it's just there for play. We've noticed that customers don't stop shopping after finding their desired merchandise, but travel to other screens in search of the hidden art, interactive boxes (or "nuggets"), and other rollovers.
The term "nugget" is one we coined to represent the interactive box that appears inside the bus window on the bottom half of the screen. For example, on the Soundtrax screen in Figure 2, the nugget is the window with the hot dog. Another nugget is hidden under the words "TVT Records" on each page. When users click on it, a yellow screen appears with a crowd facing a stage. When visitors roll the cursor over the crowd, the cheering becomes louder and the crowd performs a wave. Another nugget is a set of drums that the customer can play in unison to the sounds on stage. We create the images for nuggets, like the rest of the site, by scanning photographs and exporting them into Illustrator. Nuggets are small—usually just 2 to 3KB.
The Magical Bus Takes Shape
As the site's central figure, the bus took on particular importance. We drew a straightforward bus, but it was deemed too "normal" by TVT Records. That's when the work of creating a zany bus began in earnest. We created various models of vehicles. We scanned in bitmapped images, from Airstream trailers to hot rods of the 1950s, then brought them into Illustrator to use as visual reference materials for electronic sketching.
To begin the design process, we took images from the Web and edited them to present several concepts quickly to TVT Records. At this stage, our challenge was pumping out a lot of ideas quickly, even if they weren't perfect. Because we used Photoshop and its integrated ImageReady 2.0, we could create five or six different appearances within a day or so. We also used Photoshop as a sketchbook to add animation and other interactive elements that showed TVT Records exactly what we wanted to create. We used the Layer Mask feature to save time in creating quick animations as compared to creating them in Macromedia Flash or another product.
As with every Web site, there were multiple rounds of changes. Because Illustrator is vector based, we were able to go into the project, make quick changes, and cut and paste the entire thing onto TVT's site.
Getting Interactive
Interactivity within the site required several layers. The first and most important was organizing content. Invisible to most visitors, the site is 90 percent dynamically generated via PHP, and a SQL database running on Linux. TVT Records has a large roster of bands, each with varying amounts of information in similar categories. Because of this, we decided to split the site into two main frames of information that could cross-reference each other (see Figure 3). Then we added the main navigation bar to the center using the double pull-down menus to allow every page of content to be no more than three clicks away at any time. It's a more advanced navigation that lets users find info and music on TVT artists quickly. The site is 90 percent dynamically generated via PHP, and a SQL database running on Linux.
The second level of interactivity is the actual art, the elements we animate, the interactive nuggets, and the navigation. We used Flash 3.0 frame-by-frame animations. The most complicated scripting was the Tell Target command. (On rollover of x button, tell x movie to play). Every object on our stage within Flash was one of three things: a graphic, a button, or a movie clip. These objects alone couldn't do much, but when we began nesting them inside each other we accomplished some pretty crazy stuff. Flash 3.0 provided the foundation of our animation. Most of the site is simple frame-by-frame illustration drawn in Adobe Illustrator and pasted into Macromedia Flash. The Flash 4.0 plug-in was too new to us when we started the project, so we did everything in Flash 3.0. We also used JavaScript to link up the different screens to the main page.
Back to the Drawing Board
Of course, before we began designing in Flash, we had to create the art. We converted photographic and Web images into TIFs or simple screen shots, and brought them into the Adobe Illustrator art board to reference while creating our illustrations. Once we finished the illustrations, we converted all strokes to outlines so they would resize correctly within Flash, and tried to simplify each drawing down to the smallest number of points without losing too much detail. This resulted in smaller files and quicker downloads. We had to envision the animation before we even opened Illustrator, so we needed to create in-between frames to give the animated sections a realistic, fluid motion. Once we understood how each piece would move, we completed the work in Illustrator.
When we completed all the animations and in-between frames, we began importing them into Flash. Once in Flash, we either imported the illustrations as .ai files (using File, Import), or we simply copied from Illustrator and pasted directly into Flash.
We encountered a few problems along the way. If a document in Illustrator had too many points, it did not import into Flash exactly as we anticipated. Occasionally, we brought very complex illustrations (like the bus) into Flash only to discover that some of the illo was missing. Sometimes we could solve this by going back into the original Illustrator file and ungrouping all grouped objects. When this didn't work, we saved the art as an Illustrator 3.0 file and then the illustration imported completely. The only disadvantage to saving the work in the older version of Illustrator was that it did not recognize which colors were Web safe.
E-Commerce Pays the Fare
Marc Antony Vose and Noam Solomon of Socket took care of the site's back end. They created a sophisticated database-driven system linking the many features and multimedia presentations directly to catalog and artist information. It's template-driven, so TVT Records can change the site's content, uploading art for bands or adding new releases.
The site will soon let visitors view music videos, and download and listen to 50 percent of the company's music library. E-commerce links are also in the works, enabling visitors to put their money where their ears are.
Darleen is the general manager at Chopping Block, a New York graphic design firm. Reach her at [email protected].
