TUTORIAL FLASH : CRONOMETRO FLASH

Donmuerte

En este tutorial voy a explicar como realizar un cronometro, el cual nos puede dar muchos posibles usos como por ejemplo el control del tiempo dentro de nuestros juegos flash.

Como siempre empezar? con la parte f?sica para terminar explicando el c?digo.

1) CAPA DISE?O: Realizar en esta capa el dise?o que mas os guste para vuestro cronometro.

2) CAPA BUT_TXT: En esta capa vamos a meter todos los botones y campos de texto que vamos a utilizar que son:

- Bot?n para reproducir que llevara nombre de instancia: "play_btn".
- Bot?n para parar el tiempo con nombre de instancia: "pause_btn".
- Bot?n para iniciar una nueva cuenta y que estar? identificado por: "stop_btn".
- Campo de texto de tipo din?mico que har? las veces de display de nuestro cronometro. Llevar? nombre de variable: "timer_txt".

3) CAPA ACCIONES

Pasamos ya a la parte del c?digo donde podremos encontrar 4 partes bien diferenciadas:

1? Parte: C?digo para activar cronometro

//Inicializamos cronometro
_root.timer_txt = "00:00:00:00";
_root.play_btn.onPress = function()
{
if(!_root.timing) {
if (_root.paused) {
//Restamos el tiempo transcurrido
//durante la pausa
_root.startTime = getTimer() - _root.elapsedTime;
} else {
//Empezamos la cuenta
_root.startTime = getTimer();
}
//Variables boolaneas
_root.paused = false;
_root.timing = true;
}
}

Lo primero que hacemos es inicializar nuestro campo de texto "timer.txt" a "00:00:00:00" para prepararnos para iniciar la cuenta. A continuaci?n tenemos nuestra primera funci?n que se ejecutara al ser presionado el bot?n "play_but" y que pondr? el cronometro en marcha. Primero comprobamos si el cronometro esta en marcha o no ( if(!_root.timing) ). Si esta en marcha no hace nada y si esta parado comprobamos si esta pausado o no ( if ( _root.paused ) ) . Si esta parado es que la cuenta ya fue iniciada anteriormente y tendremos que restar el tiempo transcurrido durante la pausa que se encuentra dentro de _root.elapsedTime y meteremos el tiempo resultante en startTime. Si no estaba pausado simplemente empezamos la cuenta con la funci?n de la biblioteca de flash getTimer() que lo ?nico que hace es darnos el tiempo transcurrido en milisegundos desde que se ejecuta la funci?n. Las ultimas variables que salen, son dos variables de tipo l?gico y nos ayudaran a saber si nuestro cronometro esta parado o en reproducci?n.

paused = true : parado ; paused = false : no parado ; timing = true : reproduciendo ; timing = false : parado

2? parte : C?digo para pausar cronometro

_root.pause_btn.onPress = function() {
//Solamente para si se esta reproduciento (timing = true)
if(_root.timing) {
_root.timing = false;
_root.paused = true;
}
}

Simplemente actualizamos nuestras variables bool para conseguir pausar la cuenta.

3? parte : C?digo para resetear cronometro

_root.stop_btn.onPress = function() {
//Para el tiempo
_root.timing = false;
//Resetea la variable pausa
_root.paused = false;
//Resetea el dispaly (timer_txt)
_root.timer_txt = "00:00:00:00";
}

Reseteamos variables l?gicas y display ( timer_txt ).

4? parte : C?digo para c?lculos

_root.onEnterFrame = function() {
if (timing) {
//Calcula valores
elapsedTime = getTimer()-startTime;
//horas
elapsedHours = Math.floor(elapsedTime/3600000);
remaining = elapsedTime-(elapsedHours*3600000);
//minutos
elapsedM = Math.floor(remaining/60000);
remaining = remaining-(elapsedM*60000);
//segundos
elapsedS = Math.floor(remaining/1000);
remaining = remaining-(elapsedS*1000);
//Milesimas
elapsedH = Math.floor(remaining/10);
//Salida del display
//A?ade 0 a los numeros si el numero
//es menor que 10
if (elapsedHours<10) {
hours = "0"+elapsedHours.toString();
} else {
hours = elapsedHours.toString();
}
if (elapsedM<10) {
minutes = "0"+elapsedM.toString();
} else {
minutes = elapsedM.toString();
}
if (elapsedS<10) {
seconds = "0"+elapsedS.toString();
} else {
seconds = elapsedS.toString();
}
if (elapsedH<10) {
hundredths = "0"+elapsedH.toString();
} else {
hundredths = elapsedH.toString();
}
//salida
_root.timer_txt = hours+":"+minutes+":"+seconds+":"+hundredths;
}
};

En la primera l?nea controlamos el tiempo transcurrido y a continuaci?n empezamos a realizar operaciones para pasar el tiempo dado en milisegundos al formato deseado.

1 hora = 3600000 ms.
1 minuto = 60000 ms.
1 segundo = 1000 ms.

A continuaci?n realizamos una serie de condicionales que comprueban si alguno de los d?gitos es menor que 10 para anteponer un 0 y conseguir de esta manera dar un formato mas atractivo a nuestro cronometro.

Finalmente formamos una cadena de caracteres que unir? todas las variables de inter?s y la asignara a nuestro campo din?mico timer.txt _root.timer_txt = hours+":"+minutes+":"+seconds+":"+hundredths;