Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Transizioni in pratica

Esempi di definizione ed applicazione di transizioni
Esempi di definizione ed applicazione di transizioni
Link copiato negli appunti

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.

Ti consigliamo anche