Article Abstract:
This article shows how to use SMIL to create an Online Multimedia Virtual Library Tour. The presentation is composed of a slide show of text and still images, which introduces the library. It is accompanied by background audio and a caption. In this presentation there are hyper-links to related library web sites.

URL: http://www.asu.edu/lib/webcom/yuwu/VisualTour/visualtour.smil
(To view this file, you need a RealPlayer plug-in which can be downloaded free from: http://www.real.com)

The Virtual Library Tour presentation is created by using Synchronized Multimedia Integration Language (SMIL). SMIL as a new web format allows us to put text, still photos, audio, video, and animation into interactive presentations. On June 15, 1998, the World Wide Web Consortium (www.w3.org/tr/rec-smil) published the specification which defines SMIL as an application of XML. The specification depicts the design layout and temporal behavior of multimedia presentations.

With SMIL, you can produce interactive multimedia presentations of broadcast quality. You can provide links within a presentation that access other presentations, other media files, or web sites. Before the streaming technology came into being, multimedia files such as MPEG video or AIFF audio had to be downloaded completely before we could see them play. Streaming technology allows multimedia servers send a file in a continuous stream that can be played back shortly after the local machine get parts of the files. It would take a few minutes for a traditional video file to be downloaded while for a streaming video, it only takes a few seconds before you can view it.

To create, publish, and broadcast SMIL presentations, all you need is a PC and access to a compatible server. To see SMIL in action, you need a compatible player such as RealPlayer G2 (free, downloadable from http://www.real.com.) Once you download and install the player, you can view SMIL presentations. You can also access SMIL presentations from the Web. When you do this, your browser launches the SMIL player, which in turn displays the presentation.

Like HTML, SMIL is a subset of XML, and because XML is defined using text markup tags, you could make the layout and design of SMIL presentations using a regular text editor such as NotePad.

SMIL's media object tags allow you to put various media types in your presentations, and they are self-explanatory. The <audio> tag supports audio files such as AIFF. The <video> tag supports video formats such as RM files . The <img> tag is for still images such as JPEG files or RealPix. The <text> tag is for static text files; the <text src> or <textstream> tag is for streaming text files such as RealText. You can mix any of the available media types in your presentations.

The presentation layout determines how you set up your screen. SMIL players have a window. When you want to play multiple media types simultaneously, you need to create regions or mini-windows within the main window.

Regions are like cells within a HTML table. You can decide the size and position of the window as well as the size and position of the mini-windows within it. The root-layout sets the height and width of the entire presentation in pixels. This is the whole player area, which will be divided into regions. Each region sets specific areas in the presentation that media will play in.

<layout> 
       <root-layout height="405" width="770" background-color="black"/> 
       <region id="title" left="5" top="120" width="400" height="200" z-index="1"/> 
       <region id="full" left="0" top="0" height="425"  width="450" 
        background-color="#602030"/> 
       <region id="video" left="450" top="240" height="120" width="315" z-index="1"/> 
       <region id="toc" left="450" top="0" height="405" width="255"/> 
</layout>

First we size the main window (identified with the <root-layout> tag) to 405 by 770 pixels and then create 4 mini-windows within the main window: title, full, video, and toc. The title region is positioned 5 pixels to the right of the main viewing area's left edge and 120 pixels down from the top of the main viewing area. The other regions are placed according to their respective pixels. By defining layout regions, you can combine multiple forms of media and display them simultaneously.

Let's take a look at how SMIL combines media files and makes them play. The following code shows an example of event timing:

<par>
<audio src=http://www.asu.edu/lib/webcom/yuwu/VisualTour/smone2.rmi
 dur="400s"/> 
<text src="http://www.asu.edu/lib/webcom/yuwu/VisualTour/toc.rt" region=toc"/> 
<text src="http://www.asu.edu/lib/webcom/yuwu/VisualTour/song.rt" region="video"/>
	<seq> 
 
<!-- This part displays the title screen and the caption with an audio soundtrack--> 
         
<text src="http://www.asu.edu/lib/webcom/yuwu/VisualTour/title.rt"
type="text/html" region="title" dur="35s"/> 
            
<!-- This section displays a slide show  --> 
   
<par> 
                   
           <img src=http://www.asu.edu/lib/webcom/yuwu/VisualTour/map.rp
region="full" fill="freeze"/> 
                
</par> 
            
<!-- This section contains the annotated slideshow --> 
        
<par> 
           <switch> 
           <img src="http://www.asu.edu/lib/webcom/yuwu/VisualTour/slideshow.rp" 
region="full" fill="freeze" system-bitrate="45000"/> 
            </switch> 
</par> 
</seq> 
</par> 

SMIL offers two ways to play media elements: sequentially (one file right after another in a single region), where a few files: text, audio, or video files can play at the same time. Each line between the <par></par> tags is a media file which will play to a specified region. The <par> tags mean that media files will play simultaneously (in parallel). The <seq> </seq> tags mean that they will play sequentially. Fill="freeze" means that the final frame will stay visible when that media file is done. When the presentation starts, the text file toc.rt displays. The audio clip smone2.rmi also begins. Then the text file title.rt clip specified in the next line starts at 35' into the presentation. Then the slide show begins. While the audio clip is playing, the text and slide show are displayed. By adding a time line to a presentation, you can control when content is displayed and how transitions between various content types are handled. SMIL provides sophisticated control the protocol offers.

One feature of SMIL is that by setting choices, you can even serve up different versions of the production based on the available bandwidth. In other words, you can use the <switch> tag to get the player to use media files appropriate to the bandwidth.

<switch> 
           <img src="http://www.asu.edu/lib/webcom/yuwu/VisualTour/slideshow.rp" 
region="full" fill="freeze" system-bitrate="45000"/> 
</switch>

The presentation's bandwidth needs are optimized based on the speed of your computer's connection to Internet. The media files used in the presentation will depend on whether you have a 28.8 modem or a high-speed connection such as a T1 line. This feature makes it possible that users enjoy the presentation regardless of their connection speed. You can include low- and high-bandwidth choices. The <switch> tag tells the player it should make a choice. The bandwidth choices are made in the order listed, the highest-bandwidth choice should come first.

One of the greatest advantages of SMIL is synchronization. SMIL offers quite a few features for handling the timing of media playback. One can set specifically a duration for a media clip. For example, you can assume that the file will play for 3 minutes. You can time events according to the time line for the entire presentation. You can let a media file begin 10 seconds into the presentation and end 15 seconds into the presentation. You can decide what should take place at the end of the presentation. For instance, you can remove all graphics or video clips from the display or you can freeze still images on the last frame.

You can use special effects like fade-in, cross-fade, view-change, and wipe target in your slideshow presentation. For each special effect, attributes such as start specify the time to begin, duration how long the picture lasts, and target the source of the picture. For example: <crossfade start="00:45" duration="00:08" target="5"/>.

You'll likely be using a lot of file formats when you create your multimedia production. Keep in mind, you should transfer all standard animation, video, and audio file formats to streaming formats, such as RealFlash, RealVideo, and RealAudio.

When you complete presentation, you should move the multimedia files and the SMIL file to the web server. The server should be configured to handle multiple forms of media including text, audio, video, and animation, and they should understand hypertext links. If the server supports all the media formats such as ra, rt, rm, rp, smil, etc., you can view the presentation in your SMIL player such as RealPlayer G2, GRiNS (GRaphical iNterface to SMIL), or HPAS (Hypermedia Presentation and Authoring System).

(You can create your own presentation by customizing the codes in Appendix, that is, changing the variables and replacing text, audio, graphic files with your own.)