Video Fundamentals
When movies were first invented, the world was wowed by their ability to create a hypnotic replica of life. Silent films like The Cabinet of Doctor Caligari heightened the perception of an "alternate reality." The "color" of black and white film, along with its shimmery quality, added to the mystique of celluloid, making it quite the spectacle to behold.
Nowadays, film, television, and video are everywhere. As a result, most people take multimedia, and the equipment you need to enjoy it (a video receptor and an audio playback device), for granted. Which makes life tough for would-be Web videographers: with compelling sound and vision right there in your living room, multimedia on the Web is dull and disappointing by comparison.
If you keep that in mind, and are careful not to compare your Web work to Hollywood, you can successfully make your own kind of Web video magic. But only if you stick to the Web rule of thumb: a big fat download time is the easiest way to crush the entertainment experience and break the suspension of disbelief. So keep your video files very small or stream them.
Before we get to compression and streaming, we're going to cover the basics for shooting and capturing video. As with audio, it's important to start with the highest quality source available. If you're working on a high-end project and have access to film, by all means, use it. But for this tutorial, we'll just assume you're one of the many digital videographers who uses a High-8 or video camera.
And now, on to the DOs and DON'Ts of creating video, and then the TIPs and TRICKs to capturing it

Publishing Multimedia Files with RealMedia
Now that you're all big audio and video producers, it's time to actually get those files up on your site. As I discussed earlier in this tutorial, one of the biggest challenges with multimedia files has always been keeping file sizes down to a dull roar. Recently, streaming media has eased this pressure to cut corners from your files. Streaming lets users play a clip as it downloads, alleviating the need to wait for the entire thing to arrive before enjoying it. After struggling with embedded QuickTimes for years, the Webmonkeys think this streaming development is pretty cool. (There will be more about this topic on Day 7, when we'll dive deeper into the stream.)
Today we'll focus on encoding files using RealNetwork's RealMedia suite. Why? Well, to ensure that your media can be viewed by the maximum number of users, you need to encode it for the most popular player on the market (i.e., you need to get Real). And it's no coincidence that this is the group of tools we Webmonkeys use and like. However, if you do opt to use something else, the basic concepts I cover here should still be useful.
Before we begin, let's take a quick look at Real's suite of products.
RealPlayerThe RealPlayer (the beta version is available for free) is a helper application that attaches itself to your browser, remora-fashion, and is invoked by an HTTP request for a RealMedia file. This launches the Player and lets you see/hear the file.
RealEncoderEssentially, the RealEncoder (which is also free) takes your file and squashes it. By stripping out extraneous layers of information from your audio or video clip, the RealEncoder reduces your file size. Back in the day of RealAudio 1.0, this process made your audio file sound like it'd been run though a Mr. Microphone: terrible. Since then, RealNetworks has built a number of options into its 5.0 RealEncoder that allow you to offer high- and low-bandwidth options on your site. The resulting compression algorithms are a leap-and-bound improvement over 1.0. Do your job right, and the media can look/sound really, really good.
OK. Everybody have everything they need? All right, let's cakewalk through the process of encoding an audio file.

The Finishing Touch: Encode that File!
Audio
First, open the RealEncoder. Select your digitized audio file from the dialog box, and then select your codec (or compression/decompression algorithm). The 5.1 encoder has a dozen codecs to choose from, from "Audio 14.4 Music-mono" to "Audio 56k Music-Stereo," so just select the one that best describes your file.
Be sure to experiment with several codecs. If you're not happy with one, try another. As you play around with codecs, it's nice to use a clip that accurately represents your content but is only 3 to 5 seconds long (since the encoding process does take a while).
It's a good idea to offer your audio file in different compression versions. Make each version available via different links -- "14.4 bps," "28.8 bps," and "56k-ISDN or above." It's understood that the feeble-connection version will sound dirt-poor, but a T1 connection can get the in-stereo, Rolls-Royce version. (Real claims CD quality here, but we think it's more like a high-quality cassette tape running through a good system.) The number of surfers sitting at the end of T1s or T3s is surprisingly high these days, so developers interested in maintaining their street cred should provide the best possible quality files for their bandwidth-endowed surfers in addition to low-bandwidth options.
Once you've created all your files, all they need is the ".ra" suffix and they're done.
Video
Other than naming your file with an ".rm" suffix (versus an ".ra"), encoding video for the RealPlayer is almost identical to the audio procedure.
As with audio, I recommend spending some time experimenting with different codec settings. A "wizard" will make most of the decisions for you, or you can use an "advanced" option if you want more control. And, as with audio, you should provide your users with a range of options -- like "talking heads mono 28.8" or "talking heads stereo 56k-ISDN."
Something else to note: The latest versions of RealEncoder allow you to capture video directly. Although this seems like a cool feature, be careful -- it will leave you without a digital master of your original video file, which is pretty sketchy (unless the RealMedia product is the only thing you care about).

Now Put that File to (Em)bed
It's time to publish the file in your Web page. (Finally!) But first you need to decide what route you want to take: A tad complicated but free? Or one-click easy for $50?
To go the free route, start by moving the .ra files to your Web server using an FTP program, specifying "raw data" as the media type. Be a good li'l Webmonkey and drop them into their own directory. Now, in the Web page you're using to feature the sound files, embed the following:
Listen to Tim, the Webmonkey cowboy, rock on the banjo at:

14.4 bps

28.8 bps

56k/ISDN
You may want to make a glossy button in Photoshop; it's guaranteed to get your users a-clicking. If you want to go the art route, simply use the image tag in place of the text in the example above.

src="stuff/button_1.gif" />
More advanced designers will no doubt want to construct cool-looking JavaScript-driven players with modular edges and mouse-over buttons, but I digress. Or get ahead of myself. Or something.
And that's it! Pretty simple, huh? But throw some money at it, and it could be even easier.
For fifty bucks, Real now offers a nifty tool called RealPublisher. (The RealEncoder is included in the price, so if you were planning on getting that anyway, this may be a good way to go.) With RealPublisher, you don't have to monkey around with FTP and HTML. All you have to do is open the application, tell it which (already encoded) file you want to publish, what the FTP filepath will be, and hit the "Create HTML" button. The tool then spits out a chunk of HTML, or an entire Web page, and FTPs the files to your server. This is pretty handy if you are working on a high-volume site. If that's the case, RealServer might be something else to look into, especially if it comes packaged with the other Real products - buying piecemeal from RealNetworks can leave you with nothing in your wallet but an echo.
But whether you go for free or for fifty, I strongly recommend a dress rehearsal: Before you make that be-audioed page live, test it out using your own RealPlayer.
COMING UP NEXT: On Day 6, the lovely Wendy will cover everything you need to know about image mapping in RealVideo. And on Day 7, I'll finally get down to the nitty-gritty of streaming audio and video. Be there or be L7!

Image Mapping in RealVideo
When I found out that RealVideo contains an image-mapping function, I knew I had to experiment with it, but I wasn't sure how. My main problem was this: I love film because the medium is simultaneously entertaining and passive. I love that once I step through the theater doors, I never have to make a choice while watching a movie. So why on earth would I ever want to interrupt a user's entertainment to encourage interaction with videos on the Web?
A choose-your-own-adventure story seemed like one possible option, but those always bored me as a kid, so I didn't have much desire to use this technology to offer people different fictional narrative options.
After mulling all this over for a while, I decided a nonfiction story would best utilize video image mapping by providing users with the ability to shift between general and fine-grain information. To experiment, I created a mini-documentary about a technology education project called the Humboldt Institute for Technological Studies (HITS). It's a collaborative project I work on with the rest of the Webmonkeys. The documentary was developed specifically for RealPlayer and provides people with an introduction to the HITS Web site, while the image mapping gives users the opportunity to investigate topics within the video that they find interesting.
Since the video acts as an introduction to the topic, a dual form of navigation enriches the story by offering people multiple levels of information. Those interested in an overview and a more passive experience can just watch the slide and audio piece. Anyone who wants more can interact with the movie by clicking on stills within the video that provide entry points to the HITS Web site.
Software: RealNetworks' RealPlayer.
Got the tools? Check out Wendy's interactive slide show.[28.8] or [56.6].(Don't forget that you can click on the slides to make different Web pages appear.)

How It Was Made
Before jumping into the image-mapping process, I had to create the movie. Since motion within streaming video continues to be a bit klugey, I used still images instead. I wanted the final product to be a hybrid of slide show and radio documentary.
Once I chose my photographs and converted them to the PICT format, I imported them into my editing system along with the audio and quickly cut my piece. I was happy with the outcome and found that once the movie was encoded, the still images maintained their image quality much better than the video footage I have used in other RealVideo shorts.
When I finished the movie, I began work on the image mapping. First I had to choose where each image or series of images should lead the user. As I made a list of my images, I also noted their beginning and ending points using the running time displayed at the bottom of the RealPlayer. Then I began writing the map file, which is simply a text file. Here is part of the code for my image map that should give you a good idea of the information you need to create your own:
DURATION=0:0:3:57:0
One of the first things you'll probably notice is that the map begins with the duration of the video. The time is marked in days:hours:minutes:seconds:milliseconds. You have to note each of these time specs, and if one measurement is empty, be sure to stick in a zero or the map won't work.
Notice the map is divided into areas. An area is defined by a starting time and ending time within the video's time line. I used the areas to indicate an image or series of images that are connected to a unique URL. It's also possible to define different shapes within an area. The space within the shape is a hot spot that will take you to a URL (just like a regular image map). The shape is defined by coordinates, which I believe are in pixel width - although I can't verify this since the documentation on the RealPlayer site was vague.
Since RealPlayer movies are so small, I recommend using a rectangle and defining your hot spot, or link, as the entire screen. You can also display text in the bottom of the player by defining alt text for each area. This text will remain the same throughout an area.
Once you create your image map text file, you are ready to merge the map file with your video file. For a step-by-step description of how to merge these files, check out this RealVideo page. I found this part of the process to be a bit annoying, because currently you can't use the image-mapping feature unless you have a Windows box to merge the text file and the .rm files, which are the video files. (Although, as you probably already know, video files can be encoded on a variety of platforms.) But once I got over my irritation, I was quite pleased with the results.
Before you embark on your own image-mapping adventure, remember that time-synching with streaming video is not very exact. One way I dealt with this issue was to make sure that I had extended audio passages between each image in order to give users some time to explore the site. If you encode multiple versions of the movie for users hitting your site with different modem speeds, I also suggest making a map for each movie you create, since the video encoded for different bandwidths seems to stream at different speeds.

How to Stream Your Files Using the RealServer

Yeah, you could squish that three-minute audio file down into 300 to 500 KB, but you'd better warn that poor sap sitting at the end of a paltry modem connection to "click here, then go get a sandwich." Or you could deliver high-quality multimedia without an insane wait by streaming the file (which lets your users play the file as it downloads).
The introduction of streaming media to the Web has changed the fundamental rules of the game. Real was the first company to offer this technology in a coherent form (one more reason why we use its products). But to make it work, you need a RealServer, which is server software (not hardware) that handles the outgoing streams of packets. It's available in a number of categories (in ascending order of sophistication and cost): Basic, Intranet, Internet, and Commerce.
The Basic version, which is free, is a good way to test the waters and acclimate yourself to the software. However, that version only provides 60 streams, so you'll be turning people away from your site if more than 60 people log on at the same time.
The Intranet version is a nice, middle-of-the-road solution - in terms of capabilities - and is tailor-made for internal media distribution. I like the possibilities here: a CEO could use it like a principal would the intercom at high school, briefing employees about upcoming events - only the message would come right to everyone's desk instead of being broadcast in homeroom. It could really get that propaganda element going: very Citizen Kane/James Bond.
If you plan to stage a major broadcasting event, invest in either RealServer Internet or Commerce. At a whopping US$15,000 for 200 streams (for the Internet category), these solutions aren't really an option for the average non-corporate budget. But the pricier servers do offer more than just extra streams. Say you are running a big event, like a pay-per-listen for the Jane's Relapse tour. If you just use HTML to create a password, any "crazy kid" could pay once, then turn around and post his login info to twelve mailing lists. And you would lose a ton of money. But with the RealServer commerce Password Tool, if they don't pay, they don't play.

What kind of machine do I need to run RealServer?
RealServer 5.01 is available for six assorted flavors of UNIX, Windows NT, and Windows 95. RealServer requires 6 MB of RAM plus 40 KB RAM for each simultaneous stream (approximately 10 MB of available memory to support 100 concurrent connections). Although a dedicated machine is preferable, and a requirement if you're expecting lots of hits, RealServer can theoretically run off a little-used PC.
Installation of the software is relatively simple and the documentation is good. There are a few known bugs, but if you have a problem, just check out the FAQ and download the patch that corresponds to your error.

So, How Do I Stream Up My Site?
The RealServer takes your video/audio file, segments it, and sends the pieces to a buffer on your hard drive. The buffer then renders the packets together to play like a continuous file, resulting in a smooth, high-quality track with a painless download time.
RealPublisher can generate the files you need to make all this work, but you're much better off knowing what's going on in case something breaks. So, to stream a .ra file, start by creating a corresponding .ram file (which tells the RealPlayer to receive the file from the RealServer as a stream, rather than a download). The .ram file is a text document that contains a simple string, like this:

Creating RealFlash Animations

In the past seven days of this tutorial we've learned how to create, edit, and publish our very own audio and video for the Web. We've also gotten mighty real, covering the ins and outs of RealPlayer, RealEncoder, RealPublisher, and RealServer. And today, we're going to top all that off with a look at an interesting new option for streaming media: RealFlash.
RealFlash represents the fruitful marriage of Macromedia's Flash 2.0 (sophisticated animation software) and RealNetworks' RealSystem (a software package that streams animation together with audio), a combination that allows you to sync up vector-based animations with streaming audio. And, since RealFlash can play on the RealPlayer 5.0, it inherits all the advantages of a large user base, distributed multicasting, bandwidth negotiation, and fast-forward/rewind control over playback.
Building Your RealFlash Toolbox
To make this breakthrough technology work, you'll need an audio capture/editing set-up. You'll also need a copy of Macromedia Flash 2.0 to create the animation and sync up the audio (a free trial version is available at Macromedia), as well as RealPublisher 5.0 or RealEncoder 5.0 to encode the file for the RealPlayer. You should also get the RealFlash optimization kit (which includes tools and documentation to streamline playback), the RealServer 5.0 (to stream the files), and the RealPlayer 5.0 with the ActiveX Control and Netscape plug-in (to actually view the files). All these RealNetworks products can be obtained at the RealNetworks site

Working with Flash 2.0
Flash 2.0 is vector-based animation software. Unlike rasterized images (which are pixels in a grid), vector images are composed of mathematically defined lines, curves, and fills. This means you can scale, or resize, these images without loss of quality or a dramatic change in file size. Flash does handle rasterized images quite nicely, but it's silly not to take advantage of its capability to use the smaller - and sharper - vector-based images.
If you have experience working with Adobe Illustrator or Macromedia's Director, you should have no problem finding your way around Flash 2.0. Flash has a toolbox, a timeline, and an array of utilities that you use to create and manipulate your images. Since the program happily imports Freehand and Adobe Illustrator files, you may want to do your work in those programs and use Flash just for assembly. But the toolbox does let you select geometric primitives - like lines, circles, and rectangles - which you can use to create basic shapes. And you can group sets of these primitives to make elements, which can also be manipulated. Use the timeline to assemble these elements into a coherent sequence and then sync the audio. And presto! It's multimedia!
Flash 2.0 is robust enough to develop or reproduce full-length features - maybe not Akira, but certainly something with relatively simple elements like South Park. You can also create plain ol' animated GIFs using Flash (versus funkier, less precise shareware animation software), since not every animation needs to be streamed.

Encoding and Embedding Those Flashy Files
Now that you have a finished Flash animation, there are two ways to encode the file for streaming delivery over the Web. The first is to use the free RealEncoder; the second is to use the RealPublisher, which retails for US$49. The encoding process is identical with both tools, but the RealPublisher handles HTML and FTP for you.
If you dug out the clams for RealPublisher, all you need to do is enter the filepath and choose an audio codec (compression/de-compression algorithm), and your files will be automatically encoded and FTPed to your server.
If you opted for the free RealEncoder, the process is a bit more complicated. Once you've finished your masterpiece, export the animation as a .rm (RealMedia) file. Make sure to select the appropriate codec for the audio: If your animation is complex, pick a lo-fi codec that squashes the audio. By the same token, you can use a CD-quality audio codec if you've managed to keep your animation simple. Because RealFlash runs on Real's streaming media protocol, you'll also need to create a text "metafile" that points to the actual media clip. (This process, which is like the one used to configure all RealMedia files, is described in the RealServer lesson.) FTP both files to your RealServer-equipped Web server, and you're ready to rumble. However, if a test-run fails to rumble right, double check your filepaths, and make sure you have all the proper plug-ins. To make sure you've got the right plug-ins and helper applications, go to the ShockRave site and let its JavaScript/Java wizards guide you through the process.
Who Needs to Get Flashed?
RealFlash is all about animation (and little else). So, if you're a budding cartoonist looking to score a slot on Comedy Central, then RealFlash is worth it. But beyond that, I'm really not sure why anyone else would use it. Macromedia touts it as the perfect tool for advertisements, training courses, movie trailers, and karaoke. But why, unless said trailer or advertisement was animated, wouldn't you just use RealVideo? Don't feel compelled to invest in RealFlash just because it's the buzzword of the moment. Unless, of course, you want to do animation (in which case this product, in the words of the unsinkable Cartman, "kicks ass").
We hope you have enjoyed and learned some things from this tutorial. And now that we've given you the tools and tips, and dos and don'ts, it's up to you to go out there and do us proud with your own multimedia Web creation.
So shake a leg, rattle some cages, and get rolling!

The Status of Multimedia on the Web

No one can argue that images make the Web explode - a big change from the text-based clime of yore. Sound and motion? Even better! Real life has moving pictures with full stereo sound and it's only human nature to push the Web to include these elements. As the Web features more and more multimedia, we want you to be a part of it.
This tutorial will take you through the entire process of multimedia-izing the Web. We'll start with the basics, showing you how to pack your toolbox so you can actually experience everything. Then we'll move on to capturing, preparing, and publishing multimedia using RealNetwork's RealMedia. We'll conclude with a look at how to stream media files using the RealServer.
Why so much focus on RealPlayer? First and foremost, it's the most ubiquitous player around (which, as you'll see, is very important). The second reason for getting Real in this tutorial is because we know their products, ahem, really well. The Webmonkeys have been using RealMedia in its various forms since RealAudio 1.0 was released way back in 1995. Certainly RealMedia is far from perfect, but we're comfortable with the Real interface and have seen great improvement in their product suite over the years.
Today, before we get our hands dirty and our feet wet, we'll look at the history of multimedia on the Web, paying particular attention to the problems you'll face when you put audio and video on your site.


