Anatomy of a Web Launch - Orchestrating Media Tools for Maximum Impact

Challenge Offered

The challenge came after closing time when I received a call from a new client from the Midwest, representing the software giant, Computer Associates. She was assembling a client team to launch CA's flagship product, Jasmine ii Portal (pronounced "aye aye").

"For an inventive company like CA, a portal is much more than a gateway to the Internet or an Intranet," said client, Kimberly Burbules, warming me up for the challenge, "It's a place where we can demonstrate unique software solutions. You go to Netscape or Yahoo, those are portals with lots of neat features. We have them all, but more. For instance, you might use Yahoo Travel to build an itinerary for a trip around the world, but if you did that on the Jasmine ii Portal, our neural agents or "neugents" would quickly sense what you were doing and offer to show you several itineraries based on best price, or best times that you hadn't considered, without asking! And neugents are just one feature you can buy through Jasmine ii. There's more."

"Whew. So what do you want us to do?" I asked.

"We want you to make a (Macromedia) Flash 5 demo of the portal that potential customers can see on the Internet. It has to be really cutting edge, really entertaining and totally unique. And we want it based on this character we have called, @Man (pronounced, "at-man"). Look in your email."

I checked my email and found a photo of a man, dressed in a lemon yellow suit, white gloves and red shoes. Instead of a head, the man had a large, extruded "@" sign. I laughed.

"And when he curses, the at-sign can become a pound-sign, asterisk and cent-sign?"

Kimberly laughed, "You get the idea."

Plotting the Course

No one begins a megabuck project like this without getting a really clear idea of just what, exactly, a client sees in their head (or wants to see coming out of your head). Kimberly introduced me to her team, which consisted of one of the company's media managers, the corporate webmaster and the technical specialist for the Jasmine ii brand.

My first step was to define the bandwidth of the project. How big, how fast, what attributes would this monster have? This created a lot of discussion between client and producer. At first CA considered targeting only high level MIS types, who could be relied on to use DSL or better bandwidths with computers running 500 Mhz processors. If this were the target audience, we could design the animation at near film rates, use about 8,000 frames of animation and stereo sound. Further consideration of their marketing goals led the CA team in a contrary path, to design the show so that it would function for all levels of Internet viewers, down to the 56K modem, 166 Mhz processor configuration.

Rather than force the decision one way or the other, we decided to proceed with the project up to the point where the decision would have to be made. I informed CA that we would then produce short samples of the show each way, at the 8,000 frame rate and at whatever rate we determined would work for the "least common denominator audience."

The next step was to obtain visual agreement between my creative staff and the client team with regards to the elements of the design style. The two elements were @Man - and the "stage," which was relatively easy - a backdrop of real Jasmine ii Portal frames and some kind of frame design to hold all the action. We all quickly agreed on a theatrical stage, with a high tech, metal truss and moving spotlights. Our Flash Designer, Lee Taft, drew up some samples on Adobe Illustrator, and emailed them to the clients who quickly selected their favorite.

Next came @Man. Using the client's sample photo, our Animator, Jack Ehrbar, could create a 3-D model, but how does a character with a typeface face speak? Our Pratt Institute student intern, Alex, offered to sketch out some samples. He showed how different kinds of eyes and mouths could work and even created various styles of @Man, such as a French version and an urban version. @Man with a microphone and boom box. @Man with a megaphone. Some went to the client - others didn't. Eventually, we settled on the megaphone version, which would allow us to avoid creating lips and the attendant problem of lip-synching the client-supplied script in an Internet environment.

With all the elements to begin - script, character, stage and technical envelope - Jack was assigned the 3-D animation to create the character. Simultaneously, our Flash designer, Lee Taft, would create the stage and assist Jack in conforming the character's graphic specifications with Macromedia's Flash 5 program, which at that time had just been released. Lee, one of only a few Macromedia-certified Flash 5 instructors in the US, would also supply some 3-D animations that would demonstrate CA's portal display characteristics.

Not available due to other commitments, Lee would then pass the bulk of the Flash 5 programming to Bill Miranda of PFS Newmedia, a marketing agency with which our firm has partnered on several Internet projects since 1998. My job was to cast voice talent, select music, record and mix the audio track which would serve as the framework for all the animation once our team got down to making frames.

The Animation

Jack began the animation on Discreet's 3D Studio Max 3.1 installed on our Compaq servers with a complete array of Digimation plug-ins. Once Alex's drawings were approved, Jack started building the @Man character by taking the "@" sign and extruding it. Then he employed Max's patch modeling techniques to create a torso, arms, legs, feet and hands.

