Il movieclip strumenti
Apriamo il file suono.fla. Aggiungiamo alla libreria un nuovo movieclip, che chiameremo strumenti: questo movieclip dovrà essere composto da quattro layer, che si chiameranno "scritte", "cornice", "pulsanti" e "asset", di quattro frame ciascuno.
Data
Aggiungiamo alla libreria un movieclip che chiameremo dataOra. All'interno di questo movieclip, posizioniamo due campi di testo dinamici, uno accanto all'altro: ad uno associamo la variabile dat, all'altro la variabile ora.
Andiamo al layer "asset" del movieclip strumenti, e trasciniamo nel primo frame, dalla libreria, un'istanza del movieclip dataOra. A questo movieclip associamo:
onClipEvent (load) {
giorni = new Array(contenuto1);
mesi = new Array(contenuto2);
tempo = new Date();
}
onClipEvent (enterFrame) {
ore = tempo.getHours();
minuti = tempo.getMinutes();
secondi = tempo.getSeconds();
oggi = tempo.getDate();
giorno = tempo.getDay();
nomegiorno = giorni[giorno];
mese = tempo.getMonth();
nomemese = mesi[mese];
anno = tempo.getFullYear();
ore = (ore<10) ? "0"+ore : ore;
minuti = (minuti<10) ? "0"+minuti : minuti;
secondi = (secondi<10) ? "0"+secondi : secondi;
ora = ore+":"+minuti+":"+secondi;
dat = nomegiorno+", "+oggi+" "+nomemese+" "+anno;
delete tempo;
tempo = new Date();
}
Per ragioni di spazio non includo il contenuto degli array giorni e mesi. Si tratta dell'elenco, in lettere maiuscole, dei giorni della settimana da domenica a sabato, e dei mesi da gennaio a dicembre, in questo formato:
"DOMENICA","LUNEDI","MARTEDI",......,"SABATO"
"GENNAIO","FEBBRAIO","MARZO",......"DICEMBRE"
Con new Date, creiamo un'istanza di nome tempo dell'oggetto Date. Questo è l'output normale:
Tramite i comandi seguenti, estraiamo dall'oggetto tempo, tutti i dati relativi alla data e all'ora, e li trasformiamo in
questo output:
// al caricamento del movieclip
onClipEvent (load) {
// crea i due array
giorni = new Array(contenuto1);
mesi = new Array(contenuto2);
// crea un'istanza dell'oggetto Date di nome tempo
tempo = new Date();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// estrai da tempo le ore (numero da 0 a 23), e associale alla variabile "ore"
ore = tempo.getHours();
// estrai da tempo i minuti (numero da 0 a 59)
minuti = tempo.getMinutes();
// estrai da tempo i secondi (numero da 0 a 59)
secondi = tempo.getSeconds();
// estrai da tempo il giorno del mese (numero da 1 a 31) da associare all'array
oggi = tempo.getDate();
// estrai da tempo il giorno della settimana (numero da 0 a 6, da associare
// all'elemento dell'array, che per questo inizia con la domenica)
giorno = tempo.getDay();
// associa a nomegiorno l'elemento "giorno" dell'array "giorni"
nomegiorno = giorni[giorno];
// estrai da tempo il mese (numero da 0 a 11)
mese = tempo.getMonth();
// associa a nomemese l'elemento "mese" dell'array "mesi"
nomemese = mesi[mese];
// estrai da tempo l'anno corrente
anno = tempo.getFullYear();
// se le ore sono inferiori a 10, "ore" è uguale a "0"+ore, altrimenti a "ore"
ore = (ore<10) ? "0"+ore : ore;
// come per le ore
minuti = (minuti<10) ? "0"+minuti : minuti;
// come per le ore
secondi = (secondi<10) ? "0"+secondi : secondi;
// associa a "ora" la stringa composta dai seguenti valori
ora = ore+":"+minuti+":"+secondi;
// associa a dat la stringa composta dai seguenti valori
dat = nomegiorno+", "+oggi+" "+nomemese+" "+anno;
// cancella la variabile "tempO"
delete tempo;
// crea una nuova istanza dell'oggetto Date associata a "tempo"
tempo = new Date();
}
Questo script presenta due difetti, e derivano entrambi dal fatto che stiamo parlando di un "orologio" costruito esclusivamente in
Flash. Il primo è che i dati per estrarre l'ora, vengono presi dal sistema del visitatore: il che significa che se questi ha impostato
un'ora sbagliata nel proprio pc, sarà sbagliata anche quella nel filmato.
Il secondo deriva dal fatto che l'orologio di sistema non prevede l'ora legale o solare, e che quindi, al relativo cambio, l'ora
si troverà ad essere sbagliata di una unità.
All'avvento dell'ora legale, si dovrà cambiare una riga dello script, da
ora = ore+":"+minuti+":"+secondi;
a
ora = (ore+1)+":"+minuti+":"+secondi;
Purtroppo non possiamo impostare a priori il cambio della stringa, dal momento che, come è noto, il giorno del cambio di orario è variabile a
seconda di casi.
Impostazioni
Andiamo al quarto frame del movieclip strumenti. Inseriamo al centro della barra, una gif importata e convertita in movieclip: ai lati,
due campi di testo statici, che convertiamo in movieclip. Ad entrambi associamo lo stesso script che abbiamo già visto per i titoli, solo che
al posto della riga commentata, metteremo i comandi corrispondenti.
In quello di sinistra, scriviamo (ho incluso solo il mouseUp):
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
getURL("javascript:paginaIniziale()");
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
e in quello di destra:
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
getURL("javascript:preferiti()");
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Come possiamo vedere, i comandi sono i richiami a due funzioni Javascript che analizzeremo più avanti, e che ci permetteranno, per alcuni
browser, di inserire il sito tra i preferiti, o di settarlo come pagina iniziale.
Puntatore
Aggiungiamo alla libreria un movieclip nuovo, che chiameremo si-no. Questo movieclip sarà composto da due frame: in uno la scritta
"si", nell'altro la scritta "no". Andiamo al terzo frame del movieclip strumenti. Inseriamo due campi di testo
statici, come da figura, e accanto ad essi un'istanza del movieclip si-no, della gif puntatore, e del movieclip base.
Alle due istanze del movieclip si-no, abbiamo assegnato come script lo stesso usato per i titoli e per le impostazioni. Vediamo invece
cosa abbiamo assegnato (riporto solo il mouseUp), nella riga commentata, a quello del puntatore:
nClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!puntatore) {
_root.puntatore._visible = true;
_root.puntatore.vai = true;
_root.puntatore._x = _root._xmouse;
_root.puntatore._y = _root._ymouse;
Mouse.hide();
gotoAndStop(2);
} else {
_root.puntatore._visible = false;
_root.puntatore.vai = false;
Mouse.show();
gotoAndStop(1);
}
puntatore = !puntatore;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Analizziamo prima questa parte: al rilascio del tasto del mouse, se la variabile puntatore è falsa, il movieclip va al frame 2 (la
scritta "no"), altrimenti va al frame 1 (la scritta "si"), e il valore di puntatore viene invertito.
Abbiamo visto che al puntatore modificato, è associato uno script che serve a seguire quello del mouse: inoltre, all'avvio del filmato,
questo puntatore è invisibile. Quindi:
onClipEvent(mouseUp){
premuto = false;
if(sopra){
colore.setRGB( 0xFFFFFF );
if (!puntatore) {
_root.puntatore._visible =
true;
_root.puntatore.vai = true;
_root.puntatore._x =
_root._xmouse;
_root.puntatore._y =
_root._ymouse;
Mouse.hide();
gotoAndStop(2);
} else {
_root.puntatore._visible =
false;
_root.puntatore.vai = false;
Mouse.show();
gotoAndStop(1);
}
puntatore = !puntatore;
}else{
colore.setRGB( 0x000000 );
}
updateAfterEvent();
}
Quando clicchiamo sul movieclip, se la variabile puntatore è falsa, rendiamo il puntatore visibile e lo posizioniamo all'altezza di quello del mouse, settiamo la variabile vai come vera (e quindi il puntatore modificato segue quello del mouse), e nascondiamo il puntatore originale.
Quando clicchiamo nuovamente sul movieclip, nascondiamo il puntatore modificato, rendiamo visibile quello originale, settiamo vai come falsa (il puntatore non segue più il mouse). Il non seguire più il mouse, se non visibile, serve ad alleggerire il carico della CPU. Questo è quello che otteniamo:
