Costruisci un orologio binario brillante con Flash

In questo tutorial creeremo un tipo di orologio insolito, ma molto bello: un orologio binario.

Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Passo 1: cosa significa binario?

Tutti sanno come contare, ma non tutti sanno che ci sono tanti modi diversi per farlo. Siamo abituati a un modo speciale di contare il sistema decimale chiamato, ma potremmo anche usare il sistema esadecimale, ottale o binario, tra gli altri.

Nel nostro sistema decimale, assegniamo 10 a rappresentare il numero totale di dita e pollici che ognuno di noi ha e contano su e giù da lì. Ma in binario, 10 rappresenta solo il numero totale di pollici - quindi 10 in binario è uguale a 2 in decimale; 11 in binario è 3 in decimale; 100 in binario è 4 in decimale e così via. Quindi, piuttosto che ogni colonna che rappresenta unità, decine, centinaia, migliaia ... (contando da destra a sinistra), rappresentano unità, due, quattro, otto, ..., raddoppiando ogni volta.

Quindi il numero 10 che vediamo normalmente può essere rappresentato in modi diversi:

Il sistema binario è basato sul numero due, ecco perché è chiamato biNary, al contrario di dicembresistema imal che usiamo normalmente e che ha una base di 10. Il sistema binario è quello usato dai computer per funzionare, perché possiamo usarlo per rappresentare qualsiasi numero usando una serie di interruttori "on" (1) e "off" (0).

Con questa conoscenza, puoi capire come leggere l'orologio nel file SWF?

Se vuoi saperne di più su questo puoi utilizzare il sistema numerico binario di Google e controllare le informazioni a riguardo =)

Passaggio 2: creare il file Flash

Crea un nuovo file Flash AS3 e chiamalo "Binary_Clock.fla".

Passaggio 3: impostare lo stage

Vai alle proprietà e modifica le dimensioni in 550x400 e il colore di sfondo in # 222222.

Passaggio 4: Ottieni TweenMax

Vai alla pagina web del progetto TweenMax e scarica la libreria per AS3.

Passaggio 5: Estrarre TweenMax

Rimuovi il file e copia la cartella denominata "com" nella cartella in cui ti trovi Binary_Clock.fla file.

Passaggio 6: creare un bit

Ora vai Inserisci> Nuovo simbolo e nominatelo "Bit" con tipo Movie Clip.

Questo "Bit" rappresenterà una singola cifra di un numero e avrà due stati, in due colori diversi: uno rappresenterà 0 e l'altro rappresenterà 1.

Step 7: Disegna un bit

Successivamente, nel simbolo appena creato, crea un nuovo quadrato di 50x50 px.

Passaggio 8: modifica il bit

Cambia il colore del quadrato in # 00CBFF e centralo.

Passaggio 9: creare le colonne

Tornati sul palco, prendi alcuni bit dal pannello della biblioteca e disponili per creare le colonne che useremo. Dovresti finire con qualcosa del genere:

Passaggio 10: aggiungere alcuni elementi

Se lo desideri, puoi aggiungere etichette e linee di testo per renderlo più comprensibile:

Passaggio 11: Assegna nomi di istanze

Per ogni bit, modificare il nome dell'istanza nel relativo pannello delle proprietà. Dai loro i nomi come l'immagine qui sotto dimostra:

Passaggio 12: collegare il FLA a una classe di documenti

Vai al pannello delle proprietà e imposta il campo della classe su "Principale", questo è il nome della classe che creeremo nel passaggio successivo.

(Non sei sicuro di cosa stiamo facendo qui? Leggi questa breve introduzione alle classi di documenti.)

Passaggio 13: creare la classe del documento

Con lo stage completato, ora possiamo iniziare a programmare. Prima crea un nuovo file ActionScript 3.0 e salvalo come "Main.as".

Aggiungi questo codice al file:

 package import flash.display.MovieClip; public class Main estende MovieClip public function Main ()

Passaggio 14: aggiungere le importazioni necessarie

Inizieremo con l'importazione delle classi necessarie. Aggiungi questo sotto la dichiarazione del pacchetto:

 import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent; import com.greensock. *; import com.greensock.easing. *;

