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

Le transizioni

Definire una transizione, applicazioni in entrata e in uscita
Definire una transizione, applicazioni in entrata e in uscita
Link copiato negli appunti

Nella scorsa lezione abbiamo creato una presentazione ipermediale, in questa lezione introdurremo le funzionalità di transizione di SMIL.

Durante le presentazioni multimediali sono molto frequenti i passaggi da una fonte multimediale all'altra; proprio in questi passaggi è possibile applicare degli effetti speciali che accompagnino il cambiamento, per esempio si potrebbe voler far scomparire un'immagine facendola sfumare.

Per utilizzare le transizioni in SMIL è necessario, per prima cosa, definirle attraverso l'elemento “transition”, posto nella sezione “head”. Ecco un esempio di definizione di una transizione:

<head>
  <transition id="tr1" type="fade" subtype="crossfade"/>
</head>

Le transizioni in SMIL sono classificate in tipo e sottotipo, infatti, nell'esempio qui sopra, possiamo notare come sia stata scelta una transizione di tipo “fade” e sottotipo “crossfade”; infine, molto importante è l'attributo id, attraverso il quale è possibile applicare la transizione definita ai media inseriti nella presentazione.

Una transizione può essere applicata ad un oggetto multimediale nel momento in cui inizia la sua riproduzione, oppure nel momento in cui finisce; si parla infatti di transizioni in ingresso e in uscita, per cui si utilizzano, rispettivamente, gli attributi “transIn” e “transOut”:

<img transIn="tr1" transOut="tr1" src="media/paesaggio.jpg" dur="5"/>

In questo caso, ad un'immagine, visualizzata per cinque secondi, viene applicata la medesima transizione sia in ingresso che in uscita. Da notare che la durata di riproduzione dell'immagine rimane pari a cinque secondi, entro i quali vengono applicate le transizioni.

La durata standard di una transizione è pari ad un secondo, tuttavia è possibile modificarla attraverso l'attributo “dur”: inoltre si può fare in modo che solo una certa percentuale dell'effetto di transizione venga applicata all'immagine, questo grazie agli attributi “startProgress” ed “endProgress”. Ecco un esempio:

<transition id="tr1" type="fade" subtype="crossfade" dur="1.5"
startProgress="0.45" endProgress="0.65"/>

In questo caso è stata impostata una durata di un secondo e mezzo, mentre viene applicata solo la parte centrale dell'effetto di transizione.

Un'altra funzionalità interessante si riferisce all'attributo fill, discusso nella nona lezione; è possibile infatti prolungare la visualizzazione di un oggetto inserito in una presentazione, al fine di sovrapporgli l'entrata del successivo oggetto, nel caso in cui vi sia un effetto di transizione in entrata. Ad esempio:

<seq>
  <img fill="transition" src="media/paesaggio.jpg" dur="3"/>
  <img transIn="tr1" src="media/particolare.jpg" dur="3"/>
</seq>

Per approfondire il tema delle transizioni e per conoscere i tipi e sottotipi esistenti di transizioni, consultare il dodicesimo capitolo della Recommendation. Tenere presente che l'altro numero di transizioni esistenti non rispecchia gli effetti realmente riproducibili attraverso i lettori SMIL; la Recommendation, d'altra parte, incoraggia l'inserimento delle transizioni nei lettori SMIL, ma lo richiede tassativamente solo per un numero esiguo.

In questa lezione abbiamo visto come definire ed applicare le transizioni, nella prossima lezione analizzeremo alcuni esempi in merito.

Ti consigliamo anche