tags. Regions control the layout in the RealPlayer window.In our demo, we have two regions that need to be defined. The RealPix (see Fig. 2) region is 320 pixels by 240 pixels and is named PixChannel as its ID and Title. Also notice that it is placed in the player so that the upper left corner is at coordinates 0,0 in the RealPlayer window. The "fit" and "fill" tags are best described in the RealPix Authoring Guide.
The RealText region is located under the RealPix Channel and is named TextChannel for ID and Title. It is 320 by 30 pixels, and is placed under the RealPix window by placing it 240 pixels from the top and 0 pixels from the left edge of the player.
The last region defines the logo for Streaming Media that I want to pop up at the end of the presentation. It is called Logo and will only become visible after the other two regions have been removed from the screen at the end of the presentation. I’ve included it to show how to introduce an element later in a presentation and also to show that SMIL is capable of using layers (the Logo sits in layer 3, which means that it will appear on top of the other RealPix and RealText). In our demo, we make the RealPix and RealText disappear before displaying the Logo, but we could also simply place the Logo over it in a higher layer.
Note: The Real Audio component does not have a region; this is because it doesn’t need to be laid out on the screen.
Figure 3:
<imfl>
<head width="320" height="240" start="0" duration="172" timeformat="dd:hh:mm:ss.xyz" bitrate="12000" url="http://www.streamingmedia.com"/>
<image handle="1" name="slide1.gif"/>
<image handle="2" name="slide2.gif"/>
<image handle="3" name="slide3.gif"/>
<image handle="4" name="slide4.gif"/>
<image handle="5" name="slide5.gif"/>
<fill start="0" color="black"/>
<fadein start="0" duration="2" target="1"/>
<wipe type="push" direction="right" start="10" duration="2" target="2"/>
<wipe type="push" direction="right" start="42" duration="2" target="3"/>
<wipe type="push" direction="right" start="102" duration="2" target="4"/>
<wipe type="push" direction="right" start="133" duration="2" target="5"/>
<fadeout start="169" duration="1" target="5"/>
</imfl>
Figure 4:<imfl>
<head duration="3000" preroll="4000" bitrate="20000" width="320" height="270"/>
<image handle="1" name="slide6.gif"/>
<fadein start="1000" duration="2000" target="1"/>
</imfl>
Figure 5:<window type="generic" height="50" width="320" underline_hyperlinks="false" duration="172" link="blue" wordwrap="false" bgcolor="black">
<font face="Courier" color="white" size="2">
<time begin="0" end="10"/>
<pos x="10" y="5"/>
Slide 1 Text
<time begin="10" end="42"/>
<pos x="10" y="5"/>
Slide 2 Text
<time begin="42" end="102"/>
<pos x="10" y="5"/>
Slide 3 Text
<time begin="102" end="133"/>
<pos x="10" y="5"/>
Slide 4 Text
<time begin="133" end="170"/>
<pos x="10" y="5"/>
Slide 5 Text
</font>
</window>
The Body (Figure 1)The body of a SMIL file contains the links to the external RealPix and RealText files. Elements in the body can be presented either in parallel or sequentially. In this case, I have chosen to present them in parallel, since I want the slides and audio to play simultaneously.
We begin by defining the audio source and setting its length. SMIL can accept a variety of time codes, but I generally use seconds. The image source is the external RealPix file called sm.rp. Similarly, the text content is stored in the external RealText file called sm.rt. And finally, I’ve placed the ending Streaming Media logo in a separate RealPix file called end.rp to keep things straight. <,p>That’s it for the SMIL file. Now lets look at the RealPix images and how they are controlled.
The RealPix File (Figure 3)
The RealPix file is divided into three regions. The head contains information on the height and width of the space in which the images will appear. Note: It is always best to make your graphics the appropriate size. The "start" parameter tells the RealPlayer that these graphics should be displayed from the time the file is first loaded. The duration is spelled out in time units, and the time format tells the player that the time unit is seconds. The URL parameter means that if the user clicks on the slide, in that region, a Web browser should be launched and pointed to www.streamingmedia.com.
The second part of the file assigns handles to the graphics and also points to the external GIF files. In this example, I’ve named the slides with a number that corresponds with the GIF file names.
The real fun starts in the final section, where the code controls how graphics are loaded and the transitions between them. We need to have something in place when the player first loads. The fill tag initially sets this color to black, but the user should never see the black, because we have set the first graphic to start fading in at "0" seconds and to fade in over a period of two seconds. We tell the player to use slide1.gif by using the target tag to call its handle.
Note: "Fade-in" is just one of many transitions and wipes available. Check the RealPix site for a full list of the transitions supported by the RealPlayer.
I have chosen to use a directional "push" transition for the rest of the graphics. Each successive slide "pushes" the previous graphic off the right side of the screen. It’s a nice effect that gives some movement to the presentation. It is especially useful for calling attention to slide changes when slides use the same basic formatting.
For the final slide, I am using a fade-out effect that fades to the fill color (black). Then, with two seconds left, the player calls the end.rp file, (Figure 4) which contains the Streaming Media logo. (Remember that in the sm.smi file, I told this file not to load until 172 seconds into the presentation, and then to appear in layer 3 and cover the other content.)
The RealText File (Figure 5)
RealText is the name Real has chosen for including text in the RealPlayer. Including text is very simple, but Real has added some additional controls that allow for movement and layout of the text in a manner that would normally require Dynamic HTML or Cascading Style Sheets. (See the RealText Authoring Guide for more details.)
The sm.rt file is very basic. Text can be presented in several ways: generic, tickertape, scrolling news, and teleprompter. In this demo, I’ve stuck with "generic," which most closely resembles HTML text. Much like the graphics, the text is timed to appear and disappear in synchronization with the slides, thus acting as a caption for each slide. The "begin" and "end" tags define the number of seconds each piece of text will appear.
The "pos" tag defines how far away from the upper left corner of this region the text should appear. (Remember that this is not the upper left corner of the player — just of this region.)
It’s Show Time (Figure 6)
Once your code is sparkling clean and your presentation is a synchronized ballet of audio, text and images, it’s time to showcase your work. For the purpose of this tutorial, all RealMedia, RealPix, RealText, GIFs and the SMIL file (.smi) were stored together on a Real Server. For your own presentation, simply provide a link to the SMIL file, as you would with any other streaming project, and your audience is ready to tune in.
Summary
For Web presentations intended for a predominantly low-bandwidth audience, slideshows can offer much larger and clearer images than streaming video, while still benefiting from the "animation" effect of transitions. Real’s implementation of SMIL — while not adhering to the true syntax of the original SMIL specification — enjoys a user base that greatly exceeds that of other SMIL players, and thus is the de-facto standard for SMIL presentations on the Web. Until the release of SMIL 2.0 (which currently exists as a W3C Working Draft and will soon be upgraded to a Candidate Recommendation), Real’s proprietarily extended version of SMIL gives us a simple and effective way of presenting synchronized presentations on the Web.