Scarica questo filmato 
Clicchiamo su qualche pulsante a scelta (non tutti). Il pulsante selezionato
viene colorato di arancione, mentre quelli già premuti diventano
bianchi. Aggiorniamo la pagina. Il filmato, tramite uno Shared Object,
"ricorda" quali pulsanti sono stati premuti, quale lo è
stato per ultimo, e aggiorna in automatico il contenuto.
Il codice è lungo (non l'ho ridotto al minimo per questioni di
chiarezza, alcune righe sono evidentemente ridondanti), ma non è
troppo complicato:
// funzione da eseguire al click
sui pulsanti
function clicca(){
if(arguments[0]
!= prec){
n = arguments.toString().substr(11,1);
dati.data.pulsanti[n-1]
= 1;
dati.data.old
= n;
arguments[0].setStyleProperty("face",
0xFE860C);
this.slider.end
= this.x - (this.s*(n-1));
prec.setStyleProperty("face",
0xFFFFFF);
prec = arguments[0];
dati.flush();
}
}
// definizione dei parametri per lo scorrimento
dello slider
x = slider.end = slider._x;
s = slider._width/6;
// funzione per lo scorrimento dello slider
slider.onEnterFrame = function(){
this._x
+= (this.end-this._x)/3;
};
// recupero/creazione del cookie
dati = sharedobject.getLocal("cookie");
// azioni da eseguire se il cookie non esiste
if(!dati.data.pulsanti){
dati.data.pulsanti
= [];
dati.data.pulsanti[0]
= 1;
dati.data.old
= 1;
prec = _level0.pul1
pul1.setStyleProperty("face",
0xFE860C);
for(i = 1;
i < 6; i++){
dati.data.pulsanti[i]
= 0;
}
dati.flush();
// azioni da eseguire se il cookie esiste
}else{
for(i = 0;
i < 6; i++){
if(dati.data.pulsanti[i]
== 1){
this["pul"
+ (i+1)].setStyleProperty("face",
0xFFFFFF);
}
}
prec = _level0["pul"
+ dati.data.old]
this["pul"
+ dati.data.old].setStyleProperty("face",
0xFE860C);
this.slider.end
= this.x - (this.s*(dati.data.old-1));
}
// comandi per scurire i pulsanti, funzione
esclusivamente estetica
globalStyleFormat.face
= 0xBBBBBB;
globalStyleFormat.highlight3D
= globalStyleFormat.darkshadow
= 0x000000;
globalStyleFormat.applyChanges();
// definizione della funzione da eseguire
al click sui pulsanti
// (la stessa per tutti)
for(i = 1; i < 7; i++){
this["pul"
+ i].setClickHandler("clicca");
}
stop();
.spostamento del movieclip
I pulsanti del filmato hanno, come nome di istanza, pul1, pul2,
pul3, pul4, pul5, pul6. Il movieclip centrale,
contenente i rettangoli colorati per le sezioni, ha come nome di istanza
slider. Allo slider è associata una funzione che, dato un certo valore, lo fa muovere decelerando verso quest'ultimo, indicato dalla
variabile end. A tutti i pulsanti, è assegnata come ClickHandler (funzione da eseguire al click), la stessa funzione chiamata "clicca".
La funzione, valuta qual'è il pulsante che l'ha chiamata, estrae
dal nome del pulsante il numero che lo identifica, lo moltiplica per un
certo valore, e lo passa allo slider come punto da raggiungere, inserendolo
nella variabile end.
Ad esempio, clicchiamo sul terzo pulsante, pul3. Il pulsante chiama la funzione "clicca", e la funzione controlla da chi è
stata chiamata. Prende il nome del pulsante, toglie le prime lettere e
tiene il 3. Moltiplica il 3 per il valore della larghezza di slider
diviso 6 (quante le sezioni), e lo assegna alla variabile end.
La funzione associata allo slider, che viene eseguita continuamente (onEnterFrame),
sposta lo slider verso il valore contenuto in end.
.colore dei pulsanti
La funzione "clicca", quando viene invocata, riceve come
parametro un riferimento al pulsante premuto. Questo riferimento, passato
in automatico, è il primo elemento dell'array arguments,
array che in ogni funzione contiene la lista dei parametri passati.
Usando quindi arguments[0],
accediamo a questo riferimento, che in particolare è la stringa
"_level0.nome_pulsante". Usando questo parametro come
percorso di una azione, possiamo settare il colore del pulsante premuto
tramite setStyleProperty("face",, metodo predefinito del componente "pushButton"
0xFE860C)
di FlashMX, e che serve a cambiare il colore della "faccia"
del componente: noi lo useremo per far diventare il pulsante di colore
arancione.
Inoltre, assoceremo questo riferimento alla variabile prec. Quando
cerrà invocata nuovamente la funzione, avremo due riferimenti:
arguments[0],
relativo all'ultimo pulsante premuto, e prec, relativo al pulsante
premuto la volta prima. Tramite prec, e il metodo setStyleProperty,
faremo diventare quest'ultimo di colore bianco.
.Shared Object
La prima volta che guardiamo il filmato, viene creato l'array pulsanti,
il cui primo elemento avrà valore 1, mentre gli altri 5 (in tutto
6, come i pulsanti) valore 0. Ogni volta che clicchiamo su un pulsante,
la funzione "clicca" cambia l'elemento dell'array relativo al
pulsante stesso, sostituendolo con un 1. Quindi, l'array contiene per
ogni pulsante il valore 0 se non è mai stato premuto, e 1 se lo
è stato.
Con il metodo flush, salviamo nel cookie questo array. Quando recuperiamo
il cookie, la volta successiva, leggiamo l'array, e in base a questo,
coloriamo di bianco i pulsanti il cui elemento corrispondente ha valore
1. Inoltre, nella variabile old, salviamo il riferimento all'ultimo
pulsante premuto, che al recupero del cookie, verrà colorato di
arancione.
Lo stesso riferimento numerico verrà usato anche per calcolare
il valore di end, che riporterà il movieclip slider all'ultima
posizione raggiunta.
// definiamo la funzione "clicca",
invocata da tutti i pulsanti
function clicca(){
// se il riferimento
al pulsante premuto (arguments[o]), è diverso da
// "prec" ( quindi se non stiamo
cliccando due volte sullo stesso)
if(arguments[0]
!= prec){
//
assegniamo alla variabile "n" il valore della sottostringa
// lunga un carattere,
che parte dall'elemento 11 della stringa
// contenuta in
arguments[0] (se ad esempio clicchiamo il terzo
// pulsante, arguments[0]
è uguale a _level0.pul3, e la sottostringa
// assegna a "n"
il valore 3
n = arguments.toString().substr(11,1);
//
assegniamo all'elemento n dell'array "pulsanti" il valore
1
dati.data.pulsanti[n-1]
= 1;
//
assegniamo a dati.data.old (variabile "old" nel cookie)
il valore n
dati.data.old
= n;
//
coloriamo di arancione il pulsante premuto
arguments[0].setStyleProperty("face",
0xFE860C);
//
assgniamo alla variabile "end", che fa muovere lo slider,
il valore
// di "x"
meno "s" per n-1
this.slider.end
= this.x - (this.s*(n-1));
//
coloriamo di bianco il pulsante il cui riferimento è contenuto
//
nella variabile "prec" (quello premuto la volta prima)
prec.setStyleProperty("face",
0xFFFFFF);
//
assegniamo a "prec" il riferimento all'ultimo pulsante
premuto
prec = arguments[0];
//
salviamo il cookie contenuto in "dati"
dati.flush();
}
}
// assegniamo a "x" e a "end" il valore della
posizione iniziale di "slider"
x = slider.end = slider._x;
// assegniamo a "s" il valore
della larghezza di "slider" fratto 6, quindi
// la larghezza di una sezione
s = slider._width/6;
// assegniamo all'evento enterFrame dello
slider, la funzione per lo
// spostamento decelerato, che usa come valore finale la variabile
"end"
slider.onEnterFrame = function(){
this._x
+= (this.end-this._x)/3;
};
// recuperiamo cookie.sol, e inseriamo le
informazioni in "dati"
dati = sharedobject.getLocal("cookie");
// se l'array "pulsanti" non esiste
(la prima volta che guardiamo il filmato)
if(!dati.data.pulsanti){
// creiamo l'array
dati.data.pulsanti
= [];
// inseriamo come
primo elemento il valore 1
dati.data.pulsanti[0]
= 1;
// assegniamo a
"old" il valore 1 (riferimenti al primo pulsante, che
è
// il primo ad essere selezionato
dati.data.old
= 1;
// assegniamo alla
variabile "prec" il riferimento al primo pulsante
prec = _level0.pul1
// coloriamo di
arancione il primo pulsante
pul1.setStyleProperty("face",
0xFE860C);
// settiamo tutti
gli altri elementi dell'array con il valore 0
for(i = 1;
i < 6; i++){
dati.data.pulsanti[i]
= 0;
}
// salviamo il cookie
dati.flush();
// altrimenti (il cookie esiste)
}else{
// con un ciclo
a 6 iterazioni, valutiamo il valore degli elementi dell'array
for(i = 0;
i < 6; i++){
//
quando un elemento è uguale a 1
if(dati.data.pulsanti[i]
== 1){
//
coloriamo il pulsante corrispondente (i+1, la numerazione
//
dell'array è in base 0) di bianco
this["pul"
+ (i+1)].setStyleProperty("face",
0xFFFFFF);
}
}
// assegniamo alla
variabile "prec il riferimento al pulsante il cui nome
// è dato da "pul" più
"old"
prec = _level0["pul"
+ dati.data.old]
// cambiamo in arancione
il colore di questo pulsante
this["pul"
+ dati.data.old].setStyleProperty("face",
0xFE860C);
// assegniamo il
valore corrispondente alla variabile "end" (slider)
this.slider.end
= this.x - (this.s*(dati.data.old-1));
}
// comandi per scurire i pulsanti, funzione
esclusivamente estetica
globalStyleFormat.face
= 0xBBBBBB;
globalStyleFormat.highlight3D
= globalStyleFormat.darkshadow
= 0x000000;
globalStyleFormat.applyChanges();
// definizione della funzione da eseguire
al click sui pulsanti
// (la stessa per tutti)
for(i = 1; i < 7; i++){
this["pul"
+ i].setClickHandler("clicca");
}
// fermiamo la riproduzione della timeline
principale
stop();