The answer to the small-pipe/impatient-user problem is to shrink your files down to a manageable size. When a typical digitized movie can eat up a megabyte per second, you HAVE to squash your files. However, file compression means taking away refinement, so the end product is always much worse for the wear. But you can limit the extent of the degradation by being smart about how you compress your files.
Psycho-acoustical research has taught us a great deal about how to remove certain frequencies of "useless bandwidth" that human ears can't detect anyway, thereby reducing file size without affecting the auditory experience (much). Smart multimedia on the Web starts with superior compression algorithms that take advantage of this research.
Alas, purity of the algorithm is not the only thing to consider when picking a compression method; we also have to think about who owns the player. When compressing a multimedia file for the Web you often have to use proprietary software (especially if you are interested in having your file stream onto the page). Once the file is compressed and up on your server, it is usually only accessible to users who have the player created by the same company that developed your compression or encoding tool.
So as a site developer, your goal is to pick a tool and an associated player that you think most of your users already have (à la the browser war). Though you can never be certain who is coming to your site or what tools they have, you just have to make an educated guess and hope for the best.
A few years ago, the field was wide open with no standard at all for multimedia compression on the Web. Seeing a potential need within the developing Web industry, a host of small companies sought to establish the kind of market share Netscape enjoyed at that time. They all tried to be the best (and the cheapest, considering Netscape was free) product on the market. It was a heady time for a number of start-ups, but sadly, due to the hyper-Darwinistic world of Web capitalism, few of them survived.