"When creating a humanoid character like this, with a static face, the most important part to get right are the hands," said Jack. Anticipating about 8,000 frames of animation for the DSL bandwidth test, and the challenge to create a character whose personality would be composed of just voice, hand and body movements, Jack used Discreet's Character Studio 2.2 plug-in to insert a high degree of controlability to each joint in @Man's body and hand joints. Character Studio allows for intelligent applications of joint controls, so that when properly installed, the moving of a hand will cause the wrist and arm to move appropriately.

The clients had specified that they wanted, "A friendly "avatar" character who would gather attention, be knowledgeable and fun, but silly," so Jack choreographed a different set of movements, postures and hand gestures for each significant paragraph of the script, resulting in over 40 unique routines, each of which was designed to highlight a specific statement or attribute of the client's product. Keeping track of 8,000 frames was a task greatly assisted by Max's RAM Player, which allows the operator to review individual image sequences with ease.

Since the client had approved a color still rendering of @Man that featured 32 bit color and extensive reflection and shading, Jack proceeded to animate test sequences of @Man in full color. These frames would then be taken by Lee for experimentation in Flash 5, where the character was "keyed" over the Jasmine ii Portal background plates. At first we had a lot of trouble getting this to work well, because every type of picture format would produce some kind of edge artifacts when @Man was composited in Flash 5. Eventually Bill discovered that .png files, Macromedia's web compositing format, worked and we started rendering test sequences.

With the DSL tests on their way to the client, Jack and Lee experimented with lesser densities of picture information, prior to making recommendations to CA. Using Digimation's Illustrate! 4.0 plug-in for Max, Jack easily created sample scenes with reduced colors, dithered surface textures, even flat, 2-D renditions of @Man, created like Japanese "anime" cartoons to shrink the file sizes to various target bandwidths.

The task of trimming down a DSL bandwidth Flash show to a 56K bandwidth is like taking a warehouse of survival gear and trimming it down to fit into a rubber raft. Bill took the various versions of @Man that Jack had designed and ran tests to see what version resulted in the lowest bandwidth. They all came out about the same - too much.

Bill took the Jasmine ii portal backgrounds and started to strip down their resolutions, sending copies to the CA product manager until a happy medium was reached. This saved considerable space. The audio track would have to pare down to mono, 8 bit as well. I worried about sibilance, a problem that sometimes appears when stripped audio tracks are run through the net and into even the best computer sound cards.

Finally, the results pointed to only one conclusion. The maximum number of frames that we could use for @Man's animation would have to drop from 8,000 to about...50. And still the final Flash 5 file would be over a megabyte, probably over 1.5 megs - almost unheard of in a world of instant playback demand. This meant that users on 56K modems would have to wait upwards of 3 minutes before the demo would start and that even when started, it might still choke the host system.

I sat to ponder the consequences. How could I deliver significant impact with an animated character, running 8 minutes, using only 50 frames? I poured through printouts of Jack's elaborate, graceful renderings. If I could somehow manage to create sufficient diversity and enough animation "routines" for @Man, we could still maintain our goal of client delight.

This work took us up to the Thanksgiving weekend and it looked like we would have to either work through it, or take the animations home. Not wishing to overwork my crew on a project which, due to deadlines, would soon kill the next four weekends anyway, I decided to download all of Jack's animations to my IBM T-21 Thinkpad laptop, which had been installed with 3-D Max just in case. The T-21 is lightweight enough to carry anywhere (5lbs.), has Herculean battery endurance (3.5 hrs. continuous) and can easily execute all the functions of 3-D Max, Flash 5, Photoshop and Illustrator at once, employing its standard Pentium 850 and 128 megs of RAM. Using the laptop, I could work during my holiday travel time.

Then Jack volunteered to take the laptop himself over the holiday. Using the 14" wide screen and 1400 x 1050 display, Jack opened Max up and started reevaluating the renderings while comparing them to the approved script, which he simultaneously displayed on the IBM in Microsoft Word. First, he broke down the script into a series of "gesture" codes. For instance, if eight different paragraphs required @Man to point left at something in the background, Jack marked those paragraphs as "Point Left" paragraphs. A few paragraphs required @Man to squat down, or sit ("Sitting" paragraphs), so he cell-phoned Bill and asked him if we could slide a simple chair in from offstage.

"Cool," decided Bill, interrupting a hot date to take his call, "A chair and an X-move, on and off stage will take very little space. Go for it."

