HOME - SMIL: Version 1.0 vom 04.04.2000 © Wolfgang von Keitz

Vorwort
Grundlagen
Layout
Zeit

Bilder und Texte

Überblick
Die Real-Pix-Datei
Die Real-Text-Datei

SMIL und HTML
Referenz
Beispiele
Anhang
Quellen

4. Bilder und Texte im Realplayer

4.3. Die Real-Text-Datei

So wie bei der Bildpräsentation hat die Firma RealNetworks auch für die Textpräsentation eigene Elemente entwickelt, die über die in SMIL vorhandenen Elementdefinitionen hinausgehen. Diese Elemente erweitern den Funktionsumfang von SMIL; sie können allerdings bislang nur vom Realplayer interpretiert werden.

Die von RealNetworks definierten Elemente werden in einer eigenen Datei, der Real-Text-Datei, abgelegt. Diese Datei ist durch das Suffix .rt kenntlich gemacht.

4.3.1. Das <window>-Element

Jede Real-Text-Datei beginnt mit dem <window> und endet mit </window>. Im Gegensatz zum <imfl>-Element der Real-Pix-Datei besitzt das <window>-Element folgende Attribute:

  • type = generic, statisches Textfenster; teleprompter, skrollendes Textfenster
  • duration = Dauer der Präsentation nach dem SMIL-Zeitschema
  • height = Höhe des Textfensters in Pixeln
  • width = Breite des Textfensters in Pixeln
  • bgcolor = Hintergrundfarbe
  • underline_hyperlinks = true oder false, bedeutet unterstreichen bzw. nicht unterstreichen

Durch diese Attribute werden die wichtigsten Pasmieter für das Textfenster gesetzt. Aus diesem Grund entfällt in der Real-Text-Datei das <head>-Element. Beispiel:

<window type="generic"
duration="1:00.0"
height="144"
width="150"
underline_hyperlinks="false">
.....
</window>

Die Typograhie kann mit den von HTML bekannten <font>-Elementen beeinflusst werden. Beispiel:

<font face="Arial"><b>Inhaltsverzeichnis:</b></font>

Mit <clear/> werden auf der Präsentationsfläche vorhandene Texte gelöscht.

4.3.2. Links in der Real-Text-Datei

Mit Hilfe des <a>-Elements lassen sich Links in Real-Text-Dateien einfügen. Neben der traditionellen Navigationsfunktion von Links, können Links in Real-Text-Dateien mit den bereits aus der Bildpräsentation mit Real-Pix bekannten Kommandos zur Steuerung des Realplayers benutzt werden:

Mit Hilfe der url-Option kann der RealPlayer gestartet, gestoppt, auf Halt gesetzt oder vor- und zurückgespult werden. Das allgemeine Format der url-Option lautet:

url=command:command&target=_player

Folgende Kommandos können benutzt werden:

  • play() = der Player wird gestartet,
  • stop() = der Player wird gestoppt,
  • pause() = der Player wird auf Halt gesetzt,
  • seek(dd:hh:mm:ss.xyz) = der Player wird an die spezifizierte Stelle der internen Zeitschiene der Präsentation gespult und startet dann die Textpräsentation; fehlt der Dezimalpunkt, wird die Zeitangabe als Sekunden interpretiert.

Im folgenden Beispiel werden Links definiert, die die Textpräsentation zeitlich steuern:

<a href="command:seek(0)" target="_player">Kapitel 1</a>
<a href="command:seek(10)" target="_player"><br/>Kapitel 2</a>
<a href="command:seek(20)" target="_player"><br/>Kapitel 3</a>
<a href="command:seek(30)" target="_player"><br/>Kapitel 4</a>
<a href="command:seek(40)" target="_player"><br/>Kapitel 5</a>
<a href="command:seek(50)" target="_player"><br/>Kapitel 6</a>

Durch Klicken auf einen Link springt die Präsentation auf den im Link definierten Zeitpunkt der internen Zeitschiene von 0 bis 50 Sekunden. Ein Vor- und Zurückspringen auf der Zeitschiene ist allerdings nur solange möglich, solange die Präsentation läuft. Ist die Präsentation am Ende der Zeitschiene angekommen, muss sie erst neu gestartet werden, bevor die Links wieder aktiv sind.

4.3.3. Positionierung von Texten – das <pos>-Element

Für die Positionierung von Texten im Textfenster kennt Realtext das <pos>-Element mit x- und y-Attributen und Werten in Pixeln. Beispiel:

<pos y="0" />

Im nachfolgenden Beispiel wird in Kombination mit dem später besprochenen <time>-Element ein Text über eine Präsentationsfläche verschoben:

<window type="generic"
duration="6.0"
height="480"
width="600"
underline_hyperlinks="false" />

