Create en attraktiv digital klokke i Flash
5
Del
4
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Actionscript 3.0 er en svært kraftig språk, i stand til å lage alt fra enkle og lette verktøy til alle funksjoner desktop-applikasjoner.
I denne tut, vi kommer å lage noe enkelt, en enkel og god jakt digital klokke i Flash
Trinn 1:. Kort oversikt
Bruke dato objektet og dets egenskaper, vi vil få dagen, timer, minutter og sekunder og bruke textfields på scenen for å vise innhentet data. Oppdateringene vil bli håndtert av en Timer
Trinn 2:. Starte
Åpne Flash og opprette en ny Flash-fil (Actionscript 3)
Sett scenen. størrelse til 600x300 og legge en blå til svart radial bakgrunn (# 003030, # 000000)
Trinn 3:. Glowing Text
Vi kommer til å legge to dynamiske textfields for hver element, plasserer vi de med gløden første til å få linjer effekt.
Velg Text Tool og skape et 342x104px tekstfeltet, bruker farge # 00FAFF klikker du på midtalternativet i Avsnitt-panelet og velger en font du liker. Jeg brukte DS-Digital kursiv, 100pt
Name it "clockGlow", legge til noen tall, center det å bruke den som en guide og legge en Glow Filter med følgende verdier:.
Du bør ha noe sånt som dette:
Gjenta prosessen med en mindre skriftstørrelse for dagene og AM /PM-indikator. De forekomstnavn er navnet på dagen pluss "Glow" ord, vil dette være "monGlow", "tueGlow" og så videre, "ampmGlow" for AM /PM-indikator.
Trinn 4: Linjer Screen
Vi vil trekke en rekke linjer som vil dekke scenen for å få LCD-skjermen effekt
Velg rektangelverktøyet og skape en 600x1px svart linje, duplisere det (. cmd + D) og plassere den under forlate en 1px plass.
Gjenta prosessen til den samsvarer med takhøyde. Du vil ende med noe sånt som dette:.
Convert linjene skjermen til en gruppe (Cmd + G) og sentrere det i den fasen
Trinn 5: Sharp Tekst
Som du kan se i det siste bildet, er linjen effekt over hele teksten. Vi bare ønsker at den skal gjelde for den gløden, så la oss legge et nytt lag med tekst.
Som denne teksten er akkurat det samme vi laget før (uten Glow Filter) vi kan bare kopiere textfields og fjern Glow Filter. Vi vil også fjerne "Glow" ord fra forekomstnavn
Dette vil fullføre grensesnittet
Trinn 6:.. Action Tid
Opprett en ny Action dokument og lagre det som "Main.as"
Trinn 7:.. Må Classes
Denne gangen trenger vi bare et par klasser
pakke {import flash .display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent;
Trinn 8: Utvide Class
Vi kommer til å bruke MovieClip spesifikke metoder og egenskaper så vi utvider bruker MovieClip klasse. Utvide med Sprite klasse vil ikke fungere
public class Hoved strekker MovieClip {
Trinn 9:.. Variabler
Dette er de variablene vi vil bruke, forklarte i kommentarfeltet
/* A Dato objekt som brukes til å få dagen, og tiden * /var date: Date = new Date (); Var dag: int = date.day; //Dagen /* Tiden * /var timer: int = date.hours; Var minutter: * = date.minutes; Var sekunder: * = date.seconds; /* A Timer objekt som vil håndtere oppdateringer, utføres hver andre * /var timer: Timer = new Timer (1000);
Trinn 10:. Main Funksjon
Denne funksjonen utføres når klassen er lastet
offentlig funksjon main (): void {/* Hindrer lag, siden timeren ikke er utført før 1 sekund etter start filmen * /updateClock (); /* Skjuler alle dager tekst, er disse funksjonene forklart senere * /hideObjects (man, monGlow, ti, tueGlow, ons, wedGlow, to, thuGlow, fre, friGlow, satt, satGlow, sol, sunglow); /* Unhides gjeldende dag * /showCurrentDay (); /* Starter timeren * /timer.addEventListener (TimerEvent.TIMER, startClock); timer.start ();}
Trinn 11: Klokkefunksjon
Dette er funksjonen som håndterer Clock. Det kalles en gang i den viktigste funksjonen, deretter hver andre i startClock funksjon
privat funksjon updateClock (). Void {/* AM PM, hvis timer er større enn 11, som er 12 og 12 er PM * /if (timer > 11) {ampm.text = "PM"; ampmGlow.text = "PM"; } Else {ampm.text = "AM"; ampmGlow.text = "AM"; } /* Unngår 24 timers klokke, hvis timer er større enn 12 (som 13) subtraherer 12 (slik at det er 1) * /if (timer og gt; 12) {timer-= 12; } /* Hvis nummeret er bare ett siffer, legge til en 0 til venstre * /if (String (minutter) .length & lt; 2) {minutter = "0" + minutter; } If (String (sekunder) .length & lt; 2) {sekunder = "0" + sekunder; } /* Sett textfields * /clock.text = timer + ":" + minutter + ":" + sekunder; clockGlow.text = timer + ":" + minutter + ":" + sekunder;}
Trinn 12: Hide Funksjon
Dette er en funksjon for å gjøre objekter usynlige, bruker vi ... resten parameter for å passere en rekke parametre
private funksjons hideObjects (... mål) {for (var i: int = 0; i & lt; targets.length; i ++). {mål [i] .visible = false; }}
Trinn 13: dagens
Dette Switch uttalelsen vil sjekke dagen variabel for å få dagen og unhide det
privat funksjon showCurrentDay (). void {switch (dag) {case 0: sun.visible = true; sunGlow.visible = true; gå i stykker; case 1: mon.visible = true; monGlow.visible = true; gå i stykker; case 2: tue.visible = true; tueGlow.visible = true; gå i stykker; case 3: wed.visible = true; wedGlow.visible = true; gå i stykker; case 4: thu.visible = true; thuGlow.visible = true; gå i stykker; case 5: fri.visible = true; friGlow.visible = true; gå i stykker; case 6: sat.visible = true; satGlow.visible = true; gå i stykker; standard: trace ("Week dag error"); }}
Trinn 14:. Start Function
Denne funksjonen oppdaterer Dato objekt for å få den faktiske datoen og kaller updateClock funksjonen for å oppdatere textfields
privat funksjon startClock (e: Timerevent): void {date = new Date (); timer = date.hours; minutter = date.minutes; sekunder = date.seconds; updateClock ();}
Trinn 15:. Dokument Class
Gå tilbake til FLA filen og i Properties Panel legge til "Main" i klassen feltet for å gjøre dette til dokument Class
Konklusjon
Som du ser, det er ganske enkelt å lage og endre dette digital klokke. Eksperimenter med dato Class, endre grensesnittet og kanskje legge til mer funksjonalitet!
Takk for lesing. Anmeldelser