Una pagina in HTML ha la possibilità di passare dei dati ad un filmato Flash contenuta in essa tramite parametro FlashVars.
Questo può essere utile, ad esempio, quando abbiamo un menu di navigazione creato in flash e vogliamo che, a secondo della pagina in cui siamo, i pulsanti cambino di stato.
In questo tutorial creeremo un semplice menu con 2 pulsanti che verrano disabilitati a secondo della pagina che stiamo visitando.

Pagina di esempio di cosa si parla nel tutorial. Se invece volete brucciare le tappe c'è pure il file sorgente da scaricare.

Aprire un nuovo filmato di 350x 40 pixel

Creare un rettangolo, selezionarlo e fare F8 per convertire in un simbolo

Fare doppio click sul nuovo oggetto per editarlo in posizione e creare altri 3 livelli e rinominarli come immagine.

Cliccare sul livello “actions” e editare il comando stop();

Selezionando il livello “titoli” creare un campo di testo dinamico e dargli il nome di variabile “sezione”.

Mantenere premuto il tasto Ctrl e cliccare sui livelli “base”, ”titoli” e “action” per selezionarli e cliccare F6 per creare dei fotogrammi chiave.

Questo fotogramma rappresenterà lo stato del pulsante “disabilitato”
Sul livello “action” del fotogramma 2 appena creato inserire un commando stop(); nel editore di “Actions”.

Sempre nel fotogramma 2, cambiare l’aspetto del rettangolo selezionando il riempimento e dargli un altro colore e quindi fare lo stesso con i contorni. Volendo si può cambiare pure i parametri del testo. Basta selezionare la casella di testo e inserire le nuove proprietà.

Nota: Per adesso il campo di testo è vuoto perché le scritte verranno caricate dinamicamente. Questo ci permette di usare lo stesso pulsante fisico per le diverse sezioni.

A questo punto abbiamo una clip che si prepara a diventare pulsante.
Selezionare il riempimento del nostro rettangolo e copiarlo negli appunti (Ctrl + C)

Di seguito creammo un pulsante tramite Alt+F8, quindi scegliere “pulsante” e dargli un nome.

Cliccare sul fotogramma “su” e copiare il nostro rettangolo. Come ci interessa che il pulsante sia “invisibile” ma funzionale riempiremo, con il nostro rettangolo copiato in precedenza negli appunti, solo il fotogramma dello stato “Premuto”. Quindi, selezionate questo fotogramma cliccandoci sopra e dopo facendo Ctrl+V inserendo cosi il rettangolo. Avremmo una situazione come si vede nella figura.

La prossima mossa sarà inserire questo pulsante invisibile all’interno della nostra clip pulsante. Per editare la clip possiamo accedere ad esso dalla libreria facendo Ctrl+L e fare doppio click sulla voce dell’elenco rispettiva alla clip. Un altro modo di accedere alla clip è tornare sullo stage principale del nostro filmato e fare doppio click sopra la nostra clip. Qualsiasi strada scegliete dovrete di seguito selezionare il primo fotogramma del livello “pulsante” e dalla libreria trascinare una istanza del pulsante invisibile.

Non dimenticate di allineare il pulsante invisibile con il rettangolo. Vi potete aiutare usando il pannello “Trasforma”.

Per terminare dobbiamo dare un nome ai 2 fotogrammi presenti nella clip. Cosi, nel livello “actions” selezionate il primo fotogramma e nella finestra dell’”Etichetta di fotogramma” del pannello “Proprietà” inserite la parola “attivato”.

La stessa cosa va fatta sul secondo fotogramma del livello “actions” ma questa volta con la parola “disattivato”.

A questo punto abbiamo una clip con 2 “stati” diversi ed in uno di essi c’è un pulsante. Una istanza di questa clip è già presente sullo stage e di seguito gli daremo un nome di istanza. Come vogliamo che questa istanza funzioni come pulsante che ci colleghi alla pagina “home.htm” gli daremo il nome d’istanza “home”.

Nota: questi nomi di istanze sono importanti perché verranno richiamati tramite l’Actionscript più avanti.

A questo punto, dalla libreria trasciniamo un’altra istanza della nostra clip e dopo che l’abbiamo sistemata nello stage la nominiamo “profilo”.

Iniziamo adesso a inserire un poco di codice per “attivare” un poco le cose. E’per questo che siamo qui. No?

Allora, selezionate l’istanza “home” e nel pannello “Azioni” inserite le seguenti righe di codice:

onClipEvent(load){
sezione=this._name
Url="home.htm"
}

La prima riga attiva un evento tipico delle clip (filmati). In pratica dice quando questa clip viene “caricata” (load) esegui le istruzioni che stanno tra le parentesi graffe {}.

La seconda riga, “sezione=this.name” passa il nome della istanza (in questo caso “home”) al campo di testo con nome variabile “sezione”. Vi ricordate il campo di testo creato precedentemente. Vero?.

La 3 riga contiene la variabile Url a cui in questa clip assegniamo il valore “home.htm”. Sarà utile più avanti quando imposteremmo il codice per il pulsante.

Se provate il vostro filmato adesso vedrete che la parola “home” appare sulla prima clip, la manina vieni fuori eseguendo un “rollOver” ma ciccando nulla succede. Per adesso.

Lo stesso codice va inserito allo stesso modo nella istanza “profilo”. Dopo cambiate la terza riga assegnando alla variabile “Url” il valore “profilo.htm”. Quindi avrete una situazione del genere:

onClipEvent(load){
sezione=this._name
Url="profilo.htm"
}

Ok. Adesso dobbiamo dire al pulsante cosa deve fare quando verrà premuto. Cosi, fatte doppio click su una delle istanze della nostra clip, per esempio l’istanza “home”. Scegliete il livello pulsante del primo fotogramma ed inserite il seguente codice:

on(release){
getURL(this.Url, _self)
}

Allora, la spiegazione del codice è semplice. Dice che, quando il pulsante viene rilasciato il browser dovrà chiamare una pagina prendendo il valore della variabile esistente, nella clip stessa, “Url”. In questo caso, dell’istanza “home” la pagina sarà “home.htm”. Facile. No?

A questo punto i pulsanti sono già funzionali e potrebbero essere inseriti nelle pagine web ma ancora non riuscirebbero a capire in quale pagine sono per potere disabilitare il pulsante.

La prossima mossa è inserire un paio di variabili sul primo fotogramma della linea temporale principale (_root) e renderle globali. Cosi:

_global.clip=clip

Queste variabili conterranno i valori che saranno passati dal codice HTML delle pagine e saranno accessibili da qualsiasi time line (linea temporale) esistente all’interno del filmato. In pratica da ovunque. Ecco perchè sono globali (_global).

In pratica, la pagina HTML passerà dei parametri al filmato Flash in essa inserito che gli dicano quale pagina è caricata e cosi potere cambiare lo stato della clip/pulsante.

Per questo la variabile, “clip”, sarà usata per stabilire su quale clip agire.

Un altro passaggio importante è creare una clip vuota che una volta inserita nello stage stia in “ascolto” dei parametri passati dalle variabili globali. Cosi, create una Clip Filmato nuova (Alt+F8) e chiamatela “vuoto” e trascinate una istanza sullo stage (per convenzione le clip vuote sono posizionate in alto a sinistra). Inserite questo codice dopo che l’avete selezionata:

onClipEvent(load){
_root[clip].gotoAndStop(“disattivato”);
}

In pratica quando questa clip quando carica, “legge” il valore della variabile globale “clip” e invia la testina di lettura, dell’istanza con il nome corrispondente, sul secondo fotogramma,”disattivato”.

Per quanto riguarda il filmato Flash abbiamo finito. Adesso dobbiamo concludere il tutorial spiegando come passare i parametri dalla pagina web.

Inserire il vostro filmato sulla pagina web e accedendo al codice della pagina aggiungere i parametri FlashVars come esemplificato nelle pagine “home.htm” e “profilo.htm”.

Guardate con attenzione le seguenti righe:

<PARAM NAME=FlashVars VALUE="clip=home">
e anche
<EMBED src="menu.swf" quality=high
bgcolor=#FFFFFF WIDTH="350" HEIGHT="50"
NAME="menu" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"
FlashVars="clip=home">

Come potete dedurre su ciascuna pagina va cambiato il valore della variabile “clip” con il nome rispettivo alla pagina (home, profilo, contatti ecc).

Per concludere, voglio aggiungere che con questo metodo si possono passare altri parametri ad un filmato Flash potendo cosi creare delle interazioni più complesse.

Inoltre questo è solo uno esempio di cosa e come si può fare. Se avete qualche difficoltà mi potete sempre contattare tramite il forum di Pastrugni oppure tramite e-mail.

Questo tutorial è stato creato da GnoKy per Pastrugni – Marzo 2005