[Tutorial] Orologio Analogico

~Andrey™

Posted on 28/7/2009, 17:46

.

User deleted

In questo tutorial, forse meno semplice degli altri, vedremo come creare un orologio analogico, come questo:

Innanzitutto, vediamo cosa ci serve

:

1) Adobe Flash (Il tutorial è per il CS3, ma dovrebbe funzionare anche con Adobe Flash 8)
2) Tutte le immagini necessarie, che possiamo creare a nostro piacimento, ecco QUI un esempio che contiene lo sfondo e le lancette usate qui sopra (Da notare come il fulcro di ogni lancetta, intorno al quale ruoterà, deve trovarsi esattamente al centro dell'immagine della lancetta)
3) Seguire il Tutorial

Apriamo Flash e creiamo un "Nuovo File Flash (ActionScript 3.0)", e iniziamo ad impostare le dimensioni del nostro filmato, cliccando col destro sullo stage (la parte bianca centrale), quindi Proprietà Documento..> in questo caso mettiamo 130 x 130 px, ma dipendono dalle dimensioni delle nostre immagini.

Un consiglio che vi do è quello di spuntare le seguenti opzioni:
Visualizza> Righelli
Visualizza> Griglia> Mostra Griglia

Quindi importiamo le immagini che ci servono: File> Importa> Importa nello Stage...

Dopo averle importate dobbiamo posizionarle correttamente nello stage (Fatelo singolarmente, importando le immagini una alla volta), basta selezionare l'immagine nello stage, e in basso nella finestra Proprietà immettere le coordinate, ecco uno screen:

SPOILER (click to view)

Come vedete in basso: "L" è la larghezza, "A" l'altezza, X e Y le coordinate (le distanze orizzontali e verticali dal vertice in alto a sinistra del documento al vertice in alto a destra dell'oggetto [Ma come vedremo più avanti, non sempre è così])

Dopo aver posizionato tutti i nostri oggetti, essi saranno presenti, oltre che nello stage, anche nella libreria (quella a destra nello screen).

Il prossimo passo sarà quello di trasformare le immagini che dovranno muoversi (lancette) in oggetti detti Clip Filmato (MovieClip), capaci appunto di far questo (ActionScript 3.0 è infatti orientato agli oggetti)

Quindi selezioniamo nello stage l'immagine di una lancetta, clicchiamo col tasto destro, e scegliamo Converti in simbolo, si aprirà una finestra del genere:

Scegliamo Clip Filmato e mettiamo il nome che vogliamo, ad esempio "Lancetta ore"

Una cosa da notare sono i 9 quadratini dopo "Registrazione:", di cui uno è selezionato.
Quei quadratini rappresentano il vertice del MovieClip su cui si basano proprietà come coordinate o rotazione: in parole povere, se selezioniamo il quadratino centrale, l'immagine ruoterà attorno al centro, e le coordinate del MovieClip saranno contate dal centro, altrimenti dai vertici dell'immagine, o dai medi dei lati.

Dopo questa precisazione, ripetiamo il passaggio per tutte le lancette, in questo modo avremo creato in questo caso tre MovieClip (Ore, Minuti e Secondi): essi appariranno nella libreria, mentre lo stage resterà invariato.

Per poter interagire da codice con le lancette è ora necessario dargli un nome di istanza: basta selezionare un MovieClip nello stage e in basso riempire il campo "<nome istanza>".
Io ho messo come istanze i seguenti nomi: "lancettaOre", "lancettaMinuti" e "lancettaSecondi", ma potete anche cambiarli, purchè li cambierete anche nel codice, e rispettate gli standard (sono ammessi soltanto Lettere, numeri, e underscore "_").

L'ultima parte che rimane è infatti il codice: selezioniamo il primo fotogramma nella Linea Temporale (quella in alto, nel primo screen) quindi andiamo su Finestra> Azioni, e si aprirà il Pannello delle Azioni, dove metteremo questo codice:

CODICE

var myDate:Date = new Date();
lancettaOre.rotation = myDate.getHours() * 30 + myDate.getMinutes() / 2;
lancettaMinuti.rotation = myDate.getMinutes() * 6 + myDate.getSeconds() / 10;
lancettaSecondi.rotation = myDate.getSeconds() * 6 + myDate.getMilliseconds() * 0.006;

Chiudiamo pure il Pannello Azioni, e proviamo ad eseguire il Debug (Debug> Debug Filmato): vedremo le nostre lancette posizionarsi correttamente secondo l'orario, ma rimanere immobili.

Questo perchè il codice del primo fotogramma viene eseguito solo una volta: per far si che venga eseguito più volte possiamo seguire due strade.

La prima, che forse risulterà più semplice per chi non conosce Flash, consiste nel creare un nuovo Fotogramma Chiave (Click destro sul primo ed unico Fotogramma> Inserisci Fotogramma Chiave), selezionarlo, andare in Finestra> Azioni (Del secondo Fotogramma) e scrivere:

CODICE

gotoAndPlay(1);

In questo modo Flash eseguirà il primo fotogramma, poi il secondo, dove grazie al codice ritornerà al primo e così via.

Il secondo metodo consiste nel raggruppare il primo codice in una funzione, e poi richiamarla con un intervallo temporale, in questo modo:

CODICE

function MuoviLancette() {
var myDate:Date = new Date();
lancettaOre.rotation = myDate.getHours() * 30 + myDate.getMinutes() / 2;
lancettaMinuti.rotation = myDate.getMinutes() * 6 + myDate.getSeconds() / 10;
lancettaSecondi.rotation = myDate.getSeconds() * 6 + myDate.getMilliseconds() * 0.006;
}
setInterval(MuoviLancette, 25);

In questo modo ogni 25 Millisecondi le lancette si muoveranno (anche se dipende dai fps, che vedremo più avanti).

Ora che l'orologio funziona, vediamo come ottimizzarlo: molto probabilmente infatti le lancette saranno squadrettate, dobbiamo quindi intervenire con l'antialiasing, o smussatura; inoltre la qualità non sarà perfetta.

Ci basterà cliccare col destro sul nome dell'immagine (non del MovieClip) di una lancetta nella libreria, scegliere Proprietà e spuntare l'opzione "Consenti smussatura". Ripetere l'operazione con tutte le lancette. Poi andate su File> Impostazioni di Pubblicazione> Nella scheda Flash mettete "100" a "Qualità JPEG".

Ora un altro difetto è che il movimento delle lancette è poco fluido, ci basterà quindi aumentare i fps (frame per seconds): click destro sullo stage> Proprietà Documento..> Cambiamo "12" fps con il numero che vogliamo, io ho messo 30 e va già bene.

Una volta finito dobbiamo esportare il nostro swf (File> Esporta> Esporta Filmato), ma ricordiamoci prima di seguire la Guida sulla Trasparenza se non vogliamo il fastidioso rettangolo bianco dietro il nostro orologio