<clear/><time begin=".0" /><pos x="0" y="0" />TEXT
<clear/><time begin=".1" /><pos x="10" y="1" />TEXT
<clear/><time begin=".2" /><pos x="20" y="3" />TEXT
<clear/><time begin=".3" /><pos x="30" y="6" />TEXT
<clear/><time begin=".4" /><pos x="40" y="10" />TEXT
<clear/><time begin=".5" /><pos x="50" y="15" />TEXT
<clear/><time begin=".6" /><pos x="60" y="21" />TEXT
<clear/><time begin=".7" /><pos x="70" y="28" />TEXT
<clear/><time begin=".8" /><pos x="80" y="36" />TEXT
<clear/><time begin=".9" /><pos x="90" y="45" />TEXT
<clear/><time begin="1.0" /><pos x="100" y="55" />TEXT
<clear/><time begin="1.1" /><pos x="110" y="66" />TEXT
<clear/><time begin="1.2" /><pos x="120" y="78" />TEXT
<clear/><time begin="1.3" /><pos x="130" y="91" />TEXT
<clear/><time begin="1.4" /><pos x="140" y="105" />TEXT
<clear/><time begin="1.5" /><pos x="150" y="120" />TEXT
<clear/><time begin="1.6" /><pos x="160" y="136" />TEXT
<clear/><time begin="1.7" /><pos x="170" y="153" />TEXT
<clear/><time begin="1.8" /><pos x="180" y="171" />TEXT
<clear/><time begin="1.9" /><pos x="190" y="190" />TEXT
<clear/><time begin="2.0" /><pos x="200" y="210" />TEXT
<clear/><time begin="2.1" /><pos x="210" y="231" />TEXT
<clear/><time begin="2.2" /><pos x="220" y="253" />TEXT
<clear/><time begin="2.3" /><pos x="230" y="276" />TEXT
<clear/><time begin="2.4" /><pos x="240" y="300" />TEXT
<clear/><time begin="2.5" /><pos x="250" y="325" />TEXT
<clear/><time begin="2.6" /><pos x="260" y="351" />TEXT
<clear/><time begin="2.7" /><pos x="270" y="378" />TEXT
<clear/><time begin="2.8" /><pos x="280" y="406" />TEXT
<clear/><time begin="2.9" /><pos x="290" y="435" />TEXT
<clear/><time begin="3.0" /><pos x="300" y="465" />TEXT
<clear/><time begin="3.1" /><pos x="310" y="435" />TEXT
<clear/><time begin="3.2" /><pos x="320" y="406" />TEXT
<clear/><time begin="3.3" /><pos x="330" y="378" />TEXT
<clear/><time begin="3.4" /><pos x="340" y="351" />TEXT
<clear/><time begin="3.5" /><pos x="350" y="325" />TEXT
<clear/><time begin="3.6" /><pos x="360" y="300" />TEXT
<clear/><time begin="3.7" /><pos x="370" y="276" />TEXT
<clear/><time begin="3.8" /><pos x="380" y="253" />TEXT
<clear/><time begin="3.9" /><pos x="390" y="231" />TEXT
<clear/><time begin="4.0" /><pos x="400" y="210" />TEXT
<clear/><time begin="4.1" /><pos x="410" y="190" />TEXT
<clear/><time begin="4.2" /><pos x="420" y="171" />TEXT
<clear/><time begin="4.3" /><pos x="430" y="153" />TEXT
<clear/><time begin="4.4" /><pos x="440" y="136" />TEXT
<clear/><time begin="4.5" /><pos x="450" y="120" />TEXT
<clear/><time begin="4.6" /><pos x="460" y="105" />TEXT
<clear/><time begin="4.7" /><pos x="470" y="91" />TEXT
<clear/><time begin="4.8" /><pos x="480" y="78" />TEXT
<clear/><time begin="4.9" /><pos x="490" y="66" />TEXT
<clear/><time begin="5.0" /><pos x="500" y="55" />TEXT
<clear/><time begin="5.1" /><pos x="510" y="45" />TEXT
<clear/><time begin="5.2" /><pos x="520" y="36" />TEXT
<clear/><time begin="5.3" /><pos x="530" y="28" />TEXT
<clear/><time begin="5.4" /><pos x="540" y="21" />TEXT
<clear/><time begin="5.5" /><pos x="550" y="15" />TEXT
<clear/><time begin="5.6" /><pos x="560" y="10" />TEXT
</window>

4.3.4. Das <time>-Element

Mit dem <time>-Element kann die Textpräsentation zeitlich gesteuert werden. Das <time>-Element kennt folgende Attribute:

  • begin = Start der Texteinblendung
  • end = Ende der Texteinblendung

Beispiel:

<time begin="0" end="10" /><br/>Kapitel 1
<time begin="10" end="20" /><br/>Kapitel 2
<time begin="20" end="30" /><br/>Kapitel 3
<time begin="30" end="40" /><br/>Kapitel 4
<time begin="40" end="50" /><br/>Kapitel 5
<time begin="50" end="60" /><br/>Kapitel 6

Im obenstehenden Beispiel werden die einzelnen Texte nach Erreichen des jeweiligen Zeitpunkts auf der internen Zeitschiene eingeblendet.

Kombiniert man die einzelnen Teile des Beispiels und versieht die mit dem <time>-Element eingeblendeten Texte mit einer eigenständigen Textfarbe (y.B. rot) ergibt sich in einem weiss hinterlegten Textfenster ein Inhaltsverzeichnis, dessen Kapitelüberschriften jeweils für 10 Sekunden rot erscheinen. Durch die Links kann zudem zu den einzelnen Kapiteln gesprungen werden. Beispiel:

<window type="generic"
duration="1:00.0"
height="144"
width="150"
underline_hyperlinks="false" >

<font face="Arial"><b>Inhaltsverzeichnis:</b></font><font color="black" face="Arial" ><br/><br/>
<a href="command:seek(0)" target="_player">Kapitel 1</a>
<a href="command:seek(10)" target="_player"><br/>Kapitel 2</a>
<a href="command:seek(20)" target="_player"><br/>Kapitel 3</a>
<a href="command:seek(30)" target="_player"><br/>Kapitel 4</a>
<a href="command:seek(40)" target="_player"><br/>Kapitel 5</a>
<a href="command:seek(50)" target="_player"><br/>Kapitel 6</a>
</font>
<font color="red" face="Arial" >
<pos y="0" />
<time begin="0" end="10" /><br/><br/>Kapitel 1
<time begin="10" end="20" /><br/>Kapitel 2
<time begin="20" end="30" /><br/>Kapitel 3
<time begin="30" end="40" /><br/>Kapitel 4
<time begin="40" end="50" /><br/>Kapitel 5
<time begin="50" end="60" /><br/>Kapitel 6
</font>
</window>

4.3.4.1. Auf- und Abblenden

Im Gegensatz zur Bildbehandlung kann Text nicht mit einem speziellen Element auf- oder abgeblendet werden. Um dennoch einen vergleichbaren visuellen Effekt zu erzielen, muss das <time>-Element mit dem <font>-Element kombiniert werden. Wie das folgende Beispiel zeigt, lässt sich durch die Angabe entsprechender Hexadezimalwerte im color-Attribut des <font>-Elements ein Auf- und Abblendeffekt erzielen: 

<window type="generic"

	duration="5.0"

	height="60"

	width="225"

	underline_hyperlinks="false" />



<time begin="1.0" /><font color="#eeeeee" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.1" /><font color="#dddddd" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.2" /><font color="#cccccc" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.3" /><font color="#bbbbbb" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.4" /><font color="#aaaaaa" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.5" /><font color="#999999" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.6" /><font color="#888888" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.7" /><font color="#777777" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.8" /><font color="#666666" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="1.9" /><font color="#555555" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="2.0" /><font color="#444444" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="2.2" /><font color="#333333" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="2.3" /><font color="#222222" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="2.4" /><font color="#111111" size="7"><pos y="0" /><clear/>Aufblenden!</font>

<time begin="2.5" /><font color="#000000" size="7"><pos y="0" /><clear/>Aufblenden!</font>


<time begin="3.5" /><font color="#000000" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="3.6" /><font color="#111111" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="3.7" /><font color="#222222" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="3.8" /><font color="#333333" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="3.9" /><font color="#444444" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.5" /><font color="#555555" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.0" /><font color="#666666" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.1" /><font color="#777777" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.2" /><font color="#888888" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.3" /><font color="#999999" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.4" /><font color="#aaaaaa" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.5" /><font color="#bbbbbb" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.6" /><font color="#cccccc" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.7" /><font color="#dddddd" size="7"><pos y="0" /><clear/>Abblenden!</font>

<time begin="4.8" /><font color="#eeeeee" size="7"><pos y="0" /><clear/>Abblenden!</font>

<clear/>

</window>
4.3.4.2. Automatisches Skrollen

Wird im <window>-Element der Fenstertyp "teleprompter" gewählt und wird im <time>-Element das end-Attribute nicht angegeben, bleibt der Text im Präsentationsfenster erhalten. Im folgenden Beispiel wird eine Zeilenweise Texteinblendung gezeigt: 


<window type="teleprompter"

	duration="30.0"

	height="240"

	width="200"

	underline_hyperlinks="false" />


<b>Bold</b>

<time begin="1" /><br/><i>Italic</i>

<time begin="2" /><br/><u>Underline</u>

<time begin="3" /><br/><font size="1">Size = 1</font>

<time begin="4" /><br/><font size="2">Size = 2</font>

