In questo veloce tutorial imparerai a realizzare un orologio da utilizzare immediatamente nel tuo sito. Imparerai inoltre a gestire i comandi fondamentali in Actionscript.
Prima di tutto scaricatevi questo file cliccando
QUIIl filmato è di 300 x 300 pixel, con una velocità? di riproduzione pari a 60 fps.
La velocità? ci servirà? per ottenere un'animazione fluida e non a scatti.
All'interno della Libreria sono a disposizione 4 distinti simboli:
1. movieclip lancetta delle ore
2. movieclip lancetta dei minuti
3. movieclip lancetta dei secondi
4. grafico del 'quadrante'
Nel primo livello 'sfondo' verranno posizionati il 'quadrante' ed un testo dinamico collegato alla variabile 'orario' [image]. Le dimensioni utilizzate sono Verdana dimensione 10.
Posizionate le lancette invece sul livello 'lancette' appunto facendo corrispondere il centro dei simboli, rispetto al centro del palcoscenico.
Associate ad ogni oggetto un nome istanza, rispettivamente 'ore', 'min', 'sec'.
Per entrambi i livelli 'sfondo' e 'lancette' create una permanenza (F5) degli oggetti fino al secondo fotogramma.
Create un nuovo livello 'Azioni' composto da due fotogrammi chiave. Definiranno così un loop di calcolo naturale, nel secondo fotogramma mettiamo gli elementi di calcolo.
// definizione dell'orario
tempo=new Date();
hh=tempo.getHours();
mm=tempo.getMinutes();
ss=tempo.getSeconds();
milli=tempo.getMilliseconds();
Questa prima parte memorizza in altrettante variabili i valori del tempo.
Attraverso le opportune funzioni sono state isolate: le ore (variabile hh), i minuti (variabile mm), i secondi (variable ss) ed addirittura i millisecondi (variabile milli).
// spostamento lancette
_root.ore._rotation=30*hh+mm/2+ss/120;
_root.min._rotation=6*(mm+ss/60);
_root.sec._rotation=6*(ss+milli/1000);
Questi semplici comandi permettono di ruotare le lancette presenti all'interno del filmato.
Il calcolo dei millisecondi ed il loro contributo permette di non avere un'animazione a scatti delle lancette ma un movimento fluido.
// orario sotto forma di stringa
if (ss<10) ss="0"+ss;
if (mm<10) mm="0"+mm;
_root.orario=hh+" : "+mm+" : "+ss;
Il comando appena descritto infine permette di creare la stringa orario presente nella root (root = radice, struttura principale del filmato flash).
Da osservare come nel caso in cui i minuti ed i secondi sono inferiori a 10, viene aggiunta la stringa "0" per ottenere. 01,02,03 etc.
