Uno dei più grandi limiti di flash e delle altre tecnologie ad esso affini è che non rientrano appieno nei contenuti tipici pensati per il browser. Infatti quando clicco in un filmato Flash, anche se magari vedo contenuti diversi non viene creata nessuna cronologia all'interno del browser; non posso quindi cliccare su una pagina e poi usare il pulsante "back" per tornare indietro tra i passaggi precedenti.

Questo perchè per il browser siamo sempre nella stessa pagina HTML, che contiene a sua volta il filmato Flash. Per ovviare a questo difetto possiamo usare una libreria open source, SWFAddress, che ci permetterà di creare una cronologia anche per gli step eseguiti in un filmato Flash.

Ci sono due parti principali per la libreria: un file javascript da includere nella nostra pagina HTML e un'API Actionscript 3 grazie a cui potremo impostare le "reazioni" del filmato Flash all'uso dei pulsanti back e forward del browser; potremo quindi creare facilmente il deep linking del nostro filmato Flash.

Avremo anche degli URL unici per le varie sezioni del nostro filmato, questo comporta una miglior indicizzazione sui motori e la possibilità di dare un link diretto ad una specifica sezione del sito.

La libreria è scaricabile da http://www.asual.com/swfaddress/, dove troviamo l'ultima versione disponibile, attualmente la 2.2, in un comodo file ZIP.

Questo è filmato che useremo come esempio per usare SWFAddress, è un semplicissimo esempio di sito creato in Flash. E' composto da quattro sezioni, ognuna delle quali è un movie clip; la navigazione semplicemente regola la visibilità dei movieclip per mostrare la sezione esatta. Vedremo ora come modificare il codice in modo da attivare la cronologia e i tasti back e forward del browser usando SWFAddress.

Passiamo a Flash per vedere la struttura del sito, come detto è molto semplice: abbiamo un livello di sfondo, questo, quindi una serie di livelli, uno per ogni sezione del sito. C'è il livello "bioClip", che contiene la clip con la biografia, se lo nascondo possiamo vedere il movieclip delle foto sul livello photosClip, contenente alcune foto linkate poi su Flickr, infine abbiamo le clip links e videos sui livelli linksClip e videosClip. Sullo stage abbiamo dei pulsanti invisibili posti sopra ai testi del menu.

Dando invece un'occhiata al codice Actionscript, che come vediamo è piuttosto semplice, la prima cosa è rendere invisibili le clip link, video e foto, in modo da mostrare solo la clip "bio"; la variabile currentClip memorizza la sezione attualmente visibile, ne cambieremo quindi il valore ad ogni click su una sezione da parte dell'utente.
Abbiamo poi gli eventi CLICK per i pulsanti invisibili del menu, ognuno dei quali chiamerà una funzione, per esempio il pulsante bio chiamerà la funzione bioClick. Il codice di questa funzione è semplice: per prima cosa controllo che currentClip sia diverso da bioClip, ovvero l'utente è in un'altra sezione, nel qual caso rendo invisibile la sezione attuale, rendo invece visibile la clip bioClip, quindi imposto currentClip associata alla clip bioClip
Il procedimento è analogo per tutte le altre funzioni, dove vengono regolate le visibilità die movieclip per le diverse sezioni.

L'altra parte già impostata è la creazione di una pagina HTML che fa uso di SWFObject per incorporare il file SWF. Per maggiori informazioni su SWFObject, consultare i videotutorial a riguardo. Nella pagina abbiamo un titolo relativo alla sezione principale, che è la biografia (abbiamo quindi Bea Brimelow - Biography), Viene quindi importato il javascript di SWFObject, abbiamo quindi un div con id "content" e abbiamo quindi la funzione che chiama e ingloba il file bea.swf; il secondo parametro è l'id del div dove inserire il filmato, che è di 874x400 pixel e richiede il Flash Player 9.0.0 o successivo.

Vediamo ora cosa contiene il file ZIP di SWFAddress che abbiamo scaricato. Ci sono diverse risorse, come ad esempio la documentazione, è interessante notare come SWFAddress non sia solo per Flash ma possa essere usato anche con Ajax, nello ZIP possiamo quindi trovare anche esempi e risorse a riguardo. Concentriamoci su Actionscript 3: apriamo la cartella distr dove troviamo ciò di cui abbiamo bisogno, prima di tutto le classi Actionscript (disponibili per Actionscript 1, 2 o 3, noi vedremo l'uso per la versione Actionscript 3).
Il package è com.asual.swfaddress con all'interno due classi Actionscript, potremo quindi aggiungere questo percorso ai percorsi di classe di Flash.

L'altra componente fondamentale è il file Javascript swfaddress.js, basterà copiarlo dalla sua cartella originale, tornare nella cartella del nostro progetto Flash e incollarvelo. Nell'esempio i file Javascript sono posti sullo stesso livello dei file del sito.

A questo punto dobbiamo importare il javascript di SWFAddress nella pagina: possiamo duplicare la riga già utilizzata per importare SWFObject cambiando il nome del file in swfaddress.js.

Attenzione: ci sono alcuni comportamenti "strani", non saprei se chiamarli o meno bug, che si verificano se SWFAddress non viene importato DOPO SWFObject.
Importando SWFAddress prima di SWFObject può verificarsi il mancato funzionamento di alcune parti di SWFAddress, facciamo quindi attenzione ad avere l'importazione dei due javascript nell'ordine che vediamo.
Un'altra possibile fonte di problemi è la mancanza di un ID per il filmato Flash: SWFObject permette di assegnare un id con la proprietà attributes, creiamo quindi una variabile con nome attributes, che sarà un oggetto dentro cui inseriamo l'attributo id, a cui possiamo assegnare un valore a piacere, nell'esempio è "bea".

Dobbiamo ora passare questo oggetto come attributo alla chiamata embedSWF; non useremo gli altri parametri del metodo embedSWF. Poichè ci sono altri 3 argomenti prima degli attributes li settiamo come null e solo al quarto parametro associamo l'oggetto attributes.
Per maggiori informazioni su questi parametri, fare riferimento alla documentazione di SWFObject.

La pagina HTML è ora pronta: SWFAddress viene chiamato dopo SWFObject ed è presente un ID per il filmato Flash.

Ecco un articolo utile per approfondire: