Share
În timpul acestui tutorial voi demonstra cum să faceți un cronometru personalizat care să susțină numărarea în sus sau în jos până la o anumită perioadă de timp.
În demo-ul de mai jos veți vedea timpul de numărare de la 1:00, o bară de progres care urmărește progresul cronometrului și un buton de anulare.
Odată ce numărătoarea inversă de la 1:00 este terminată sau dacă apăsați butonul de anulare, un clip video clipeste din dreapta. Acest clip video vă permite să introduceți ora dorită și determină dacă aveți timpul de numărare în sus sau în jos. O bara de progres va fi atașată și va urmări progresul timpului. După terminarea timpului sau apăsarea butonului de anulare, veți putea introduce un nou moment.
Aici vom scrie clasa personalizată ce va conduce filmul nostru principal.
Accesați File> New și alegeți Class Actionscript 3.0. Salvați acest fișier ca "CountTimer.as".
Aici vom deschide pachetul și vom importa clasele de care vom avea nevoie pentru a scrie această clasă.
Adăugați următoarele la "CountTimer.as"
pachet // Necesar pentru importul timerului flash.utils.Timer; import flash.events.TimerEvent; // Vom actualiza acest TextField cu timpul de import flash.text.TextField;
Aici vom declara variabilele de care va avea nevoie clasa și va codifica funcția constructorului.
Adăugați următoarele la "CountTimer.as".
clasa publică CountTimer extinde Timer // Câmpul de text în care ora actualizată merge privat var targetText: TextField; // Direcția temporizatorului, adică "sus" sau "jos" direcția var privată: String; // Cât de multe minute are timerul privat var minut: int; // Câte secunde cronometrul are secunde private var: int; // Utilizat în calculul nostru pentru a actualiza timerul privat totalSeconds: int; // Suma totală a timpului = (Minute + Secunde) priv var varTotal; // Cât de mult timp a trecut Passed private timeLoaded = 0; // Setați drept adevărat pentru a testa testul temporar var var: Boolean = false; funcția publică CountTimer (min: int, sec: int, dir: String, targetTextField: TextField = null) minute = int (min * 60); secunde = int (sec); timeTotal = minute + secunde; super-(1000, timeTotal); dacă (dir == "jos") totalSeconds = minute + secunde; altceva totalSeconds = 0; dacă (targetTextField! = null) targetText = targetTextField; direcție = dir;
Aici am declarat câteva variabile de care avem nevoie pentru clasa noastră.
Funcția Constructor are patru parametri; acestea sunt următoarele:
Accentsconagua
min: O valoare întregă care reprezintă câte minute doriți să aibă cronometrul.sec: O valoare întregă care reprezintă câte secunde doriți să aibă timer-ul.dir: Un șir reprezentând direcția contorului poate fi unul dintre următoarele: "sus" sau "în jos".targetTextField: Un TextField care va fi folosit pentru a afișa ora actualizată (Acest lucru este opțional).În interiorul funcției constructorului am setat minute variabilă egală cu valoarea specificată de min * 60 (de la 1 minut este egal cu 60 de secunde).
Apoi am setat secunde variabilă egală cu sec.
Apoi setăm timeTotal variabilă egală cu minute + secunde.
Apoi sunăm super() -- care rulează codul de la funcția constructor a Cronometrul clasa - treci în 1000 de milisecunde, și timeTotal variabil. Folosind 1000 de milisecunde, îi spunem cronometrului să bifeze o dată în fiecare secundă și să treacă timeTotal spunem cronometrul de câte ori să declanșăm.
Apoi verificăm dacă dir parametrul este egal cu "sus" sau "în jos" și setați totalSeconds Variabile în mod corespunzător. Secundele totale vor fi folosite în programul nostru timeHandler () funcţie. Vom incrementa sau diminua acest lucru cu 1 din fiecare cronometru ce declanșează cronometrul.
Apoi verificăm dacă utilizatorul a trecut sau nu un TextField la constructor și a setat targetText variabile dacă au făcut-o; aceasta va fi utilizată pentru a afișa ora.
În cele din urmă am setat direcţie variabilă în direcția în care a intrat utilizatorul.
start() FuncţieAici codem start() pentru cronometrul nostru.
Adăugați următoarele la "CountTimer.as".
suprascrie funcția publică start (): void super.start (); addEventListener (TimerEvent.TIMER, timerHandler);
Pentru că am extins Timer, depășim Timerul existent start() metodă. Aici pur și simplu sunăm super.start () (care rulează codul din clasa Timer start() ) și adăugați un EventListener pentru a detecta momentul când cronometrul cade.
timerHandler FuncţieAici ne codificăm timerHandler () funcţie. Aici ne actualizăm timpul și îl afișăm. Această funcție se numește o dată în fiecare secundă.
Adăugați următoarele la clasa CountTimer.
funcția privată timerHandler (e: TimerEvent): void // Actualizarea timpului nostru variabil Loaded timeLoaded + = 1; dacă (direcția == "sus") // totalSeconds este = 0, pentru a începe cu. Adăugăm 1 la acesta. totalSeconds ++; altfel // totalSeconds = numărul de secunde prin adăugarea de min și sec; noi scade 1 din totalSeconds; // Cum vor mai rămâne secunde. secunde = totalSeconds% 60; // Câte minute sunt minutele rămase = Math.floor (totalSeconds / 60); // minutele și secundele de afișat în TextField. var minuteDisplay: String = (minute < 10) ? "0" + minutes.toString() : minutes.toString(); var secondsDisplay:String = (seconds < 10) ? "0" + seconds.toString(): seconds.toString(); if (targetText != null) targetText.text = minutesDisplay + ":" + secondsDisplay; if (test=true) trace(minutesDisplay + ":" + secondsDisplay);
În cadrul acestei funcții ne actualizăm timeLoaded variabilă, care este utilizată pentru a urmări progresul cât a trecut timpul.
Apoi verificăm dacă direcţie este egal cu "sus" sau "în jos" și să ne ajusteze totalSeconds variabilă în consecință.
Apoi determinăm câte secunde și minute rămân; împingeți minutesDisplay și secondsDisplay cu un zero suplimentar, dacă este necesar; actualizarea TextField (dacă a fost trecută în constructor); și, opțional, urmăriți timpul dacă ne-am stabilit Test variabilă la adevărat (util pentru testare dacă nu setați un TextField).
Calculul utilizat pentru determinarea secunde variabila ia restul de totalSeconds / 60.Operatorul% (modulo) ne dă restul.
Calculul utilizat pentru determinarea minute variabila ia simplu totalSeconds/ 60, rotunjit folosind Math.floor ().
getTimeTotal () FuncţieAici codificăm o funcție care ne întoarce pur și simplu timeTotal .Deoarece am făcut această variabilă privată, avem nevoie de o modalitate de a accesa aceasta.
funcția publică getTimeTotal (): int return timeTotal;
getTimeLoaded () FuncţieAici codificăm o funcție care ne întoarce timeLoaded variabil. Din nou, pentru că este privat, avem nevoie de o modalitate de accesare a acestuia.
funcția publică getTimeLoaded (): int return timeLoaded;
getProg () FuncţieAceastă funcție ne dă progresul timpului nostru. Este cât de mult din timpul total (pe care l-am stabilit în constructor) a trecut. Înmulțim cu 100, astfel încât să obținem un procent între 1 și 100.
funcția publică getProg (): int return Math.floor (timeLoaded / timeTotal * 100);
Aici începem să proiectăm filmul principal care folosește clasa noastră "CountTimer".
Mergi la Fișier> Nou și să creați un nou document ActionScript 3.0.
Setați dimensiunea la 320x220 pixeli.
Salvați acest document ca "Timer.fla". Mergi la Fișier> Nou și alegeți Class Actionscript 3.0.
Salvați acest fișier ca "Main.as". Vom încerca clasa noastră CountTimer, deci adăugați următoarele la "Main.as".
pachet import flash.display.MovieClip; import CountTimer; clasa publică principală extinde MovieClip var countTimer: CountTimer; funcție publică () countTimer = new CountTimer (1,30, "sus"); countTimer.start ();
Asigurați-vă că ați setat Test variabilă în "CountTimer.as" la Adevărat, și setați clasa de documente a filmului la "Main".
Apăsați ctrl - introduceți și testați filmul; ar trebui să vedeți timpul urmărit în fereastra de ieșire.
Aici începem să proiectăm principalul film pe care îl folosim CountTimer clasă.
Vom folosi TweenLite în filmul nostru, deci dacă nu aveți o copie, obțineți-o de la greensock.com.
Selectați instrumentul Text și asigurați-vă că în panoul "CHARACTER" sunt setate următoarele proprietăți.
Totuși, în panoul "Caracter", faceți clic pe "Embed" și asigurați-vă că sunt selectate "UpperCase", "LowerCase", "Numerals" și sub "
că ați adăugat un ":" și un "%".
Desenați un câmp text pe scenă și setați următoarele proprietăți în panoul "POZIȚIE ȘI SIZE".
Dă acest TextField numele de instanță "timer_txt"; asigurați-vă că tipul este setat la "Text clasic" și respectiv "Text dinamic".
Acest TextField va fi utilizat pentru a afișa momentul în care filmul începe mai întâi.
Acum trebuie să proiectăm bara de progres.
Mergi la Insert> Simbol nou. Dați-i numele "ProgressContainer" și asigurați-vă că "Export for Actionscript" este bifat și că Clasa este setată la "ProgressContainer".
Mergi la Fereastră> Componente și trageți o componentă ProgressBar în clipul video.
Setați proprietățile ProgressBar la următoarele.
Sub "Parametrii componentelor" setați modul la "manual".
Dați ProgressBar numele instanței "pb".
Selectați instrumentul Text și asigurați-vă că sunt setate următoarele proprietăți în panoul "CHARACTER".
Desenați un TextField în clipul video.
Setați următoarele proprietăți pe TextField.
Dă acestui TextField numele de instanță "progress_txt".
Acum puteți închide acest film.
Acum vom proiecta textul în creștere și decolorare, care va fi afișat după ce a trecut tot timpul.
Mergeți la Insert> New Symbol. Dați-i numele "GrowFadeText" și asigurați-vă că "Export for Actionscript" este bifat și clasa este setată la "GrowFadeText".
Selectați instrumentul Text și asigurați-vă că următoarele proprietăți sunt setate în panoul "Caracter".
Trageți un TextField în MovieClip și setați următoarele proprietăți.
Introduceți textul "TIMER COMPLETE" în textField. Acum puteți închide acest film.
Acum vom proiecta un clip video care alunecă din stânga. Selectați instrumentul dreptunghi și setați culoarea alb. Trageți un dreptunghi din partea stângă sus a scenei spre dreapta-jos.
Selectați dreptunghiul pe care tocmai l-ați tras afară și apăsați pe F8. Dați-i numele "countContainer". Asigurați-vă că "Export pentru Actionscript este bifat și că Clasa este setată la" countContainer ".
Setați următoarele proprietăți în MovieClip.
Faceți dublu clic pentru a intra în interiorul filmului.
Selectați instrumentul Text și asigurați-vă că în panoul "CHARACTER" sunt setate următoarele proprietăți.
Trageți un câmp de text pe scenă și setați următoarele proprietăți pe acesta.
Dați acestui TextField numele de instanță "timer_txt" și asigurați-vă că tipul este setat la "Text Classic" și "Text Input" respectiv.
Din nou, selectați instrumentul Text și trageți un TextField pe scenă. Apoi setați următoarele proprietăți.
Dați acestui TextField numele de instanță "instructions_txt" și asigurați-vă că tipul este setat la "Text clasic" și respectiv "Text de intrare".
Mergeți la Fereastră> Componente și trageți trei butoane în interiorul acestui clip.
Dați primul buton numelui de instanță "countDown_btn" și setați următoarele proprietăți pe el.
Dați celui de-al doilea buton denumirea instanței "cancel_btn" și setați următoarele proprietăți.
Dați celui de-al treilea buton denumirea de instanță "countUp_btn" și setați următoarele proprietăți.
Acum puteți închide filmul.
Acum, când avem UI Designed putem scrie codul pentru filmul principal.
Dacă urmăriți împreună, ștergeți toate acțiunile ActionScript din "Main.as" pe care le-ați creat în pasul 9. Asta a fost pentru testarea; acum avem nevoie de un cod care să funcționeze cu noua noastră interfață.
Aici vom deschide declarația pachetului și vom importa clasele pe care le vom folosi.
Adăugați următoarele la "Main.as".
pachet import flash.display.MovieClip; import fl.controls.Button; import flash.text.TextField; import flash.events.TimerEvent; importul flash.events.MouseEvent; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import CountTimer; import com.greensock.TweenLite; importul flash.events.Event; import fl.controls.ProgressBar;
Aici declarăm variabilele noastre și codificăm Constructorul.
Adăugați următoarele "Main.as"
public class Main extinde MovieClip // Un array pentru a ține minutele și secundele în elementele [0] și [1] private var timeArray: Array; // Numărul nostru countTimer private var countTimer: CountTimer; // Un boolean care ne spune dacă acesta este primul cronometru // (cel folosit atunci când începe primul film) private var firstTimer: Boolean = true; // Direcția timerului nostru poate fi "sus" sau "în jos" direcția var privată: String; // MovieClip care conține textul pe care îl creștem și estompăm privat var growFadeText: GrowFadeText; // MovieClip care ne deține progressBar privat var progressContainer: ProgressContainer; // Minutele private var min: int; // A doua privată var sec: int; funcția publică Main () min = 1; sec = 0; countTimer = număr nou CountTimer (min, sec, "jos", timer_txt); timer_txt.text = "1:00"; countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); setupButtons (); addProgressContainer (0,70, "în jos"); countTimer.start (); stage.addEventListener (Event.ENTER_FRAME, updateProgress); cancel_btn.addEventListener (MouseEvent.CLICK, moveContainer);
Mai întâi am înființat min și sec variabile și să le treacă la countTimer; apoi setați direcția la "jos" și setați TextField țintă la timer_txt.
Apoi, setăm un text prestabilit pentru TextField, adăugăm un text TIMER_COMPLETE la Timer, executați o funcție pentru a configura butoanele, a adăuga ProgressBar, a porni Timer-ul și a adăuga ENTER_FRAME ascultător de evenimente la scenă (pe care îl vom folosi pentru a actualiza bara de progres) și, în final, adăugați o CLIC eveniment ascultător al nostru cancel_btn.
timerComplete () FuncţieAdăugați următoarele la "Main.as".
funcția privată a temporizatoruluiComplete (e: TimerEvent): void addGrowFadeText (154,130); dacă (firstTimer == true) TweenLite.to (creștereFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: moveContainer); altceva TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: showTheControls);
Aici adăugăm textul pe scenă apelând addGrowFadeText () vom examina această funcție în scurt timp prima data variabilă pentru a vedea dacă acesta este primul cronometru, dacă se utilizează tweenLite pentru a crește și estompa textul și pentru a apela moveContainer atunci când animația se termină.Dacă nu este primul cronometru, atunci vom folosi din nou tweenLite pentru a crește și să estompeze textul, dar sunați la showTheControls () după ce animația se termină. Vom examina moveContainer și showTheControls funcții în scurt timp.
setupButtons () FuncţieAdăugați următoarele la "Main.as"
funcția privată setupButtons (): void countContainer.countDown_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.countUp_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.cancel_btn.addEventListener (MouseEvent.CLICK, restoreControls); countContainer.instructions_txt.text = "Introduceți ora în format 1:30 apoi apăsați butonul CountDown sau CountUp"; // Nu dorim ca utilizatorul să poată edita textul countContainer.instructions_txt.selectable = false;
Aici adaugam cateva EventListeners la butoanele noastre, setati textul pentru noi instructions_txt și setați-l astfel încât utilizatorul să nu poată selecta sau edita textul. Am folosit un TextField aici pentru a menține acest tutorial deja lung, mai scurt, dar probabil că doriți să utilizați o componentă de etichetă aici și să o stylizați cu un obiect TextFormat.
addProgressContainer () FuncţieAdăugați următoarele la "Main.as"
funcția privată addProgressContainer (xPos: int, yPos: int, dir: String): void progressContainer = nou ProgressContainer (); progressContainer.x = xPos; progressContainer.y = yPos; stage.addEventListener (Event.ENTER_FRAME, updateProgress); addChild (progressContainer); dacă (dir == "jos") progressContainer.pb.direction = "stânga"; altceva progressContainer.pb.direction = "dreapta";
Aici vom crea un nou ProgressContainer și îl vom seta X și y proprietăți de către xPos și yPos parametrii care sunt transmise in.Apoi adauga un ENTER_FRAME ascultător de evenimente care apelează updateProgress () funcția, și adăugăm progressContainer la scenă.În cele din urmă, verificăm dir parametru pentru a vedea dacă este egal cu "în jos"; dacă este setat direcția ProgressBar la "stânga", altfel am setat direcția ProgressBar la "right".
removeProgressContainer () FuncţieAdăugați următoarele la "Main.as"
funcția privată removeProgressContainer (): void if (progressContainer! = null) stage.removeEventListener (Event.ENTER_FRAME, updateProgress); removeChild (progressContainer); progressContainer = null;
Aici verificăm dacă progressContainer există; dacă nu, atunci eliminăm ENTER_FRAME a ascultătorului evenimentului de pe scenă, astfel încât acesta să nu continue să ruleze. Apoi scoatem progressContainer din scenă și îl setăm pe nul deoarece am terminat cu asta.
updateProgress () FuncţieAdăugați următoarele la "Main.as".
funcția privată updateProgress (e: Event): void progressContainer.progress_txt.text = countTimer.getProg (). toString () + "%"; progressContainer.pb.setProgress (countTimer.getTimeLoaded (), countTimer.getTimeTotal ());
Aici am setat progress_txtpentru a arăta progresul timerului nostru. Folosim countTimers getProg () metoda care returneaza un intreg a procentului din timpul trecut. Din moment ce returneaza un int folosim AS3's built in toString () pe aceasta, și adăugați un semn "%" la acesta.
Apoi sunăm setProgress () metodei componentei ProgressBar pe ProgressBar (pb). Intrăm countTimer.getTimeLoaded () și countTimer.getTimeTotal () care returnează numere întregi. Pentru a afla mai multe despre componenta ProgressBar, consultați introducerea rapidă a componentei ProgressBar.
addGrowFadeText () FuncţieAdăugați următoarele la "Main.as".
funcția privată addGrowFadeText (xPos: int, yPos: int) growFadeText = new GrowFadeText (); growFadeText.x = xPos; cresFadeText.y = yPos; addChild (growFadeText);
Aici vom crea o nouă instanță a GrowFadeText, setați-o X și y proprietățile specificate, apoi adăugăm-o în scenă.
removeGrowFadeText () FuncţieAdăugați următoarele la "Main.as".
funcția privată removeGrowFadeText (): void if (growFadeText! = null) removeChild (growFadeText); growFadeText = null;
Aici verificăm dacă growFadeText există. Dacă nu, îl scoatem din scenă și l-am setat la nul.
moveContainer () FuncţieAdăugați următorul text în "Main.as".
funcția privată moveContainer (e: Event = null): void countTimer.stop (); removeChild (timer_txt); removeChild (cancel_btn); removeGrowFadeText (); removeProgressContainer (); countContainer.cancel_btn.visible = false; firstTimer = false; TweenLite.to (countContainer, 1, x: 0);
Aici oprim cronometrul și eliminăm timer_txt și cancel_btn. Apoi ne sunăm removeGrowFadeText () și removeProgressContainer () funcții, setați cancel_btn în cadrul countContainer să fie invizibil, setați prima data variabil la fals, și glisați countContainer în utilizarea TweenLite.
showControls () FuncţieAdăugați următoarele la "Main.as":
funcția privată showTheControls (): void showControls (); removeProgressContainer (); countTimer.stop (); countContainer.timer_txt.text = ""; countContainer.timer_txt.text = "";
Aici numim showControls , pe care o vom examina în curând. Apoi sunăm removeProgressContainer (), opriți cronometrul și resetați TextField-urile noastre pentru a fi goale.
doTimer () FuncţieAdăugați următoarele la "Main.as":
funcția privată doTimer (e: MouseEvent): void if (e.target == countContainer.countDown_btn) direcția = "jos"; altfel direction = "up"; dacă (countContainer.timer_txt.text! = "") timeArray = countContainer.timer_txt.text.split (":"); min = timeArray [0]; sec = timeArray [1]; countTimer = număr nou CountTimer (min, sec, direcție, countContainer.timer_txt); countTimer.start (); countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); countTimer.addEventListener (TimerEvent.TIMER, updateProgress); hideControls (); addProgressContainer (0,70, direcție); Mai întâi verificăm pentru a vedea ce buton a fost apăsat countDown_btn a fost presat am setat direcţie variabilă la "în jos" altfel am setat direcţie variabilă până la "sus". Mai jos verificăm să ne asigurăm timer_txt nu este gol. Dacă nu este atunci vom folosi Despică() pentru a pune minutele și secundele în timeArray. Despică() funcția ia un șir și o separă de ceea ce îl transmiteți ca parametru - aici am folosit coloana (:) - și apoi adăugăm fiecare "bucată" în matrice. Deci, dacă ai intrat "1:45", atunci elementul matricei [0] ar fi "1"; elementul [1] ar fi "45".
Apoi am setat sec și min variabile.
Apoi vom crea o nouă instanță a countTimer și treceți în min,sec,dir,și TextField de utilizat.
Apoi adăugăm două TimerEvent ascultători care ne sună timerComplete () și updateProgress () funcții.
În cele din urmă numim hideControls () funcția și adăugați progressContainer spre scena.
showControls () FuncţieAdăugați următoarele la "Main.as".
funcția privată showControls (): void countContainer.instructions_txt.visible = true; countContainer.countDown_btn.visible = true; countContainer.countUp_btn.visible = true; countContainer.cancel_btn.visible = false;
Aici am setat pur și simplu instruction_txt,countDown_btn,și countUp_btn să fie vizibilă. Apoi am setat cancel_btn a fi învizibil.
hideControls () FuncţieAdăugați următoarele la "Main.as".
funcția privată hideControls (): void countContainer.instructions_txt.visible = false; countContainer.countDown_btn.visible = false; countContainer.countUp_btn.visible = false; countContainer.cancel_btn.visible = true;
Acesta este opusul funcției anterioare; aici am setat setul instruction_txt,countDown_btn,și countUp_btn să fie invizibil. Apoi am setat cancel_btn să fie vizibilă.
restoreControls () FuncţieAdăugați următoarele la "Main.as".
funcția privată restoreControls (e: Event) showTheControls (); countTimer.stop ();
Aici numim showControls () și opriți cronometrul.
Adăugați următoarele la "Main.as"
// Închideți clasa // Închideți pachetul
Aici închidem clasa și pachetul nostru.
Deși nu este absolut necesar, setați Test variabil la fals în "CountTimer" .as ".
Asigurați-vă că Clasa de documente este setată la "Main" și testați filmul.
Acum avem o clasă versatilă Timer care poate fi utilizată pentru orice număr de lucruri, de la limitele de timp ale testelor până la stabilirea timpilor pentru nivelurile jocurilor.
Sper că ați găsit acest tutorial util și mulțumesc pentru lectură!
