Modifichiamo, tramite gli slider, il colore di fondo del simbolo di Macromedia FlashMX. Aggiorniamo la pagina, e osserviamo come il filmato "ricordi" il colore impostato e la posizione degli slider.
Il funzionamento degli slider (dalle librerie comuni del FlashMX), è
molto intuitivo. All'interno del movieclip fader - round è presente
il movieclip con il bottone trascinabile. Al movieclip, è associato
lo script:
onClipEvent
(load) {
top = _y;
bottom = _y+255;
left = _x;
right = _x;
}
che, al caricamento dello stesso stabilisce quattro variabili che rappresentano
il limite di trascinamento del bottone. In alto, la posizione attuale
del movieclip (top), in basso la posizione attuale + 255 (bottom), mentre
a destra e a sinistra (left e right), la posizione stessa sull'asse delle
x (il pulsante si può trascinare solo in verticale.
Dentro il movieclip, c'è il pulsante a cui è associato lo
script:
Il funzionamento degli slider (dalle librerie comuni del FlashMX), è
molto intuitivo. All'interno del movieclip fader - round è presente
il movieclip con il bottone trascinabile. Al movieclip, è associato
lo script:
on
(press) {
startDrag("",
false, left, top, right, bottom);
dragging = true;
_root.dragging
= true;
}
on (release)
{
stopDrag();
dragging = false;
_root.dragging
= false;
}
Alla pressione sul pulsante, inizia il trascinamento del movieclip in
cui è annidato, con i limiti definiti nello script precedente.
Inoltre, vengono settate come vere le variabili "dragging" e
"_root.dragging", che serviranno a far sapere quando si sta
trascinando il movieclip.
Al rilascio del pulsante, termina il trascinamento del movieclip, e le
due variabili vengono settate come false.
Nell'unico frame della timeline principale, è presente questo script:
_root._visible = 0;
colore = new Color(logo.sfondo);
dati = sharedobject.getLocal("cookie");
if(dati.data.col == undefined){
dati.data.col = {c1:0, c2:51, c3:102};
dati.flush();
}
for(i = 1; i <= 3; i++){
this["c"+i] = this.dati.data.col["c" + i];
}
this.onEnterFrame = function() {
for (i=1; i<=3; i++) {
this.colore.setRGB(rgb);
fader = this["fader"+i].knob;
if (dragging) {
this["c"+i] = Math.round(fader._y);
} else {
fader._y = Math.round(this["c"+i]);
if (this["c"+i]>255) {
this["c"+i] = 255;
}
}
dati.data.col["c" + i] = this["c"+i];
}
rgb = (c1 << 16 | c2 << 8 | c3);
_root._visible = 1;
};
this.onMouseUp = function(){
dati.flush()
};
stop();
Il dato che salviamo nello Shared Object, è un oggetto, con tre proprietà. L'oggetto si chiama col, e le tre proprietà sono col.c1, col.c2, col.c3. Queste tre proprietà (tre variabili), contengono i valori rgb dell'ultima selezione effettuata dall'utente prima delle chiusura del filmato. Se ad esempio assegniamo al logo, tramite gli slider, il colore bianco, salveremo nel cookie:
col.c1 = 255; col.c2 = 255; col.c3 = 255;
Alla successiva visione del filmato, l'oggetto col servirà a modificare la posizione degli slider e il colore del logo, "ricordando" la scelta precedente.
All'avvio del filmato, la timeline principale viene resa invisibile, e viene creata un'istanza dell'oggetto Color
, associata al movieclip logo.sfondo (il rettangolo colorato sotto il logo).
Viene recuperato cookie.sol, e il contenuto viene associato alla variabile dati. Se l'oggetto col non è definito (è la prima volta che guardiamo il filmato), lo creiamo assegnando tre valori preimpostati alle tre proprietà dell'oggetto (c1:0, c2:51, c3:102
, il colore blu), e salviamo il cookie con il metodo flush
.
Quindi, con un ciclo for, assegniamo alle tre variabili c1, c2, e c3 (queste variabili sono nella timeline principale, e hanno lo stesso nome delle tre proprietà dell'oggetto col) il valore delle corrispondenti proprietà dell'oggetto col che adesso è definito in dati.data
A questo punto, viene associata all'evento onEnterFrame
relativo alla timeline principale, una funzione che ha lo scopo di stabilire che valori associare alle tre proprietà di col sulla base dei livelli RGB impostati dagli slider. Infine, una funzione associata al rilascio del tasto sinistro del mouse, (onMouseUp), si occupa di salvare il cookie (dati.flush()
).
Vediamo la funzione che stabilisce il colore sulla base della posizione degli slider, presa direttamente dagli esempi del FlashMX.
// ad ogni
riproduzione del frame
this.onEnterFrame = function()
{
// con un ciclo
for di tre iterazioni
for (i=1;
i<=3; i++) {
//
assegniamo all'istanza "colore" dell'oggetto
// Color, il valore
determinato da "rgb"
this.colore.setRGB(rgb);
//
assgniamo alla variabile "fader" il valore
// della posizione
del movieclip "knob" dentro
// il movieclip
il cui nome è ciclicamente
// "fader"
+ i (fader1, fader2, fader3)
fader = this["fader"+i].knob;
//
se la variabile "dragging" è vera (stiamo
// trascinando
il pulsante di uno slider)
if
(dragging) {
//
assegniamo ciclicamente alla variabile il
//
cui nome è "c" + i (c1, c2, c3, impostate
//
dalla funzione iniziale, e anche variabili
//
associate ai tre campi di testo) il valore
//
della posizione del fader
this["c"+i]
= Math.round(fader._y);
//
altrimenti (non stiamo trascinando uno slider)
} else
{
//
stabiliamo la posizione di fader in base
//
al valore di "c" + i
fader._y
= Math.round(this["c"+i]);
//
nel caso il valore di "c" + i superasse 255,
//
lo riportiamo a 255
if
(this["c"+i]>255)
{
this["c"+i]
= 255;
}
}
//
inseriamo nell'oggetto col dentro dati.data
// i valori delle
tre proprietà c1, c2, c3
dati.data.col["c"
+ i] = this["c"+i];
}
// assegniamo a
"rgb" il valore RGB determinato
// dalle tre variabili
rgb = (c1 << 16 | c2 << 8
| c3);
};
Il resto dello script appare molto più semplice:
// creiamo un'istanza dell'oggetto
Color
// associata a logo.sfondo
colore = new Color(logo.sfondo);
// recuperiamo il valore di cookie.sol,
e
// lo associamo a "dati"
dati = sharedobject.getLocal("cookie");
// se l'oggetto "col" non è
definito (è la
// prima volta che guardiamo il filmato)
if(dati.data.col
== undefined){
// settiamo l'oggetto
col con i tre valori
// predefiniti c1, c2, c3
dati.data.col
= {c1:0, c2:51, c3:102};
// salviamo il cookie
dati.flush();
}
// una sola volta all'inizio del filmato,
con
// un ciclo for, assegniamo alle variabili c1
// c2 e c3 sulla timeline principale i valori
// delle omonime proprietà dell'oggetto "col"
for(i = 1; i <= 3; i++){
this["c"+i]
= this.dati.data.col["c"
+ i];
}
this.onEnterFrame = function() {
for (i=1; i<=3; i++) {
this.colore.setRGB(rgb);
fader = this["fader"+i].knob;
if (dragging)
{
this["c"+i]
= Math.round(fader._y);
} else {
fader._y
= Math.round(this["c"+i]);
if
(this["c"+i]>255) {
this["c"+i]
= 255;
}
}
dati.data.col["c"
+ i] = this["c"+i];
}
rgb = (c1 << 16 | c2 << 8
| c3);
_root._visible = 1;
};
// quando rilasciamo il tasto sinistro del
mouse
this.onMouseUp
= function(){
// salviamo il cookie
dati.flush()
};
stop();