Ever since the days of 300 baud modems Text has delivered the best bang for your bandwidth. Real has made sure to include a dynamic new way to deliver text to compliment their audio, video and graphics formats for SMIL. This new way to deliver text is called Real Text. This new format allows for displaying and formatting text so that is synchronized with other media. You can synchronize text with graphics, video or sound using this lightweight medium to add additional info to these other media types.

 

Bandwidth Preservation:

Real Text makes a great addition to any SMIL presentation because it takes up so little bandwidth. Even with the amazing advances in streaming technology, trying to stream a full multimedia down a 33.6kbps modem can be very difficult, especially with video. Modems running a 33.6kbps typically allow about 2.2K/sec, despite what manufacturer's claim. A person's voice can be encoded at about 1K/sec, if you are running a graphics slide show in which the graphics are 10K JPG files this means you can download a new graphic in the slideshow every ten seconds. This leaves about .2K/sec. This small amount of bandwidth is more than enough for Real Text. Real Text takes up so little room that the additional bandwidth is negligible.

Illustrating Other Page Elements:

Real Text can be used in many ways to help illustrate the other media types. In this article and in the previous ones in this series, I have concentrated on graphics slideshows with a backing sound track and text to subtitle the graphics. This is a perfect application of text in SMIL. As I will show you below the text can also be easily animated to create words that scroll, move and appear and disappear to help you further illustrate your point. All of this movement can be done with a few simple lines of code. I'm a big fan of Dynamic HTML, however, to accomplish the same effects in DHTML is very complex and takes a bit of programming knowledge. To accomplish the same thing in SMIL requires setting only a few lines of code.

Types of Movement

Real Text allows a number of built in mechanisms for making text move. Many of these movement types are familiar to ones you see every day on TV, horizontal tickertape, vertical scrolling news, and teleprompters. There is also a generic window type for placing static unmoving text on the screen. Let's look at them individually and take a look at a code sample.

Generic:

The generic text is text that is placed on the screen at a certain position and that can be made to appear or disappear over time. The height and width of the window area are defined in a typical manner. The underlining of links can be turned off or on. The total duration of the text presentation is 10 seconds, after that it freezes into place. The font tags and sizes should be familiar from HTML. However the new element here is the time begin tags and the pos tag. The time begin tag controls when the text will appear on the screen relative to the start of the presentation. As you can see headline 1 appears at the beginning, headline 2 appears 3 seconds into the presentation and headline 3 at 6 seconds. The pos tag controls the positioning of the text based on x,y coordinates. Headline 1 will be positioned at 10 pixels from the left side of the window and 5 pixels down from the top.

<window type="generic" height="50" width="320" underline_hyperlinks="false" duration="10" link="#FF8040" wordwrap="false" bgcolor="black">

<font face="Times" color="white" size="2">

<time begin="0"/><pos x="10" y="5"/><b>NEWS:</b> Headline 1

<time begin="3"/><pos x="20" y="20"/><b>NEWS:</b> Headline 2

<time begin="6"/><pos x="30" y="35"/><b>NEWS:</b> Headline 3

</font>

</window>

Horizontal TickerTape:

You see them every day on CNN and financial services, the stock quotes scrolling across the screen. Now they are easy to produce in SMIL using Real Text. The parameters are fairly self-explanatory. The window type is set to tickertape. The duration controls how long it takes the text to fully move across the screen. If you'd like the text to loop through many times then set loop to true. If you include hyperlinks you can turn on or off the underlining and the speed at which the text crawls can be controlled using the crawlrate. If this parameter is left out it defaults to 20pixel/sec.

<window type="tickertape" duration="0:50" width="350" loop="true" underline_hyperlinks="false" crawlrate=25 link="white">

<br/><b>

<tu><a href="http://www.webreview.com/">WebReview</a></tu>

<tl>28.35 +6.62 </tl>

<tu><a href="http://www.ruleweb.com">RULEWEB</a></tu>

<tl>32.71 +2.11</tl>

</b>

</window>

Scrolling News:

I do work for Discovery Channel. On the home page they have a scrolling news ticker that is done in Java. This same news ticker can now be done in SMIL with much easier programming. Let's look at the code. You can see that most of the programming is built in and that by setting window type to scrollingnews the text follows a preprogrammed course. You can also set the duration for the text to travel from the bottom to the top of the screen and set the bgcolor of the background.

<window type="scrollingnews" duration="15" bgcolor="green">

<br/><br/>News for Monday, March 27, 1999:

<br/><b><u>Top News Stories:</u></b>

<p>Kosovo Bombings continue</p>

RuleWeb Development gets new contract

<p>Continued scandal at the White House</p>

</window>

Teleprompter:

The teleprompter is similar to scrolling news window type. For those of you who haven't hung around a TV studio, the teleprompter is what news broadcasters read from while announcing the news. Text appears line by line and lines that have already been read are forced off the top of the screen. This example adds a new element, time. The time begin tag tells each line what time it should appear on the screen. Time is measured from the start of the presentation. When a new line appears another line is forced off the top of the screen.

<window type="teleprompter" height="50" width="320" underline_hyperlinks="false" duration="20" link="#FF8040" wordwrap="false" bgcolor="black">

<font face="Times" color="white" size="2">

<time begin="0"/><b>NEWS:</b> Headline 1

<time begin="3"/><br/><b>Weather:</b> Headline 2

<time begin="7"/><br/><b>Science:</b> Headline 3

<time begin="10"/><br/><b>Sports:</b> Headline 4

<time begin="13"/><br/><b>Computers:</b> Headline 5

<time begin="16"/><br/><b>Local News:</b> Headline 6

<time begin="18"/><br/><b>Financial:</b> Headline 7

</font>

</window>

Real Text is a great addition to the family of SMIL media types. I think it's great that Real put in a lot of time developing this media type and not ignoring it in favor of graphics, video and audio. It makes a great low bandwidth addition to any multimedia presentation.