Bouw een briljante binaire klok met flits

In deze tutorial gaan we een ongebruikelijke, maar erg coole klok maken: een binaire klok.

Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:

Stap 1: Wat betekent binair gemiddelde?

Iedereen weet hoe te tellen, maar niet iedereen weet dat er zoveel verschillende manieren zijn om dit te doen. We zijn gewend aan een speciale manier van tellen, het decimale systeem genaamd, maar we zouden ook het hexadecimale, octale of binaire systeem kunnen gebruiken, onder andere.

In ons decimaalsysteem wijzen we 10 toe aan het totale aantal vingers en duimen dat we elk hebben, en tellen we vanaf daar op en neer. Maar in binair getal staat 10 voor het totale aantal duimen - dus 10 in binair getal is gelijk aan 2 in decimaal; 11 in binair getal is 3 in decimaal; 100 in binair getal is 4 in decimalen, enzovoort. Dus in plaats van elke kolom die eenheden, tientallen, honderden, duizenden, ... (van rechts naar links) vertegenwoordigt, vertegenwoordigen ze eenheden, tweeën, vieren, achten, ..., elke keer een verdubbeling.

Dus het getal 10 dat we normaal zien, kan op verschillende manieren worden weergegeven:

Het binaire systeem is gebaseerd op het getal twee, daarom wordt het genoemd binary, in tegenstelling tot de decemberimal-systeem dat we normaal gebruiken en dat een basis heeft van 10. Het binaire systeem is het systeem dat door computers wordt gebruikt om te werken, omdat we het kunnen gebruiken om elk nummer weer te geven met behulp van een reeks schakelaars "aan" (1) en "uit" (0).

Met deze kennis kunt u uitzoeken hoe de klok in de SWF moet worden gelezen?

Als u hier meer over wilt weten, kunt u Google binair getalsysteem gebruiken en de info erover controleren =)

Stap 2: Maak het Flash-bestand

Maak een nieuw AS3 Flash-bestand met de naam "Binary_Clock.fla".

Stap 3: Stel het werkgebied op

Ga naar de eigenschappen en verander de grootte in 550x400 en de achtergrondkleur in # 222222.

Stap 4: Verkrijg TweenMax

Ga naar de webpagina van het TweenMax-project en download de bibliotheek voor AS3.

Stap 5: extraheer TweenMax

Unrar het bestand en kopieer de map met de naam "com" naar de map waar u uw hebt Binary_Clock.fla het dossier.

Stap 6: maak een bit

Ga nu naar Invoegen> Nieuw symbool en noem het "Bit" met type Movie Clip.

Deze "bit" vertegenwoordigt een enkel cijfer van een getal en heeft twee toestanden, in twee verschillende kleuren: de ene staat voor 0 en de andere staat voor 1.

Stap 7: Teken een bit

Gebruik vervolgens in het symbool dat u zojuist hebt gemaakt een nieuw vierkant van 50x50px.

Stap 8: Pas het bit aan

Verander de kleur van het vierkant in # 00CBFF en centreer het.

Stap 9: Maak de kolommen

Terug op het podium, neem een paar stukjes van het bibliotheekpaneel en rangschik ze om de kolommen te maken die we zullen gebruiken. Je zou moeten eindigen met zoiets als dit:

Stap 10: voeg enkele elementen toe

Als u wilt, kunt u tekstlabels en -lijnen toevoegen om het begrijpelijker te maken:

Stap 11: Exemplaarnamen toewijzen

Wijzig voor elke bit de naam van de instantie in het eigenschappenvenster. Geef ze de namen zoals de onderstaande afbeelding laat zien:

Stap 12: Koppel de FLA aan een documentklasse

Ga naar het eigenschappenvenster en stel het klassenveld in op "Hoofd", dit is de naam van de klas die we in de volgende stap gaan maken.

(Weet u niet zeker wat we hier doen? Lees deze korte inleiding over documentklassen.)

Stap 13: Maak de documentklasse

Als de fase is voltooid, kunnen we nu beginnen met coderen. Maak eerst een nieuw ActionScript 3.0-bestand en sla dit op als "Main.as".

Voeg deze code toe aan het bestand:

 pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main ()

