World Wide Web - Grundlagen und Technologie

Musterlösung Aufgabe 9 (SMIL)

Erstellen einer Multimediapräsentation mit SMIL

SMIL-Code

Der SMIL-Code der Musterlösung sieht wie folgt aus:

<smil>
 <head>
  <layout>
   <root-layout width="310" height="310" background-color="yellow" />
   <region id="region_1" left="10" top="10" width="90" height="90" z-index="1" />
   <region id="region_2" left="60" top="60" width="90" height="90" z-index="2" />
   <region id="region_3" left="110" top="110" width="90" height="90" z-index="3" />
   <region id="region_4" left="160" top="160" width="90" height="90" z-index="2" />
   <region id="region_5" left="210" top="210" width="90" height="90" z-index="1" />
   <region id="left_image" left="10" top="110" width="90" height="90" z-index="2" />
   <region id="left_text" left="10" top="210" width="90" height="90" background-color="white" z-index="2" />
   <region id="right_image" left="210" top="110" width="90" height="90" z-index="2" />
   <region id="right_text" left="210" top="210" width="90" height="90" background-color="white" z-index="2" />
  </layout>
 </head>

 <body>
  <seq>

   <par>
    <img src="leftface.gif" region="left_image" dur="3s" fit="fill" id="idleft"/>
    <audio src="quelle_heure_est_il.au" begin="1s" type="audio/x-au" dur="0.9s" />
    <text src="left.txt" begin="1s" region="left_text" dur="2s"/>
    <img src="rightface.gif" region="right_image" begin="id(idleft)(3s)" dur="3s" fit="fill"/>
    <audio src="8h45.au" type="audio/x-au" begin="id(idleft)(4s)" dur="1.6s" />
    <text src="right.txt" begin="id(idleft)(4s)" region="right_text" dur="2s" />
   </par>

   <par>
    <img src="tile18.gif" region="region_1" dur="3s" fit="fill"/>
    <img src="marble.jpg" region="region_2" begin="1s" dur="3s" fit="fill"/>
    <img src="tile18.gif" region="region_3" begin="2s" dur="3s" fit="fill"/>
    <img src="marble.jpg" region="region_4" begin="3s" dur="3s" fit="fill"/>
    <img src="tile18.gif" region="region_5" begin="4s" dur="3s" fit="fill"/>
   </par>

  </seq>
 </body>
</smil>

Im Kopf (head) werden die Regionen zum Anzeigen der Bilder und Texte festgelegt. Dabei werden für die Textregionen die Hintergrundfarben festgelegt und für alle Regionen wird der z-index angegeben, der die räumliche Tiefe der Region im Vergleich zu anderen Regionen bestimmt (höherer z-index = Region liegt näher beim Betrachter). Der Hauptteil (body) besteht aus einer Sequenz, deren zwei Elemente parallel abzuarbeitende Blöcke darstellen. Im ersten Block werden Bilder und Sound eingebunden, wobei einige Startzeitpunkte ereignisgesteuert vom Start anderer Elemente abhängen (begin="id(idleft)(4s)", etc). Der zweite Block demonstriert die Anwendung der z-indize, mehrere Bilder erscheinen nacheinander, die je nach dem z-index ihrer Region vor- oder hintereinanderliegen.

Präsentation

Der obige SMIL-Code (ml.smil) wird als Präsentation dargestellt, indem das Applet soja.jar in die HTML-Datei ml.html eingebunden wird. Ein wichtiger Parameter dabei ist codebase der die Lage der soja.jar-Datei angibt. Als weitere Parameter werden unter anderem die Grösse des für das Applet zu reservierenden Fensters und die SMIL-Datei angegeben.

Bemerkungen zu Soja

Wie bereits in der Aufgabenstellung erwähnt versteht Soja nur die Grafikformate GIF und JPEG sowie die Audioformate AU und AUZ (komprimiertes AU).

please send comments to www-vl@dret.net
last modification on Monday, 18-Jun-2001 15:03:38 CEST 		valid CSS!valid HTML 4.01!