SMIL - Layout - Das <region>-Element

HOME - SMIL: Version 2.1 vom 30.06.2005 © Wolfgang von Keitz

Layout

Überblick
Das <layout>-Element
Das <root-layout>-Element
Das <region>-Element
Das <topLayout>-Element
Das <regPoint>-Element

2. Layout

2.4. Das <region>-Element

Wurde das Präsentationsfenster festgelegt, gilt es nun in einem zweiten Schritt einzelne Präsentationsbereiche zu definieren, in denen die jeweiligen Multimediaobjekte sichtbar werden sollen. Mit dem <region>-Element kann die Position und Größe eines Präsentationsbereiches sowie die Skalierung eines Multimediaobjekts festgelegt werden.

2.4.1. Absolute Spezifikation des Präsentationsbereiches

Präsentationsbereiche können sehr einfach mit <region id="..." left="..." top="..." width="..." height="..." /> positioniert werden. Ihre Ausrichtung erfolgt an der linken oberen Ecke des Präsentationsfensters. Ein Präsentationsbereich erhält mit dem Attribute "id" einen Namen. Der Abstand zur linken oberen Ecke des Präsentationsfensters sowie die Breite und Höhe des Bereichs können in Pixeln festgelegt werden.

Folgendes Beispiel zeigt, wie ein Bildausschnitt der Größe 300 x 200 Pixel 75 Pixel von links und 50 Pixel von oben zu positionieren ist:

<smil>
 <head>
  <layout>
   <root-layout width="300" height="200"  background-color="white" />
   <region id="bild" left="75" top="50" width="100" height="100" />
  </layout>
 </head>
 [...]

Um im Präsentationsbereich "bild" tatsächlich ein Bild sichtbar werden zu lassen, müssen wir im body-Teil des SMIL-Dokuments mit Hilfe des Mediaelements <img src="..." alt="..." region="..." /> ein Bild in den Präsentationsbereich des Präsentationsfensters "einfügen". Beispiel:

[...]

<body>
  <img src="bild.jpg" alt="Testbild" region="bild" />
 </body>
</smil>

Das region-Attribute des <img>-Elements dient als Zeiger zu der Positionsangabe des <region>-Elements. Durch diesen Zeiger wird die in der Layoutdefinition getroffene Positionsangabe eines Objekts mit der tatsächlichen Quelle des zu präsentierenden Objekts verknüpft.

Fassen wir zusammen: In dem Beispiel wird das Präsentationsfenster auf 300 x 200 Pixeln festgelegt; ein Bildausschnitt der Größe 100 x 100 Pixel eines Bildes wird auf der Position 75 Pixel vom linken Rand und 50 Pixel vom oberen Rand eingeblendet.

2.4.2. Relative Spezifikation des Präsentationsbereiches

Im Gegensatz zur absoluten Spezifizierung von Präsentationsbereichen werden bei der relativen Spezifizierung nicht Pixel sondern Prozentangaben benutzt. Die Prozentangaben beziehen sich auf die Breite bzw. Höhe des Präsentationsfensters. Unser Beispiel könnte sich wie folgt verändern:

<smil>
<head>
<layout>
<root-layout width="300" height="200"background-color="white" />
<region id="bild" left="50%" top="50%"width="100" height="100" />
</layout>
</head>
[...]

Jetzt wurde die linke obere Ecke desselben Bildausschnitt der Größe 300 x 200 Pixel 50% vom linken Rand und 50% vom oberen Rand plaziert. Die Angabe von Prozentwerten beschränkt sich nicht auf die Attribute "left" oder "top"; auch die Größenangaben des Bildausschnitts können in Prozentwerten angegeben werden.

2.4.3. Die Überlappung von Präsentationsbereichen – der z-index

Werden mehrere Präsentationsbereiche definiert, können diese nebeneinander, übereinander oder überlappend angeordnet werden.

Folgendes Beispiel zeigt zwei Präsentationsbereiche, die nebeneinander angeordnet sind:

<smil>
<head>
<layout>
<root-layout width="300" height="200" background-color="white" /> 
<region id="bild1" left="0%" top="0%"width="100" height="100" /> 
<region id="bild2" left="50%" top="50%" width="100" height="100" /> 
</layout>
</head>           
<body>   
<img src="bild.jpg" alt="Testbild" region="bild1" />
<img src="bild.jpg" alt="Testbild" region="bild2" />;  
</body>
</smil>

Sollen sich Präsentationsbereiche überlappen, kann mit Hilfe des Attributes z-index des <region>-Elements angegeben werden, welcher Präsentationsbereich im Vordergrund und welcher im Hintergrund dargestellt wird.

Im folgenden Beispiel wird der Präsentationsbereich "Region 1" im Vordergrund und der Präsentationsbereich "Region 2" im Hintergrund dargestellt:

<smil>
<head>
<layout>
<root-layout width="300" height="200" background-color="white" />
<region id="region_1" left="50" top="50" width="150" 
height="125" z-index="2"/>
<region id="region_2" left="25" top="25" width="100" 
height="100" z-index="1"/>
</layout>
</head>
<body>
<par>
<text src="text1.txt" region="region_1" />
<text src="text2.txt" region="region_2" />
</par>
</body>
</smil>

Überlappen sich Präsentationsbereiche und wurde kein z-index angegeben, wird der zuerst genannte Bereich im Vordergrund gezeigt.

2.4.4. Einpassen von Multimediaobjekten – das fit-Attribut

