Share
Durante este tutorial, demostraré cómo hacer un temporizador personalizado que admita la cuenta regresiva hacia arriba o hacia abajo a un tiempo específico.
En la demostración a continuación, verá la cuenta regresiva desde 1:00, una barra de progreso que rastrea el progreso del temporizador y un botón de cancelación.
Una vez que finaliza la cuenta regresiva desde la 1:00, o presiona el botón de cancelar, un Clip de película se desliza desde la derecha. Este Clip de película le permite ingresar el tiempo deseado y determina si tiene el tiempo de cuenta ascendente o descendente. Luego se adjuntará una barra de progreso que hará un seguimiento del progreso del tiempo. Una vez que se complete el tiempo, o presione el botón de cancelar, podrá ingresar un nuevo tiempo.
Aquí escribiremos la clase de temporizador personalizada que impulsará nuestra película principal..
Vaya a Archivo> Nuevo y seleccione Clase de Actionscript 3.0. Guarde este archivo como "CountTimer.as".
Aquí abrimos el paquete e importamos las clases que necesitaremos para escribir esta clase.
Agregue lo siguiente a "CountTimer.as"
package // Necesario para el temporizador import flash.utils.Timer; import flash.events.TimerEvent; // Actualizaremos este TextField con el tiempo import flash.text.TextField;
Aquí declararemos las variables que necesitará la clase y codificaremos la función constructora.
Agregue lo siguiente a "CountTimer.as".
clase pública CountTimer extiende el temporizador // El campo de texto donde la hora actualizada es privada var targetText: TextField; // La dirección del temporizador, es decir, "arriba" o "abajo" dirección privada var: Cadena; // Cuántos minutos tiene el temporizador privado var minutes: int; // Cuántos segundos tiene el temporizador privado var segundos: int; // Usado en nuestro cálculo para actualizar el temporizador privado var totalSeconds: int; // La cantidad total de tiempo = (Minutos + Segundos) private var timeTotal; // Cuánto tiempo ha pasado privado var timeLoaded = 0; // Establezca en verdadero para probar la prueba de var privado del temporizador: Boolean = falso; función pública CountTimer (min: int, sec: int, dir: String, targetTextField: TextField = null) minutes = int (min * 60); segundos = int (sec); tiempo total = minutos + segundos; super (1000, tiempo total); if (dir == "down") totalSeconds = minutes + seconds; else totalSeconds = 0; if (targetTextField! = null) targetText = targetTextField; direccion = dir;
Aquí declaramos algunas variables que necesitamos para nuestra clase..
La función constructora toma cuatro parámetros; son los siguientes:
Accentsconagua
min: Un valor entero que representa cuántos minutos desea que tenga el temporizador.segundo: Un valor entero que representa cuántos segundos desea que tenga el temporizador.dir: Una cadena que representa la dirección del contador puede ser una de las siguientes: "arriba" o "abajo".targetTextField: Un campo de texto que se usará para mostrar la hora actualizada (esto es opcional).Dentro de la función constructora ponemos la minutos variable igual al valor especificado de min * 60 (ya que 1 minuto es igual a 60 segundos).
Luego fijamos el segundos variable igual a la segundo.
A continuación ponemos la tiempo total variable igual a minutos + segundos.
Entonces llamamos súper() -- que ejecutan el código de la función constructora de la Minutero clase - pase en 1000 milisegundos, y la tiempo total variable. Al utilizar 1000 milisegundos, le indicamos al temporizador que marque una vez por segundo y que pase tiempo total Le decimos al temporizador cuántas veces disparar..
A continuación comprobamos si el dir El parámetro es igual a "arriba" o "abajo" y establece el totalsegundos variable correspondiente. Los segundos totales serán utilizados en nuestro timeHandler () función. Incrementaremos o disminuiremos esto en 1 cada vez que el temporizador se dispara.
Luego verificamos si el usuario ha pasado o no un TextField al constructor y establece el targetText variable si lo hicieran; Esto será usado para mostrar el tiempo..
Finalmente establecemos la dirección variable a la dirección que el usuario pasó en.
comienzo() FunciónAquí codificamos el comienzo() función para nuestro temporizador.
Agregue lo siguiente al "CountTimer.as".
anular la función pública start (): void super.start (); addEventListener (TimerEvent.TIMER, timerHandler);
Debido a que extendimos Timer estamos anulando el Timer existente comienzo() método. Aquí simplemente llamamos Super inicio() (que ejecuta el código de la clase Timer comienzo() Método) y agregue un EventListener para detectar cuándo el temporizador marca.
temporizador Handler FunciónAquí codificamos nuestra timerHandler () función. Aquí es donde actualizamos nuestro tiempo y lo mostramos. Esta función se llama una vez cada segundo.
Agregue lo siguiente a la clase CountTimer.
función privada timerHandler (e: TimerEvent): void // Actualizar nuestro tiempo Loaded variable timeLoaded + = 1; if (direction == "up") // totalSeconds is = 0, para empezar. Le añadimos 1. totalSeconds ++; else // totalSeconds = theNumber of seconds agregando min y sec; restamos 1 de ella totalSegundos--; // ¿Cuántos segundos quedan? segundos = totalSegundos% 60; // Cuántos minutos quedan minutos = Math.floor (totalSeconds / 60); // Los minutos y segundos para mostrar en el campo de texto. var minutesDisplay: String = (minutos < 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);
Dentro de esta función actualizamos nuestro timeLoaded variable, que se utiliza para realizar un seguimiento del progreso de cuánto tiempo ha pasado.
A continuación comprobamos si dirección es igual a "arriba" o "abajo" y ajustar nuestra totalsegundos variable en consecuencia.
A continuación, determinamos cuántos segundos y minutos quedan; rellenar el minutosDisplay y segundosDisplay con un cero extra si es necesario; actualizar el campo de texto (si se pasó uno al constructor); y opcionalmente rastrear el tiempo si hemos establecido nuestro prueba variable a verdadero (útil para probar si no establece un TextField).
El cálculo utilizado para determinar la segundos variable toma el resto de total Segundos / 60.El operador% (modulo) nos da el resto..
El cálculo utilizado para determinar la minutos variable simplemente toma el totalsegundos/ 60, redondeado hacia abajo usando Math.floor ().
getTimeTotal () FunciónAquí codificamos una función que simplemente devuelve nuestro tiempo total variable.porque hicimos esta variable privada necesitamos una forma de acceder a ella.
función pública getTimeTotal (): int return timeTotal;
getTimeLoaded () FunciónAquí codificamos una función que devuelve nuestro timeLoaded variable. Una vez más, porque es privado, necesitamos una forma de acceder a él..
función pública getTimeLoaded (): int return timeLoaded;
getProg () FunciónEsta función nos da el progreso de nuestro tiempo. Es la cantidad del tiempo total (que hemos establecido en el constructor) ha pasado. Multiplicamos por 100 para obtener un porcentaje entre 1 y 100..
función pública getProg (): int return Math.floor (timeLoaded / timeTotal * 100);
Aquí comenzamos a diseñar la película principal que utiliza nuestra clase "CountTimer".
Ir Archivo> Nuevo y crea un nuevo documento ActionScript 3.0.
Establece el tamaño a 320x220px.
Guarde este documento como "Timer.fla". Ir Archivo> Nuevo y elija la clase de Actionscript 3.0.
Guarde este archivo como "Main.as". Vamos a probar nuestra clase CountTimer, así que agregue lo siguiente a "Main.as".
paquete import flash.display.MovieClip; importar CountTimer; clase pública Main extiende MovieClip var countTimer: CountTimer; función pública Main () countTimer = new CountTimer (1,30, "up"); countTimer.start ();
Asegúrese de configurar el prueba variable en "CountTimer.as" a cierto, y configura la Clase de documento de la película en "Principal".
Presione ctrl-enter y pruebe la película; Debería ver el tiempo trazado en la ventana de resultados..
Aquí comenzamos a diseñar la película principal que utiliza nuestra CountTimer clase.
Usaremos TweenLite en nuestra película, por lo que si no tiene una copia, consígala en greensock.com.
Seleccione la herramienta Texto y asegúrese de que las siguientes propiedades estén configuradas en el panel "PERSONAJE".
Aún en el panel de "Caracteres", haga clic en "Insertar" y asegúrese de que "UpperCase", "LowerCase", "Numerales" estén seleccionados, y debajo de "Incluir también estos caracteres"
que ha agregado un ":" y un "%".
Dibuje un campo de texto en el escenario y configure las siguientes propiedades en el panel "POSICIÓN y TAMAÑO".
Asígnele a este TextField el nombre de instancia "timer_txt"; asegúrese de que el tipo esté configurado en "Texto clásico" y "Texto dinámico" respectivamente.
Este campo de texto se usará para mostrar la hora en que comienza la película por primera vez.
Ahora necesitamos diseñar nuestra barra de progreso..
Ir Insertar> Nuevo Símbolo. Asígnele el nombre "ProgressContainer" y asegúrese de que "Exportar para Actionscript" esté marcado y que la Clase esté configurada en "ProgressContainer".
Ir Ventana> Componentes y arrastre un componente ProgressBar al clip de película.
Establezca las propiedades de ProgressBar en las siguientes.
En "Parámetros de componentes", configure el modo en "manual".
Dale a ProgressBar el nombre de instancia "pb".
Seleccione la herramienta Texto y asegúrese de que las siguientes propiedades en el panel "PERSONAJE" estén configuradas.
Dibuja un campo de texto en el clip de película.
Establecer las siguientes propiedades en el campo de texto.
Asigne a TextField el nombre de instancia "progress_txt".
Ahora puedes cerrar este MovieClip.
Ahora diseñaremos el texto en crecimiento y desvanecimiento, que se mostrará cuando haya transcurrido todo el tiempo..
Vaya a Insertar> Nuevo símbolo. Déle el nombre "GrowFadeText" y asegúrese de que la opción "Exportar para Actionscript" esté marcada y la Clase esté configurada en "GrowFadeText".
Seleccione la herramienta de texto y asegúrese de que las siguientes propiedades estén configuradas en el panel "Carácter".
Arrastre un TextField al MovieClip y establezca las siguientes propiedades.
Ingrese el texto "TIMER COMPLETE" en el campo de texto. Ahora puedes cerrar este MovieClip.
Ahora diseñaremos el clip de película que se desliza desde la izquierda. Seleccione la herramienta rectángulo y establezca el color en blanco. Arrastra un rectángulo desde la parte superior izquierda del escenario hasta la parte inferior derecha.
Seleccione el rectángulo que acaba de arrastrar y presione F8.Dele el nombre "countContainer". Asegúrese de que la opción Exportar para Actionscript esté marcada y que la Clase esté configurada en "countContainer".
Establecer las siguientes propiedades en el MovieClip.
Ahora haz doble click para ir al MovieClip..
Seleccione la herramienta Texto y asegúrese de que las siguientes propiedades estén configuradas en el panel "PERSONAJE".
Arrastre un campo de texto al escenario y establezca las siguientes propiedades en él.
Asigne a TextField el nombre de la instancia "timer_txt" y asegúrese de que el tipo esté configurado en "Texto clásico" y "Texto de entrada" respectivamente.
Una vez más, seleccione la herramienta Texto y arrastre un Campo de texto al escenario. A continuación, establezca las siguientes propiedades en él..
Asígnele a TextField el nombre de instancia "instructions_txt" y asegúrese de que el tipo esté configurado en "Texto clásico" y "Texto de entrada" respectivamente.
Vaya a Ventana> Componentes y arrastre tres botones dentro de este MovieClip.
Dé al primer botón el nombre de instancia "countDown_btn" y establezca las siguientes propiedades en él.
Dé al segundo botón el nombre de instancia "cancel_btn" y establezca las siguientes propiedades en él.
Asigne al tercer botón el nombre de instancia "countUp_btn" y establezca las siguientes propiedades en él.
Ahora puedes cerrar el MovieClip.
Ahora que tenemos nuestra interfaz de usuario diseñada, podemos escribir el código para la película principal.
Si está siguiendo a lo largo, elimine todos los ActionScript en "Main.as" que creó en el Paso 9. Eso fue para la prueba; Ahora necesitamos un código que funcione con nuestra nueva interfaz..
Aquí abrimos la declaración del paquete e importamos las clases que usaremos.
Agregue lo siguiente a "Main.as".
paquete import flash.display.MovieClip; importar fl.controls.Button; importar flash.text.TextField; import flash.events.TimerEvent; import flash.events.MouseEvent; importar flash.text.TextFieldType; importar flash.text.TextFieldAutoSize; importar CountTimer; import com.greensock.TweenLite; import flash.events.Event; importar fl.controls.ProgressBar;
Aquí declaramos nuestras variables y codificamos el Constructor..
Agregue lo siguiente al "Main.as"
public class Main extiende MovieClip // Una matriz para contener los minutos y segundos en los elementos [0] y [1] private var timeArray: Array; // Nuestro countTimer private var countTimer: CountTimer; // Un valor booleano que nos dice si este es el primer temporizador // (el que se usa cuando se inicia la película por primera vez) private var firstTimer: Boolean = true; // La dirección de nuestro temporizador puede ser "up" o "down" private var direction: String; // El MovieClip que contiene el texto que crecemos y desvanecemos en privado var growFadeText: GrowFadeText; // El clip de película que contiene la barra privada de progress var progressContainer: ProgressContainer; // Los minutos privados var min: int; // La segunda var privada: int; función pública principal () min = 1; sec = 0; countTimer = new CountTimer (min, sec, "down", timer_txt); timer_txt.text = "1:00"; countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); botones de configuración (); addProgressContainer (0,70, "abajo"); countTimer.start (); stage.addEventListener (Event.ENTER_FRAME, updateProgress); cancel_btn.addEventListener (MouseEvent.CLICK, moveContainer);
Primero configuramos el min y segundo variables y pasarlas al countTimer; luego establecemos la dirección en "abajo" y configuramos el TextField objetivo en timer_txt.
Luego establecemos un texto predeterminado para el campo de texto, agregamos un TIMER_COMPLETE evento al temporizador, ejecute una función para configurar nuestros botones, agregue la barra de progreso, inicie el temporizador y agregue un ENTER_FRAME el detector de eventos a la etapa (que usaremos para actualizar la barra de progreso) y, finalmente, agregar una HACER CLIC oyente de eventos a nuestro cancelar_btn.
timerComplete () FunciónAgregue lo siguiente a "Main.as".
función privada 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);
Aquí añadimos el texto al escenario llamando. addGrowFadeText () Examinaremos esta función en breve. Luego verificamos primer tiempo variable para ver si este es el primer temporizador, si es tweenLite para crecer y desvanecer el texto y llamar al moverContenedor Funciona una vez que la animación se completa. Si no es el primer temporizador, una vez más usamos tweenLite para crecer y desvanecer el texto, pero llamamos al showTheControls () función una vez que la animación completa. Examinaremos la moverContenedor y showTheControls funciona en breve.
botones de configuración () FunciónAgregue lo siguiente a "Main.as"
función privada 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 = "Ingrese la hora en el formato 1:30 y luego presione el botón CountDown o CountUp"; // No queremos que el usuario pueda editar el texto countContainer.instructions_txt.selectable = false;
Aquí agregamos algunos EventListeners a nuestros botones, configuramos el texto para nuestros instrucciones_txt y configúrelo para que el usuario no pueda seleccionar o editar el texto. Utilicé un TextField aquí para acortar este tutorial ya largo, pero probablemente querría usar un componente Label aquí y diseñarlo con un objeto TextFormat.
addProgressContainer () FunciónAgregue lo siguiente a "Main.as"
función privada 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";
Aquí creamos un nuevo progressContainer y configuramos su X y y propiedades por el xPos y yPos parámetros que se pasan en. Luego agregamos un ENTER_FRAME detector de eventos que llama al progreso de actualización() función, y añadimos la progressContainer al escenario. Por fin comprobamos el dir parámetro para ver si es igual a "abajo"; si es así, configuramos la dirección de la Barra de progreso en "izquierda", de lo contrario, configuramos la dirección de la Barra de progreso en "derecha".
removeProgressContainer () FunciónAgregue lo siguiente a "Main.as"
función privada removeProgressContainer (): void if (progressContainer! = null) stage.removeEventListener (Event.ENTER_FRAME, updateProgress); removeChild (progressContainer); progressContainer = null;
Aquí comprobamos si el progressContainer existe Si no lo hace, entonces eliminamos el ENTER_FRAME escucha de eventos desde el escenario para que no continúe ejecutándose. Luego, eliminamos progressContainer del escenario y lo configuramos en nulo ya que hemos terminado con eso.
progreso de actualización() FunciónAgregue lo siguiente a "Main.as".
función privada updateProgress (e: Event): void progressContainer.progress_txt.text = countTimer.getProg (). toString () + "%"; progressContainer.pb.setProgress (countTimer.getTimeLoaded (), countTimer.getTimeTotal ());
Aquí ponemos la progress_txtEl texto para mostrar el progreso de nuestro temporizador. Usamos el contador de temporizador. getProg () método que devuelve un número entero de qué porcentaje del tiempo ha pasado. Desde que devuelve un int usamos AS3 integrado Encadenar() Método en él, y agregue un signo "%" a él.
A continuación llamamos al setProgress () Método del componente ProgressBar en nuestro ProgressBar (pb). Pasamos en countTimer.getTimeLoaded () y countTimer.getTimeTotal () que devuelven números enteros. Para obtener más información sobre el componente ProgressBar, consulte mi Introducción rápida al componente ProgressBar.
addGrowFadeText () FunciónAgregue lo siguiente a "Main.as".
función privada addGrowFadeText (xPos: int, yPos: int) growFadeText = new GrowFadeText (); growFadeText.x = xPos; growFadeText.y = yPos; addChild (growFadeText);
Aquí creamos una nueva instancia de GrowFadeText, configuramos su X y y propiedades como se especifica, y luego lo añadimos a la etapa.
removeGrowFadeText () FunciónAgregue lo siguiente a "Main.as".
función privada removeGrowFadeText (): void if (growFadeText! = null) removeChild (growFadeText); growFadeText = null;
Aquí comprobamos si growFadeText existe Si no lo hace, lo eliminamos del escenario y lo configuramos en nulo.
moveContainer () FunciónAgregue lo siguiente a "Main.as".
función privada moveContainer (e: Event = null): void countTimer.stop (); removeChild (timer_txt); removeChild (cancel_btn); removeGrowFadeText (); removeProgressContainer (); countContainer.cancel_btn.visible = false; firstTimer = falso; TweenLite.to (countContainer, 1, x: 0);
Aquí paramos el temporizador y eliminamos el timer_txt y cancelar_btn. Luego llamamos a nuestro removeGrowFadeText () y removeProgressContainer () funciones, establecer el cancelar_btn dentro del countContainer para ser invisible, configure el primer tiempo variable a falso, y deslice el countContainer en el uso de TweenLite.
showControls () FunciónAgregue lo siguiente a "Main.as":
función privada showTheControls (): void showControls (); removeProgressContainer (); countTimer.stop (); countContainer.timer_txt.text = ""; countContainer.timer_txt.text = "";
Aquí llamamos al showControls Función, que vamos a examinar en breve. A continuación llamamos removeProgressContainer (), detener el temporizador y restablecer nuestros campos de texto para que estén en blanco.
doTimer () FunciónAgregue lo siguiente a "Main.as":
función privada 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, dirección); Primero verificamos para ver qué botón se presionó. Si el countDown_btn fue presionado establecemos el dirección variable a "abajo" de lo contrario el establecemos la dirección variable a "arriba". A continuación comprobamos para asegurarnos timer_txt no está en blanco. Si no lo está, entonces usamos el división() Función para poner los minutos y segundos en el timeArray.los división() La función toma una cadena y la separa por lo que sea que pases como parámetro, aquí usamos los dos puntos (:) y luego agregamos cada "pieza" a la matriz. Así que, si pasaste "1:45", entonces el elemento de la matriz [0] sería "1"; el elemento [1] sería "45".
Luego fijamos el segundo y min variables.
A continuación creamos una nueva instancia del countTimer y pasar en el min,segundo,dir,y el TextField para usar.
Luego agregamos dos TimerEvent oyentes que llaman a nuestro timerComplete () y progreso de actualización() funciones.
Finalmente llamamos al hideControls () función y añadir el progressContainer al escenario.
showControls () FunciónAgregue lo siguiente a "Main.as".
función privada showControls (): void countContainer.instructions_txt.visible = true; countContainer.countDown_btn.visible = true; countContainer.countUp_btn.visible = true; countContainer.cancel_btn.visible = false;
Aquí simplemente establecemos la instrucción_txt,countDown_btn,y countUp_btn ser visible Luego fijamos el cancelar_btn ser envisible.
hideControls () FunciónAgregue lo siguiente a "Main.as".
función privada hideControls (): void countContainer.instructions_txt.visible = false; countContainer.countDown_btn.visible = false; countContainer.countUp_btn.visible = false; countContainer.cancel_btn.visible = true;
Esto es lo contrario de la función anterior; Aquí acabamos de establecer el conjunto del instrucción_txt,countDown_btn,y countUp_btn ser invisible. Luego fijamos el cancelar_btn ser visible.
restoreControls () FunciónAgregue lo siguiente a "Main.as".
función privada restoreControls (e: Event) showTheControls (); countTimer.stop ();
Aquí llamamos al showControls () función y detener el temporizador.
Agregue lo siguiente a "Main.as"
// Cerrar la clase // Cerrar el paquete
Aquí cerramos nuestra clase y paquete..
Aunque no es absolutamente necesario, establece el prueba variable a falso en el "CountTimer" .as ".
Asegúrese de que su Clase de documento esté configurada en "Principal" y pruebe la película.
Ahora tenemos una clase de temporizador versátil que se puede usar para cualquier número de cosas, desde límites de tiempo en las pruebas hasta la configuración de los niveles de los juegos..
Espero que hayas encontrado este tutorial útil y gracias por leerlo.!
