Questa è una piccola guida su come realizzare un orologio digitale in flash come quelli che si possono trovare sparsi per il web.
Il nostro orologio sarà semplice, sia perchè useremo del codice actionscript molto intuitivo e sia perchè si baserà sulla data del computer sul quale esso viene riprodotto, che potrebbe essere sbagliata o comunque diversa rispetto a quella universale di un web server.
Bene, apriamo un nuovo File Flash (Actionscript 2.0), magari salviamolo con il nome che vogliamo e cominciamo ad inserire un livello nella timeline che chiamiamo "actions" e che blocchiamo subito.
Inseriamo altri 2 livelli, che chiamiamo rispettivamente "campi" e "grafica".
Sul livello grafica disegniamo una sorta di orologio con un bel display ampio e sul livello campi posizioniamo due campi di testo dinamico ai quali diamo come nome istanza "info" e "info2".
In particolare ad "info" lasciamo impostato l'allineamento del testo a sinistra e lo posizioniamo in modo che il suo lato sinistro vada a compaciare con il lato sinistro interno del display.
A "info2" impostiamo l'allineamento del testo a destra e analogamente a "info" facciamo compaciare il suo lato destro con il lato destro interno del display.
Alla fine di queste semplici operazioni ecco come dovrebbe essere il nostro stage:
Adesso non ci resta che realizzare il "motore" del nostro orologio.
Selezioniamo il primo fotogramma del livello "actions" ed apriamo il pannello Azioni (tasto F9 oppure dal menu Finestra -> Azioni).
Il codice da inserire è:
Codice:
//Questo è un commento, ci aiuterà a capire cosa stiamo facendo passo passo
var myDate:Date = new Date(); /*Anche questo è un commento. Chiediamo a Flash di fornirci la data corrente, che assegniamo alla variabile myDate*/
mese=myDate.getMonth(); /*Dichiariamo la variabile mese che inizializziamo subito con il mese corrente restituitoci dal metodo getMonth(). Stessa politica per giorno della settimana,ore,minuti e secondi*/
giorno = myDate.getDay();
ora=myDate.getHours();
minuti=myDate.getMinutes();
secondi=myDate.getSeconds();
/*Adesso dobbiamo rappresentare i dati che abbiamo letto in modo opportuno. Il metodo getMonth() ci restituisce il mese sotto forma di numero (Da 0 a 11) e in base a questo valore noi mostreremo il mese in forma letterale. Stessa cosa per il giorno della settimana (Da 0 a 6). Per ore, minuti e secondi invece c'è il problema che i numeri da 0 a 9 vengono rappresentati con una sola cifra e noi vogliamo che il nostro orologio li rappresenti con 2 cifre (per intenderci ad esempio il numero 9 verrà mostrato come 09) come siamo abituati a vederli. Lo strumento che fa a caso nostro e il costrutto switch, che ci permette di controllare più condizioni su una variabile e eseguire delle operazioni al verificarsi di una di queste. In particolare lo switch legge il valore della variabile e se questo coincide con uno dei casi contemplati vengono eseguite le operazioni sepcificate in quel caso.*/
switch(secondi){
case 0: secondi="00";break;
case 1: secondi="01";break;
case 2: secondi="02";break;
case 3: secondi="03";break;
case 4: secondi="04";break;
case 5: secondi="05";break;
case 6: secondi="06";break;
case 7: secondi="07";break;
case 8: secondi="08";break;
case 9: secondi="09";break;
}
switch(minuti){
case 0: minuti="00";break;
case 1: minuti="01";break;
case 2: minuti="02";break;
case 3: minuti="03";break;
case 4: minuti="04";break;
case 5: minuti="05";break;
case 6: minuti="06";break;
case 7: minuti="07";break;
case 8: minuti="08";break;
case 9: minuti="09";break;
}
switch(ora){
case 0: ora="00";break;
case 1: ora="01";break;
case 2: ora="02";break;
case 3: ora="03";break;
case 4: ora="04";break;
case 5: ora="05";break;
case 6: ora="06";break;
case 7: ora="07";break;
case 8: ora="08";break;
case 9: ora="09";break;
}
switch(giorno){
case 0: giorno="Dom";break;
case 1: giorno="Lun";break;
case 2: giorno="Mar";break;
case 3: giorno="Mer";break;
case 4: giorno="Gio";break;
case 5: giorno="Ven";break;
case 6: giorno="Sab";break;
}
switch(mese){
case 0: mese="Gennaio";break;
case 1: mese="Febbraio";break;
case 2: mese="Marzo";break;
case 3: mese="Aprile";break;
case 4: mese="Maggio";break;
case 5: mese="Giugno";break;
case 6: mese="Luglio";break;
case 7: mese="Agosto";break;
case 8: mese="Settembre";break;
case 9: mese="Ottobre";break;
case 10: mese="Novembre";break;
case 11: mese="Dicembre";break;
}
/*Adesso dobbiamo mandare in output il tutto. Assegniamo al campo "info" giorno,mese e anno( restituitoci dal metodo getFullYear() )concatenati fra loro, avendo premura di inserire degli spazi*. A "info2" assegniamo ore, minuti e secondi, separati da :*/
info.text=giorno+" "+myDate.getDate()+" "+mese+" "+myDate.getFullYear();
info2.text=ora+":"+minuti+":"+secondi;
Ora usciamo dal pannello Azioni ed inseriamo nel livello "actions" un secondo fotogramma chiave (tasto destro sul fotogramma vuoto e scegliamo "Inserisci fotogramma chiave" oppure dal menu Inserisci -> Linea temporale -> Fotogramma chiave o ancora semplicemente premendo il tasto F6) al quale diamo come azione:
Codice:
gotoAndPlay(1); //Riproduci dal fotogramma 1
Inoltre inseriamo un fotogramma semplice (tasto destro sul fotogramma vuoto e scegliamo "Inserisci fotogramma" oppure dal menu Inserisci -> Linea temporale -> Fotogramma o ancora semplicemente premendo il tasto F5) dopo il primo fotogramma di ognuno degli altri 2 livelli.
Questa procedura servirà a far scorrere il tempo, perchè il continuo passaggio da un fotogramma all'altro aggiornerà le variabili in gioco.
In foto viene mostrato come inserire un campo di testo dinamico, un nuovo livello e un fotogramma chiave.Non ci resta che salvare e pubblicare il nostro orologio digitale che dovrebbe presentarsi più o meno [url=http://mr87.altervista.org/clock.html]così[/url].
Da [url=http://www.isola-atlantide.com/downloads-file-26.html]qui[/url] invece potete scaricare il file sorgente.
Buon divertimento!
Login
FAQ
Cerca
Iscritti
Formato fimato : swf
SitemapIndex 
RSS Feed 