Flash Web Design: The v5 Remix

Read an Excerpt

Chapter 7: Chistina Manning Poem deconstruction

The job presented a couple of challenges immediately; the first was time-I only had a few days I could spare-and the other was more of a design challenge. How does one present a midsized poem over the web in a way that would be both functional (no preload) and compelling? I knew I didn't want to have just pretty pictures and scrolling text. In fact, I began to look at this spot as an opportunity to free myself from my reliance on type in motion.

The solution revealed itself the moment I heard Christina read the poem. Although I was familiar with the poem, I asked her to read it out loud. I wanted to hear the rhythm in the poem. Being aware that poetry is based in cadence and rhythm just as is motion graphics, my thoughts ran to the obvious solution of capturing and reflecting the rhythm of the poem in my spot, But what was more clearly revealed as I listened was that I had no choice but to try and present thepoet reading the poem. Her reading style is amazing. I had to use it.

Once I decided to design the spot around Christina's voiceover, I simply broke out my video camera and filmed Christina reading the poem. I figured that with my camera I could capture both the audio and make use of some of the visuals I would later grab from the video. This ended up working great. The challenge then was to come up with a design that used a limited number of bitmaps, reusing those bitmaps throughout the file to keep the stream free for the audio. Think of it this way ...regardless of your viewer's connection, be it a TI or 56.6 modem, there is a pipeline through which bits of your file stream. If you can come up with a file with assets light enough not to clog the stream, you win. In this case, I carefully chose a total of seven bitmaps pulled from my video of Christina reading that I could reuse throughout the file. I furthered my chances at art open pipeline by blurring the bitmaps in Photoshop prior to them into Flash. The blur allowed me the freedom to apply a heavy amount of JPEG compression in Flash without a lot of image breakup.

So, in essence, I targeted the poet's voice-over reading of the poem as the most important element in this file, and then I did everything I could to design around that ...carefully constructing a montage of images that relied on repetition, varied scale and angles, overlays, and positioning to keep the spot visually compelling.

All the while, I kept in mind that her voice-over audio stream would be occupying most of my pipeline.

streaming MP3 voiceovers with Flash movies

With long movies, it's difficult to precisely sync audio and video in Flash. Given the high number of variables involved-the wide range of browsers, the huge array of processors and system configurations, and the vagaries of Internet speed and congestion-you might be tempted to throw in the towel. With the introduction of streaming MP3 audio, Flash 5 offers a viable approach to presenting audio over the web.

MP3 has several clear-cut advantages:

• Streaming capability. For audio clips of any length, streaming is a far better alternative than traditional download-and-play. A great deal of web traffic is still traveling on limited dial-up connections with, at best, a 56K modem. Streaming audio allows even these relatively low-bandwidth connections to experience multimedia without the wait.
• Smaller files size than other codecs. MP3 compression is state of the art, and the results are wonderfully compact.
• Superior sound compression. Streaming ability and small file sizes are solid features but would be worthless if MP3 quality were unacceptable. Fortunately MP3 files maintain much of the original fidelity for most types of audio including music and, as shown in this demonstration, voiceovers.

Because Flash 4 and Flash 5 are capable of encoding MP3 natively, no special plug-in other than the Flash 4 or 5 player is required. Browsers with the Flash 3 player installed will still be able to view the file-they just won't be able to hear it. This is both good and bad news: On the positive side, if you're authoring a work that is not reliant on audio, then the much larger (at the time of this writing) installed base of Flash 3 users will be able to view it. On the other hand, if the audio is vital to the movie, you have to make sure your audience is aware of the necessity of the Flash 4 or 5 plug-in. (Check out www.moock.org for a free downloadable Javaless Flash player tester. This will tell your viewers which version player they have and instruct them to upgrade.)

recording and processing sound

As with other Flash movies that involve imported media, the first steps with a voiceover are capturing and processing the audio. With today's desktop systems, you can record directly into a program such as SoundForge or SoundEdit 16. The requirements for recording a live performance, as was done in the case of this chapter's example, are very straightforward:

• Secure a microphone with either a mini-jack plug or a mini-jack adapter.
• Ensure that your recording levels are good. In both SoundEdit and SoundForge, there are recording level meters. If the recording volume is too high, the sound will distort; if the volume is too low, the sound won't be properly heard.
• Record in a quiet room. Except in a professional sound studio, it's very difficult to remove ambient noise with- T out affecting the primary sound.
• Capture your audio at the highest sample rate possible. I typically shoot for 44k / 1 G-bit stereo. Remember that the better the source the better the export.
• Have available plenty of clean hard disk space. Converting any analog signal to digital-whether it's audio or video-is file-intensive. The higher the quality= and the longer the audio clip, the larger the file size.

firewire video capture

Most multimedia systems sold today allow you to record audio directly to the hard drive with a microphone.
Although I could have used a microphone for the Shy piece, I opted to record the artist with my digital video camera (Sony TRV9...about $1,300, although cheaper models can be found-just make sure they have Firewire ports) plugged into the Firewire port.

Let's talk about Firewire. I have to recommend it for video capture. It allows you to capture clean full-screen video or( your desktop, with relatively small file sizes. The quality is much better than comparably priced JPEG capture cards, the playback (you actually view playback on your camera, which remains connected to your computer) is in real time.

All Mac Gas and G4s come with Firewire capture cards l stock; for PCs, the cards usually sell for under $500, and for that price they are usually bundled with a full copy of Adobe Premiere. I shop at www.videoguys.com and have been satis fied with their service. So if you are thinking of working video into your Flash work, check out Firewire. (To stay up to date with the growing world of DV and Firewire, get a subscription to my favorite mag of the moment, Res.Subscribe at www.resmag.com.)...