After all the paragraphs had been coded, Jack passed the results to me. I found that I only needed 15 gestures to execute the show. Taking out a sketch pad, I started to draw a block diagram, starting with @Man's basic pose and drawing additional poses from this, like spokes on a wheel (see diagram). Going back into Max, Jack took 15 of his original choreographed moves and started deleting intermediate frames. For example, if Jack used 40 frames to take @Man from a standing pose to a "gesture right" pose, he stripped out every 10 frames and left frames 1, 10, 30 and 40. Using Max's RAM player, Jack tested the playback at various frame rates, imitating the capabilities allowed in Flash 5 to play back its frames at various rates.

By the time the holiday was over, we had built a block diagram that incorporated only 15 poses, interrelated in such a way that no more than 3 frames existed between any two poses. In addition, the diagram allowed for each pose to be reached by going through no more than one other pose, making a wide assortment of motions possible by going forward and backward, like a bumping car, around the diagram. When I got home, late Sunday night, I emailed the results to Bill and awaited his response Monday morning. The response was good. Although he couldn't be sure of the final data size, the plan Jack and I had devised over the weekend resulted in a test Flash 5 file on Monday afternoon that would easily run on a 28.8 modem and had the CA client team cheering. They decided to launch with the 56K version of our work. We set the DSL version aside for possible resurection later as a CD-ROM version, and proceeded to finish the low bandwidth demo.

With only some minor revision frames to make before Jack could sign off the job, I was now under the gun to make the audio track and get this to Bill for the biggest part of the project; the Flash 5 programming.

Tightening the Belt in Audio

Although I knew the end product of my audio work was going to be highly compressed, I wanted to get the best results possible. CA had future plans of releasing the @Man demo on a CD or DVD, which meant that eventually all 8,000 animation frames (actually 13,600 since we could go to full 30 fps) and a full, stereo audio track would one day be required. And yet there was a tight time schedule.

During the original discussions on @Man, a key factor was what the character would sound like. Would his voice be cartoony or real? CA wanted real - it fit the 3-D likeness. Asking for client input on a voice, it's often useful to ask the client to imagine a celebrity, in order to bring the suggestions into a range that everyone could mentally recognize. Suggesting Ernest Borgnine is easier than saying, "gravely, friendly, but with a possibility for real temper." The client liked Robin Williams, Steve Martin and Gary Shandling.

I auditioned several voice over talents and found one, huge talent, named John Beach whose audition tape actually mimicked Steve Martin and Robin Williams to a tee. Our script called for two voices. The cheerful @Man and a testy narrator whom @Man must convince during the demo. I cast a set of voice over talents for each type, but John Beach offered to do both! In the end, due both to John's talent, his in-house studio capability and our tight deadline, John won the contract. The two voices you hear on the presentation are both John, recorded, at different times, of course. His website is also a delight to behear (www.voiceguy.com).

Using phone patches, I was able to link the client in Indiana to John in his studio and me in my office. The resulting DAT tape, Fedexed to me the next morning, was fed into my PC-based editing system equipped with Leitch-DPS Velocity for video editing and Sonic Foundry's Sound Forge for audio editing.

Using still frames of @Man's poses, I built a rudimentary video timeline in Velocity and then captured all the paragraphs of John Beach's characters in carefully numbered .wav clips. These were captured mono at 48 kbps. Although Bill Miranda would eventually compress these clips for use in Flash 5, I decided that the entire demo would be edited at the highest quality and then chopped into chunks according to Bill's Flash 5 timeline requirements.

In order for me to assess how far the compression could be taken on the finished mix and still sound reasonably good, I tried various compressions in Sound Forge, using the "recompress" tool. This allows infinite ranges of compression both of frequency ranges, data bandwidth and bit depth. This proved to be enormously helpful in choosing from a vast array of stock music in my Firstcom/Music House library. As you might guess, hip hop was the category that could sustain the most compression and still sound like the original file.

Using a hip hop opening, I assembled the narration and @Man audio tracks into a final, still frame video that ended up looking like a pretty interesting PowerPoint presentation and sent this off to the client, via email for approval. I also sent various compression samples as well, using the "cry uncle" approach to assess at what level of compression the client felt the audio fell below their expectations of acceptable quality. Thus, the Sound Forge compression tool, which is easily reversible back to the original version, provided Bill with a limitation guideline for building the final Flash 5 file, without taxing Bill's patience.

Flash 5 Construction

