Creați un ceas digital atractiv în Flash

ActionScript 3.0 este un limbaj foarte puternic, capabil să creeze ceva de la utilități simple și ușoare până la aplicații de birou full featured.

În acest tut, vom crea ceva simplu, un ceas digital de bază și bun aspect în Flash.


Pasul 1: Prezentare succintă

Folosind obiectul Date și proprietățile sale, vom obține ziua, orele, minutele și secundele și vom folosi TextFields pe scenă pentru a afișa datele obținute. Actualizările vor fi gestionate de un cronometru.


Pasul 2: Începând

Deschideți Flash și creați un fișier Flash nou (ActionScript 3).

Setați dimensiunea scenei la 600x300 și adăugați un fundal radial albastru-negru (# 003030, # 000000).


Pasul 3: Textul strălucitor

Vom adăuga două câmpuri dinamice pentru fiecare element, le vom plasa mai întâi pe cele cu strălucire pentru a obține efectul liniilor.

Selectați instrumentul Text și creați un câmp text de 342x104px, utilizați culoarea # 00FAFF, faceți clic pe opțiunea Centrare din panoul Paragraf și alegeți un font care vă place. Am folosit DS-Digital italic, 100pt.

Denumiți-o "clockGlow", adăugați niște numere, centrați-o pentru ao folosi ca ghid și adăugați un filtru Glow cu următoarele valori:

Ar trebui să aveți ceva de genul:

Repetați procesul cu o dimensiune a fontului mai mică pentru zile și indicatorul am / pm. Numele instanțelor sunt numele zilei plus cuvântul "Glow", acesta va fi "monGlow", "tueGlow" și așa mai departe, "ampmGlow" pentru indicatorul AM / PM.


Pasul 4: Ecranul liniilor

Vom desena o serie de linii care vor acoperi scena pentru a obține efectul ecranului LCD.

Selectați instrumentul Rectangle și creați o linie neagră 600x1px, duplicați-o (Cmd + D) și plasați-o mai jos lăsând un spațiu de 1px.

Repetați procesul până când se potrivește cu înălțimea treptei. Veți termina cu ceva de genul:

Transformați ecranul de linii într-un grup (Cmd + G) și centrați-l în scenă.


Pasul 5: Textul ascuțit

După cum puteți vedea în ultima imagine, efectul de linie este peste tot textul. Vrem doar să se aplice luminii, deci să adăugăm un nou strat de text.

Deoarece acest text este exact același lucru pe care l-am creat înainte (fără Filter Glow), putem copia câmpurile de text și eliminăm Filtrul Stralucitor. De asemenea, vom elimina cuvântul "Glow" din numele instanțelor.

Aceasta va completa interfața.


Pasul 6: Timpul ActionScript

Creați un nou document ActionScript și salvați-l ca "Main.as".


Pasul 7: Clasele necesare

De data asta vom avea nevoie doar de câteva ore.

 pachet import flash.display.MovieClip; import flash.utils.Timer; import flash.events.TimerEvent;

Pasul 8: Extinderea clasei

Vom folosi metode și proprietăți specifice MovieClip, astfel încât să le extindem folosind clasa MovieClip. Extinderea folosind clasa Sprite nu va funcționa.

 clasa publică principală extinde MovieClip 

Pasul 9: Variabile

Acestea sunt variabilele pe care le vom folosi, explicate în comentarii.

 / * Un obiect Date folosit pentru a obține ziua și ora * / var data: Date = new Date (); var zi: int = data.day; // Ziua / * Ora * / var ora: int = data.hours; var minute: * = data.minute; var secunde: * = data.secunde; / * Un obiect Timer care se va ocupa de actualizările executate în fiecare secundă * / var timer: Timer = nou Timer (1000);

Pasul 10: Funcția principală

Această funcție este executată atunci când este încărcată clasa.

 funcția publică Main (): void / * Previne întârzierea, deoarece temporizatorul nu este executat până la 1 secundă după pornirea filmului * / updateClock (); / * Ascunde toate textele zilei, aceste funcții sunt explicate mai târziu * / hideObjects (Mon, MonGlow, Tue, TueGlow, Wed, WedGlow, Thu, ThuGlow, Fri, FrigGlow, sat, satGlow, soare, sunGlow); / * Dezvăluie ziua curentă * / showCurrentDay (); / * Începe timerul * / timer.addEventListener (TimerEvent.TIMER, startClock); timer.start (); 

Pasul 11: Funcția ceasului

Aceasta este funcția care gestionează ceasul. Se numește o dată în funcția principală, apoi în fiecare secundă în funcția startClock.

 funcția privată updateClock (): void / * PM PM, dacă orele sunt mai mari de 11, adică 12 și 12 PM * / if (ore> 11) ampm.text = "PM"; ampmGlow.text = "PM";  altfel ampm.text = "AM"; ampmGlow.text = "AM";  / * Evită ceasul de 24 ore, dacă orele sunt mai mari de 12 (cum ar fi 13) substraturile 12 (deci este 1) * / dacă (ore> 12) oră- = 12;  / * Dacă numărul este doar o singură cifră, adăugați un 0 la stânga * / dacă (String (minute) .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; 

Pasul 12: Ascunderea funcției

Aceasta este o funcție de a face obiectele invizibile, vom folosi parametrul ... restul pentru a trece orice număr de parametri.

 funcția privată hideObjects (... targets) pentru (var i: int = 0; i < targets.length; i++)  targets[i].visible=false;  

Pasul 13: Ziua curentă

Această instrucțiune comutator va verifica variabila de zi pentru a obține ziua și pentru ao dezvălui.

 funcția privată showCurrentDay (): void comutare (zi) caz 0: sun.visible = true; sunGlow.visible = true; pauză; cazul 1: mon.visible = true; monGlow.visible = true; pauză; cazul 2: tue.visible = true; tueGlow.visible = true; pauză; cazul 3: vizibil = adevărat; wedGlow.visible = true; pauză; cazul 4: thu.visible = true; thuGlow.visible = true; pauză; cazul 5: fri.visible = true; friGlow.visible = true; pauză; cazul 6: sat.visible = true; satGlow.visible = true; pauză; implicit: urmărire ("Eroare zi săptămână"); 

Pasul 14: Funcția de pornire

Această funcție actualizează obiectul Date pentru a obține data reală și apelează funcția updateClock pentru a actualiza câmpurile de text.

 funcția privată startClock (e: TimerEvent): void date = new Date (); ore = date.hours; minute = date.minutes; secunde = date.seconds; updateClock (); 

Pasul 15: Clasa de documente

Reveniți la fișierul .Fla și în panoul Proprietăți adăugați "Main" în câmpul Class pentru a face acest lucru Document Class.

Concluzie

După cum puteți vedea, este destul de ușor să creați și să modificați acest ceas digital. Experimentați cu Data Class, schimbați interfața și puteți adăuga mai multe funcționalități!

Vă mulțumim pentru lectură.

Cod