Nel precedente articolo su questo argomento abbiamo visto come, anche in assenza di un plugin per SVG nel browser dell'utente, sia possibile avvalersi di questa tecnologia come formato per la memorizzazione degli elementi grafici necessari alla comunicazione del proprio brand.
In questo tutorial vedremo invece come utilizzare appieno le caratteristiche d'animazione del linguaggio, confrontandole con l'espressività del capostipite dei software per la grafica vettoriale su Web, Flash di Macromedia. E' opportuno tuttavia sottolineare quanto le due tecnologie definiscano in realtà ambiti differenti, con un'ampia intersezione ma con due diversi approcci, per alcuni aspetti opposti e complementari per altri.
Flash nasce infatti con l'intento di fornire un'intelaiatura per il Web all'interno della quale inserire una vasta gamma di contenuti, mentre il formato SVG vuole essere semplicemente un modo per rappresentare immagini vettoriali statiche o per visualizzare graficamente generici dati XML, costruendo ad esempio diagrammi a torta da una serie di valori numerici attraverso XSLT.
Per raggiungere lo status di soluzione completa per la grafica in rete, SVG coinvolge altri linguaggi XML, nella fattispecie SMIL e XLink, che forniscono rispettivamente le basi per l'animazione dei contenuti e per l'interattività. Laddove venga supportato un linguaggio di scripting procedurale come JavaScript, è inoltre possibile manipolare il contenuto SVG attraverso il suo DOM.
L'approccio dichiarativo
Tipicamente si ricorre al formato SWF laddove vi sia la necessità di animare fluidamente un'interfaccia, piuttosto che dotare gli elementi che la compongono di una trasparenza variabile (sebbene quest'ultimo effetto sia ora ottenibile anche in DHTML, date un occhio alla libreria Alladyn). Il Modulo di Animazione ereditato da SMIL 2.0 realizza in SVG il corrispettivo del "tweening" in Flash, ovvero l'animazione dichiarativadi elementi grafiche.
L'aggettivo "dichiarativa" indica che si conoscono a priori tutte le informazioni che definiscono l'animazione, ad esempio il momento d'inizio e la durata, nonché la posizione iniziale e finale delle singole componenti: in SVG di definiscono gli attributi begin, dur e values mentre in Flash si avanza nella timeline e si sposta l'elemento nella posizione finale, fornendo in modalità visuale le stesse informazioni che vengono invece incluse testualmente nel primo.
In realtà non vi è propriamente una corrispondenza uno-a-uno tra i due formati, in Flash non è ad esempio possibile ottenere con il semplice tweening accelerazioni o decelerazioni arbitrarie degli oggetti disegnati. Al contrario SVG è dotato delle cosiddette spline, strumento con il quale è possibile modellare una qualsiasi variazione non constante delle caratteristiche di un elemento, come mostrato nell'articolo SMIL in Internet Explorer.
Un'altra differenza riguarda l'insieme d'elementi che è possibile manipolare in questo modo: il Modulo di Animazione di SVG si applica a TUTTI gli attributi dell'immagine, ad esempio i valori RGB che definiscono un gradiente di colore, piuttosto che i punti in cui il gradiente raggiunge questi valori. In Flash, al contrario, è l'interfaccia a stabilire quali attributi "esporre" all'utente, e si deve ricorrere ad ActionScript ogni qual volta l'attributo che si vuole modificare non è contemplato tra essi.
Il primo esempio realizza proprio questo tipo di effetto: un gradiente lineare all'interno del quale lo stop-point di un colore risulti animato attraverso SMIL:
[ esempio 1]
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="700" height="500">
<defs>
<linearGradient id="grad1"
x1="0%" y1="0%" x2="100%" y2="0%"
spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(153,153,255);stop-opacity:1"/>
<!-- l’attributo offset dell’elemento stop che segue e’
il parametro chiave dell’animazione -->
<stop offset="50%" style="stop-color:rgb(255,255,255);stop-opacity:1">
<animate attributeName="offset" calcMode="spline"
keyTimes="0; 0.5; 1" keySplines=".5 0 1 .5; 0 .5 .5 1"
dur="6s" repeatCount="indefinite" values="10%;100%;10%"/>
</stop>
<stop offset="100%" style="stop-color:rgb(153,153,255);stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="700" height="500"
style="fill:url(#grad1);fill-opacity:0.5;stroke-width:1;stroke:none"/>
</svg>
L'elemento animate è alla base del Modulo di Animazione di SMIL che stiamo utilizzando, in modo del tutto trasparente, all'interno del codice SVG: esso risulta applicabile a tutti gli attributi dell'immagine che sono passibili di un cambiamento progressivo e graduale, quali colore, dimensioni e posizione.
Per le restanti caratteristiche, ad esempio l'attributo di stile visibility che ammette esclusivamente i valori visibile e hidden, è necessario invece utilizzare l'elemento set, come mostrato nell'articolo citato precedentemente.
L'approccio procedurale
La dichiaratività è uno strumento per definire in modo semplice menu dinamici e banner animati; non può tuttavia realizzare comportamenti più complessi, quali ad esempio una partita di ping-pong tra utente e computer, dal momento che non è possibile definire a priori come si muoveranno gli elementi della pagina (il cerchio che rappresenta la pallina, le racchette rese come barre verticali, il punteggio, &46;&46;&46;).
I linguaggi di scripting consentono invece questo genere di flessibilità (banalmente, in ECMAScript esiste la funzione random() che consente di rendere casuale il punto di arrivo o la durata di una animazione). SVG utilizza JavaScript mentre Flash supporta il linguaggio proprietario ActionScript, che aderisce comunque allo standard per quanto riguarda la sintassi.
Anche in questo caso la differenza tra SVG e Flash non è insita nell'espressività del linguaggio di definizione, bensì nell'insieme di elementi della pagina accessibili con esso: da una parte Flash definisce le proprietà che risultano esposti al linguaggio di scripting, mentre SVG è un formato XML completamente descritto e modificabile in ogni sua parte attraverso il Document Object Model generato dal suo parsing.
Il secondo esempio modifica dinamicamente la posizione dello stop-point secondo la coordinata verticale del mouse; nel codice che segue è stato omesso il codice JavaScript (che trovate comunque nel sorgente dell'esempio), al fine di porre l'accento sul suo interfacciamento con SVG:
[ esempio 2 ]
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a3="http://ns.adobe.com/AdobeSVG<patatine &ketchup>viewerExtensions/3.0/" a3:scriptImplementation="Adobe" onload="init(evt)">
<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
...
]]></script>
<defs>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"
spreadMethod="pad" gradientUnits="objectBoundingBox">
<stop offset="0%" style="stop-color:rgb(153,153,255);stop-opacity:1"/>
<!-- l’attributo offset dell’elemento stop che segue e’
il parametro chiave dell’animazione -->
<stop id="gradient" offset="50%"
style="stop-color:rgb(255,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(153,153,255);stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="700" height="500" style="fill:url(#grad2);stroke-width:1;stroke:none" onmousemove="updateCursor(evt)"/>
</svg>
All'evento onmousemove è stata associata la funzione updateCursor, alla quale viene passato come argomento, attraverso la parola chiave evt, l'evento stesso che ha prodotto l'attivazione della funzione.
SVG in SMIL
Abbiamo visto come una costola di SMIL consenta di animare la grafica statica espressa in SVG, la controparte di questa simbiosi è rappresentata dalla possibilità di includere contenuti SVG in una presentazione multimediale.
Nella visione di un filmato in streaming, l'interattività termina con l'attivazione dello stesso (ad esempio attraverso un link contenuto nella pagina Web) per riprendere nel momento in cui l'utente ha finito (oppure è stanco) di visionarlo. Spesso vi è invece la necessità di inserire, direttamente nel media player, una interfaccia che consenta all'utente di eseguire scelte personalizzate, anche semplicemente passare da un filmato all'altro, senza richiedere l'intervento del browser.
All'interno di RealONE (e RealPlayer G2 con qualche limite) si possono utilizzare a questo proposito i linguaggi proprietari RealText e RealPix, oppure animazioni in Flash fino alla versione 4 (private purtroppo delle funzionalità di ActionScript). Il linguaggio SMIL comprende inoltre l'elemento animation che consente di inserire in una presentazione GIF animate ma soprattutto contenuti SVG.
Cosa possiamo quindi realizzare in uno dei media player sopracitati con l'aggiunta del plugin per SVG di Adobe? Un sistema completo per la diffusione in rete che:
- prescinde da http (utilizzando rtsp come protocollo per tutti i tipi di media diffusi),
- supporta animazioni dichiarative attraverso il Modulo di Animazione di SMIL,
- nei contenuti SVG supporta anche JavaScript per l'animazione procedurale.
L'ultimo esempio è un'interfaccia in SMIL 2.0 per la visualizzazione di filmati in streaming e utilizza un layout SVG, inserito attraverso l'elemento animation:
[ esempio 3 ]
<?xml version="1.0" encoding="UTF-8"?>
<!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">
...
<animation region="interfaccia" src="esempio3.svg" begin="0s" dur="indefinite"/>
…
</smil>
All'interno di quest'ultimo viene infine utilizzato il codice SMIL Animation e JavaScript visto sinora, per animare i gradienti di colore utilizzati come sfondo.