Stap 14: voeg de benodigde import toe

We beginnen met het importeren van de benodigde klassen. Voeg dit toe onder de pakketverklaring:

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

Stap 15: Variabelen declareren

Vervolgens geven we enkele openbare variabelen aan. Voeg dit toe onder de klassenverklaring:

 public var clock: Timer = new Timer (1000); public var date: Date = new Date (); public var hr: int; public var min: int; public var sec: int; openbare var bits: Array;

Als u een nieuw Date-object maakt, wordt dit automatisch ingesteld op de huidige tijd.

Stap 16: Wijs waarden toe

OK dus laten we nu de code toevoegen die de klok start. Dit gaat binnen de functie Main ():

 // Hiermee kennen we de werkelijke waarden voor de klok toe aan elke variabele sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);

Stap 17: Maak de functie setTime () aan

Dit is de functie die elke seconde wordt gebeld.

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

Stap 18: Decimaal naar binair converteren

Deze functie zal een decimaal getal veranderen in een binaire array, die later zal worden gebruikt.

 persoonlijke functie dec2bin (dec: int, lengte: int): Array var bin: Array = new Array (); while ((dec / 2)> 0) // noteer dit heeft hetzelfde effect als "while ((dec / 2)> = 1)" bin.push (dec% 2); // dec% 2 is de * rest * wanneer dec wordt gedeeld door twee. 3% 2 = 1; 4% 2 = 0; 5% 2 = 1; 6% 2 = 0; enz. // met andere woorden, dec% 2 is 1 als dec oneven is en 0 als dec even is. december = december / 2; // omdat dec een int is, zal het worden afgerond while (bin.length Dus dec2bin (13, 4) geeft [1,1,0,1].
 
  Stap 19: Creëer de converter () Functie
 Deze functie neemt een decimaal getal en gebruikt dec2bin () om het te converteren naar de array met 2 kolommen die we op het scherm hebben.
  persoonlijke functieomzetter (num: int): Array var st: String = String (num); als (st.length == 1) st = "0" + st; var fDigit: int = int (st.charAt (1)); var sDigit: int = int (st.charAt (0)); var fKolom: Array = dec2bin (fDigit, 4); var sColumn: Array = dec2bin (sDigit, 3); var result: Array = fColumn.concat (sColumn); terugkeer resultaat; 
 
  Stap 20: Bits in- en uitschakelen
 Nu moeten we iets toevoegen dat de bits aan en uit zet; dat is wat deze functie doet:
  // newBits is de array met 2 kolommen die we van converter () krijgen, doel is "H" "M" of "S" om aan te geven in welke kolom de turnBits van de privéfunctie (newBits: Array, target: String): void / / Loopt door de array met 2 kolommen om de status van het bit te wijzigen voor (var a: int = 0; a 
  Stap 21: Pas de functies aan
 Een paar aanpassingen aan de Main () en de setTime () functies: we hoeven alleen maar de functie aan te roepen, zodat de wijzigingen elke seconde en aan het begin worden aangebracht:
  openbare functie Main () sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (omvormer (s), 'S'); turnBits (converter (min), 'M'); turnBits (converter (uur), 'H); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);  private function setTime (e: TimerEvent): void date = new Date (); sec = date.getSeconds (); min = date.getMinutes (); hr = date.getHours (); turnBits (omvormer (s), 'S'); turnBits (converter (min), 'M'); turnBits (converter (uur), 'H); 
 Probeer het eens, en je zult zien dat het de tijd correct weergeeft. Maar we kunnen beter doen ... 
  Stap 22: Een beetje stijl
 Hier komt TweenMax om de hoek kijken. We voegen gloed en gemak toe om de klok beter weer te geven. Wijzig uw functie turnBits () als volgt:
  private functie turnBits (newBits: Array, target: String): void for (var a: int = 0; a En dat is het! We zijn klaar met onze tutorial =)
 Conclusie
 Nu hebben we een aantrekkelijke klok die we kunnen gebruiken als onze screensaver of toevoegen aan een webpagina.
 Dit is mijn eerste zelfstudie, dus ik hoop dat je het leuk vond. Bedankt voor het lezen!



		
			
	   
	




Code