<time begin="5" /><br/><font size="3">Size = 3</font>

<time begin="6" /><br/><font size="4">Size = 4</font>

<time begin="7" /><br/><font size="5">Size = 5</font>

<time begin="8" /><br/><font size="6">Size = 6</font>

<time begin="9" /><br/><font size="7">Size = 7</font>

<time begin="10" /><br/><font color="silver">Silber</font>

<time begin="11" /><br/><font color="gray">Grau</font>

<time begin="12" /><br/><font color="black">Schwarz</font>

<time begin="13" /><br/><font color="yellow">Gelb</font>

<time begin="14" /><br/><font color="fuschia">Fuchsrot</font>

<time begin="15" /><br/><font color="red">Rot</font>

<time begin="16" /><br/><font color="maroon">Braun</font>

<time begin="17" /><br/><font color="lime">Lime</font>

<time begin="18" /><br/><font color="olive">Olive</font>

<time begin="19" /><br/><font color="green">Gruen</font>

<time begin="20" /><br/><font color="purple">Purple</font>

<time begin="21" /><br/><font color="aqua">Auquamarin</font>

<time begin="22" /><br/><font color="teal">Teal</font>

<time begin="23" /><br/><font color="blue">Blau</font>

<time begin="24" /><br/><font color="navy">Navy</font>

<time begin="25" /><br/>

<time begin="26" /><br/><font face="Algerian">Algerian</font>

<time begin="27" /><br/><font face="Arial">Arial</font>

<time begin="28" /><br/><font face="Arial Black">Arial Black</font>

<time begin="29" /><br/><font face="Arial Narrow">Arial Narrow</font>

<time begin="30" /><br/><font face="Arial Rounded Mt Bold">Arial Rounded Mt Bold</font>

</window>

Ist keine Positionsangabe vorhanden, beginnt die Textpräsentation in der ersten Zeile des Präsentationsfensters. Ist die Textpräsentation in der letzten Zeile des Präsentationsfensters angekommen, wird der sichtbare Text um eine Zeile nach oben geschoben; der neue Text wird in die letzte Zeile des Präsentationsfensters geschrieben.

4.3.4.3. Verzögertes Einblenden

Mit Hilfe des <time>-Elements lässt sich Text verzögert (wortweise oder zeichenweise) einblenden. Beispiel 


<window type="generic"

	duration="15.0"

	height="150"

	width="200"

	underline_hyperlinks="false" />



<clear/>Man

<time begin="1" />kann

<time begin="2" />Text

<time begin="3" />wortweise

<time begin="4" />oder

<time begin="5" />auf einmal einblenden.

<time begin="6" />Man

<time begin="7" />k<time begin="7.2"/>a<time begin="7.4" />n<time begin="7.6" />n

<time begin="8" />Text

<time begin="9" />a<time begin="9.2"/>u<time begin="9.4" />c<time begin="9.6" />h

<time begin="9.8" />

<time begin="10" />z<time begin="10.2" />e<time begin="10.4" />i
<time begin="10.6" />c<time begin="10.8" />h<time begin="11" />e
<time begin="11.2"/>n<time begin="11.4" />w<time begin="11.6" />e
<time begin="11.8" />i<time begin="12.0" />s<time begin="12.2" />e

<time begin="13" />einblenden.

</window>

Durch verzögertes Einblenden lässt sich auch ein Blinkeffekt erzeugen. Beispiel: 


<window type="generic"

	duration="7.0"

	height="35"

	width="250"

	bgcolor="#ff9900"

	underline_hyperlinks="false" />


<a href="http://v.hbi-stuttgart.de">

<b><font size="3" face="Arial" color="#000000">

<pos x="5" y="0" />Besuchen <time begin="0.5" />Sie

<time begin="1.0" />die</font>

<font size="5" face="Arial" color="#000000">
<pos x="46" y="10" /><time begin="1.5" />virtuelle</font>

<font size="6" face="Arial" color="#000000">

<pos x="130" y="0" /><time begin="2.0" />HBI</font>

<font size="6" face="Arial" color="#6600aa">
<font size="7" face="Arial" color="#6600aa" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="2.0" />!!!</font>

<font size="7" face="Arial" color="#ffffff" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="2.25" />!!!</font>

<font size="7" face="Arial" color="#6600aa" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="2.5" />!!!</font>

<font size="7" face="Arial" color="#ffffff" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="2.75" />!!!</font>

<font size="7" face="Arial" color="#6600aa" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="3.0" />!!!</font>

<font size="7" face="Arial" color="#ffffff" bgcolor="#ff9900"><

<pos x="193" y="-6" /><time begin="3.25" />!!!</font>

<font size="7" face="Arial" color="#6600aa" bgcolor="#ff9900">

<pos x="193" y="-6" /><time begin="3.5" />!!!</font>

</b>

</a>

</window>