Share
Durante questo tutorial dimostrerò come creare un timer personalizzato che supporti il conteggio in su o in giù per un determinato periodo di tempo.
Nella demo qui sotto vedrai il conto alla rovescia da 1:00, una barra di avanzamento che tiene traccia dell'avanzamento del timer e un pulsante di annullamento.
Una volta terminato il conto alla rovescia dall'1: 00 o si preme il pulsante Annulla, una clip filmato scorre da destra. Questo filmato consente di inserire il tempo desiderato e determina se il conteggio del tempo aumenta o diminuisce. Una barra di avanzamento verrà quindi allegata e seguirà il progresso del tempo. Una volta che il tempo è finito, o si preme il pulsante Annulla, sarà possibile inserire una nuova ora.
Qui scriveremo la classe timer personalizzata che guiderà il nostro film principale.
Vai su File> Nuovo e scegli Classe Actionscript 3.0. Salva questo file come "CountTimer.as".
Qui apriamo il pacchetto e importiamo le classi di cui avremo bisogno per scrivere questa classe.
Aggiungi quanto segue al "CountTimer.as"
pacchetto // Necessario per il Timer import flash.utils.Timer; import flash.events.TimerEvent; // Aggiorneremo questo TextField con l'importazione time flash.text.TextField;
Qui dichiareremo le variabili di cui la classe avrà bisogno e codificheremo la funzione di costruzione.
Aggiungi quanto segue al "CountTimer.as".
la classe pubblica CountTimer estende Timer // Il campo di testo in cui l'ora aggiornata diventa privata var targetText: TextField; // La direzione del timer i.e "up" o "down" private var direction: String; // Quanti minuti il timer ha minuti var privati: int; // Quanti secondi il timer ha private var secondi: int; // Utilizzato nel nostro calcolo per aggiornare il timer private var totalSeconds: int; // La quantità totale di tempo = (Minuti + Secondi) private var timeTotal; // Per quanto tempo ha passato private var timeLoaded = 0; // Impostato su true per testare il timer var privato test: Boolean = false; funzione pubblica CountTimer (min: int, sec: int, dir: String, targetTextField: TextField = null) minutes = int (min * 60); seconds = int (sec); timeTotal = minuti + secondi; super (1000, timeTotal); if (dir == "down") totalSeconds = minuti + secondi; else totalSeconds = 0; if (targetTextField! = null) targetText = targetTextField; direction = dir;
Qui abbiamo dichiarato alcune variabili che abbiamo bisogno per la nostra classe.
La funzione di costruzione prende quattro parametri; sono come segue:
Accentsconagua
min: Un valore intero che rappresenta quanti minuti si desidera che il timer abbia.secondo: Un valore intero che rappresenta quanti secondi si desidera che il timer abbia.dir: Una stringa che rappresenta la direzione del contatore può essere una delle seguenti: "su" o "giù".targetTextField: Un campo di testo che verrà utilizzato per mostrare il tempo aggiornato (questo è opzionale).All'interno della funzione di costruzione impostiamo il minuti variabile uguale al valore specificato di min * 60 (poiché 1 minuto equivale a 60 secondi).
Quindi impostiamo il secondi variabile uguale al secondo.
Quindi impostiamo il timeTotal variabile uguale a minuti + secondi.
Quindi chiamiamo super() -- che esegue il codice dalla funzione di costruzione del file Timer classe - passare in 1000 millisecondi e il timeTotal variabile. Usando 1000 millisecondi, diciamo al timer di spuntare una volta ogni secondo e passando dentro timeTotal diciamo al timer quante volte sparare.
Successivamente verificheremo se il dir parametro è uguale a "up" o "down" e imposta il parametro totalseconds variabile di conseguenza. I secondi totali saranno utilizzati nel nostro timeHandler () funzione. Aumenteremo o diminuiremo di 1 ogni volta che il timer si spegne.
Quindi controlliamo se l'utente ha passato o meno in un campo di testo al costruttore e ha impostato il file targetText variabile se lo facessero; questo sarà usato per visualizzare l'ora.
Finalmente abbiamo impostato il direzione variabile nella direzione in cui l'utente è passato.
inizio() FunzioneQui codifichiamo il inizio() funzione per il nostro timer.
Aggiungi quanto segue al "CountTimer.as".
override public function start (): void super.start (); addEventListener (TimerEvent.TIMER, timerHandler);
Poiché abbiamo esteso il timer, ignoriamo l'esistente del timer inizio() metodo. Qui semplicemente chiamiamo super.start () (che esegue il codice dalla classe Timer inizio() metodo) e aggiungere un EventListener per rilevare quando il timer esegue il tick.
timerHandler FunzioneQui codifichiamo il nostro timerHandler () funzione. Qui è dove aggiorniamo il nostro tempo e lo mostriamo. Questa funzione è chiamata una volta al secondo.
Aggiungere quanto segue alla classe CountTimer.
funzione privata timerHandler (e: TimerEvent): void // Aggiorna il nostro tempo Loaded variable timeLoaded + = 1; if (direction == "up") // totalSeconds = 0, per iniziare. Aggiungiamo 1 ad esso. totalseconds ++; else // totalSeconds = theNumber of seconds aggiungendo min e sec; sottraiamo 1 da esso totaleSecondi--; // In che secondi possono rimanere. seconds = totalSeconds% 60; // Quanti minuti rimangono minuti = Math.floor (totalSeconds / 60); // I minuti e i secondi da visualizzare nel TextField. var minutesDisplay: String = (minuti < 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);
All'interno di questa funzione aggiorniamo i nostri timeLoaded variabile, che viene utilizzata per tenere traccia dell'avanzamento di quanto tempo è trascorso.
Quindi controlliamo se direzione è uguale a "su" o "giù" e regola il nostro totalseconds variabile di conseguenza.
Determiniamo poi quanti secondi e minuti rimangono; pad il minutesDisplay e secondsDisplay con uno zero in più se necessario; aggiornare il campo di testo (se ne è stato passato uno nel costruttore); e facoltativamente traccia il tempo se abbiamo impostato il nostro test variabile su true (utile per i test se non si imposta un campo di testo).
Il calcolo utilizzato per determinare il secondi variabile prende il resto di totalseconds / 60.L'operatore% (modulo) ci dà il resto.
Il calcolo utilizzato per determinare il minuti variabile prende semplicemente il totalseconds/ 60, arrotondato per difetto usando Math.floor ().
getTimeTotal () FunzioneQui codifichiamo una funzione che restituisce semplicemente il nostro timeTotal variabile. Poiché abbiamo reso privata questa variabile, abbiamo bisogno di un modo per accedervi.
funzione pubblica getTimeTotal (): int return timeTotal;
getTimeLoaded () FunzioneQui codifichiamo una funzione che restituisce il nostro timeLoaded variabile. Ancora una volta perché è privato, abbiamo bisogno di un modo per accedervi.
funzione pubblica getTimeLoaded (): int return timeLoaded;
getProg () FunzioneQuesta funzione ci dà il progresso del nostro tempo. È la quantità di tempo totale (che abbiamo impostato nel costruttore). Moltiplichiamo per 100 quindi otteniamo una percentuale tra 1 e 100.
funzione pubblica getProg (): int return Math.floor (timeLoaded / timeTotal * 100);
Qui iniziamo a progettare il film principale che utilizza la nostra classe "CountTimer".
Vai a File> Nuovo e creare un nuovo documento ActionScript 3.0.
Imposta la dimensione su 320x220px.
Salva questo documento come "Timer.fla". Vai a File> Nuovo e scegli Classe Actionscript 3.0.
Salva questo file come "Main.as". Stiamo andando a testare la nostra classe CountTimer, quindi aggiungi quanto segue al "Main.as".
package import flash.display.MovieClip; import CountTimer; public class Main estende MovieClip var countTimer: CountTimer; funzione pubblica Main () countTimer = new CountTimer (1,30, "up"); countTimer.start ();
Assicurati di aver impostato il test variabile in "CountTimer.as" in vero, e imposta la Document Class del film su "Main".
Premi ctrl-enter e prova il film; dovresti vedere l'ora tracciata nella finestra Output.
Qui iniziamo a progettare il film principale che usa il nostro CountTimer classe.
Useremo TweenLite nel nostro film quindi se non hai una copia, prendilo da greensock.com.
Seleziona lo strumento Testo e assicurati che le seguenti proprietà siano impostate nel pannello "CARATTERE".
Sempre nel pannello "Carattere", fai clic su "Incorpora" e assicurati che "UpperCase", "LowerCase", "Numerals" siano selezionati e in "Also include these characters"
che hai aggiunto un ":" e un "%".
Disegna un campo di testo sul palco e imposta le seguenti proprietà sotto il pannello "POSIZIONE e DIMENSIONE".
Assegna a questo campo di testo il nome dell'istanza "timer_txt"; assicurati che il tipo sia impostato su "Testo classico" e "Testo dinamico" rispettivamente.
Questo campo di testo verrà utilizzato per mostrare l'ora in cui inizia il film.
Ora abbiamo bisogno di progettare la nostra barra di avanzamento.
Vai a Inserisci> Nuovo simbolo. Dagli il nome "ProgressContainer" e assicurati che "Export for Actionscript" sia selezionato e che la classe sia impostata su "ProgressContainer".
Vai a Finestra> Componenti e trascinare un componente ProgressBar nel clip filmato.
Impostare le proprietà di ProgressBar come segue.
Sotto "Parametri componente" imposta la modalità su "manuale".
Assegna a ProgressBar il nome dell'istanza "pb".
Seleziona lo strumento Testo e assicurati che le seguenti proprietà sotto il pannello "CARATTERE" siano impostate.
Disegna un campo di testo nel clip filmato.
Imposta le seguenti proprietà su TextField.
Assegna a questo campo di testo il nome dell'istanza "progress_txt".
Ora puoi chiudere questo Movie Clip.
Ora progetteremo il testo in crescita e in dissolvenza, da visualizzare quando è trascorso tutto il tempo.
Vai a Inserisci> Nuovo simbolo.Guarda il nome "GrowFadeText" e assicurati che "Esporta per Actionscript" sia selezionato e che la classe sia impostata su "GrowFadeText".
Seleziona lo strumento Testo e assicurati che le seguenti proprietà siano impostate nel pannello "Carattere".
Trascina un campo di testo nella MovieClip e imposta le seguenti proprietà.
Inserire il testo "TIMER COMPLETATO" nel campo di testo. Ora puoi chiudere questo Movie Clip.
Ora progetteremo la MovieClip che scorre da sinistra. Seleziona lo strumento rettangolo e imposta il colore su bianco. Trascina un rettangolo in alto a sinistra del palcoscenico in basso a destra.
Seleziona il rettangolo appena trascinato e premi F8. Dagli il nome "countContainer". Assicurati che "Export for Actionscript" sia selezionato e che la classe sia impostata su "countContainer".
Imposta le seguenti proprietà sulla MovieClip.
Ora fai doppio clic per andare all'interno del MovieClip.
Seleziona lo strumento Testo e assicurati che le seguenti proprietà siano impostate nel pannello "CARATTERE".
Trascina un campo di testo sullo stage e imposta le seguenti proprietà su di esso.
Assegna a questo campo di testo il nome dell'istanza "timer_txt" e assicurati che il tipo sia impostato rispettivamente su "Testo classico" e "Testo di input".
Ancora una volta seleziona lo strumento Testo e trascina un campo di testo sullo stage. Quindi imposta le seguenti proprietà su di esso.
Assegna a questo campo di testo il nome dell'istanza "istruzioni_txt" e assicurati che il tipo sia impostato rispettivamente su "Testo classico" e "Testo di input".
Vai a Finestra> Componenti e trascina tre pulsanti all'interno di questo Movie Clip.
Assegna al primo pulsante il nome dell'istanza "countDown_btn" e imposta le seguenti proprietà su di esso.
Assegna al secondo pulsante il nome dell'istanza "cancel_btn" e imposta le seguenti proprietà su di esso.
Assegna al terzo pulsante il nome dell'istanza "countUp_btn" e imposta le seguenti proprietà su di esso.
Ora puoi chiudere il Movie Clip.
Ora che abbiamo la nostra interfaccia utente, possiamo scrivere il codice per il film principale.
Se si sta seguendo, eliminare tutto il codice ActionScript in "Main.as" creato al punto 9. Questo era per il test; ora abbiamo bisogno di codice che funzioni con la nostra nuova interfaccia.
Qui apriamo la dichiarazione del pacchetto e importiamo le classi che useremo.
Aggiungi quanto segue a "Main.as".
package import flash.display.MovieClip; importare fl.controls.Button; import flash.text.TextField; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; import CountTimer; import com.greensock.TweenLite; import flash.events.Event; importare fl.controls.ProgressBar;
Qui dichiariamo le nostre variabili e codifichiamo il Costruttore.
Aggiungi il seguente il "Main.as"
public class Main extends MovieClip // Un array per contenere i minuti e i secondi negli elementi [0] e [1] private var timeArray: Array; // Our countTimer private var countTimer: CountTimer; // Un booleano che ci dice se questo è il primo timer // (quello usato quando il film inizia per la prima volta) private var firstTimer: Boolean = true; // La direzione del nostro timer può essere "up" o "down" nella direzione var privata: String; // La MovieClip che contiene il testo che creiamo e sbiadisce private var growFadeText: GrowFadeText; // MovieClip che contiene il nostro progressBar private var progressContainer: ProgressContainer; // I minuti private var min: int; // La seconda variante privata: int; funzione pubblica Main () min = 1; sec = 0; countTimer = new CountTimer (min, sec, "down", timer_txt); timer_txt.text = "1:00"; countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); setupButtons (); addProgressContainer (0,70, "down"); countTimer.start (); stage.addEventListener (Event.ENTER_FRAME, UpdateProgress); cancel_btn.addEventListener (MouseEvent.CLICK, moveContainer);
Per prima cosa impostiamo il min e secondo variabili e passali al counttimer; quindi impostiamo la direzione su "giù" e impostiamo il campo di testo di destinazione su timer_txt.
Quindi impostiamo del testo predefinito per il campo di testo, aggiungiamo un TIMER_COMPLETE evento per il timer, eseguire una funzione per impostare i nostri pulsanti, aggiungere la barra di avanzamento, avviare il timer e aggiungere un ENTER_FRAME ascoltatore di eventi sul palco (che useremo per aggiornare la barra di avanzamento) e infine aggiungere un CLIC ascoltatore di eventi al nostro cancel_btn.
timerComplete () FunzioneAggiungi quanto segue a "Main.as".
funzione privata timerComplete (e: TimerEvent): void addGrowFadeText (154,130); if (firstTimer == true) TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: moveContainer); else TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: showTheControls);
Qui aggiungiamo il testo allo stage chiamando addGrowFadeText () esamineremo questa funzione a breve. Verifichiamo quindi il novizio variabile per vedere se questo è il primo timer, se si usa tweenLite per far crescere e sbiadire il testo e chiamare il moveContainer funzione una volta completata l'animazione. Se non è il primo timer, utilizziamo ancora tweenLite per far crescere e sbiadire il testo ma chiamare il showTheControls () funzione una volta completata l'animazione. Esamineremo il moveContainer e showTheControls funzioni a breve.
setupButtons () FunzioneAggiungi quanto segue a "Main.as"
private function 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 = "Immettere l'ora nel formato 1:30 quindi premere il tasto CountDown o CountUp"; // Non vogliamo che l'utente sia in grado di modificare il testo countContainer.instructions_txt.selectable = false;
Qui aggiungiamo alcuni EventListeners ai nostri pulsanti, impostiamo il testo per il nostro instructions_txt e impostarlo in modo che l'utente non possa selezionare o modificare il testo. Ho usato un campo di testo qui per mantenere questo tutorial più lungo più breve, ma probabilmente vorrai usare un componente Label qui e applicarlo con un oggetto TextFormat.
addProgressContainer () FunzioneAggiungi quanto segue a "Main.as"
funzione privata addProgressContainer (xPos: int, yPos: int, dir: String): void progressContainer = new ProgressContainer (); progressContainer.x = xPos; progressContainer.y = yPos; stage.addEventListener (Event.ENTER_FRAME, UpdateProgress); addChild (progressContainer); if (dir == "down") progressContainer.pb.direction = "left"; else progressContainer.pb.direction = "right";
Qui creiamo un nuovo progressContainer e ne impostiamo il suo X e y proprietà di xPos e yPos parametri passati. Aggiungeremo un ENTER_FRAME ascoltatore di eventi che chiama il UpdateProgress () funzione, e aggiungiamo il progressContainer sul palco. Infine controlliamo il dir parametro per vedere se è uguale a "down"; se è possibile impostare la direzione di ProgressBar su "sinistra", altrimenti impostiamo la direzione di ProgressBar su "right".
removeProgressContainer () FunzioneAggiungi quanto segue a "Main.as"
private function removeProgressContainer (): void if (progressContainer! = null) stage.removeEventListener (Event.ENTER_FRAME, updateProgress); removeChild (progressContainer); progressContainer = null;
Qui controlliamo se il progressContainer esiste; se non lo fa, rimuoveremo il ENTER_FRAME ascoltatore di eventi dallo stage in modo che non continui a funzionare. Quindi rimuovere progressContainer dallo stage e impostarlo su nullo dal momento che abbiamo finito con esso.
UpdateProgress () FunzioneAggiungi quanto segue a "Main.as".
private function updateProgress (e: Event): void progressContainer.progress_txt.text = countTimer.getProg (). toString () + "%"; progressContainer.pb.setProgress (countTimer.getTimeLoaded (), countTimer.getTimeTotal ());
Qui impostiamo il progress_txt's testo per mostrare il progresso del nostro timer. Usiamo il counttimer getProg () metodo che restituisce un intero di quale percentuale del tempo è passato. Dal momento che restituisce un int usiamo integrato di AS3 accordare() metodo su di esso e aggiungere un segno "%" ad esso.
Quindi chiamiamo il setProgress () metodo del componente ProgressBar sul nostro ProgressBar (pb). Passiamo dentro countTimer.getTimeLoaded () e countTimer.getTimeTotal () che restituiscono numeri interi. Per ulteriori informazioni sul componente ProgressBar, consultare la mia Introduzione rapida al componente ProgressBar.
addGrowFadeText () FunzioneAggiungi quanto segue a "Main.as".
funzione privata addGrowFadeText (xPos: int, yPos: int) growFadeText = new GrowFadeText (); growFadeText.x = xPos; growFadeText.y = yPos; addChild (growFadeText);
Qui creiamo una nuova istanza di GrowFadeText, impostiamo la sua X e y proprietà come specificato, e quindi lo aggiungiamo allo stage.
removeGrowFadeText () FunzioneAggiungi quanto segue a "Main.as".
funzione privata removeGrowFadeText (): void if (growFadeText! = null) removeChild (growFadeText); growFadeText = null;
Qui controlliamo per vedere se growFadeText esiste. In caso contrario, lo rimuoviamo dallo stage e lo impostiamo su null.
moveContainer () FunzioneAggiungi il seguente a "Main.as".
funzione privata 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);
Qui fermiamo il timer e rimuoviamo il timer_txt e cancel_btn. Quindi chiamiamo il nostro removeGrowFadeText () e removeProgressContainer () funzioni, impostare il cancel_btn all'interno del countContainer per essere invisibile, impostare il novizio variabile a falso, e fai scorrere il countContainer nell'uso di TweenLite.
showControls () FunzioneAggiungi quanto segue a "Main.as":
funzione privata showTheControls (): void showControls (); removeProgressContainer (); countTimer.stop (); countContainer.timer_txt.text = ""; countContainer.timer_txt.text = "";
Qui chiamiamo il showControls funzione, che esamineremo a breve. Quindi chiamiamo removeProgressContainer (), ferma il timer e resetta i nostri campi di testo vuoti.
doTimer () FunzioneAggiungi quanto segue a "Main.as":
funzione privata doTimer (e: MouseEvent): void if (e.target == countContainer.countDown_btn) direction = "down"; else direction = "up"; if (countContainer.timer_txt.text! = "") timeArray = countContainer.timer_txt.text.split (":"); min = timeArray [0]; sec = timeArray [1]; countTimer = new CountTimer (min, sec, direction, countContainer.timer_txt); countTimer.start (); countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); countTimer.addEventListener (TimerEvent.TIMER, UpdateProgress); hideControls (); addProgressContainer (0,70, direzione); Per prima cosa controlliamo per vedere quale pulsante è stato premuto countDown_btn è stato premuto abbiamo impostato il direzione variabile in "down" altrimenti il set è impostato su direzione variabile su "su". Successivamente verifichiamo per accertarci timer_txt non è vuoto. Se non lo è, usiamo il Diviso() funzione per mettere i minuti e i secondi in timeArray.Il Diviso() la funzione prende una stringa e la separa con qualsiasi cosa tu passi come parametro - qui abbiamo usato i due punti (:) - e poi aggiungiamo ogni "pezzo" alla matrice. Quindi, se sei passato "1:45", quindi l'elemento dell'array [0] sarebbe "1"; element [1] sarebbe "45".
Quindi impostiamo il secondo e min variabili.
Quindi creiamo una nuova istanza di countTimer e passare nel min,secondo,dir,e il campo di testo da usare.
Ne aggiungiamo due TimerEvent ascoltatori che chiamano i nostri timerComplete () e UpdateProgress () funzioni.
Alla fine chiamiamo il hideControls () funzione e aggiungere il progressContainer sul palco.
showControls () FunzioneAggiungi quanto segue a "Main.as".
funzione privata showControls (): void countContainer.instructions_txt.visible = true; countContainer.countDown_btn.visible = true; countContainer.countUp_btn.visible = true; countContainer.cancel_btn.visible = false;
Qui semplicemente impostiamo il instruction_txt,countDown_btn,e countUp_btn essere visibile Quindi impostiamo il cancel_btn essere nelvisibile.
hideControls () FunzioneAggiungi quanto segue a "Main.as".
funzione privata hideControls (): void countContainer.instructions_txt.visible = false; countContainer.countDown_btn.visible = false; countContainer.countUp_btn.visible = false; countContainer.cancel_btn.visible = true;
Questo è l'opposto della funzione precedente; qui ci limitiamo a impostare il set il instruction_txt,countDown_btn,e countUp_btn essere invisibile. Quindi impostiamo il cancel_btn essere visibile.
restoreControls () FunzioneAggiungi quanto segue a "Main.as".
funzione privata restoreControls (e: Event) showTheControls (); countTimer.stop ();
Qui chiamiamo il showControls () funzione e ferma il timer.
Aggiungi quanto segue a "Main.as"
// Chiudi la classe // Chiudi il pacchetto
Qui chiudiamo la nostra classe e il pacchetto.
Sebbene non sia assolutamente necessario, impostare il test variabile a falso nel "CountTimer" .as ".
Assicurati che la tua Document Class sia impostata su "Main" e testare il film.
Ora abbiamo una versatile classe di timer che può essere utilizzata per qualsiasi numero di cose, dai limiti di tempo nei test ai tempi di impostazione dei livelli sui giochi.
Spero tu abbia trovato questo tutorial utile e grazie per la lettura!
