Nei nostri siti in Flash a volte è necessario inserire un orario Analogico o Digitale

orologio analitico orologio digitale

Il codice base per un ora Digitale è da inserire su un movie clip nell’evento onClipEvent(enterFrame):

onClipEvent (enterFrame) {
myDate = new Date(); // creo l'oggetto Date
this.ora.text = myDate.getHours(); // ora
this.minuti.text = myDate.getMinutes(); // minuti
this.secondi.text = myDate.getSeconds(); // secondi
}

Dovrete creare nel clip, testi dinamici di nome istanza ora, minuti, secondi

Ma qual’è la vera difficoltà a creare un orologio Analogico? Esatto! La rotazione delle lancette!

Vediamo la funzione che ci viene in aiuto e che nel tutorial capirete meglio:

function tickHands() {
var _loc1 = new Date(); // creo oggetto Data
hours = _loc1.getHours(); // ora
minutes = _loc1.getMinutes(); // minuti
seconds = _loc1.getSeconds(); // secondi
milSeconds = _loc1.getMilliseconds(); // millisecondi
hourHand._rotation = 30*(hours+1.666667E-002*minutes); // ruoto la lancetta delle ore
minHand._rotation = 6*(minutes+1.666667E-002*seconds); // ruoto la lancetta dei minuti
secondsRotation = 6*(seconds+1.000000E-003*milSeconds); // ruoto la lancetta dei secondi
multiple = secondsRotation%6; // imposto la variabile multiple
if (multiple<3) {
secondsRotation = Math.floor(secondsRotation/6)*6;
} else {
secondsRotation = Math.round(secondsRotation/6)*6;
}
// Imposto la rotazione della lancetta dei secondi
if (secondsRotation>180) {
if (secondsRotation == 186) {
secHand._rotation = -179;
}
// end if
secondsRotation = secondsRotation-360;
}
// Imposto il ritorno della lancetta
bounce("_rotation", secondsRotation, secHand, 3, 6.000000E-001);
++bounced;
}

Scarica il sorgente
Guarda il Tutorial

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

7 Commenti

  1. Ciao
    inanzitutto COMPLIMENTI!
    una domanda:
    è possibile aggiungere più orologi digitali con differenti fusi orari?
    dovrei creare almeno 5 orologi Roma Tokyo NewYork Sydney Dubai..
    Potrei aggingere o togliere le ore di differenza ma nn so come fare.

    Mi aiuti? grazie!!!

  2. Ciao, ti basta individuare la variabile delle ore e sottrai il numero di ore di differenza per creare i diversi orari…

    hours = _loc1.getHours()-1;

  3. ciao Julius eccomi qua ancora una volta dopo tanto tempo.. sto preparando una serie di orologi digitali con fusi orari diversi.
    ho scaricato l’es e modificato il file clock.fla con quello che hai suggerito a Manu

    hours = _loc1.getHours()-1;
    se io sottraggo per es -12 ore mi succede che compare un meno davanti all’ora e se aggiungo invece +12 ore, lo script che fa il ciclo fino a 12 h e poi ritorna a zero non funziona e passa quindi a 14-15-18-..perdipiù se io metto +20h mi supera anche le 30h..non scatta quindi il meccanismo che mi fa

    if (hours>12) {
    hours= hours-12;
    ampm_m = “pm”;
    } else {
    ampm_m = “am”;
    }
    if (hours== 0) {
    hours = 12;
    }
    PUOI AIUTARMI PER FAVORE CHE NON NE VENGO PIù A CAPO

    GRAZIE

    Francesco

Commenti