Nella scorsa lezione abbiamo descritto gli elementi e gli attributi principali che ci permettono di sincronizzare e temporizzare i media inseriti in una presentazione SMIL, in questa lezione creeremo una presentazione passo passo.
Partiamo dal seguente codice, in cui compaiono un audio, un'immagine ed un testo, il tutto in riproduzione parallela, il testo è inserito all'interno della regione “sottotitoli”:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" width="405" height="275"/>
<region regionName="sottotitoli" width="405" height="80" top="195"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.wav"/>
<img src="media/paesaggio.jpg"/>
<text src="media/descrizione1.txt" region="sottotitoli"/>
</par>
</body>
</smil>
Supponiamo non sia possibile conoscere a priori la durata del file audio, sarebbe opportuno specificare manualmente la durata di visualizzazione dell'immagine, ad esempio cinque secondi; in più si renderebbe necessario che l'audio continuasse a ripetersi, per evitare di lasciare un “vuoto” nel caso in cui la sua durata intrinseca fosse meno di cinque secondi:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" width="405" height="275"/>
<region regionName="sottotitoli" width="405" height="80" top="195"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.wav" repeatDur="5"/>
<img src="media/paesaggio.jpg" dur="5"/>
<text src="media/descrizione1.txt" region="sottotitoli"/>
</par>
</body>
</smil>
Aggiungiamo ora un'altra immagine insieme alla propria descrizione testuale, creando una specie di sequenza di diapositive riprodotta parallelamente all'audio; facciamo in modo che tale sequenza di diapositive venga riprodotto per due volte:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" width="405" height="275"/>
<region regionName="sottotitoli" width="405" height="80" top="195"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.wav" repeatDur="20"/>
<seq dur="10" repeatCount="2">
<par>
<img src="media/paesaggio.jpg" dur="5"/>
<text src="media/descrizione1.txt" region="sottotitoli"/>
</par>
<par>
<img src="media/particolare.jpg" dur="5"/>
<text src="media/descrizione2.txt" region="sottotitoli"/>
</par>
</seq>
</par>
</body>
</smil>
Adesso possiamo fare in modo che le descrizioni testuali inizino con un secondo di ritardo rispetto alle relative immagini:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" width="405" height="275"/>
<region regionName="sottotitoli" width="405" height="80" top="195"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.wav" repeatDur="20"/>
<seq dur="10" repeatCount="2">
<par>
<img id="img1" src="media/paesaggio.jpg" dur="5"/>
<text src="media/descrizione1.txt" region="sottotitoli"
begin="img1.begin+1"/>
</par>
<par>
<img id="img2" src="media/particolare.jpg" dur="5"/>
<text src="media/descrizione2.txt" region="sottotitoli"
begin="img2.begin+1"/>
</par>
</seq>
</par>
</body>
</smil>
Supponiamo ora di avere un filmato di dieci secondi in cui:
- nei primi tre secondi viene descritta la prima immagine;
- nei successivi tre secondi viene descritta la seconda immagine;
- i restanti quattro secondi contengono una ripresa panoramica.
Vogliamo che in una piccola area rettangolare in alto a destra venga riprodotto il filmato; ogni immagine deve avere associata la propria descrizione video, riempiendo i tempi vuoti con un fermo immagine, per la prima diapositiva, e con la parte finale del filmato, per la seconda diapositiva, facendo in modo che il filmato termini mezzo secondo prima della fine della seconda diapositiva:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN"
"http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="black" width="405" height="275"/>
<region regionName="sottotitoli" width="405" height="80" top="195"/>
<region regionName="descrizione" width="80" height="80" left="325"
fit="meet"/>
</layout>
</head>
<body>
<par>
<audio src="media/sottofondo.wav" repeatDur="20"/>
<seq dur="10" repeatCount="2">
<par>
<img id="img1" src="media/paesaggio.jpg" dur="5"/>
<text src="media/descrizione1.txt" region="sottotitoli"
begin="img1.begin+1"/>
<video src="media/film.mpeg" region="descrizione"
dur="3" fill="freeze"/>
</par>
<par>
<img id="img2" src="media/particolare.jpg" dur="5"/>
<text src="media/descrizione2.txt" region="sottotitoli"
begin="img2.begin+1"/>
<video src="media/film.mpeg" region="descrizione"
begin="-3" end="img2.end-0.5"/>
</par>
</seq>
</par>
</body>
</smil>
In questa lezione abbiamo sincronizzato diversi media, costruendo una presentazione multimediale SMIL; nella prossima lezione introdurremo il concetto di link ipermediale.