With the soundtrack and all animation cell revisions completed, the project moved into Bill Miranda's hands under the guidance of PFS Newmedia CEO, Jason Miletsky, who brought in another programmer, Cathy Mellado, to handle some specific Java scripting that would be required before the project could finally run on CA's servers.

Because of the enormous size of the show, Bill chose to break it down into easily streamed chunks that, conveniently, matched the script's "chapter" structure. Chapterizing also allowed Bill and me to assess the relative size of each chapter so that if we trimmed copy or frames in one we could do likewise with the others to maintain esthetic balance. Using my block diagram and the associated animation repertoire that Jack developed, Bill was able to orchestrate the flow of @Man's movements so that they did not appear to be excessively repetitive.

In addition to the animated @Man sequences, CA had requested that we design an interactive menu bar that would allow the viewer to navigate the presentation, pause it, mark it to quit and return viewing and to register for a free, 20 day test of the product. This was no casual request.

Since the entire purpose of the demo was to get potential customers to sign on for the 20-day trial of Jasmine ii Portal, the demo had to allow the viewer a wide range of anticipated actions, ranging from an outright "quit" to a "I love this, let's register" decision at any time in the viewing process. Most of these options are easy to create in Flash 5, but the option that was most difficult was the client's desire to have stop the show, mark the pause point and return again to the same point. This proves impossible without writing to the viewer's computer (using "cookies") and CA did not want to initiate such an intrusion of the potential customer's space.

Cathy proved a lifesaver in this department, assisting Bill to create an attractive menu bar that offered the next best thing to quit-and-return, which, in the end pleased the client even more than their original desire. What Cathy designed was a chapter system that broke the Flash 5 file into 5 distinct parts or chapters. These were titled by the client into the 5 subject categories that CA marketing felt were the keys to understanding Jasmine ii. Bill then incorporated these chapter names into superimposed titles at the bottom of the screen. As the show streams to the user, the titles change. A menu bar selection, "Scene Navigation" pops a list of all 5 chapters and users can jump to any chapter they choose, thus making the necessity of bookmarking unnecessary and aiding the user to a higher degree.

Once Cathy designed the functionality programming of the menu bar, Bill was able to execute all the Flash 5 calls using Flash's newly incorporated interactive features. Unused on our program, but now available in Flash 5, are significant web-learning tools, such as multiple choice questions employing radio buttons, matching of columned items, sequence building and other common instructional tools that are employed by many distance learning professionals but which were not easily incorporated into any economical authoring program until Flash 5.

Bill's opening pages for the demo are also of note. These were created in Adobe Photoshop 5, and ported into Flash. While serving the most common function of providing information while the user downloads, the screens also instruct the viewer how to use the menu bar, before the @Man show actually runs. These screens make the initial download of some 400 Kbytes more palatable, especially on smaller bandwidths.

The Wrap Up

Our working demo in Flash 5 ended up being just slightly more than 2 megabytes, a Goliath program. Because Bill had segmented the show into chapters, viewers with 56K modems don't usually wait longer than 2-3 minutes to see the show begin. Of course, while they are watching Chapter One, the other chapters are loading in the background. DSL and T-1 viewers will be delighted, however to see that the show starts playing after 10-20 seconds.

Another problem that reared its ugly mug was the Flash 4 - Flash 5 compatibility issue. Whenever a new version of an Internet plug-in debuts, there is always a lag time before everyone in the user world downloads and installs the plug-in. Because Flash 5 was absolutely necessary to run this show, Flash 4 was not an option. However, if users only had Flash 4 installed, our show would lock out to a black screen. After sending our show to Macromedia for evaluation, the makers of Flash showed us a simple program called a "Flash 4 Sniffer." This program is hidden in the opening window of the Jasmine ii demo and if the user has not upgraded, a message appears within 10 seconds pointing the user to the Macromedia site where the Flash 5 player plug-in can be downloaded and installed in minutes. Users who already have Flash 5 installed, go right into the demo. Of course, users who don't have Flash at all should read the text that precedes the demo.

Our work was completed just in time to absorb all the technical buzz that was generated by extensive magazine advertisements in all the computer trade press. Although some debate continues at CA about the viability of @Man as a corporate representative, both the CA sales staff and the general public seem to respond favorably to the character and his message. At any given time there are over 1,000 potential clients taking the free 20 day trial of the portal and thousands of hits are recorded daily on the demo.

Our production was called, "Awesome!" by Macromedia staffers who had a preview, but we are sure that by the next Flash Forward convention, there will be even better productions out there to make @Man quiver in his little red shoes (Jack, can you animate a "quiver?").