Bygg et strålende binært ur med Flash

I denne opplæringen skal vi lage en uvanlig, men veldig kul type klokke: en binær klokke.

Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:

Trinn 1: Hva betyr binær betydning?

Alle vet hvordan man skal telle, men ikke alle vet at det er så mange forskjellige måter å gjøre det på. Vi er vant til en spesiell måte å telle som heter desimalsystemet, men vi kan også bruke det heksadesimale, oktale eller binære systemet, blant annet.

I vårt desimalanlegg tildeler vi 10 til å representere totalt antall fingre og tommelfinger som vi hver har, og teller opp og ned derfra. Men i binær representerer 10 bare totalt antall tommelen - så 10 i binær er lik 2 i desimal; 11 i binær er 3 i desimal; 100 i binær er 4 i desimal, og så videre. Så i stedet for hver kolonne som representerer enheter, tiere, hundrevis, tusenvis, ... (teller fra høyre til venstre), representerer de enheter, to, fire, åtter, ..., dobler hver gang.

Så nummer 10 vi normalt ser, kan representeres på forskjellige måter:

Det binære systemet er basert på nummer to, derfor kalles det binary, i motsetning til desemberimal system som vi vanligvis bruker og som har en base på 10. Det binære systemet er det som brukes av datamaskiner til å fungere, fordi vi kan bruke det til å representere et tall ved hjelp av en serie brytere "on" (1) og "off" (0).

Med denne kunnskapen kan du finne ut hvordan du leser klokken i SWF?

Hvis du vil lære mer om dette, kan du Google binært talesystem og sjekke informasjonen om det =)

Trinn 2: Lag Flash-filen

Opprett en ny AS3 Flash-fil og navnet "Binary_Clock.fla".

Trinn 3: Sett opp scenen

Gå til egenskapene og endre størrelsen til 550x400 og bakgrunnsfargen til # 222222.

Trinn 4: Få TweenMax

Gå til TweenMax-prosjektets nettside og last ned biblioteket for AS3.

Trinn 5: Trekk ut TweenMax

Unrar filen og kopier mappen som heter "com" til mappen der du har din Binary_Clock.fla fil.

Trinn 6: Lag litt

Nå, gå til Sett inn> Nytt symbol og navnet "Bit" med type Filmklipp.

Denne "Bit" vil representere et enkelt siffer i et nummer. Det vil ha to stater, i to forskjellige farger: en vil representere 0 og den andre representerer 1.

Trinn 7: Tegn litt

Deretter i det symbolet du nettopp opprettet, lag et nytt firkant på 50x50px.

Trinn 8: Endre bit

Endre firkantets farge til # 00CBFF og senter den.

Trinn 9: Opprett kolonnene

Tilbake på scenen, ta noen biter fra bibliotekspanelet og ordne dem til å lage de kolonnene vi skal bruke. Du bør ende med noe slikt:

Trinn 10: Legg til noen elementer

Hvis du vil, kan du legge til tekstetiketter og linjer for å gjøre det mer forståelig:

Trinn 11: Tilordne forekomstnavn

For hver bit, endre forekomstnavnet på egenskapspanelet. Gi dem navnene som bildet nedenfor viser:

Trinn 12: Koble FLA til en dokumentklasse

Gå til egenskapspanelet og sett klassefeltet til "Main", dette er navnet på den klassen vi skal lage i neste trinn.

(Ikke sikker på hva vi gjør her? Les denne raske introduksjonen til dokumentklasser.)

Trinn 13: Opprett dokumentklassen

Med scenen fullført, kan vi nå starte kodingen. Først oppretter du en ny ActionScript 3.0-fil og lagrer den som "Main.as".

Legg til denne koden i filen:

 pakke import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main ()

Trinn 14: Legg til importeringen som trengs

Vi begynner med å importere de nødvendige klassene. Legg til dette under pakkeerklæringen:

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

Trinn 15: Erklære variabler

