Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


What Can It Do

February 22, 1999

Real has done a good job of anticipating how people will use text in a SMIL presentation. RealText is all about presenting text in synchronization with other media elements. Having text synchronized with the audio track can provide closed captions for the hearing impair or merely for the sound card impaired. Because SMIL is an open text based language it can be dynamically generated from databases to provide real time text information such as stock quotes or news headlines. Additionally any of the text can be hot linked to jump to web pages, to another point in the presentation or to an entirely new presentation.

The best part about RealText is that most of this functionality is built into RealText. Unlike Java or Dynamic HTML, there is no programming to create these moving effects. There are four built in ways of displaying the text. The Generic method simply places it on the screen at the time points that you specify. In the example the headlines will appear one below the other at 3 seconds, 15, 21 and 27 seconds.

Generic

<window duration="30" bgcolor="yellow">
Headline News:
<br/><time begin="3"/>Headline 1
<br/><time begin="15"/><clear/>Headline 2
<br/><time begin="21"/>Headline 3
<br/><time begin="27"/>Headline 4
</window>

TickerTape Window

The Ticker tape appears like a stock ticker and scrolls from left to right. In the example below, the two items WDVL and RULEWEB move across the screen. Each text item is hyperlinked with the underlining turned off. The words move at the default rate of 20 pixels per second. I'll show you later how to change this by adjusting the crawlrate. The scrolling is looped so the words will continuously scroll. Here is how it appears in the Real G2 Player.

<window type="tickertape" duration="0:50" width="350" loop="true" underline_hyperlinks="false" link="white">
<br/><b>
<tu><a href="http://www.wdvl.com/">WDVL</a></tu>
<tl>168.35 +36.52 </tl>
<tu><a href= "http://www.ruleweb.com/dhtml/">RULEWEB</a></tu>
<tl>120.71 +20.11</tl>
</b>
</window>

Scrolling News Window

The scrolling news window scrolls text up the screen at a continuous rate of 20 pixels per second. The text appears at the bottom of the screen and scrolls up off the top. This is very similar to many news tickers on the web including the News Brief ticker used by Discovery Channel Online on our home page. However this is done with just a few lines of easy code, not in Java. Here is how it appears in the Real G2 Player.

<window type="scrollingnews" duration="15" bgcolor="red">
<br/><br/>News for Monday, Feb 20, 1999:
<br/><b><u>Top News Stories:</u></b>
<p>Impeachment trial of Bill Clinton hopefully wrapping up.</p>
<time begin="2"/>RuleWeb Development IPO sets new records.
<p>RuleWeb buys out Discovery Channel</p>
</window>

The screen capture was taken 2.5 seconds into the presentation and shows the second and third news items after they appear 2 seconds into the presentation. The time delay can be used to have news items appear after they have entered the screen or only after they have scrolled over a certain area. For those of you who have worked with Dynamic HTML, you can see how much easier this is than writing javascript.

Teleprompter

The teleprompter appears line by line at the bottom of the screen. It does not scroll, but instead forces the lines at the top off the screen as new lines are introduced at the bottom. This makes it easier to read than text which is constantly scrolling and it is useful for providing closed captioning or any other text which must be read quickly. The example below shows a number of headlines which appear and then are forced off the screen. The screen capture occurred at 11.1 seconds into the presentation. You can see that Headline 1 has been partly forced off the screen and that Headline 4 has appeared at the bottom. Here is how it appears in the Real G2 Player.

<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>NEWS:</b> Headline 2
<time begin="7"/><br/><b>EARTH ALERT:</b> Headline 3
<time begin="10"/><br/><b>Feature Story:</b> Headline 4
<time begin="13"/><br/><b>Expedition:</b> Headline 5
<time begin="16"/><br/><b>Mind Games:</b> Headline 6
<time begin="18"/><br/><b>Animal Cams:</b> Headline 7
</font>
</window>

The teleprompter behaves somewhat differently than the scrolling windows. You can see that wordwrap can be "True" or "False" to allow long lines to continue on the next line of text. Since the text does not scroll, but actually just appears the scrollrate and crawlrate attributes are not used. If the <clear/> tag is used the window is cleared and text begins in the upper left-hand corner of the window.

RealText--Text Synchronization with Digital Media
RealText--Text Synchronization with Digital Media
General Info on all Windows



Up to => Home / Authoring / Languages / XML / SMIL / RealText




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers