Uno dei problemi più noti con i siti in Flash è l'impossibilità di poter usare i pulsanti "avanti" e "indietro" del browser: il file SWF infatti rappresenta di solito l'intero sito ed è racchiuso in un'unica pagina (X)HTML, pertanto l'utente premendo "indietro" quando è in una pagina interna al sito Flash, si ritroverà al sito precedente e non alla pagina del sito che stava visitando. Questo può portare in molti casi anche alla perdita di visitatori, specialmente se questi sono magari poco avvezzi ai siti in Flash e quindi non si aspettano tale funzionamento.
Per ovviare al problema c'è chi divide il sito in più filmati SWF, uno per ogni pagina, ma in questo modo si perde quello che è invece un vantaggio degli SWF quale la possibilità di avere più pagine e contenuti all'interno dello stesso file, potendo così creare effetti tra le pagine e soprattutto interazione tra le diverse parti del sito.
Altri difetti indotti dall'unicità dell'URL sono l'impossibilità di linkare ad una precisa parte del sito, o ricaricare le pagina nel caso di problemi di visualizzazione o connesisone (ricaricando una pagina contenente un SWF infatti rivedremo tuto il filmato dall'inizio e non verremo portati al punto in cui ci trovavamo in precedenza).
Anche dal punto di vista della SEO ci sono conseguenze negative: se il contenuto ricercato da un utente non fosse immediatamente visibile nella pagina principale dell'SWF, i visitatori dai motori di ricerca troverebbero un risultato non corrispondente alle chiavi inserite.
Flash non offre nativamente dei metodi per ovviare a questi difetti, ma esiste una libreria molto potente, che permette di creare un sistema di link "virtuali" grazie ai quali gestire le componenti di un file SWF come se fossero url e pagine separate. Si tratta di SWFAddress, attualmente in versione 2.3 e rilasciata sotto licenza MIT. È disponibile per il download sia in versione completa di esempi e documentazione (12 MB) sia in versione con i soli script (37 kb). Per seguire l'articolo è sufficiente quest'ultima versione.
In questo articolo vedremo come utilizzare questa libreria, disponibile tra l'altro per tutte le versioni di ActionScript, dalla 1 alla 3.
Composizione dell'archivio e installazione
Per prima cosa scarichiamo l'archivio ZIP contenente gli script: al suo interno troveremo tre cartelle denominate as, js e swc:
- in js troviamo il file javascript che includeremo nella pagina (X)HTML
- as contiene le cartelle
1,2e3contenenti a loro volta ognuna i file o le classi ActionScript della rispettiva versione (nel caso delle versioni 2 e 3 le classi sono già organizzate in modo da avere come packagecom.asual.swfaddress) - tralasciamo la cartella swc, che serve per importare la libreria come componente precompilato
La libreria si divide quindi essenzialmente in due parti: la parte javascript e la parte ActionScript, che collaborano nel gestisre la comunicazione dall'SWF al browser (ad esempio per impostare un determinato URL nella barra degli indirizzi quando eseguiamo un'azione nel file) e viceversa, il tutto comunque come vedremo è gestito e personalizzato dal file SWF mentre per il file javascript ci limitiamo all'inclusione nella pagina (X)HTML ospite.
Estrazione e preparazione dei file
Prepariamo la struttura per l'esempio. Realizzeremo inizialmente tutto in ActionScript 3, ma in seguito vedremo le differenze nel caso volessimo usare ActionScript 2 o ActionScript 1.
Creiamo una cartella per il nostro progetto, quindi copiamo la cartella com ricavata dalla cartella as/3 dell'archivio, poi la cartella js con i suoi due file.
Come ultimo passaggio prima di passare a Flash, creiamo un file HTML con un nome a piacere, quindi inseriamoci il codice per includere il javascript di SWFAddress ed eventuali altri script. Per esempio se decidiamo di utilizzare SWFObject per includere il file SWF nella pagina, dobbiamo prima scaricare la libreria swfobject.js ed inserirla nella cartellina js.
<html>
<head>
<title>Esempio</title>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
swfobject.embedSWF( 'esempio.swf', 'filmato',
'350', '200', '9.0.45',
'js/expressinstall.swf', {},
{bgcolor: '#CCCCCC', menu: 'false', wmode: 'opaque'},
{id: 'website'});
/*]]>*/
</script>
</head>
<body>
<div id="filmato">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>
Apriamo infine Flash, creiamo un nuovo file ActionScript 3 e salviamolo come Esempio.fla nella cartella in cui abbiamo impostato gli altri file, sullo stesso livello della pagina HTML. Creiamo anche un file ActionScript con nome Esempio.as, che sarà la Classe Documento (Document Class) del nostro filmato, e impostiamolo con il seguente codice
package
{
import flash.display.MovieClip;
public class Esempio extends MovieClip
{
public function Esempio() { }
}
}
Dal pannello Proprietà di Esempio.fla inseriamo come valore per la Classe Documento Esempio.
Primi passi con SWFAddress
Per prima cosa dobbiamo importare la classe SWFAddress nella nostra classe Esempio, quindi modifichiamola in questo modo:
package
{
import flash.display.MovieClip;
import com.asual.swfaddress.*;
public class Esempio extends MovieClip
{
public function Esempio() { }
}
}
Ora possiamo utilizzare i metodi e gli eventi di SWFAddress.
Prima di proseguire però impostiamo il nostro filmato Flash in modo che abbia più "pagine" da poter utilizzare per testare le potenzialità di questa libreria.
Nel file di esempio sono stati creati 5 fotogrammi, ognuno con un semplice testo "Pagina N" (dove N varia da 1 a 5) e dei pulsanti (posti su un layer a parte e comuni a tutti i fotogrammi) con nomi istanza avanti e indietro. La figura può aiutare a capire meglio la struttura:
Impostiamo ora il codice principale per la navigazione tra le pagine: molto semplicemente i pulsanti consentiranno di spostarsi avanti e indietro tra le pagine, in più una variabile terrà traccia della pagina in cui ci troviamo attualmente, ecco il codice:
package
{
import flash.events.MouseEvent;
import flash.display.MovieClip;
import com.asual.swfaddress.*;
public class Esempio extends MovieClip
{
// variabile per la pagina su cui troviamo
private var paginaAttuale:int = 1;
public function Esempio()
{
// impostazione delle etichette dei pulsanti
avanti.label = "Avanti";
indietro.label = "Indietro";
// associazione delle funzioni ai pulsanti
avanti.addEventListener(MouseEvent.CLICK,pagAvanti);
indietro.addEventListener(MouseEvent.CLICK,pagIndietro);
}
// funzioni per lo spostamento tra le pagine
private function pagAvanti(evt:MouseEvent):void
{
if(paginaAttuale < totalFrames)
{
nextFrame();
paginaAttuale++;
}
}
private function pagIndietro(evt:MouseEvent):void
{
if(paginaAttuale > 1)
{
prevFrame();
paginaAttuale--;
}
}
}
}
A questo punto possiamo iniziare a sfruttare SWFAddress. Per prima cosa è necessario inserire un listener per l'evento CHANGE, anche qualora non vi inserissimo inizialmente dei comandi. Aggiungiamo quindi nella funzione Esempio la seguente riga di codice:
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, cambio)
La funzione cambio per ora sarà vuota, andiamo invece a creare una funzione impostaPagina che chiameremo ad ogni pressione dei pulsanti avanti e indietro del nostro filmato, il codice risulterà quindi il seguente:
private function cambio(evt:SWFAddressEvent):void { }
private function pagAvanti(evt:MouseEvent):void
{
if(paginaAttuale < totalFrames)
{
nextFrame();
paginaAttuale++;
impostaPagina();
}
}
private function pagIndietro(evt:MouseEvent):void
{
if(paginaAttuale > 1)
{
prevFrame();
paginaAttuale--;
impostaPagina();
}
}
private function impostaPagina():void
{
SWFAddress.setValue(String(paginaAttuale));
}
Notiamo l'utilizzo del comando setValue che permette di scegliere che tipo di URL virtuale creare: in questo caso, una volta premuti i pulsanti avanti o indietro otterremo nella barra degli indirizzi un URL di questo tipo:
[percorso base]/pagina.html#/5
dove il numero (5 per esempio) varierà in base al numero di pagina su cui ci troveremo.
Nota: testando la pagina in locale è possibile che l'URL non cambi, è consigliato quindi testare la pagina su di un proprio spazio web.
Ecco un esempio di Lee Brimelow:
Modificare il titolo della pagina
Abbiamo visto come il comando setValue di SWFAddress modifichi l'URL della pagina, lasciando tuttavia il titolo nella barra del browser inalterato. Questo penalizza sia l'indicizzazione, che tiene in gran considerazione questi titoli, sia la cronologia, dove troveremmo una serie di URL associati ad un solo titolo.
SWFAddress ci viene incontro anche in questo caso, grazie al comando setTitle, possiamo modificare il titolo della pagina, garantendo così una miglior navigazione e una maggior chiarezza per l'utente. La sintassi è molto semplice e possiamo associare questo comando all'evento CHANGE di SWFAddress, aggiungendolo alla funzione cambio che abbiamo già dichiarato come gestore dell'evento. In questo modo otteniamo che il titolo cambi quando cambiamo pagina nel nostro SWF. Modifichiamo pertanto la funzione in questo modo:
private function cambio(evt:SWFAddressEvent):void
{
SWFAddress.setTitle("Esempio - Pagina" + evt.value)
}
Nel titolo in esempio cambia solo il numero di pagina, ma è ovviamente possibile usare testi e termini a piacimento, per esempio all'interno delle diverse sezioni di un sito. Avremmo anche potuto associare un testo diverso per ogni pagina, così:
switch(paginaAttuale)
{
case 1:
titolo = "Home page";
break;
case 2:
titolo = "Curriculum";
break;
case 3:
titolo = "Foto";
break;
case 4:
titolo = "Link";
break;
case 5:
titolo = "Video";
break;
}
SWFAddress.setTitle(titolo)
Un metodo ancora più comodo, che ci permette di avere al contempo degli URL del tipo
[url base]/pagina.html#nomesezione
è quello di inserire lo switch appena visto all'interno della funzione impostaPagina del nostro codice, in questo modo:
private function impostaPagina():void
{
var titolo;
switch(paginaAttuale)
{
case 1:
titolo = "Home page";
break;
case 2:
titolo = "Curriculum";
break;
case 3:
titolo = "Foto";
break;
case 4:
titolo = "Link";
break;
case 5:
titolo = "Video";
break;
}
SWFAddress.setValue(titolo);
}
Quindi impostare il titolo - sempre all'interno della funzione cambio - basandoci sul valore del parametro da essa ricevuto, partendo dal secondo carattere (il primo infatti sarà sempre uno slash, ovvero il carattere /).
function cambio(evt:SWFAddressEvent):void
{
SWFAddress.setTitle(evt.value.substring(1));
}
La navigazione e i tasti "indietro" e "avanti" del browser
Veniamo ora ai punti più interessanti della classe SWFAddress, principalmente la possibilità di sfruttare i tasti avanti e indietro del browser, l'avere una cronologia vera e propria anche per i siti in Flash e la possibilità quindi di accedere e linkare direttamente una pagina.
Se i primi aspetti facilitano principalmente la navigazione, la possibilità di linkare direttamente una precisa sezione di un sito in Flash ha grandissima importanza a livello di promozione del proprio sito, infatti potremo linkare direttamente una pagina ai potenziali utenti ad essa interessati, mentre senza SWFAddress avremmo potuto linkare solo l'home page del sito e sarebbero stati quindi necessari diversi click per raggiungerla, col rischio che l'utente abbandonasse il sito.
L'operazione di cambio degli URL e la relativa "notifica" al file SWF avviene in maniera pressochè automatica grazie a SWFAddress, è però necessario impostare il nostro filmato in modo che sia in grado di "reagire" a tali cambiamenti, in quanto l'uso dei tasti del browser o l'accesso diretto alla pagina scatenano l'evento onChange di SWFAddress, così come accade anche nel caso di modifiche eseguite da Flash, per esempio con setValue come abbiamo visto in precedenza.
L'ideale quindi sarebbe di gestire all'interno della funzione associata all'evento onChange tutte le funzioni relative al cambio di pagina o sezione, così da poter regolare la navigazione sia da Flash che dal browser con poche righe di codice. Utilizziamo come base l'esempio già visto in precedenza, ma cambiamo il codice in questo modo.
package
{
import flash.events.MouseEvent;
import flash.display.MovieClip;
import com.asual.swfaddress.*;
public class Esempio extends MovieClip
{
private var paginaAttuale:int = 1;
public function Esempio2()
{
avanti.label = "Avanti";
indietro.label = "Indietro";
avanti.addEventListener(MouseEvent.CLICK, pagAvanti);
indietro.addEventListener(MouseEvent.CLICK, pagIndietro);
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, cambio);
}
function cambio(evt:SWFAddressEvent):void
{
paginaAttuale = Number(evt.value.substring(1));
SWFAddress.setTitle("Pagina " + paginaAttuale);
gotoAndStop(paginaAttuale);
}
private function pagAvanti(evt:MouseEvent):void
{
if(paginaAttuale < totalFrames)
{
paginaAttuale++;
impostaPagina();
}
}
private function pagIndietro(evt:MouseEvent):void
{
if(paginaAttuale > 1)
{
paginaAttuale--;
impostaPagina();
}
}
private function impostaPagina():void
{
SWFAddress.setValue(String(paginaAttuale));
}
}
}
L'operazione di spostamento della timeline è regolata da un'azione gotoAndStop posta nel metodo cambio. Questo è l'event handler che viene chiamato sia alla pressione dei bottoni nel filmato Flash, perchè le funzioni pagAvanti e pagIndietro richiamano la funzione impostaPagina che sfrutta il metodo setValue che scatena l'evento onChange, sia con la navigazione tramite browser, poichè i tasti "avanti" e "indietro" scatenano anch'essi tale evento.
Ma l'evento CHANGE viene lanciato anche all'apertura della pagina, quindi se l'utente richiede direttamente l'URL
[url del sito]/pagina.html#3
vedrà apparire proprio la terza pagina.
Uso di titoli e stringhe
Per titoli più significativi al posto dei numeri, abbiamo due soluzioni:
- se il nostro filmato è diviso in più fotogrammi, possiamo dare un'etichetta ai keyframe inerenti le varie sezioni, quindi sfruttare sempre il comando
gotoAndStop - se invece abbiamo più movieclip sullo stage, dobbiamo impostare delle funzioni che ne regolino la posizione e la visibilità in base alla sezone in cui ci troviamo, possiamo usare il costrutto
switch...caseper richiamare una diversa funzione a seconda del valore assunto dal parametro della funzionecambio
Apertura di link e popup
Poichè SWFAddress sfrutta indirizzi del tipo nomepagina.html#parametri, potrebbero verificarsi problemi nel caso si debbano aprire dei link o delle popup usando i metodi abituali di Flash; per questo motivo SWFAddress mette a disposizione due metodi, href e popup, che permettono di svolgere tali operazioni. Le sintassi sono molto semplici:
// apertura di un link SWFAddress.href(url, target) // apertura di una popup SWFAddress.popup(url, nome, opzioni,handler) // le opzioni sono quelle classiche del metodo window.open
Gestione degli URL
Negli esempi visti in questo articolo abbiamo usato URL virtuali piuttosto semplici, composti da un solo numero o da una sola parola, ma potrebbe essere necessario usare strutture più complesse, magari con diversi parametri e livelli. SWFAddress offre diversi metodi utili a riguardo, come ad esempio:
- getBaseURL, che restituisce l'indirizzo base del file che si sta visualizzando
- getQueryString, che restituisce solo la querystring dell'URL
- getPath, che restituisce l'URL senza la query string
Non scendiamo nel dettaglio di questi comandi, in quanto non sempre necessari e comunque da valutare di volta in volta in base al tipo di lavoro che si deve svolgere, per maggiori informazioni rimandiamo alla documentazione ufficiale, purtroppo non particolarmente dettagliata, e agli esempi disponibili per il download.
Conclusioni
SWFAddress risulta una classe al tempo stesso semplice da utilizzare e molto potente, già con poche righe di codice è possibile ottenere enormi vantaggi in termini di navigazione e di ottimizzazione SEO, è quindi sicuramente consigliata in particolar modo su siti con molte sezioni, per quanto anche all'interno di progetti personali con poche sezioni possa portare ottimi vantaggi.
