The Web’s HyperText Markup Language has a lousy sense of timing. In fact, HTML has no sense of time at all?unless you resort to migraine-inducing chunks of JavaScript PRE, you can’t create pages in which elements appear or disappear at specific times. Too bad, because time is a cornerstone of multimedia. Look at video and multimedia authoring programs: they’re built around timeline-based windows that show a project in successive stages.
Two relatively new markup languages go beyond HTML by supporting not only spatial markup (control over where things appear) but also temporal markup (control over when they appear). One language is called HTML+Time, and currently only version 5 of Microsoft Internet Explorer for Windows supports it?therefore it is of limited value to Web designers who want to reach the millions of surfers using different or older browsers.
| WHAT YOU NEED |
| A text editor, such as Microsoft Word or the Mac OS’s SimpleText RealPlayer G2 A RealSystem G2 server A compression utility, such as Terran Interactive’s Media Cleaner Pro 4 ( www.terran.com ) |
The other time-based markup language is called SMIL (pronounced smile ), short for Synchronized Multimedia Integration Language. SMIL is supported on tens of millions of computers right now, thanks largely to RealNetwork’s ( https://www.real.com ) RealSystem G2 streaming platform. The RealPlayer G2 family understands SMIL, and SMIL-based interactive projects can play back within the G2 player window or directly within a Web page via the G2 browser plug-in. At press time, Apple announced that QuickTime 4.1, due early in 2000, will support SMIL. Details are sketchy as to what SMIL features QuickTime will support, but it’s good news that the language will be expanding beyond the RealSystem G2 streaming platform.
SMIL’s approach to integrating media has some big benefits for Web developers. Interactive training courses, Internet-radio jukeboxes, narrated slide shows?SMIL is ideal for these and a host of other tasks. In “Presenting with SMIL” I show you a simple SMIL project and take a look at how SMIL works in the RealSystem G2 platform.
Several elements work together to give SMIL its capabilities.
Multiple MediaAs the name Synchronized Multimedia Integration Language indicates, SMIL presentations can marry multiple media?in RealSystem G2’s case, audio, video, still images, text, and Macromedia Flash animations.
Note that the SMIL file itself doesn’t contain these media. Just as an HTML file doesn’t contain graphics but instead uses tags to refer to them, a SMIL file merely references content that you’ve already created using the RealSystem applications.
InteractivityAny of the above elements can also contain hyperlinks. Make a still image a hyperlink, for example, and a user can click on it to go to a Web page, to a different portion of the SMIL project, or to a different SMIL project.
Bandwidth-Friendly Visual EffectsYou can add any of several different transition effects between still images. Because RealPlayer G2 renders these effects at playback time, they don’t increase the download burden by a single byte. Adding fades, dissolves, wipes, and other eye candy can spice up an otherwise static set of images. And because you’re working with still images, these slide shows don’t have the traditionally tiny, jerky look of streaming video.
Text-Based FlexibilityBecause SMIL is a markup language, its marriage of media happens through simple, HTML-like text tags. This not only makes SMIL relatively easy to learn but also opens the door to some extremely powerful applications. With a CGI script or other back-end software, you can generate SMIL files on the fly and thus tailor a presentation to specific conditions. Play different content depending on the time of day. Play different sections of an online training course depending on how well a user is progressing. Display real-time news or weather data retrieved from a distant server. Multimedia technologies that rely on binary files don’t allow for this flexibility.
Writing SMILBecause SMIL files are just text files, you can create them using any text editor, from the Mac OS’s SimpleText to Bare Bones’ BBEdit to Microsoft Word. As you can see in “Presenting with SMIL,” SMIL looks a lot like HTML?if you know HTML, you have a considerable head start in learning SMIL.
Today’s Web designers can choose between typing tags by hand and using a WYSIWYG editor such as Adobe GoLive or Macromedia Dreamweaver (see ” Wake Up Your Web Sites,” in this issue). Alas, SMIL authors aren’t as lucky?there are no SMIL layout tools for the Mac yet. Macromedia does offer a free RealSystem G2 layout extension for Dreamweaver ( https://www.dreamweaver.com ), but it’s limited primarily to inserting RealSystem G2 content into Web pages.
The picture is only a little brighter in Windows. The few available SMIL authoring programs are awkward, lacking the elegance of such tools as Macromedia Flash. RealNetworks offers two terrific but basic SMIL tools: the free RealSlideshow and the $29 RealSlideshow Plus. Both enable you to drag images into a timeline window and synchronize them with RealAudio sound tracks. RealSlideshow Plus adds support for RealText text captions and includes numerous design templates to give you a head start.
RealNetworks isn’t planning Mac versions of either RealSlideshow program, but you can run both on your Mac using Connectix’s Virtual PC 3.0 ($179; https://www.connectix.com ). They ran without a hitch in my informal tests. Ever eager to push the envelope, I also tried running RealServer G2 under Virtual PC. Alas, the envelope ripped. I was able to run the server and access it locally (that is, from RealPlayer G2, also running under Virtual PC), but I couldn’t access it over the Internet. Still, the ability to access RealServer G2 locally could be useful for testing SMIL presentations.
Serving SMILIf you’re up-to-date on streaming media, you know that you can deliver RealAudio or RealVideo files in two ways: with proprietary RealNetworks server software or with the same HTTP server that dishes out your Web pages (see “”Watch This: Streaming Video on Your Web Site”,” Create , April 1998). The HTTP route has the advantage of not requiring you to buy and run another piece of server software, and you can serve some simple SMIL presentations using HTTP. The results aren’t too hot, though?presentations can take a long time to buffer before playback begins, for example, and media elements can fall out of synchronization. And sophisticated SMIL projects simply don’t work at all over HTTP.
For more reliable results, you can take the G2-server plunge: download and use the free, 20-stream Basic Server if yours is a small-traffic site; plunk down $695 for a 40-stream server; or break the bank and pay five figures for a high-capacity server. A smart alternative is to contract with a service provider who offers G2-hosting services. You’ll find a database of these providers at https://partners.real.com/powersearch.html.
| Also see: “Advanced SMILing” |
| LEARN MORE ABOUT SMIL |
| RealNetworks’ DevZon www.real.com/devzone/ Just SMIL https://smw.internet.com/smil/news/ W3C User Interface Domain– Synchronized Multimedia www.w3.org/AudioVideo/ |
SMIL’s future looks bright. This year is likely to bring professional-level authoring tools for the Mac OS and Windows alike. And a new version of the SMIL standard, called SMIL Boston (so named because the standards meeting was held in Beantown), promises better animation and a degree of support for interactive television.
Even if you’re using another streaming technology for Web multimedia, it’s worth your while to look into SMIL. Its tag-oriented approach to time-based presentations is a harbinger of what we may see in future versions of HTML?versions that know how to tell time.
A contributor to Macworld since 1984, JIM HEID ( https://www.heidsite.com ) writes and teaches on all facets of Web streaming and multimedia.February 2000 page: 112
Presenting with SMIL  |  |
 | |
I created a simple project that illustrates some of SMIL’s key capabilities. The project comprises some stock photographs downloaded from the Web and delivered as RealPix images, accompanying RealText captions containing hyperlinks, and a RealAudio soundtrack.
The head portion of a SMIL file contains a <layout> section that defines the project’s overall playback size and specifies the names and dimensions of the RealPix region (A) and the RealText region (B).
<layout> <root-layout width="320" height="290" /> <region id="pix_region" width="320" height="240" left="0" top="0" /> <region id="text_region" width="320" height="50" left="0" top="240" /> </layout>RealText Captions
Working with RealText isn’t too different from working with text in HTML. Here, for example, is the PRE for the Space Needle image’s caption.
<br/><clear/> <time begin="42"><pos x="15" /> <pos y="18"/> Don't miss the <a href="http://www.seattlecenter.com/">Space Needle</a>
The PRE begins by clearing the previous caption from the RealText area. Then it displays the new caption 15 pixels from the text region’s left edge and 18 pixels from its top edge. An HTML-like <a> tag creates the hypertext link.
RealPix EffectsRealPix allows for bandwidth-friendly effects rendered by RealPlayer G2. Here’s the PRE that produces the cross-fade effect illustrated in these three images.
<crossfade start="41" duration="1" target="8" />
The cross-fade starts 41 seconds from the beginning of the presentation; most time-oriented SMIL tags specify their values in this way. The cross-fade’s duration is one second. Each image in a RealPix presentation is assigned a number; in this case, the target of the cross-fade–the image to which the first image is fading–is number 8.
 |  |
 | |
I’ve only scratched the surface of SMIL’s talents in this article. Here are some of the language’s more advanced capabilities.
Panning and ZoomingYou can add a sense of motion to a series of static RealPix images by panning across images or zooming in and out. Simply make the image larger than the RealPix region, and then use the tag to pan or zoom.
Bandwidth and LanguageSwitching SMIL’s <switch> tag lets you tailor a presentation to specific languages and connection speeds. You can provide both a Spanish and an English soundtrack, for instance, and use a <switch> tag to play the appropriate one based on settings a user has made in RealPlayer G2’s Preferences window. Similarly, you can use <switch> to provide different types of content depending on a user’s connection speed: still images for a modem user and motion video for a DSL user.