Nella precedente lezione abbiamo studiato gli elementi ed attributi necessari per gestire gli effetti di transizione in SMIL, ora vediamo qualche esempio concreto.
Partiamo da una semplice galleria fotografica:
<?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" />
<region id="fotoarea"
fit="slice"/>
</layout>
</head>
<body>
<seq>
<img src="media/foto1.jpg" dur="5" region="fotoarea"/>
<img src="media/foto2.jpg" dur="5" region="fotoarea"/>
<img src="media/foto3.jpg" dur="5" region="fotoarea"/>
</seq>
</body>
</smil>
Ora definiamo tre transizioni per l'entrata delle tre foto della galleria ed applichiamole:
<?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" />
<region id="fotoarea" fit="slice"/>
</layout>
<transition id="tr1" type="fade" subtype="crossfade"/>
<transition id="tr2" type="barWipe" subtype="leftToRight"/>
<transition id="tr3" type="clockWipe" subtype="clockwiseTwelve"/>
</head>
<body>
<seq>
<img transIn="tr1" src="media/foto1.jpg" dur="5"
region="fotoarea"/>
<img transIn="tr2" src="media/foto2.jpg" dur="5"
region="fotoarea"/>
<img transIn="tr3" src="media/foto3.jpg" dur="5"
region="fotoarea"/>
</seq>
</body>
</smil>
Per rendere più “morbido” il passaggio tra una foto e l'altra estendiamo la durata delle foto con l'attributo fill; in più modifichiamo la durata delle transizioni:
<?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" />
<region id="fotoarea" fit="slice"/>
</layout>
<transition id="tr1" type="fade" subtype="crossfade"
dur="0.5"/>
<transition id="tr2" type="barWipe" subtype="leftToRight"
dur="1.5"/>
<transition id="tr3" type="clockWipe" subtype="clockwiseTwelve"
dur="2"/>
</head>
<body>
<seq>
<img transIn="tr1" src="media/foto1.jpg" dur="5" region="fotoarea"
fill="transition"/>
<img transIn="tr2" src="media/foto2.jpg" dur="5" region="fotoarea"
fill="transition"/>
<img transIn="tr3" src="media/foto3.jpg" dur="5" region="fotoarea"/>
</seq>
</body>
</smil>
Ora non ci manca che applicare una transizione in uscita per l'ultima foto; in più facciamo in modo di riprodurre solo la prima metà della transizione:
<?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" />
<region id="fotoarea" fit="slice"/>
</layout>
<transition id="tr1" type="fade" subtype="crossfade"
dur="0.5"/>
<transition id="tr2" type="barWipe" subtype="leftToRight"
dur="1.5"/>
<transition id="tr3" type="clockWipe" subtype="clockwiseTwelve"
dur="2"/>
<transition id="tr4" type="fade" subtype="crossfade" dur="1.5"
endProgress="0.5"/>
</head>
<body>
<seq>
<img transIn="tr1" src="media/foto1.jpg" dur="5" region="fotoarea"
fill="transition"/>
<img transIn="tr2" src="media/foto2.jpg" dur="5" region="fotoarea"
fill="transition"/>
<img src="media/foto3.jpg" dur="5" region="fotoarea"
transIn="tr3" transOut="tr4"/>
</seq>
</body>
</smil>
In questa lezione abbiamo visto alcuni esempi di applicazione di transizioni ad una presentazione SMIL, nella prossima introdurremo le animazioni.