In den bislang behandelten Beispielen wurde zwar die Größe des Präsentationsfensters und die Größe des Präsentationsbereiches spezifiziert, wie Multimediaobjekte unterschiedlicher Größe in einen Präsentationsbereich eingepasst werden, wurde bislang nicht besprochen. Wie die oben dargestellten Beispiele zeigen, wird immer dann, wenn keine Angaben zur Einpassung eines Multimediaobjekts gemacht werden lediglich ein Ausschnitt eines Objekts (z.B. eines Bildes oder eines Textes) sichtbar.

Die Einpassung eines Objekts in einen Präsentationsbereich wird über das fit-Attribut des <region>-Elements gesteuert. Das fit-Attribut kennt die Werte "fill", "meet" und "slice". Soll ein Objekt den gesamten Präsentationsbereich ausfüllen, wird "fill" benutzt; dabei kann es bei Bildern zu Verzerrungen in der Darstellung kommen, wenn die Relation von Höhe und Breite des Präsentationsbereiches nicht der Relation von Höhe und Breite des Bildes entsprechen. Mit "meet" können Verzerrungen vermieden werden. In diesem Fall wird das Objekt proportional nur soweit vergrößert, bis der linke oder untere Rand des Präsentationsbereiches erreicht ist. In diesem Fall können Teile des Präsentationsbereiches leer bleiben. In den "Leerzonen" wird dann die Hintergrundfarbe des Präsentationsbereiches sichtbar.

Das folgende Beispiel zeigt die Anwendung des fit-Attributs mit dem Wert "fill":

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="85" top="85" width="280" height="120"
           background-color="#000080" fit="fill" />
</layout>
</head>
<body>
<!—Dieses Bild ist größer als die Präsentationsfläche -->
<img src="images/mandeln.jpg" region="region_1" />
</body>
</smil>

Das Bildschirmfenster wurde mit einer Größe von 450 x 300 Pixel mit einem hellen Hintergrund definiert. In dieses Fenster wurde ein Präsentationsbereich der Größe 280 x 120 Pixel mit blauem Hintergrund eingepasst. Durch das fit-Attribut mit dem Wert "fill" wird das gesamte Bild in den Präsentationsbereich eingepasst. Da das Bild größer und breiter als der Präsentationsbereich ist, wird es ohne Rücksicht auf mögliche Verzerrungen der Größe des Präsentationsbereiches entsprechend verkleinert. In unserem Beispiel ist die dadurch entstehende Verzerrung deutlich zu sehen.

Die Verwendung von "meet" führt nun zu folgendem Ergebnis:

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="85" top="85" width="280" height="120"
           background-color="#000080" fit="meet" />
</layout>
</head>
<body>
<!—Dieses Bild ist größer als die Präsentationsfläche -->
<img src="images/mandeln.jpg" region="region_1" />
</body>
</smil>

Das Bild ist größer als der Präsentationsbereich; es wird aber proportional ohne Verzerrung verkleinert. Dies führt dazu, dass am rechten Rand ein Teil des Präsentationsbereiches nicht von dem Bild ausgefüllt wird. Am rechten Rand wird deshalb die Hintergrundfarbe des Präsentationsbereiches sichtbar. Ein weiteres Beispiel von fit=meet zeigt, wie ein Video in einem 4:3 Playerfenster im Breitwandformat gezeigt werden kann. Dadurch entsteht der vom Fernsehen her bekannte Effekt, dass oben und unten schwarze Balken zu sehen sind.

Eine proportionale Verkleinerung des Bildes und die vollständige Ausfüllung des Präsentationsbereiches wird mit "slice" erzielt; in diesem Fall werden Teile des Bildes, die nicht in den Präsentationsbereich passen, abgeschnitten.

Unser Beispiel mit dem fit-Wert "slice":

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="85" top="85" width="280" height="120"
           background-color="#000080" fit="slice" />
</layout>
</head>
<body>
<!—Dieses Bild ist größer als die Präsentationsfläche -->
<img src="images/mandeln.jpg" region="region_1" />
</body>
</smil>

In unserem Fall erweist sich auch "slice" als wenig ideale Lösung. Nun tritt zwar keine Verzerrung mehr auf, dafür wird aber der untere Teil des Bildes abgeschnitten.

Ist das Objekt größer als der definierte Präsentationsbereich, und soll keine Information abgeschnitten werden, können mit dem scroll-Parameter Rollbalken in die Präsentation eingefügt werden.

In diesem Fall erhalten wir folgendes Beispiel:

<smil>
<head>
<layout>
<root-layout width="450" height="300" background-color="#FAEBD7" />
<region id="region_1" left="85" top="85" width="280" height="120"
           background-color="#000080" fit="scroll" />
</layout>
</head>
<body>
<!—Dieses Bild ist größer als die Präsentationsfläche -->
<img src="images/mandeln.jpg" region="region_1" />
</body>
</smil>

Mit SMIL 2.o wurde zur Kontrolle von Audiodateien das neue Attribut "soundLevel" eingeführt. Um die Originallautstärke eines Audiofiles beispielsweise zu verdoppeln, muss als Attributwert 200% eingegeben werden:

<layout width="450" height="300"  background-color="#FAEBD7"> 
<region  id="ton" soundLevel="200%" /> 
</layout>

Das folgende Beispiel demonstriert diese Funktion.

Vorwort

Grundlagen

Layout

Zeit

Bild, Text und Ton

SMIL und HTML

Referenz

Beispiele