Deretter erklærer vi noen offentlige variabler. Legg til dette under klassedeklarasjonen:

 Offentlig var klokke: Timer = Ny Timer (1000); offentlig var dato: dato = ny dato (); offentlig var hr: int; offentlig var min: int; offentlig var sek: int; offentlige var biter: Array;

Oppretter et nytt Date-objekt setter det automatisk til den gjeldende tiden.

Trinn 16: Tilordne verdier

OK så nå la vi legge til koden som vil starte klokken. Dette går inn i Main () -funksjonen:

 // Med dette tilordner vi de faktiske verdier for klokken til hver variabel sec = date.getSeconds (); min = date.getMinutes (); HR = date.getHours (); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);

Trinn 17: Opprett setTime () -funksjonen

Dette er funksjonen som vil bli kalt hvert sekund.

 privat funksjon setTime (e: TimerEvent): void date = new Date (); sek = date.getSeconds (); min = date.getMinutes (); HR = date.getHours ();

Trinn 18: Konverter desimal til binært

Denne funksjonen vil endre et desimalnummer til et binært array, som vil bli brukt senere.

 privat funksjon dec2bin (dec: int, lengde: int): Array var bin: Array = new Array (); mens ((dec / 2)> 0) // merk dette har samme effekt som "mens ((dec / 2)> = 1)" bin.push (dec% 2); // dec% 2 er * gjenværende * når dec er delt med to. 3% 2 = 1; 4% 2 = 0; 5% 2 = 1; 6% 2 = 0; etc. // med andre ord, dec% 2 er 1 hvis dec er merkelig og 0 hvis dec er jevnt. desember = desember / 2; // fordi dec er en int, det vil bli avrundet mens (bin.length Så, dec2bin (13, 4) gir [1,1,0,1].
 
  Trinn 19: Opprett omformer () Funksjon
 Denne funksjonen tar et desimalnummer og bruker dec2bin () for å konvertere det til 2-kolonne-arrayet vi har på displayet.
  privatfunksjonskonverter (num: int): Array var st: String = String (num); hvis (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 resultat: Array = fColumn.concat (sColumn); returresultat; 
 
  Trinn 20: Slår på og av
 Nå må vi legge til noe som vil slå biter på og av; det er hva denne funksjonen gjør:
  // newBits er 2-kolonne-arrayet vi får fra omformer (), målet er "H" "M" eller "S" for å indikere hvilken kolonne som skal brukes til private funksjonen turnBits (newBits: Array, mål: String): void / / Loops gjennom 2-kolonne-arrayet for å endre bitens tilstand for (var a: int = 0; a 
  Trinn 21: Endre funksjonene
 Et par modifikasjoner til Main () og setTime () Funksjoner: Vi trenger bare å ringe til funksjonen, slik at endringene gjøres hvert sekund og i starten:
  offentlig funksjon Main () sec = date.getSeconds (); min = date.getMinutes (); HR = date.getHours (); turnBits (omformer (sek), 'S'); turnBits (omformer (min), 'M'); turnBits (omformer (t), 'H'); clock.start (); clock.addEventListener (TimerEvent.TIMER, setTime);  privat funksjon setTime (e: TimerEvent): void date = new Date (); sek = date.getSeconds (); min = date.getMinutes (); HR = date.getHours (); turnBits (omformer (sek), 'S'); turnBits (omformer (min), 'M'); turnBits (omformer (t), 'H'); 
 Prøv det, og du vil se det riktig vise klokken. Men vi kan gjøre det bedre ... 
  Trinn 22: En liten bit av stil
 Det er her TweenMax kommer inn. Vi vil legge til glød og letthet for å gi et bedre utseende på klokken. Endre funksjonen turnBits () som:
  private funksjon turnBits (newBits: Array, mål: String): void for (var a: int = 0; a Og det er det! Vi har avsluttet vår opplæring =)
 Konklusjon
 Nå har vi en attraktiv klokke som vi kan bruke som vår skjermsparer eller legge til på en nettside.
 Dette er min første opplæring så jeg håper du likte det. Takk for at du leste!



		
			
	   
	




Kode