Lag en Analog Clock Screensaver med Screentime for Flash

I denne veiledningen viser jeg deg hvordan du bygger et stilig analogt klokke ved hjelp av ActionScript 3.0. Vi bruker den resulterende swf-filmen med Screentime for Flash for å lage en fullt funksjonell skjermsparer. Tid til litt moro ...




Trinn 1: Kort oversikt

Ved å bruke Date-objektet og dens egenskaper, vil vi få dagen, timer, minutter og sekunder, og bruk enkel matematikk til å vise de innhentede dataene i et analogt klokke. Oppdateringene vil bli håndtert av en Timer.

Du kan også legge til et digitalt klokke til skjermsparer ved å følge denne FlashTuts + opplæringen.

Trinn 2: Starte

Åpne Flash og opprett en ny Flash-fil (ActionScript 3).

Still scenestørrelsen til 640x400 og legg til en grå lineær bakgrunn (#DBDBDD, # B3B2B7). Screentime vil automatisk skille filmen til fullskjerm, slik at vi ikke trenger å sette scenen i full oppløsning.

Trinn 3: Klokkebakgrunn

Vi begynner med å lage klokkebakgrunnen.

Velg Oval Tool (O) og tegne en 250x250 px sirkel og legg til en svart lineær bakgrunn (# 313131, # 000000). Bruk Gradient Transform Tool (F) for å rotere gradienten slik at den ser ut som følgende bilde:

Opprett en annen sirkel, denne gangen 248x248, med denne lineære gradienten (# 595959, # 000000). Igjen, bruk Gradient Transform Tool til å rotere og juster gradienten.

Trinn 4: Tall

La oss nå legge til tall i vår klokke.

Velg tekstverktøyet (T), velg en skrifttype etter eget valg og en passende størrelse for klokken. Jeg brukte Myriad Pro Regular, 22 Pt, #DDDDDD.

Skriv tallene i ett TextField for hver og juster dem til klokken, dette kan være litt vanskelig uten en referanse, sjekk guidene i bildene.

Horisontal:

vertikal:

Trinn 5: Klokkehender

Tid til å lage klokkehendene.

Velg Poly Star-verktøyet (klikk og hold inne rektangelverktøysknappen), og deretter i Egenskapspanelet, klikk Alternativer-knappen i delen Verktøyinnstillinger. Endre antall sider til 3.

Lag en hvit 20x70 px trekant, konverter den til en MovieClip og kaller den "hourHand".

Gjenta denne prosessen for minutthånden, men endre høyden til 110 px. Husk å sette instansnavnet til "minuteHand".

Velg det ovale verktøyet og opprett en 26x26 px sirkel, konverter den til en MovieClip og bruk et filter som følger:

For den andre hånden kombineres en 8x8 px sirkel og et 2x116 px rektangel. Fyll dem med denne fargen # C90303.

Trinn 6: ActionScript

Opprett et nytt ActionScript-dokument og lagre det som "Analog Clock.as".

Trinn 7: Nødvendige klasser

Dette er klassene vi trenger:

 pakke import flash.display.Sprite; importere flash.utils.Timer; importer flash.events.TimerEvent;

Trinn 8: Utvide klassen

Vi skal bruke Sprite-spesifikke metoder og egenskaper slik at vi utvider bruken av Sprite-klassen.

 offentlig klasse AnalogClock utvider Sprite 

Trinn 9: Variabler

Dette er variablene vi skal bruke, forklart i kommentarene.

 / * En Dato objekt brukt til å få tiden * / var dato: Dato = ny Dato (); / * Tidsvariabler * / var timer: int = date.hours; var minutter: * = date.minutes; var sekunder: * = date.seconds; / * Et Timer-objekt som håndterer oppdateringene, utføres hvert sekund * / var timer: Timer = Ny Timer (1000);

Trinn 10: Hovedfunksjon

Denne funksjonen utføres når klassen er lastet.

 offentlig funksjon AnalogClock (): void / * Denne koden vil stille klokkehendene i riktig posisjon ved hjelp av datoobjektdataene * / timeHand.rotation = timer * 30 + (minutter * 0,5); // Hour Hand roterer 30 grader på 60 minutter er det 0,5 grader per minutt minuttHand.rotation = minutter * 6; // Minutten roterer 6 grader per minutt, det er 360 grader i 60 minutter - en time secondHand.rotation = sekunder * 6; // Den andre hånden roterer 6 grader per sekund, det er 360 grader på 60 sekunder - et minutt timer.addEventListener (TimerEvent.TIMER, updateClock); timer.start (); 

Trinn 11: Oppdateringsfunksjon

Dette er funksjonen som håndterer klokken. Det er samme kode fra de første funksjonene, bare utført hvert sekund av timeren.

 privat funksjon oppdateringClock (e: TimerEvent): void date = new Date (); timer = date.hours; minutter = date.minutes; sekunder = date.seconds; timeHand.rotation = timer * 30 + (minutter * 0,5); minuteHand.rotation = minutter * 6; secondHand.rotation = sekunder * 6; 

Trinn 12: Dokumentklasse

Gå tilbake til .fla-filen og i Egenskapspanelet legg til "AnalogClock" i klassefeltet for å gjøre dette til Dokument Class.

Trinn 13: Screentime for Flash

Screentime for Flash er et Screensaver Creator verktøy, det er raskt og enkelt å bruke. Du kan få en prøveversjon fra nettstedet. Demoer er fullt funksjonelle, bortsett fra at skjermsparerne de bygger ut, går ut en uke etter at de er opprettet. I denne opplæringen bruker jeg Mac-versjonen, slik at skjermspareren vil være mac-only.

Trinn 14: Skjermsparer

Åpne skjermtid og i kategorien Innhold, velg filen ved å klikke på "..." -knappen og bla til swf. Skriv inn et navn for skjermspareren din.

Legg til fanene Egenskaper og Installer som standard, og velg alternativene du trenger i Publiser-fanenavnet, og klikk på Bygg.

Når bygningen er fullført, åpner du installasjonsprogrammet og klikker installasjonen. Nå kan du velge din prangende skjermsparer fra Systemvalg.

Konklusjon

Du lærer bare hvor enkelt det er å konvertere flash-filmer eller programmer til skjermsparere, utforske Screentime-applikasjonen og lag din egen!

Takk for at du leste :)