Passaggio 15: dichiarare le variabili

Successivamente, dichiareremo alcune variabili pubbliche. Aggiungi questo sotto la dichiarazione della classe:

 public var clock: Timer = new Timer (1000); data var pubblica: Date = new Date (); public var hr: int; public var min: int; public var sec: int; var var public: Array;

La creazione di un nuovo oggetto Date lo imposta automaticamente sull'ora corrente.

Passaggio 16: Assegna valori

OK, quindi ora aggiungiamo il codice che avvierà l'orologio. Questo va all'interno della funzione Main ():

 // Con questo assegniamo i valori effettivi per l'orologio a ciascuna variabile sec = date.getSeconds (); min = date.getMinutes (); hr = Date.getHours (); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);

Passaggio 17: creare la funzione setTime ()

Questa è la funzione che verrà chiamata ogni secondo.

 funzione privata setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = Date.getHours ();

Passaggio 18: Converti decimale in binario

Questa funzione cambierà un numero decimale in un array binario, che verrà usato in seguito.

 funzione privata dec2bin (dec: int, length: int): Array var bin: Array = new Array (); while ((dec / 2)> 0) // nota che ha lo stesso effetto di "while ((dec / 2)> = 1)" bin.push (dec% 2); // dec% 2 è il * resto * quando dec è diviso per due. 3% 2 = 1; 4% 2 = 0; 5% 2 = 1; 6% 2 = 0; ecc. // in altre parole, dec% 2 è 1 se dec è dispari e 0 se dec è pari. dim = DEC / 2; // poiché dec è un int, sarà arrotondato mentre (bin.length Quindi, dec2bin (13, 4) dà [1,1,0,1].
 
  Passaggio 19: creare la funzione converter ()
 Questa funzione prende un numero decimale e usa dec2bin () per convertirlo nell'array a 2 colonne che abbiamo sul display.
  convertitore di funzioni private (num: int): Array var st: String = String (num); if (st.length == 1) st = "0" + st; var fDigit: int = int (st.charAt (1)); var sDigit: int = int (st.charAt (0)); var fColumn: Array = dec2bin (fDigit, 4); var sColumn: Array = dec2bin (sDigit, 3); var result: Array = fColumn.concat (sColumn); ritorno risultato; 
 
  Passaggio 20: attivazione e disattivazione dei bit
 Ora dobbiamo aggiungere qualcosa che accenderà e spegnerà i bit; questo è ciò che fa questa funzione:
  // newBits è l'array a 2 colonne che otteniamo da converter (), target è "H" "M" o "S" per indicare quale colonna utilizzare turnBits di funzione privata (newBits: Array, target: String): void / / Cicli attraverso l'array a 2 colonne per modificare lo stato del bit per (var a: int = 0; a 
  Passaggio 21: modifica delle funzioni
 Un paio di modifiche alle funzioni Main () e setTime (): dobbiamo solo chiamare la funzione in modo che le modifiche vengano fatte ogni secondo e all'inizio:
  funzione pubblica Main () sec = date.getSeconds (); min = date.getMinutes (); hr = Date.getHours (); turnBits (convertitore (sec), 'S'); turnBits (convertitore (min), 'M'); turnBits (convertitore (HR), 'H'); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);  funzione privata setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = Date.getHours (); turnBits (convertitore (sec), 'S'); turnBits (convertitore (min), 'M'); turnBits (convertitore (HR), 'H'); 
 Provalo e vedrai che visualizza correttamente l'ora. Ma possiamo fare di meglio… 
  Step 22: Un po 'di stile
 È qui che entra in gioco TweenMax. Aggiungiamo luminosità e facilità per dare un aspetto migliore all'orologio. Modifica la funzione turnBits () in questo modo:
  funzione privata turnBits (newBits: Array, target: String): void for (var a: int = 0; a E questo è tutto! Abbiamo terminato il nostro tutorial =)
 Conclusione
 Ora abbiamo un orologio attraente che potremmo usare come nostro salvaschermo o aggiungere a una pagina web.
 Questo è il mio primo tutorial quindi spero che ti sia piaciuto. Grazie per aver letto!



		
			
	   
	




Codice