Orologio Analogico/Digitale in Flash

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

Annunci

4 thoughts on “Orologio Analogico/Digitale in Flash

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...