Come tutti sanno, si è diffusa negli ultimi anni la pratica di validare il codice delle pagine HTML. In questo articolo vedremo diversi modi per incorporare filmati Flash rispettando gli standard di validazione. Partiremo dal metodo più noto e diffuso per arrivare a quelli alternativi, in grado di farci raggiungere questo obiettivo. Iniziamo subito.
Incorporare Flash con object e embed
Sul sito di Macromedia c'è una
pagina che riporta il codice da inserire in pagine HTML per incorporare filmati
Flash: è lo stesso generato per esportare filmati Flash dall'ambiente di sviluppo.
Si trova inoltre una
pagina che spiega l'uso dei tag embed e object e
i loro attributi.
Vediamo il codice del nostro primo esempio con un
piccolo filmato che ho realizzato con SwishMax:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,40,0
width="350" height="200" id="fish">
<param name="movie" value="fish.swf">
<param name="quality" value="high">
<embed src="fish.swf" quality="high"
width="350" height="200"
name="fish" type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
In grassetto ho riportato le parti che dovrete modificare per inserire i vostri
filmati, ossia il nome del filmato e le dimensioni. Questo metodo di incorporare
filmati Flash è il più diffuso, è molto robusto e inoltre è semplice, dato che
può venir generato automaticamente dall'ambiente di sviluppo. Il problema, come
notere dal link diretto al validatore
nella pagina dell'esempio, è che non restituisce codice
valido: il motivo è l'uso del tag embed, che non rientra nelle specifiche
dell'HTML. Nel corso dell'articolo vedremo diverse alternative, tutte accomunate
dal fatto che passano il test di validazione.
Usare un filmato contenitore: Flash Satay
L'articolo apparso su Alistapart risale a più di due anni fa, e presenta una tecnica denominata Flash Satay. Il pezzo merita una lettura attenta: spiega come arrivare ad ottenere un codice HTML cross-browser e valido per incorporare filmati Flash. Un problema in cui si imbatte l'autore nel processo di standardizzazione del codice è lo streaming dei filmati Flash su Internet Explorer: con questo browser, infatti, un filmato verrà mostrato, ma solo quando è stato interamente scaricato. La soluzione presentata dall'autore è un piccolo filmato contenitore che riceve come parametro il nome del filmato da caricare attraverso una variabile. Vediamo l'esempio. Come noterete il codice HTML è ora valido. Eccolo:
<object type="application/x-shockwave-flash" data="c.swf?path=fish.swf" width="350" height="200">
<param name="movie" value="c.swf?path=fish.swf">
<p>Flash Player non trovato: lo puoi scaricare <a href="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,0,0">qui</a>.</p>
</object>
Anche in questo caso in grassetto le parti da modificare. Da notare che il testo all'interno del tag p
verrà mostrato solo nel caso in cui il lettore flash non sia disponibile nel sistema dell'utente.
Al suo posto possiamo aggiungere un'immagine sostitutiva o del testo, anche se personalmente consiglio di riportare
comunque il link per il download.
Il filmato contenitore è davvero molto piccolo (201 byte) e quindi verrà interamente
caricato in pochissimo tempo, così da consentire lo streaming dell'animazione
reale che riceve come parametro. Il container movie è costituito da un
semplice script in Actionscript posizionato nel primo e unico frame del filmato:
_root.loadMovie(_root.path,0);
O in alternativa, in SwishScript (se usate Swish o SwishMax), ecco il codice
da aggiungere sempre sul primo frame:
onLoad () {
this.loadMovie(_root.path);
}
La tecnica è molto semplice e robusta. Introduce però un limite: è difficile passare parametri al filmato reale anzichè al
contenitore. A distanza di due anni Drew McLellan, l'autore dell'articolo sul Flash Satay, ha scritto un
seguito in cui sostiene che reputa la tecnica
tuttora valida.
Usare il commento condizionale
Su questa pagina viene riportata una tecnica per incorporare Flash usando il commento condizionale di Internet Explorer. Vediamo subito l'esempio e il relativo codice HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,40,0"
width="350" height="200">
<param name="movie" value="fish.swf">
<!--[if !IE]> <-->
<object data="fish.swf"
width="350" height="200" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
<p>Flash Player non trovato: lo puoi scaricare
<a href="http://download.macromedia.com/pub/shockwave/
cabs/flash/swflash.cab#version=6,0,0,0">qui</a>.</p>
</object>
<!--> <![endif]-->
</object>
Da notare che il conditional comment in questo caso è usato in maniera un po' particolare, dato che serve per nascondere una porzione di codice per Internet Explorer.
Una variante, che mi piace un po' meno, si può trovare su questa pagina: vedremo solo l'esempio.
Usare Javascript per incorporare filmati Flash
La tendenza, ultimamente, è incorporare Flash grazie a Javascript. Ciò introduce un piccolo limite: per visualizzare il filmato dovrà esserci Javascript abilitato (oltre che il Flash Player disponibile), ma presenta anche un vantaggio: possiamo far scrivere a Javascript il tag embed mantenendo l'HTML valido. Questa pagina riporta una libreria Javascript per incorporare filmati Flash, il cui uso è davvero semplice. Il codice Javascript è piuttosto lungo (circa 6k) e usa innerHTML e document.write, che non rientrano nelle specifiche DOM o EcmaScript. La questione è che purtroppo è impossibile usare il DOM per creare dinamicamente un object e farlo andare su Internet Explorer.
Vediamo subito l'esempio. Per prima cosa il file Javascript va messo nella stessa cartella della pagina HTML, e linkato nella sezione head in questo modo:
<script type="text/Javascript" src="flashobject.js"></script>
Nel punto del body in cui vogliamo mettere il filmato inseriremo le seguenti righe:
<script type="text/Javascript">
// <![CDATA[
var myFlashObject=new FlashObject("fish.swf","fish","350","200",6,"#0000FF");
myFlashObject.write();
// ]]>
</script>
<noscript>
<p>Filmato con animazione di acquario con Macromedia Flash.</p>
</noscript>
In grassetto i parametri da passare alla funzione Javascript, che sono nell'ordine: percorso e nome del filmato, id da assegnare al filmato, larghezza, altezza, versione di Flash richiesta e colore di sfondo. Lo script si occuperà di verificare la versione di Flash (nel caso sia disponibile una versione inferiore verrà mostrato un avviso con il link per l'upgrade) e di incorporare il filmato. Nel caso in cui Javascript sia disabilitato, verrà semplicemente mostrato il testo all'interno del tag noscript.
Se volessimo passare dei parametri aggiuntivi al filmato Flash, come penultima riga, all'interno del tag script si dovrebbe aggiungere:
myFlashObject.addVariable("nome parametro", "valore");
Lo script si presta anche a un'altra soluzione, a parer mio migliore dato che permette di evitare l'uso del tag script nell'interno del body.
Vediamo subito l'esempio e il relativo codice HTML:
<div id="flashcontainer">
<p>Filmato con animazione di acquario con Macromedia Flash.</p>
</div>
Tutto qui. Si tratta solo di assegnare un id al contenitore del
filmato, e inserire ciò (testo, immagine, o link) che verrà mostrato solo nel
caso in cui Javascript sia disabilitato. Una cosa che consiglio è attribuire alle
dimensioni del container quelle del filmato flash via CSS:
<style type="text/css">
/* ... */
div#flashcontainer{width:350px;height:200px}
</style>
A questo punto veniamo al Javascript. Nella sezione head della pagina, oltre che a inserire le righe
per lo script esterno, aggiungeremo uno script incorporato per il filmato. Ecco il codice:
<script type="text/Javascript" src="flashobject.js"></script>
<script type="text/Javascript">
window.onload=function(){
var myFlashObject = new FlashObject("fish.swf", "fish", "350", "200", 6, "#0000FF");
myFlashObject.write("flashcontainer");
}
</script>
I parametri per aggiungere lo script sono gli stessi dell'esempio precedente. In più, in questo caso, come evidenziato in
grassetto, si dice allo script di inserire il filmato flash nell'elemento con id uguale a "flashcontainer".
Lo script incorprato volendo si può inserire in un file Javascript esterno o nello stesso flashobject.js,
così da mantenere totalmente separato HTML e Javascript.
Conclusioni
Termina qui l'articolo, in cui abbiamo visto diversi modi per incorporare filmati Flash. Due parole sulla compatibilità: gli esempi sono stati testati con successo su sistema Windows con Internet Explorer 6, Mozilla 1.6 e Opera 7.54; su Mac i browser usati sono Firefox 1.0 e Safari 1.2.3. Personalmente, il modo che ritengo più indicato tra i tanti visti è l'ultimo, dato che consente di mantenere il codice HTML molto leggero.
Codice ed esempi sono disponibili per il download. Alla prossima.
