Webmonkey: multimedia: Interactive Presentations with QuickTime

Interactive Presentations with QuickTime
by Kevin Fraser

For all the hype surrounding streaming video, most of it isn't very compelling: That small, stuttering clip (or, if you're blessed with screaming broadband access, a slightly smoother, slightly larger clip) just doesn't measure up to the music videos you see on TV.
So for now, the best approach is to not even try to compete. Rather than struggle to recreate TV, go for something completely different: a unique, interactive experience. With a little preparation and a dash of creativity, you can create compelling full-screen video presentations that make use of your varied multimedia powers while entertaining your audience, however slow a person's connection to the Internet may be.
To clarify, when I say "full-screen interactive video," I'm not talking about a modem-choking, full-screen, full-motion video clip. I'm talking about combining vector and bitmap animation, graphics, hyperlinks, and that ever-present talking head video together to be viewed in an external viewer or embedded in a Web page.
Something to keep in mind as we tackle this project is that this area is so new, there're few places to go to for guidance. While the technology we'll be using isn't really bleeding edge, using it is definitely akin to flying without a net. So experiment, test often, and you might just invent some conventions along the way.
But before we dig in, let's take a closer look at why you would want to learn how to create interactive presentations.
When and Why to Use Them

Let's take a look at why the time is ripe for you to learn how to create interactive presentations:
The technology is finally up to the task. As more and more people aquire broadband access, QuickTime's Progressive Download is now a viable real-time streaming option. No special server software is required. Simply stream from a regular HTTP server while avoiding most firewall issues.
It improves site "stickiness." Just like regular streaming video, interactive video increases causes people to stay on your site longer. People who watch streaming video spend 80 percent more time online than their non-video viewing brethren, and they regularly purchase goods online. These are people that are comfortable with emerging technologies, so if you build more compelling content, they will come (see Arbitron's great study The Buying Power of Streamies for more statistics).
It converts browsers into buyers. While your standard talking head provides commentary in the corner, you can include product demonstrations with up-close diagrams or text that illustrates key points. Include links to buy, email or visit the company site in the same window, and you'll do a better job of promoting your product than making people just read about it.
It saves money. If your boss or client isn't quite ready to bite the bullet and spend the cash on a live event, showing graphics or slides alongside a video clip of the presenter is an affordable way to extend media assets without the cost and complexity of a live streaming broadcast. Plus, they'll think it's really cool.
It looks good in your portfolio. An interactive art piece shows off the full myriad of your skills -- photography, multimedia, writing and whatever else comes to mind.

So, are you convinced? Good, then let's get started.
Your Tools

The technology I use for this article is QuickTime, which is almost an operating system in itself, a technology that lets you experience what could be described as browserless browsing, allowing you to view a multitude of media types with a single plug-in. The cross-platform nature of this technology is a great feature, plus you get to ignore most browser incompatibilities. QuickTime does require a bit of horsepower on both Macs and PCs, but most modern computers are capable of handling it adequately.
For my own interactive video demo, I used the QuickTime compositing tool, and various Web development tools.
There are now many programs that will help you accomplish these tasks. Totally Hip's LiveStage is very similar to Electifier Pro and is available for both Mac and PC. It, however, has its own language, Qscript, which is extremely flexible and powerful but comes with a steep learning curve. If you're a whiz with Lingo and desire ultimate control, then LiveStage is probably for you, otherwise, Terran's Cleaner 5 might be a better option for you.
Cleaner is a unique tool because it allows you to create interactive presentations with what they call EventStream actions. These events and your original media can then be output to any of the three leading streaming formats. In fact, if you do a lot of compressing for audio, video or multiple formats, then you probably own this software already.
Another option is Adobe's GoLive 5, which, like all the others, takes advantage of QuickTime layers and wired sprites to produce interactive movies.
Whichever you choose, the most important part of building your own interactive presentation is still in the planning. Put down that mouse, take out some paper, and sketch, doodle and list everything you want to include. Treat this project as you would a website: What do you want the audience to think, feel, and do after they've watched your presentation? Keep focused and the actual production part will be a breeze.
The Process

Now, I can't really give you a definitive step-by-step of what you should be doing as there isn't a standard way of creating interactive presentations. I've made a demonstration video to show how I made my own version:

View the sample video, then use the techniques you see to make your own presentation.

One of the drawbacks of doing interactive video using the progressive download format is that you can't jump ahead in the video timeline until it is downloaded onto your computer. It's probably best to construct your video as a linear presentation. For example, if you have a long-form video (such as a lengthy president's address), break the video into separate, smaller movies and link them together.
For me, designing interactive video is a lot like constructing CD-ROM applications with a program like Macromedia's Director. You start out with a background, then layer buttons, rollovers, and layout windows in your favorite graphics program. Web graphics programs like Fireworks and ImageReady are great for this process as you can export all the separate image slices very quickly without destroying your original files.
Think big when creating your background. The term full-screen used to imply a screen size of around 640 pixels wide by 480 high. Again, you're trying to capture your audience's attention for the duration, so why not try setting your canvas size to say, 600 pixels wide by 350 pixels tall? That way you'll take over a large part of their screen and command their attention.
It's important to note that the size of the movie isn't what eats bandwidth, it's the content that's inside. QuickTime doesn't recompress everything inside the movie. If you drop a 600-by-350 graphic into the movie for a background, it gets preserved on its own layer and only needs to be downloaded once.
Most websites now ignore the 640-by-480 screen size as the lowest common denominator, but keep in mind that the only thing worse than side-scrolling a website is side-scrolling a movie.
Using the same conventions as a CD-ROM app, I start by dividing my canvas into four separate areas. I put the actual video clip in the top left corner, cropped and compressed to 180-by-135 pixels. Below that is where I'll put the global navigation elements such as links to Web pages, email addresses and other links you want the viewer to be able to access at any point during the presentation.
The main window will be designated for graphics that will fade in and out as the video clip progresses. But use these transitions with caution. If you've ever watched someone's digital slide presentation full of endless transitions and flying bullets, you'll know what I mean. I like the look of the fade effect. Just remember, the faster your computer, the smoother the transition looks. If you're going to convert graphics from a certain slideshow program, you'll be happy to find that those blue gradient backgrounds compress really well as GIFs and look fairly sharp.
Once you have everything looking and playing the way you want it to, the next step is to put the whole thing to (em)bed.
To Embed or Not To Embed?

One of the drawbacks of using QuickTime is you can't launch the external player with a regular text link. Apple recommends that you embed a small, single frame movie, a poster in the page to launch the external player, but I just avoid the extra hassle and embed the movie directly into the page.
Plus, if you embed your movies into a Web page, you can make maximum use of your browser's cache. In the following example, note the inclusion of the cache tag to the HTML code:
<EMBED SRC ="http://www.itdoesntsuck.com/coolmovie1.mov" PLUGINSPAGE="http://quicktime.apple.com" WIDTH=600 HEIGHT=366 CONTROLLER=true LOOP=false AUTOPLAY=true cache=true>

By setting the cache to "true," the file gets downloaded and saved to the viewer's hard drive for later viewing. If the user returns to the page at a later date, the movie gets loaded out of the cache and very little of the movie will have to be downloaded again. Try doing that with a streaming player.
Note that the movie I created is actually 350 pixels tall, but because I told the plug-in to show the controls across the bottom (CONTROLLER="true"), I had to add an extra 16 pixels to accommodate it. I always display the controller as a rule of thumb as it provides a nice visual feedback of the download process, and it illustrates where you are exactly in the presentation.
Next step: Run the movie through its paces.
Testing One, Two, Three

When you've finished putting all the elements together and you've got your final product, do as you would normally do with any website or other online project: TEST, TEST, TEST. Try and find the lowliest machine you can with the slowest modem and see how long it takes to download.
Even though your target audience might have high-speed, dedicated access, testing your video over a modem will probably reveal some bottlenecks and other performance anomalies that you would have missed otherwise. Yes, at some point we will abandon the 28K modem users with their 90 MHz Pentiums, but at least you'll have the satisfaction of knowing that they could watch your fine presentation if they had the patience.
I hope I've given you some ideas and some hope for the future of video on the Web. It really comes down to education. The more you educate your friends, coworkers and clients about what is possible versus what is the current standard, the more possibility there is that our future just might live up to all the hype.
Most of the software I've mentioned is available as time- or feature-limited demonstration downloadable versions. So grab a copy, arm yourself with some statistics and start making interactive video.
Broadband access might not be pervasive yet, but with some of the new tools available and your mighty brain, at least everyone can stop squinting.

Kevin Fraser is the new media producer for Cormana, where he focuses on streaming and interactive video for a wide range of clients. He is a graduate of Sheridan College in Oakville, Canada and is currently working on a degree in screenwriting at York University.