Create en analog klokke Screensaver med Screentime for Flash
Del
Del
Del
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil jeg vise deg hvordan du bygger en stilig Analog Clock bruker Actionscript 3.0. Vi vil bruke den resulterende swf film med Screentime for Flash for å lage en fullt fungerende skjermsparer. Tid for litt moro ..

Trinn 1: Kort oversikt

Bruke dato objektet og dets egenskaper, vi får dagen, timer, minutter og sekunder og bruke enkel matematikk å vise innhentet data i en analog klokke. Oppdateringene vil bli håndtert av en Timer

Dessuten kan du legge til en digital klokke til Screensaver ved å følge denne FlashTuts + Instruksjons

Trinn 2:.. Starte

Åpne Flash og opprette en ny Flash-fil (Actionscript 3).

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

Trinn 3:. Klokke bakgrunner

Vi begynner med å lage klokken bakgrunnen.

Velg Oval Tool (O) og tegne en 250x250 px sirkel og legge en svart lineær bakgrunn (# 313131, # 000000). Bruk Gradient Transform Tool (F) for å rotere gradient å se ut som følgende bilde:

Opprett en sirkel, denne gangen 248x248, med denne lineær gradient (# 595959, # 000000). Igjen, bruker Gradient Transform Tool til å rotere og justere gradient

Trinn 4:.. Numbers

Nå la oss legge til numre i vår klokke

Velg Text Tool (T ), plukke en font av ditt valg og en passende størrelse for klokken. Jeg brukte Myriad Pro Regular, 22 Pt, #DDDDDD.

Skriv tallene i én Textfield for hver og justere dem til klokken, kan dette være litt vanskelig uten en referanse, sjekk guidene i bildene.

Horisontal:

Vertikal:

Trinn 5:. Klokke Hands

Tid for å skape klokken hendene

Velg Poly stjerne Tool (klikk og hold i rektangelverktøyet Button), deretter i Properties Panel klikk på Valg-knappen i Verktøyinnstillinger delen. Endre antall sider til 3.

Lag en hvit 20x70 px trekant, konvertere den til en MovieClip og gi den navnet "hourHand".

Gjenta denne prosessen for minuttviseren, men endrer høyde til 110 px. Husk å sette forekomstnavnet til "minuteHand"

Velg Oval Tool og lage en 26x26 px sirkel, konvertere den til en MovieClip og bruke et filter som følger:.

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

Trinn 6:.. Action

Opprett en ny Actionscript dokument og lagre det som "Analog Clock.as"

Trinn 7: Påkrevd Klasser

Dette er de klassene vi trenger:
pakke {import flash.display.Sprite; import flash.utils.Timer; import flash.events.TimerEvent;
Trinn 8:. Utvide Class

Vi kommer til å bruke Sprite spesifikke metoder og egenskaper, slik at vi utvider med Sprite Class
public class AnalogClock strekker Sprite {
Trinn 9: Variabler

Dette er de variablene vi vil bruke, forklarte i kommentarfeltet Twitter /* A Dato objekt som brukes til å få tid * /var dato. Date = new Date (); /* Tid variabler * /var timer: int = date.hours; Var minutter: * = date.minutes; Var sekunder: * = date.seconds; /* A Timer objekt som vil håndtere oppdateringene, henrettet hvert sekund * /Var timer: Timer = new Timer (1000);
Trinn 10:. Main Funksjon

Denne funksjonen utføres når klassen er lastet
offentlig funksjon AnalogClock (): void {/* Denne koden vil sette klokken hendene i riktig posisjon ved hjelp av dato objektet data * /hourHand.rotation = timer * 30 + (minutter * 0,5); //timeviseren roterer 30 grader i 60 minutter, det er 0,5 grader per minutt minuteHand.rotation = minutter * 6; //The Minute roterer 6 grader per minutt, det er 360 grader i 60 minutter - en time secondHand.rotation = sekunder * 6; //The Second Hand roterer 6 grader per sekund, som er 360 grader i 60 sekunder - ett minutt timer.addEventListener (TimerEvent.TIMER, updateClock); timer.start ();}
Trinn 11: Oppdatering Funksjon

Dette er funksjonen som håndterer Clock. . Det er den samme koden fra de første funksjonene, bare henrettet hvert sekund av timeren
privat funksjon updateClock (e: Timerevent): void {date = new Date (); timer = date.hours; minutter = date.minutes; sekunder = date.seconds; hourHand.rotation = timer * 30 + (minutter * 0,5); minuteHand.rotation = minutter * 6; secondHand.rotation = sekunder * 6;}
Trinn 12: Dokument Class

Gå tilbake til FLA filen og i Properties Panel legge "AnalogClock" i klassen feltet for å gjøre dette til dokument klassen.

Trinn 13: Screentime for Flash

Screentime for Flash er et Screensaver skaperen verktøyet, det er raskt og enkelt å bruke. Du kan få en prøveversjon fra nettstedet. Demoene er fullt funksjonell, med unntak av skjermsparere de bygger utløper en uke etter at de er opprettet. I denne opplæringen jeg bruker Mac-versjonen så Screensaver vil være mac-only

Trinn 14:. Screensaver

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

La Egenskaper og installatør faner som standard og i kategorien Publiser nevne installasjonsprogrammet, velger de alternativene du trenger, og klikk på Build.

Når byggingen er fullført , åpne installasjons app og klikk installere. Nå kan du velge din prangende skjermsparer fra Systemvalg.

Konklusjon

Du lærer hvor enkelt er å konvertere flash filmer eller programmer til skjermsparere, utforske Screentime programmet og opprette din egen!

Takk for lesing :) Anmeldelser