WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Realtext and SMIL

Realtext and SMIL

by Scott Clark
First published: June, 1998

If you've been following our series of articles on SMIL/G2, you've already seen an overview of G2/SMIL technology, URLs for all the tools you'll need, and a detailed G2/SMIL Tutorial. The first tutorial covered RealPix and the SMIL language, and if you were able to follow through, enabled you to get started creating your own SMIL presentations. In this tutorial, we'll cover RealText, and show you how to use it along with RealPix in your SMIL presentations.

To get started, we consulted RealNetworks RealText Creation Guide. For reference, we used the RealText Tags Reference (RealNetworks also has a RealText Tag Summary which is convenient once you are familiar with the tags).

For this tutorial, I created another SMIL presentation, this time using RealText and RealPix. My tutorial example is called The Mind's Garden, and utilizes a few mind-bending images by Jim Mannix, some mood-expanding guitar licks by David Fiedler, and SMIL coding by myself.

As you may recall, SMIL is a derivative, or "flavor" of XML. It carries with it the rules of XML, and a few of its own as well. For instance, like XML, all tags must have both beginnings and endings. You are already familiar with a similar syntax if you've been using HTML. Examples include <B>bold</B> and <I>italic</I> tags. The SMIL language requires you to also use endings for empty elements, such as the break tag: <BR />. SMIL is also all lower case, so the proceeding tag would actually be: <br />. Also, all attribute values must be surrounded by double quotation marks, i.e.

 <font color="blue">The font's color attribute is enclosed in double quotes</font> 

So lets get started! Assuming you've already prepared your images using JPEGTRAN, created a RealPix file pointing to your images, and have encoded your audio track(s) using the RealEncoder, we can move on to the actual RealText file. If you haven't accomplished the preceding steps, you may want to review our first G2/SMIL tutorial.

You can use your favorite text/HTML editor to create and edit the RealText file. It's actually the easiest file to create in the whole SMIL presentation. Below is the entire RealText file (to download the actual file, hold down the shift key as you click this link):

 <window type="marquee" height="20" width="240" duration="00:42" underline_hyperlinks="false" link="blue"> <time begin="1.5" end="44"/> <font face="arial" color="black"> The <font color="green" face="arial"> <b><i>Mind's Garden</b></i></font> is a place where thoughts <font size=+1 face="arial">grow</font> into ideas, which grow into <a href="command:pause()" target="_player">concepts</a>, which grow into <a href="command:play()" target="_player">applications</A>, which are thus the <font face="arial" color="red">f</font> <font face="arial" color="blue">r</font> <font face="arial" color="red">u</font> <font face="arial" color="green">i</font> <font face="arial" color="blue">t</font> of the Mind's Garden!</font> </window>

There are five types of "windows" you can use for your presentation:

  • Generic - A generic window with no preset parameters. Any RealText effect may be used within this type of window.
  • ScrollingNews - The text scrolls from the bottom to the top of the window at a set rate.
  • TickerTape - The text is displayed next to the window's top or bottom edge, moving from the right side of the window to the left; it can also loop back around to the right side of the window.
  • Marquee - Similar to the TickerTape, but the text is vertically centered within the window.
  • TelePrompter - Similar to a generic window, but text arriving at the bottom edge of the window "pushes" the text above it up so the new line may be displayed.

The RealText file above uses a marquee window for its display. RealText, like RealPix, allows you to create a timeline for your presentation which tells the G2 Player exactly when to begin presenting the RealText file. The syntax is as follows:

<time begin="dd:hh:mm:ss.xyz" end="dd:hh:mm:ss.xyz"/>

In this manner, you can use begin several text strings at one time, or set them up so that one starts as the other is ending. The time tag values are declared in the 24-hour format, in which dd is days, hh is hours, mm is minutes, ss is seconds, x is tenths of seconds, y is hundredths of seconds, and z is milliseconds. Only the ss is required, and in our example above, the text display starts in 1.5 seconds, and ends in 44 seconds.

If you already know your HTML, then you're a step ahead of the game, because you can use most of the standard HTML tags within a RealText file. You use them just as you normally would, but all tags must have a closing tag, even empty elements (see above). You can use all the standard styling tags, such as italic, bold, underlined, layout tags such as break, paragraph, ordered and numbered lists, and the font control tags, such as color, size, face, etc.

Additionally, you can use normal commands such as hyperlinks that take the Web browser to a Web site or the RealPlayer to another RealMedia file. And better yet, you can actually use commands to control the RealPlayer, such as stopping and starting it, pausing it, or going to a specific place within the RealText file/presentation.

If you look at our RealText example file and click on the word "concepts," you'll notice that it is blue, and when you move your mouse over it, it changes to the standard hand that indicates that the mouse is over a hyperlink. By clicking on the link, you pause the RealText file. By clicking on the word "applications," you restart the RealText file (hint: wait until you can see both words before clicking the first). This is accomplished by using a standard hyperlink anchor, along with the command function:

<a href="command:play()" target="_player">

The commands you can use are:

  • play - starts or resumes playing the RealText file, i.e.
    <a href="command:play()" target="_player">
  • seek - seeks to the specified time in the text stream, i.e.
    <a href="command:seek(2:28.4)" target="_player">
  • pause - pauses the playing of the RealText file, i.e.
    <a href="command:pause()" target="_player">

Note: If you are using a greater than sign, less than sign, ampersand, etc. that you wish to display as a character, you'll need to use the ASCII code for these characters, as the Real Player will try to interpret them as code if you don't.

So there you have it! The RealText file is actually the easiest part of the SMIL presentation. Once again, when you are ready to actually create the SMIL file, that is, you've encoded your audio, prepped your images using JPEGTRAN, and have created your RealPix file, you're ready to use the RealSystem SMIL Presentation Wizard to create the SMIL file (See Figure 1).

SMIL Presentation Wizard's Classified Template
Figure 1. The SMIL Presentation Wizard's Classified Template

The easiest way to create a SMIL presentation using the SMIL Wizard is to select a template that most closely resembles the effect you are looking for. In our case, the "Classified" template is suitable, as it utilizes a RealPix file, RealText file, and audio soundtrack. We may have to manually change the layout of our presentation window, but all the dirty work will be done by the Wizard, saving you time and effort.

[ RealText and SMIL:
Part 2 > ]

HTML5 Development Center

Recent Articles