Si sa, nel mondo della programmazione i problemi non sono all'ordine del giorno solo in fase di produzione, ma anche dopo, quando il prodotto finito viene distribuito. Flash non fa eccezione. E il problema che affrontiamo in questo articolo è piuttosto delicato: la verifica dell'effettiva presenza sul PC dell'utente finale del Flash Player.
Si può pensare che sia cosa semplice e che bastino pochi controlli: sicuramente vero, ma in realtà le variabili in campo sono tantissime e soprattutto ci sono svariate versioni del lettore Flash. Per fare quindi un esempio basilare, possiamo avere una versione obsoleta del nostro lettore e far girare un prodotto che è stato concepito per release successive. Come fare, in questi casi?
Lo strumento che andiamo oggi ad introdurre si chiama SWFObject. Il progetto è attualmente arrivato alla versione 2 ed è ospitato sul sito http://code.google.com/p/swfobject.
È una libreria, scritta in Javascript, che assolve a numerosi compiti. Innanzitutto implementa due tipologie di approccio alla scrittura del codice che ci permettono di scegliere quale usare in base a criteri che vedremo tra poco. Inoltre, con una API praticamente completa per quanto riguarda l'embedding di contenuti Flash, intende essere un punto di riferimento e ambisce a diventare il nuovo standard nel suo campo. Il tutto in una libreria piccolissima (si parla di 10kb).
Qualcuno si chiederà il perché dell'uso del Javascript. La risposta è semplice: grazie al suo aiuto è possibile conoscere il tipo di Flash Player attualmente installato, quindi eventualmente cercare la versione successiva in caso quella attuale sia obsoleta. Inoltre, permette l'uso di Adobe Express Install nel caso si voglia permettere l'installazione dell'ultima versione, senza considerare la possibilità di effettuare un fallback ad un contenuto alternativo nel caso non ci sia la possibilità di mostrare il contenuto Flash.
Per quanto riguarda i metodi di pubblicazione, SWFObject ne presenta due: il primo, detto “statico”, ed il secondo, detto “dinamico”.
Il primo, più tradizionale, si basa per l'inserimento del movie sul contenuto del markup HTML e, nel caso ci siano problemi, il codice Javascript permette di risolverli.
Nel secondo caso invece, nell'elemento definito a livello di markup vi è il contenuto “alternativo”. Tramite Javascript verrà attivato il contenuto in Flash, ma nel caso non sia possibile verrà mostrato il markup di riserva.
Due soluzioni apparentemente simili, ma che in realtà presentano svariate differenze, sia nell'uso che nel risultato. Dove il metodo statico permette delle performance maggiori ed un'espansione del bacino di utenza ipotetico, il metodo dinamico si integra perfettamente con il concetto delle flashvars e soprattutto evita il fastidioso avviso dell'attivazione di “Active Content” presente nelle vecchie versioni di Internet Explorer ed Opera, dalla versione 9 in su.
Dopo questa introduzione possiamo passare ad analizzare questa comoda libreria dal punto di vista pratico.
Implementazione statica
Vediamo la prima implementazione, ovvero la statica. Il primo passo per questo caso è la scrittura del codice adeguato, con l'embedding sia del contenuto Flash che di quello alternativo. Un listato tipo per questa situazione può essere il seguente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Contenuto alternativo</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>Si faccia caso alla doppia definizione di un object: accorgimento necessario dato che dei due quello esterno serve per Internet Explorer, quello interno per tutti gli altri browser.
Ciascun object è accompagnato da una serie di argomenti che sono indispensabili per un corretto funzionamento:
classid, il cui valore è fisso ed è quello che vedete nel codice;type, che ha sempre il valore “application/x-shockwave-flash”;datawidthedheight, parametri con sui di definiscono rispettivamente la larghezza e l'altezza del movie;
, che si occupa di definire il percorso nel quale cercare il file .swf da incorporare;
Abbiamo poi un elemento param nel quale definiamo un attributo movie. Anche in questo caso dobbiamo specificare l'URL del file Flash da incorporare.
Gli sviluppatori di SWFObject, in questa fase, danno un consiglio molto importante: non usare assolutamente l'attributo codebase per puntare all'indirizzo URL dell'installer sui server ufficiali della Adobe, in quanto è una pratica non permessa e illegale.
Tutto ciò si ricollega ad una domanda molto importante: perché mai usare dei contenuti alternativi? Innanzitutto perché, quando si va a lavorare su un'applicazione web, non bisogna lasciare nulla al caso. Soprattutto per quanto riguarda la cosiddetta user experience. Inoltre, non tutti gli utenti possono avere a disposizione dei sistemi che permettano l'uso di tecnologia Flash.
Per questo motivo, erogare dei contenuti diversi che vadano anche in parte a sostituire ciò che non è possibile “vedere” non si rivela assolutamente una mossa sbagliata, né tanto meno uno spreco di tempo.
Possiamo passare allo step successivo, ancora più veloce del precedente. Nella sezione head del nostro documento HTML aggiungiamo questa semplice istruzione per includere la libreria di SWFObject:
<script type="text/javascript" src="swfobject.js"></script>Anche stavolta gli sviluppatori danno un consiglio: evitate di far puntare l'attributo src al repository ufficiale del progetto: semmai, scaricate una copia delle librerie per poi caricarla sul vostro server. Questo, più che altro, per evitare carichi di lavoro eccessivi ai server ufficiali del progetto.
Ora possiamo passare all'ultima fase, ovvero quella di registrazione del contenuto in modo tale da collegarlo con le funzionalità della libreria. Qui di seguito il listato, in realtà con pochissime modifiche: l'aggiunta di un id di riconoscimento per il tag più esterno dei due object nel body e successivamente il richiamo del metodo registerObject.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript"> swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");</script>
</head>
<body>
<div>
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>Gli sviluppatori, oltre alla libreria, hanno messo a disposizione un piccolo tool di authoring, realizzato appositamente per creare codice perfetto per l'occasione inserendo pochi dati di input. Trovate il tool su questa pagina.
Implementazione dinamica
Ora possiamo pensare all'altra modalità di implementazione, quella dinamica. Il listato iniziale della pagina stavolta sembra meno complesso del precedente: infatti abbiamo solamente un tag div con un id definito e, al suo interno, il contenuto alternativo da proporre.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>La domanda è lecita: dov'è finito il contenuto Flash da includere? In realtà già il nome del metodo fornisce un indizio: stiamo parlando di una modalità "dinamica". Questo lascia immaginare che il contenuto vero e proprio, quello in Flash, venga incluso via Javascript successivamente. Infatti è proprio quello che succede, come dimostrano i passi successivi.
Per prima cosa, aggiungiamo alla sezione head della nostra pagina il codice d'inclusione delle librerie di SWFObject:
<script type="text/javascript" src="swfobject.js"></script>Successivamente, nella stessa sezione, dovremo aggiungere anche un richiamo alla funzione "embedSWF". Di seguito il listato completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>La funzione non è difficile da interpretare: in questo caso, nell'ordine di apparizione, i parametri forniti al metodo sono rispettivamente l'URL del file swf da incorporare, l'id dell'elemento div da usare per la procedura, le dimensioni in pixel (larghezza ed altezza) ed infine la versione minima di Flash richiesta per l'avvio.
Qui c'è da aggiungere una piccola precisazione: specificando la versione c'è un sistema di rilevamento automatico delle stringhe. Infatti, la formula da usare avrà due possibili formati: "major.minor.release" (quindi la stringa "9.0.0" va bene) altrimenti semplicemente "major" (di conseguenza useremmo, in questo caso, solo "9").
Tornando al metodo embedSWF, analizziamolo nel dettaglio. La sua sintassi è la seguente:
swfobject.embedSWF(swfUrl, id, width, height, version,
expressInstallSwfurl, flashvars, params, attributes, callbackFn)I primi cinque argomenti già li abbiamo analizzati. Abbiamo quindi "expressInstallSwfurl", che serve a definire l'indirizzo a cui puntare per eseguire l'Adobe Express Install. Successivamente abbiamo a disposizione "flashvars", che serve a definire le flashvars nel formato "nome:valore". Ed ancora abbiamo "params", che permette la definizione di parametri da passare al nostro filmato. Stessa cosa vale per "attributes".
L'ultima voce da analizzare è "callbackFn", che richiama una funzione da noi realizzata per una questione, essenzialmente, di comodità. Nel caso venga definita ed implementata, verrà richiamata sia nel caso tutto sia andato bene, sia nel caso ci siano stati problemi.
