Programar Un Cronometro Con Centésimas De Segundo En Flash CS3

Este tutorial es una continuación del tutorial nombrado Programar y diseñar un cronometro. A continuación relatare una pequeña reseña con el fin de modificar el cronometro Programar y diseñar un cronometro. A este nuevo cronometro le agregare dos modificaciones específicamente: la primera es agregar un nuevo botón el, cual tendrá la función de reiniciar el cronometro desde cero. La segunda modificación que te tendrá el cronometro a diferencia del anterior, este contara con un nuevo contador de centésimas de segundo. Sin más que mencionar ¿COMENZAMOS? Good Luck!

1)-. Como ya mencione anteriormente este tutorial parte del tutorial Programar y diseñar un cronometro. Así que partiré modificando el botón de pausa.

a)-. Ubicarte primero en el Símbolo llamado pausa seleccionar el primer fotograma y cambiar el color de relleno a #FF9900.

b)-. Hacer esto no tendrá mayor dificultad.

2)-. Insertar el nuevo símbolo de tipo botón de que consta el documento. Presionar (ctrl. + F8), colocar como nombre al símbolo (reiniciar).

a)-. Después de haberle colocado el nombre al símbolo, seleccionar la opción de Tipo Botón.

3)-. Ubicado en este nuevo símbolo, dibujar en la primera capa un rectángulo de dimensiones de 124.0 * 37.0 pixeles de ancho y alto, el Color de relleno es #660000

a)-. Colocar el rectángulo dibujado en coordenadas X = 0.0 Y = 0.0.

b)-. Insertar una segunda capa y en ella colocar un Texto estático con la leyenda (RESET).

Nota si tienes alguna duda sobre como hacer este botón consultar los pasos 2, 3, 4, y 5 del tutorial Programar y diseñar un cronometro

4)-. Al regresar a la Escena el botón de pausa cambiara de color automáticamente.

a)-. Hacer visible el panel de la Biblioteca (ctrl. + L), y arrastrar el símbolo de nombre (reiniciar).

b)-. Escribir el cuadro de Nombre de instancia (stop_btn).

c)-. Colocar este símbolo en coordenadas X = 275.0 Y = 160.0.

5)-. Seleccionar la capa (action script 1), abrir el panel de Acciones – fotograma. Sustituir el código ActionScript por este nuevo.

_root.timer_txt = “00:00:00:00″;

_root.play_btn.onPress = function()

{

if(!_root.timing)

{

if (_root.paused)

{

_root.startTime = getTimer() – _root.elapsedTime;

}

else

{

_root.startTime = getTimer();

}

_root.paused = false;

_root.timing = true;

}

}

_root.pause_btn.onPress = function()

{

if(_root.timing)

{

_root.timing = false;

_root.paused = true;

}

}

_root.stop_btn.onPress = function()

{

_root.timing = false;

_root.paused = false;

_root.timer_txt = “00:00:00:00″;

}

6)-. Seleccionar la capa (action script 2), cambiar el código ActionScript por este otro.

_root.onEnterFrame = function()

{

if (timing)

{

elapsedTime = getTimer()-startTime;

elapsedHours = Math.floor(elapsedTime/3600000);

remaining = elapsedTime-(elapsedHours*3600000);

elapsedM = Math.floor(remaining/60000);

remaining = remaining-(elapsedM*60000);

elapsedS = Math.floor(remaining/1000);

remaining = remaining-(elapsedS*1000);

elapsedH = Math.floor(remaining/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();

}

_root.timer_txt = hours+”:”+minutes+”:”+seconds+”:”+hundredths;

}

};

Con este paso queda concluido el tutorial como te pudiste dar cuenta este trabajo es muy fácil de realizar ya que si tuviste éxito con el anterior cronometro Programar y diseñar un cronometro en este trabajo solamente hay que sustituir los códigos ActionScript.

7)-. Aquí una muestra de cómo es que el cronometro una vez que esta trabajando. Como fue mencionado al principio de la explicación este nuevo cronometro tiene tres botones Play. Stop y Reset, así como también cuenta con un nuevo elemento que es el de las centésimas de segundo. WELL DONE

P.D. Presionar ctrl. + Enter para ver como funciona el cronometro con el nuevo diseño. Si tienes alguna duda o comentario no dudes en escribirlo y de esta forma seguir juntos aprendiendo de mundo maravilloso de Flash CS3. Hasta el próximo tutorial:).

Descarga Archivo FLA CS3 De Este Tutorial

Visualizar Archivo SWF De Este Tutorial

Búsquedas:

• cronometro as3
• cronometro flash as3
• cronometro con centesimas
• cronometro flash as2
• cronometro animado
• as3 cronometro
• logos de cronometros
• animacion cronometro as3
• el cronometro
• cronometro actionscript 2

Artículos relacionados:

• Programar Y Diseñar Un Cronometro En Adobe Flash CS3
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Primera Parte
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Segunda Parte
• Diseñar y Programar Galería En Adobe Flash Segunda Parte