Construiți un ceas binar Brilliant cu Flash

În acest tutorial vom crea un ceas neobișnuit, dar foarte rece: un ceas binar.

Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:

Pasul 1: Ce înseamnă binarele??

Toată lumea știe cum să conteze, dar nu toată lumea știe că există atât de multe moduri diferite de a face acest lucru. Suntem obișnuiți cu un mod special de numărare numit sistemul zecimal, dar am putea folosi și sistemul hexazecimal, octal sau binar, printre altele.

În sistemul nostru zecimal, atribuim 10 pentru a reprezenta numărul total de degete și degete pe care le avem fiecare și numărați în sus și în jos de acolo. Dar în binar, 10 reprezintă doar numărul total de degete - deci 10 în binar este egal cu 2 în zecimal; 11 în binar este de 3 în zecimal; 100 în binar este de 4 în zecimal, și așa mai departe. Deci, mai degrabă decât fiecare coloană reprezentând unități, zeci, sute, mii, ... (numărare de la dreapta la stânga), ele reprezintă unități, două, patru, opt, ..., dublând de fiecare dată.

Astfel, numărul 10 pe care îl vedem în mod normal, poate fi reprezentat în moduri diferite:

Sistemul binar se bazează pe numărul doi, de aceea se numește bi, spre deosebire de decimal sistem pe care le folosim în mod normal și care are o bază de 10. Sistemul binar este cel folosit de calculatoare pentru a lucra, deoarece îl putem folosi pentru a reprezenta orice număr folosind o serie de comutatoare "on" (1) și "off" (0).

Cu aceste cunoștințe, vă puteți da seama cum să citiți ceasul în SWF?

Dacă doriți să aflați mai multe despre acest lucru, puteți sistemul numeric binar Google și verificați informațiile despre acesta =)

Pasul 2: Creați fișierul Flash

Creați un nou fișier AS3 Flash și denumiți-l "Binary_Clock.fla".

Pasul 3: Configurați etapa

Accesați proprietățile și modificați dimensiunea la 550x400 și culoarea de fundal la # 222222.

Pasul 4: Obțineți TweenMax

Accesați pagina Web a proiectului TweenMax și descărcați biblioteca pentru AS3.

Pasul 5: Extrageți TweenMax

Dezarhivați fișierul și copiați folderul numit "com" în dosarul în care aveți Binary_Clock.fla fişier.

Pasul 6: Creați un bit

Acum, du-te la Insert> Simbol nou și numește-l "Bit" cu tipul Movie Clip.

Acest "bit" va reprezenta o singură cifră a unui număr. Va avea două stări, în două culori diferite: una va reprezenta 0 și cealaltă va reprezenta 1.

Pasul 7: Trageți un pic

Apoi, în simbolul pe care tocmai l-ați creat, faceți un nou pătrat de 50x50 px.

Pasul 8: Modificați bitul

Modificați culoarea pătratului la # 00CBFF și centrați-l.

Pasul 9: Creați coloanele

Înapoi pe scenă, luați niște biți din panoul bibliotecii și aranjați-i să creeze coloanele pe care le vom folosi. Ar trebui să vă încheiați cu ceva de genul:

Pasul 10: Adăugați unele elemente

Dacă doriți, puteți adăuga etichete și linii de text pentru a le face mai ușor de înțeles:

Pasul 11: Atribuiți numele instanțelor

Pentru fiecare bit, modificați numele instanței pe panoul proprietăților. Dați-le numele cum ar fi imaginea de mai jos demonstrează:

Pasul 12: Conectați FLA la o clasă de documente

Accesați panoul de proprietăți și setați câmpul de clasă la "Main", acesta este numele clasei pe care o vom crea în etapa următoare.

(Nu sunteți sigur ce facem aici? Citiți această introducere rapidă la clasele de documentare.)

Pasul 13: Creați Clasa de documente

Odată cu terminarea etapei, putem începe codarea. Mai întâi creați un nou fișier ActionScript 3.0 și salvați-l ca "Main.as".

Adăugați acest cod în fișier:

 pachet import flash.display.MovieClip; clasa publică Extensie principală MovieClip funcția publică principală ()

Pasul 14: Adăugați importurile necesare

Vom începe prin a importa clasele necesare. Adăugați această declarație de mai jos:

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

Pasul 15: Declarați variabilele

În continuare, vom declara câteva variabile publice. Adăugați această declarație de mai jos:

 ceas public var: Timer = nou Cronometru (1000); public var dată: Date = new Date (); public var hr: int; public var min: int; public var sec: int; public var bits: Array;

Crearea unui nou obiect Date setează automat ora curentă.

Pasul 16: Atribuiți valori

OK, acum să adăugăm codul care va porni ceasul. Aceasta se află în interiorul funcției Main ():

 // Cu aceasta le atribuim valorile reale pentru ceas la fiecare variabila sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);

Pasul 17: Creați funcția setTime ()

Aceasta este funcția care va fi numită în fiecare secundă.

 funcția privată setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours ();

Pasul 18: Conversia zecimală la binară

Această funcție va modifica un număr zecimal într-o matrice binară, care va fi utilizată ulterior.

 funcția privată dec2bin (dec: int, lungime: int): Array var bin: Array = Array nou (); în timp ce ((dec / 2)> 0) // notează că acest lucru are același efect cu "în timp ce ((dec / 2)> = 1)" bin.push (dec% 2); // dec% 2 este * restul * când dec este împărțit la două. 3% 2 = 1; 4% 2 = 0; 5% 2 = 1; 6% 2 = 0; etc // cu alte cuvinte, dec% 2 este 1 daca dec este impar si 0 daca dec este egal. dec = DEC / 2; // deoarece dec este un int, va fi rotunjit în timp ce (bin.length Astfel, dec2bin (13, 4) dă [1,1,0,1].
 
  Pasul 19: Creați funcția convertor ()
 Această funcție are un număr zecimal și utilizează dec2bin () pentru ao converti în matricea pe două coloane pe care o avem pe ecran.
  convertorul funcției private (num: int): Array var st: String = String (num); dacă (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 rezultat: Array = fColumn.concat (sColumn); rezultatul retur; 
 
  Pasul 20: Pornirea și oprirea biților
 Acum trebuie să adăugăm ceva care să transforme și să oprească biții; asta este ceea ce face această funcție:
  // newBits este matricea de 2 coloane pe care o primim din convertor (), țintă este "H" "M" sau "S" pentru a indica coloana pentru a utiliza funcția privată turnBits (newBits: Array, target: String) / Loops prin matricea cu 2 coloane pentru a schimba starea bitului pentru (var a: int = 0; a 
  Pasul 21: Modificați funcțiile
 Câteva modificări ale funcțiilor Main () și setTime (): trebuie doar să apelam funcția astfel încât modificările să fie efectuate în fiecare secundă și la început:
  funcția publică Main () sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (convertor (sec), 'S'); turnBits (convertor (min), 'M'); turnBits (convertor (hr), 'H'); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);  funcția privată setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (convertor (sec), 'S'); turnBits (convertor (min), 'M'); turnBits (convertor (hr), 'H'); 
 Încearcă-l și vei vedea că arată corect ora. Dar putem face mai bine ... 
  Pasul 22: Un pic de stil
 Aici intră TweenMax. Vom adăuga strălucire și ușurință pentru a oferi un aspect mai bun ceasului. Modificați funcția turnBits () astfel:
  funcția privată turnBits (newBits: Array, țintă: String): void pentru (var a: int = 0; a Si asta e! Am terminat tutorialul nostru =)
 Concluzie
 Acum avem un ceas atrăgător pe care l-am putea folosi ca screensaver sau adăugăm la o pagină Web.
 Acesta este primul meu tutorial, așa că sper că ți-a plăcut. Vă mulțumim pentru lectură!



		
			
	   
	




Cod