Il supporto di SMIL da parte del browser più diffuso al mondo prende il nome di Timed Interactive Multimedia Extensions for HTML, in breve HTML+TIME (XHTML+SMIL riferendosi al relativo standard del W3C). Di fatto Microsoft ha ritenuto opportuno includere le potenzialità del nuovo linguaggio all'interno del proprio browser piuttosto che in Windows Media Player, quest'ultimo terzo (su tre contendenti) nelle graduatorie di utilizzo.
Le nuove funzionalità messe a disposizione da SMIL consentono di realizzare gli effetti dinamici sinora appannaggio esclusivo di JavaScript. La notevole somiglianza con HTML e il carattere puramente dichiarativo del linguaggio configurano inoltre una curva d'apprendimento ben più accessibile per chi scrive codice rispetto ad un linguaggio di scripting di utilizzo generico.
Questo ci permetterà di evitare le problematiche relative al posizionamento degli elementi, risolto da HTML, per focalizzarci sul Modulo di Animazione di SMIL 2.0 e soprattutto sul metodo di definizione delle spline, strumento molto potente per definire come debba evolvere una caratteristica qualsiasi dell'oggetto, ad esempio posizione, colore e dimensioni.
SMIL ha fatto la sua comparsa nella versione 5.5 di Internet Explorer, sebbene solo con la versione 6.0 sia stato raggiunto lo standard, comprensivo di un insieme di "transizioni" con le quali passare da un media ad un altro all'interno di una singola regione, in analogia con quanto realizzato sinora nella comunicazione televisiva e cinematografica. Slideshow, menu a tendina e banner che si muovono liberamente lungo lo schermo sono immediati da realizzare in SMIL 2.0, insieme a tutti gli effetti per i quali si conosca a priori quale sarà colore, posizione o dimensioni degli oggetti in un dato momento.
Questa è solo una regola semplificativa per tracciare il confine con le funzionalità che ancora richiedono JavaScript, e può trarre quindi in inganno. Ad esempio: credo infatti sia realizzabile in SMIL 2.0 (con molto impegno) il gioco del "tris", dal momento che il numero di possibili configurazioni è limitato, ma di certo non il gioco del "ping pong", dove abbiamo, ad esempio, un gradiente continuo di possibili direzioni che la pallina può assumere.
Il template di base
Per poter iniziare a lavorare con SMIL, è necessario notificare al browser il nuovo ambiente che si intende utilizzare, mediante il relativo namespace (evidenziato qui sotto), e associare ad esso una classe all'interno del foglio di stile della pagina:
<html xmlns:t="urn:schemas-microsoft-com:time">
<?IMPORT namespace="t" implementation="#default#time2"?>
<head>
<style>
.time { behavior: url(#default#time2); }
</style>
</head>
<body>
...
</body>
</html>
A questo punto è possibile istanziare elementi appartenenti a SMIL, anteponendo ad esssi il prefisso indicato (nel nostro caso t:) oppure associare attributi di quest'ultimo ad elementi del linguaggio HTML, specificando la classe time. Un elemento div qualsiasi può così ereditare gli attributi begin e end di SMIL, nonché venire incluso in elementi specifici del nuovo linguaggio di sincronizzazione:
<t:par>
<div class="time" begin="0" end="4" fill="remove"
style="position: absolute; top: 20; left: 20;">
Contenuto visibile dal secondo 0 al secondo 4
</div>
<div class="time" begin="4" end="indefinite"
style="position: absolute; top: 40; left: 20;">
Contenuto visibile dal secondo 4 in avanti
</div>
</t:par>
L'attributo fill stabilisce quale fine debba fare il media al termine della sua esecuzione: SMIL 1.0 ammette i valori "freeze" e "remove", per congelare il media nella rispettiva regione piuttosto che rimuoverlo lasciando la regione vuota. La versione 2.0 aggiunge il valore "hold", per congelare il media fino al termine del gruppo genitore par o seq che lo contiene, il valore "transition" per operare una transizione, e infine "auto" per lasciare la decisione al media player.
Questo consente di realizzare presentazioni e slideshow in modo immediato, senza ricorrere a JavaScript, e risulta applicabile a tutti i formati comunemente ospitati da una pagina Web. Per quanto riguarda lo (pseudo)streaming di video e audio realizzabile in questo modo, è opportuno ricordare quanto siano le prestazioni del protocollo rtsp (Real Time Streaming Protocol) rispetto a http ad aver reso possibile la diffusione di RealPlayer e Quicktime, e non ci si può quindi attendere da un browser lo stesso effetto finale.
Il mio consiglio per metter d'accordo capra e cavoli, ovvero la semplicità di interfaccia e la qualità nello streaming, consiste nell'utilizzare il media player all'interno del browser mediante il rispettivo plugin. In questo modo si perde la stretta connessione tra l'interfaccia e i media diffusi via rtsp ma si riesce a utilizzare ognuno degli strumenti per il compito che più gli competa.
Il Modulo di Animazione
Uno dei principali salti di qualità operati dalla versione 2.0 riguarda la possibilità di animare gli attributi associati alle singole aree di una presentazione. In Explorer questo equivale a fornire un'alternativa, più semplice e concisa nel codice, del DynamicHTML abitualmente utilizzato. Mediante l'attributo id è ad esempio possibile associare istanze degli elementi set e animate di SMIL ad un oggetto presente sullo schermo:
<div id="box" style="position:absolute; top:50px; left:50px;
width:100px; height:40px; border:solid black 1px; text-align:center; visibility: hidden;">
Layer in movimento!
</div>
<t:set targetElement="box" attributeName="visibility" to="visible" dur="8"/>
<t:animate targetElement="box" attributeName="left" from="50" to="550" dur="8"/>
L'elemento set consente di mutare istantaneamente il valore di un attributo, senza alcun passaggio attraverso valori intermedi, e rappresenta la scelta obbligatoria per tutte quelle caratteristiche che non possono essere scandite numericamente: l'attributo di stile visibilità è un esempio di questi, non essendo possibile passare con gradualità dal valore "hidden" al valore "visibile".
Un punto di arrivo e la durata, definiti con gli attributi to e dur dell'elemento animate, sono invece sufficienti a produrre una animazione; se non viene specifcato l'attributo from, si assume il valore iniziale della proprietà CSS che si intende manipolare.
Per la posizione e il colore degli oggetti esistono poi gli elementi specifici animateMotion e animateColor: il primo consente una maggiore flessibilità, specificando un percorso come coppie di coordinate (relative alla posizione iniziale) anziché dover animare separatamente gli attributi left e top, mentre il secondo consente di passare con gradualità da un colore all'altro.
<div id="box" style="position:absolute; top:50px; left:50px;
width:100px; height:40px; border:solid black 1px; text-align:center;">
<b>Layer in movimento!</b>
</div>
<t:animateMotion targetElement="box"
values="0,0; 100,300; 500,100; 0,0" dur="8"/>
<t:animateColor targetElement="box" attributeName="color"
values="red; green; blue" dur="8"/>
Sebbene l'attributo values rappresenti un modo semplice e diretto per definire il moto di un oggetto lungo una linea spezzata, è tuttavia incapace di eseguire traiettorie curve: per questo si ricorre all'attributo path, che ammette come valore generici percorsi composti da rette e curve cubiche di Bezier, secondo una sintassi simile al formato vettoriale SVG. La trattazione di questa è piuttosto prolissa e si rimanda pertanto ai tutorial su Scalable Vector Graphics. Una caratteristica peculiare della revisione 2.0 di questo linguaggio è invece la possibilità di esprimere variazioni temporali molto fluide nelle caratteristiche degli oggetti di volta in volta manipolate, quali posizione, colore, trasparenza.
Per muovere in modo fluido un oggetto con JavaScript, è necessario invocare più volte una funzione che realizzi piccoli spostamenti; per realizzare nel movimento una decelerazione o accelerazione, è poi necessario distribuire nel tempo questi singoli movimenti in modo non uniforme. Con l'elemento base di questo modulo, animate, abbiamo poc'anzi definito lo spostamento orizzontale dal pixel 50 al pixel 550 dell'oggetto "box", distribuito nel lasso di tempo di otto secondi. Possiamo percepire il salto di astrazione operato da SMIL confrontando la riga di codice appena indicata con il codice JavaScript che sarebbe altrimenti necessario:
// funzione per lo spostamento di un oggetto
function animate( step ) {
// sposta l'oggetto di 10 pixel
...
// ripeti lo spostamento cinquanta volte in otto secondi
if ( step < 50 )
setTimeout( "animate( step+1 )", 160 );
}
animate( 0 );
Per accelerare o decelerare il moto dell'oggetto è sufficiente parametrizzare l'intervallo di tempo tra i singoli spostamenti, perdendo in questo modo il controllo sulla durata totale dell'animazione (che andrebbe calcolata con una serie matematica) e accettando di sottostare alla velocità del singolo browser: una pur fluida animazione può infatti risultare troppo lenta su macchine antiquate o, peggio ancora, troppo rapida su macchine di ultima generazione.
// ripeti lo spostamento accelerando
if ( step < 50 )
setTimeout( "animate( step+1)", parseInt( 160/step );
// ripeti lo spostamento decelerando
if ( step < 50 )
setTimeout( "animate( step+1)", 160*step );
Con il Modulo di Animazione, SMIL offre un'interfaccia più ad alto livello per trattare queste problematiche: un attributo calcMode definisce in che modo debbano combinarsi variazioni successive, che possiamo elencare come visto nell'attributo values, secondo la tabella di marcia stabilita dall'attributo keyTimes:
<t:animateMotion targetElement="box"
calcMode="linear" keyTimes="0; .1; .4; 1"
values="0,0; 100,300; 500,100; 0,0" dur="8"/>
L'oggetto "box" inizierà il proprio moto nel punto (50,100), dato dalla posizione iniziale sommata alla prima coppia di valori (0,0). Si muoverà quindi in modo uniforme fino al punto (150,300), dato dalle somme 50+100 e 100+200, in 0.8 secondi (gli 8 secondi di durata totale moltiplicati per 0.1, il primo valore non nullo di keyTimes), quindi fino al punto (550,200) in 3.2 secondi, per tornare al punto di partenza nel tempo restante. Di contro l'attributo calcMode="paced" renderà il moto uniforme lungo tutto il percorso, a prescindere da quanto stabilito dall'attributo keyTimes. Infine l'attributo calcMode="discrete" realizzerà lo spostamento istantaneo dell'oggetto nei punti indicati e nei tempi stabiliti.
La vera potenza del linguaggio si esprime tuttavia con l'ultimo possibile valore dell'attributo calcMode, ovvero "spline", e l'attributo keySplines ad esso associato che definisce le curve secondo le quali debba evolvere la grandezza in gioco, sia essa posizione o colore. Ogni spline è definita da una quaterna di valori compresi tra 0 e 1, che vanno a configurare nello spazio di un quadrato 1x1 i manici (handles) della curva rappresentata, come mostrato nella figura sottostante.
L'utente di software per la grafica vettoriale, quali Adobe Illustrator, riconoscerà in questi ultimi uno strumento consueto; l'unica differenza è che la curva non rappresenta un oggetto grafico da disegnare, bensì la variazione nel tempo della caratteristica che si vuole animare. Con le spline è possibile rendere ogni sorta di variazione continua delle grandezze in gioco all'interno del layout: con JavaScript e ActionScript si riesce solo faticosamente a realizzare la fluidità nel movimento che in SMIL 2.0 è data per acquisita e immediatamente disponibile.
La decelerazione e accelerazione di un oggetto corrisponderà alla coppia di semplici parabole, concave verso il basso e verso l'alto rispettivamente, mostrate in figura 2; questo il codice che le combina lungo lo stesso percorso dell'esempio 4:
<t:animateMotion targetElement="box"
calcMode="spline" keyTimes="0; .1; .4; 1"
keySplines="0 .5 .5 1; .5 0 1 .5; 0 .5 .5 1"
values="0,0; 100,300; 500,100; 0,0" dur="8"/>
I valori 0 e 1 ai lati (0 .5 .5 1) o al centro (.5 0 1 .5) di una quaterna di valori definisce sempre una parabola e, come appena visto, una accelerazione o decelerazione continua. L'attributo keyTimes definisce poi in che intervallo di tempo debba essere considerata ogni spline: il numero di valori in questo attributo è pari al numero delle spline sommato a uno, nel nostro caso 3+1=4.
Consentendo alla curva di cambiare concavità in corrispondenza del punto (.5, .5) come nella prima figura, si possono combinare accelerazione e decelerazione all'interno della singola spline. In questo caso però il passaggio da accelerazione a decelerazione o viceversa cadrà esattamente al centro della durata totale, in quell'istante il valore dell'attributo che viene animato avrà inoltre un valore pari alla media tra il valore iniziale e quello finale.
L'ultima figura mostra due curve di questo tipo che, insieme alle due nella figura precedente, costituiscono l'ultimo esempio associato all'articolo: una gara di corsa tra elementi dinamici della pagina, realizzata con quattro differenti spline... provate a indovinare chi vincerà!
