Share
ActionScript 3.0 er et meget kraftig språk, som er i stand til å skape alt fra enkle og lette verktøy til fullverdige skrivebordsprogrammer.
I denne tuten skal vi lage noe enkelt, en grunnleggende og stilig digital klokke i Flash.
Ved å bruke Date-objektet og dets egenskaper, får vi dagen, timer, minutter og sekunder, og bruker TextFields på scenen for å vise de innhentede dataene. Oppdateringene vil bli håndtert av en Timer.
Åpne Flash og opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til 600x300 og legg til en blå til svart radial bakgrunn (# 003030, # 000000).
Vi skal legge til to dynamiske tekstfelt for hvert element, vi legger dem med gløden først for å få linjeneffekten.
Velg tekstverktøyet og opprett en tekstfelt på 342x104px, bruk fargen # 00FAFF, klikk på Senter-alternativet i Avsnittspanelet og velg en skrift du vil. Jeg brukte DS-Digital kursiv, 100pt.
Navngi det "clockGlow", legg til noen tall, senter det for å bruke det som en guide og legg til et Glow Filter med følgende verdier:
Du burde ha noe slikt:
Gjenta prosessen med en mindre skriftstørrelse for dagene og am / pm-indikatoren. Instansnavnene er navnet på dagen pluss "Glow" -ordet, dette vil være "monGlow", "tueGlow" og så videre, "ampmGlow" for AM / PM-indikatoren.
Vi trekker en serie linjer som vil dekke scenen for å få LCD-skjermen effekten.
Velg rektangulærverktøyet og opprett en svart linje på 600x1px, dupliser den (Cmd + D) og legg den under, og la en 1px plass.
Gjenta prosessen til den stemmer overens med scenens høyde. Du vil ende med noe slikt:
Konverter linjeskjermen til en gruppe (Cmd + G) og senter den i scenen.
Som du kan se i det siste bildet, er linjeeffekten over hele teksten. Vi vil bare at den skal gjelde for gløden, så la oss legge til et nytt lag med tekst.
Siden denne teksten er akkurat det samme som vi opprettet før (uten Glow Filter) kan vi bare kopiere tekstfeltene og fjerne Glow Filter. Vi fjerner også "Glow" -ordet fra forekomstnavnene.
Dette vil fullføre grensesnittet.
Opprett et nytt ActionScript-dokument og lagre det som "Main.as".
Denne gangen trenger vi bare noen få klasser.
pakke import flash.display.MovieClip; importere flash.utils.Timer; importer flash.events.TimerEvent;
Vi skal bruke MovieClip-spesifikke metoder og egenskaper slik at vi utvider å bruke MovieClip Class. Utvidelse ved hjelp av Sprite-klassen virker ikke.
offentlig klasse Main utvider MovieClip
Dette er variablene vi skal bruke, forklart i kommentarene.
/ * Et datoobjekt som brukes til å få dagen, og tiden * / var dato: Dato = Ny Dato (); var dag: int = date.day; // Dag / * Tiden * / 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);
Denne funksjonen utføres når klassen er lastet.
offentlig funksjon Main (): void / * Forhindrer lag, siden timeren ikke utføres til 1 sekund etter at filmen startet * / updateClock (); / * Skjuler alle dager tekst, disse funksjonene forklares senere * / HideObjects (Mon, MonGlow, Tue, TueGlow, Wed, WedGlow, Thu, ThuGlow, Fri, FriGlow, Set, SatGlow, Sun, SunGlow); / * Unhides dagens dag * / showCurrentDay (); / * Starter timeren * / timer.addEventListener (TimerEvent.TIMER, startClock); timer.start ();
Dette er funksjonen som håndterer klokken. Det kalles en gang i hovedfunksjonen, så hvert sekund i startClock-funksjonen.
privat funksjon updateClock (): void / * AM PM, hvis timer er større enn 11, det er 12 og 12 er PM * / hvis (timer> 11) ampm.text = "PM"; ampmGlow.text = "PM"; ellers ampm.text = "AM"; ampmGlow.text = "AM"; / * Unngår 24-timers klokke, hvis timer er større enn 12 (som 13) tråder 12 (så det er 1) * / hvis (timer> 12) timer- = 12; / * Hvis tallet er bare ett siffer, legg til 0 til venstre * / hvis (String (minutter) .length<2) minutes="0"+minutes; if (String(seconds).length<2) seconds="0"+seconds; /* Set TextFields */ clock.text=hours+":"+minutes+":"+seconds; clockGlow.text=hours+":"+minutes+":"+seconds;
Dette er en funksjon for å gjøre objekter usynlige, vi bruker ... resten parameteren til å passere et hvilket som helst antall parametere.
privat funksjon hideObjects (... mål) for (var i: int = 0; i < targets.length; i++) targets[i].visible=false;
Denne Switch-setningen kontrollerer dagvariabelen for å få dagen og vise den.
Accentsconagua
privat funksjon showCurrentDay (): void switch (dag) tilfelle 0: sun.visible = true; sunGlow.visible = true; gå i stykker; tilfelle 1: mon.visible = true; monGlow.visible = true; gå i stykker; tilfelle 2: tue.visible = true; tueGlow.visible = true; gå i stykker; tilfelle 3: wed.visible = true; wedGlow.visible = true; gå i stykker; tilfelle 4: thu.visible = true; thuGlow.visible = true; gå i stykker; sak 5: fri.visible = sann; friGlow.visible = true; gå i stykker; tilfelle 6: sat.visible = true; satGlow.visible = true; gå i stykker; standard: spor ("Ukesdag feil"); Denne funksjonen oppdaterer Date-objektet for å få den aktuelle datoen og kaller funksjonen UpdateClock for å oppdatere tekstfeltene.
privat funksjon startClock (e: TimerEvent): void date = new Date (); timer = date.hours; minutt = date.minutes; sekunder = date.seconds; updateClock ();
Gå tilbake til .Fla-filen og i Egenskapspanelet legg til "Hoved" i Klassefeltet for å gjøre dette til Dokumentklassen.
Som du kan se, er det ganske enkelt å lage og modifisere dette digitale klokken. Eksperimenter med dataklassen, endre grensesnittet og kanskje legge til mer funksjonalitet!
Takk for at du leste.
