Gestire i pulsanti Back e Forward del browser

Andaaaaaaar... pel vasto maaaaaaaar... (ma come li comincio i tutorials ?) :-)

Una delle cose che in Flash 5 risultava praticamente impossibile se non a costo di salti mortali tripli con avvitamento carpiato e codici JavaScript (andate nel forum e cercate i thread appositi se non ci credete) era la navigazione di un movie usufruendo anche dei pulsanti Back e Forward del nostro amato browseruccio.

Signori, mò la faccenda è diventata di una facilità strepitosa grazie a MX quindi, benvenuti nella navigazione tra le ancore (ecco spiegato il perchè dell'introduzione "marinaresca" di questo tutorial... abbiate pietà, dopo un po' la fantasia scarseggia...) :-)

UN PO' DI TEORIA

Cosa sono le ancore ?
In una pagina html sono dei punti di riferimento, una sorta di navigazione interna alla quale si può fare riferimento per spostarsi velocemente da un punto all'altro.
Serve sopratutto se la pagina è molto lunga e magari divisa in paragrafi ben distinti e si vuole creare una specie di "indice" all'inizio del documento.
Questo indice permetterà appunto una navigazione veloce oltre al fatto che, se posizionati in punti strategici, potranno evidenziare determinati passaggi del testo.
La loro gestione avviene tramite il tag html aggiungendoci il comando name.

Quando si si usa uno di questi link, il browser si comporta come quando si clicca su un normalissimo link di cambio pagina e quindi memorizza la posizione a beneficio dei pulsanti Back e Forward.

Ecco un esempio se volete provare il comportamento del browser (cliccate su un numero e poi provate il ulsante Back del browser).

1 - 2 - 3 - 4

Il codice per realizzare questa navigazione è il seguente:

<p>
<a href="#1">1</a> - <a href="#2">2</a> - <a href="#3">3</a> - <a href="#4">4</a>
</p>
<p>1<a name="1"></a></p>
<p>2<a name="2"></a></p>
<p>3<a name="3"></a></p>
<p>4<a name="4"></a></p>

Molto semplice, no ?

DIAMOCI DA FARE

Ora proviamo a trasportare questo esempio in un movie Flash.
NOTA BENE: data la natura altamente personalizzabile di un movie, non esiste una struttura lineare dove poter applicare le ancore e quindi questo esempio ne illustrerà una molto semplice.

Immaginiamo una piccola presentazione:

- quattro frame
- uno stop su ogni frame
- un pulsante con avanzamento per i primi tre e sull'ultimo un pulsante per il ritorno dall'inizio

A questo punto voi direte: ma se ci metto anche dei pulsanti per arretrare di un frame ho risolto il problema.
Come no...
E i pulsanti del browser come li gestiamo?
E io che scrivo il tutorial a fare ? Per sport ?
E' chiaro che con una struttura del genere il problema magari non si pone perchè questa è una navigazione lineare.
Ma immaginate una navigazione a casaccio da un punto all'altro del movie... come farebbe Flash a capire qual'è il punto di Back ?

Torniamo alla nostra presentazione.
Non stiamo a spiegare come si crea un movie del genere, la cosa che interessa è come inserire le ancore.

Per inserirne una è sufficiente selezionare il frame sul quale si vorrà avere un punto di navigazione, richiamare il pannello delle prorietà e digitare una label.
Poi si spunta la casella Named Anchor e il gioco è quasi fatto.

Il frame nella timeline acquisterà una piccola ancora arancione.

Un piccolo consiglio: settate la visualizzazione della timeline a Large perchè con action, ancore e label una visualizzazione minore non permette di vedere tutto.

Ripetiamo la stessa cosa per i frame 2, 3 e 4 con la stessa logica del primo.

Inseriamo i pulsanti per la navigazione tra i frames e un campo di testo giusto per capire su quale frame siamo.

Ultima cosa, settiamo i Publish Settings (Ctrl+Shift+F12) in modo da usare il template Flash w/ Named Anchors per quanto riguarda la generazione del file html.

Perchè usare un template diverso dal solito ?
E mica vorrete che Flash faccia tutto da solo.
In una maniera o nell'altra, il movie deve insturare una comunicazione con il browser per poter utilizzare i suoi pulsanti.

Infatti, se visualizzate il codice html della pagina ne troverete un po' più del solito:

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>mx anchor</TITLE>
<script language="JavaScript">
// This is only needed for Netscape browsers.
function flashGetHref() { return location.href; }
function flashPutHref(href) { location.href = href; }
function flashGetTitle() { return document.title; }
function flashPutTitle(title) { document.title = title; }
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used in the movie-->
<!-- text used in the movie-->
<!--1234--><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="550" HEIGHT="400" id="mx anchor" ALIGN="">
<PARAM NAME=movie VALUE="mx anchor.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="mx anchor.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="mx anchor" ALIGN="" swLiveConnect=true
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
<!-- Bookmarks used in the movie-->
<A NAME=uno></A>
<A NAME=due></A>
<A NAME=tre></A>
<A NAME=quattro></A>
</BODY>
</HTML>

Alcune avvertenze: se volete usare questo tipo di navigazione, la versione del player installato sulla macchina deve essere la 6.
Se invece pubblicate il movie come Flash 5 i frames con le ancore verranno convertiti in normali frames etichettati.

Finito.
Ora sta a voi vedere come applicare questa tecnica alla struttura del vostro movie (ancore in un frame, in una scena, in un movieclip ecc. ecc.).

Buon divertimento... :-)