Building Asexpressedbyyou.com
The result of the group's work is AsExpressedByYou.com, launched on October 1, 2001. Site visitors don't just select fixed components to design martini glasses—they control properties such as rotation, scale, color, and transparency. Figure 1 shows the interface.
Adam Holden-Bache and Mark Lewis, CEO and CTO respectively of Mass Transmit, were at the technical helm of the project, managing the day-to-day mechanics of grinding out the ActionScript code and producing the graphical content. They worked within the tight guidelines typical of any well-established brand.
 |
figure 1: Bacardi USA uses Flash animation to get consumers to interact with its campaign for Bombay Sapphire gin. |
As the brand owner, Bacardi had detailed specifications on how things had to look visually and textually. For instance, Bacardi guidelines don't allow the use of dull blue in marketing materials. The result of such a rule is that consumers have learned to associate Bombay Sapphire with brilliant blue on a white background. Similarly, there are to be no rounded or beveled corners on line boxes. Bombay Sapphire style decrees clean, 90-degree corners. The brand manual also contains rules about using Bacardi's proprietary fonts, each designed for a particular use, such as logo, body text, or press release. The site went through several iterations based on these kinds of issues, says Chau.
Because the application and content have a total footprint of 675KB, which includes a variety of graphical elements and several musical backgrounds, the developers knew they had to find a way to minimize program load time. Otherwise, a lot of users would become discouraged and click away to another site. Mass Transmit reduced wait time by implementing the application as a lot of small SWF files—over 100 of them. Only ten files, including five sound files, are over 17KB in size. Most of the other files—for the bases, stems, and tops of the glasses—are very small. A full 76 of them are just 1KB apiece. The site works reasonably well even on a 28.8KBps modem.
Although Flash streams graphics and sound so that animations start to play before they're fully downloaded, having small files makes it easy to display a separate "loading" message for each of the background images. This message alerts the user as soon as a background is loaded, so that he or she can start to use available backgrounds immediately.
Site visitors can choose from a dozen backgrounds—six animated and six static. The user chooses one from a thumbnail-like display. These backgrounds aren't exactly thumbnails because they're complete backgrounds reduced in display size with the Flash scaling function. This reduction doesn't lessen the number of bytes in the files, so they take a little longer to load than true thumbnails would. The advantage is that when you click on one of them, the full-size image jumps immediately into the workspace because it's already loaded.
After creating a martini glass, the artist can email friends a message containing a link to his or her chef-d'oeuvre. Many visitors have taken advantage of this viral marketing feature. Some have even used it to invite others out for a drink!
Development & Infrastructure
With the exception of Flash, Mass Transmit used mostly open source development tools and platforms. Contact information for site visitors is stored in a MySQL database running under Red Hat Linux. The SWF files that make up the martini glasses (each glass is typically composed of six to ten small files) are also stored in the database. The Web server is Apache 1.3.20. All of the software runs on one 500MHz Pentium III Hewlett-Packard LPr with 256MB of RAM. The Mass Transmit team notes that the infrastructure, hosted by Interland, has caused very few problems. When I talked with the team, the server had been up for four months without a reboot.
Most of the database access functions are implemented via PHP 4.0.6. However, PHP didn't have the functionality necessary to retrieve and display a specific martini glass when a visitor's friend clicked on a link that he or she received in a "postcard" email. To get around this, Mass Transmit implemented SWF access via Swift-Generator, a dynamic Flash content generator from Swift-Tools. A unique ID for the glass is included as a parameter with the link in the email. For example, www.asexpressedbyyou.com/receive.php?id=012589113478 is a functional link to what is no doubt the world's only deep-diving all-titanium submersible martini glass!
The receive.php script passes the ID to Swift-Generator, which embeds the ID in a Flash template (SWT) file. The SWFs that make up the martini glass are loaded into the SWT file based on the ID. The SWT file also triggers another PHP file to do the actual MySQL database lookup and generate an XML document with all of the Flash object properties (like position, rotation, and color) necessary to recreate the design.
Swift-Generator is a full-function content generator, but in this case it's only used to put the ID into the SWT. "We could have just provided the user a text entry field in the [SWT] file to enter the ID," notes Lewis. "However, clicking a link with the ID in it is less hassle for the user." More complex Swift-Generator functions could be implemented using Swift-Generator-specific scripting contained in an SWS file. There is an SWS file in this case as well, but it only tells Swift-Generator the SWT file's location and puts Swift-Generator in CGI mode.
Getting glasses to display correctly on retrieval from the database wasn't always easy. The Flash SWT file had some difficulty recreating the design. These problems were apparently related to small (single-frame) delays in the availability of Flash property values, resulting in incorrect display properties like positioning and rotation. It took some careful coding to ensure that objects weren't displayed by Flash before their correct properties were known.
Mass Transmit made sure the application would run smoothly for all users by testing it on a variety of Windows computers and Macs, using both Netscape 4+ and MS Internet Explorer 4+ browsers. The team reviewed, among other things, plug-in detection, load time, and overall performance. Team members also tested the site on a 28.8 KBps modem on older Windows and Mac machines (like the Win 98/P233 and Mac 7100/66 OS8.5), measuring how much time passed before the user could begin creating the glass.
Emails sent by the application were viewed on a variety of clients, including Outlook, Outlook Express, AOL, Entourage, Eudora, Lotus Notes, and browser-based services like Hotmail, Netscape, Excite, and Yahoo. Mass Transmit even checked for plain text vs. HTML display and accurate HTML rendering.
