Programar Y Diseñar Un Cronometro En Adobe Flash CS3

Tutorial Adobe Flash CS3. Programar y diseñar un cronometro. En esta ocasión tengo para ti un tutorial en el cual veras como programar un reloj tipo cronometro. Aquí se involucran diferentes aspectos tales como: insertar símbolos de tipo botón, aplicación de la herramienta rectángulo, insertar campo de texto tipo dinámico y por último insertar unas cuantas líneas de código ActionScript 2. El diseño del cronómetro se muy básico de hacer, y sin más preámbulos J ¿COMENZAMOS? Good Luck!

1)-. El primer paso es hacer el documento sobre el cual se va a trabajar, en esta ocasión aremos un documento (ctrl. + J) de dimensiones 400 px * 222 px de ancho y alto respectivamente.

a)-. El color de fondo a usares sobre el documento es #CCCCCC.

b)-. La velocidad de fotogramas no será variada y se quedara con el valor que viene preestablecida la cual es de 12 fps.

2)-. Insertar el primero de los dos símbolos de tipo botón de que consta el documento. Presionar (ctrl. + F8), colocar como nombre al símbolo (pausa).

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

3)-. Ubicado en el símbolo (pausa), seleccionar la herramienta (rectángulo).

a)-. Las propiedades del rectángulo son: Color de trazo #000000, la Altura de trazo es de 2 y Color de relleno #660000.

b)-. Una vez que tienes las propiedades del rectángulo, dibujar este con dimensiones de 124.0 * 37.0 pixeles de ancho y alto.

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

Nota: si tienes un poco de experiencia puedes colocar un borde redondeado tal y como se mira en la imagen, esta parte del borde no la explico para no hacer el tutorial muy tedioso. Sin embargo, puedes encontrar una explicación de cómo hacer un borde redondeado en este link http://www.artecreativo.net/ef/curso-basico-de-flash-8-simbolos-de-tipo-boton-parte-17/399/

4)-. Insertar un fotograma clave (F6) en el siguiente fotograma. Seleccionar el color de relleno y cambiarlo por uno nuevo en este caso (#EDEDED).

a)-. Al insertar el fotograma clave te auguras de que el rectángulo dibujado en el paso anterior quede de las mismas dimensiones y en las mismas coordenadas.

5)-. Para terminar con el diseño de este botón, insertar una nueva capa.

a)-. Seleccionar la herramienta de texto y luego seleccionar la opción de Texto estático.

b)-. Las opciones de tipo de fuente y tamaño de fuente te las dejo a tu elecciónJ.

c)-. Después de haber elegido la fuente y tamaño de fuente, escribir la palabra (PAUSA).

6)-. Crear el segundo símbolo (ctrl. + F8), a este símbolo colocarle como nombre (play).

a)-. Seleccionar la opción de Tipo Botón.

7)-. Seguir los pasos 3, 4 y 5, con el fin de hacer el mismo diseño de botón.

a)-. Este rectángulo únicamente tendrá una variación, en el primer Color de relleno (#003300). Y el texto cambiara de (PAUSA a START).

8)-. Regresar a la Escena, hacer visible el panel de Biblioteca (ctrl. + L).

a)-. Arrastrar desde la biblioteca el símbolo (play).

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

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

9)-. Ahora arrastrar desde la Biblioteca el símbolo (pausa).

a)-. Escribir el cuadro de Nombre de instancia (pause_btn).

b)-. Colocar este símbolo en coordenadas X = 245.0 Y = 160.0.

10)-. Seleccionar la herramienta de texto, en la opción de Tipo de texto seleccionar (Texto dinámico).

a)-. Este campo de texto es en donde se mirara propiamente el reloj de tipo cronometro, así que nuevamente dejo a tu elección el Tipo y Tamaño de FuenteJ.

b)-. Es de suma importancia que en la opción de Var: escribas la palabra (contador_txt) tal y como se muestra en imagen.

c)-. Colocar este campo de texto en coordenadas X = 56.0 Y = 40.0, si es que elegiste el Tamaño de texto 52.

Nota: no es necesario que escribas el texto 00: 00: 00, sin embargo, el escribir la palabra 00: 00: 00 no le afecta en nada al cronometro.

11)-. Para finalizar el tutorial simplemente falta agregar el código ActionScript 2. Insertar una nueva capa y cambiarle el nombre a (action script 1), seleccionar el fotograma de esta capa.

a)-. Abrir el panel de Acciones – fotograma e insertar el siguiente código:

_root.contador_txt = “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;

}

}

12)-. Insertar una tercera capa y cambiarle el nombre por el de (action script 2), seleccionar el fotograma de esta capa e insertar el siguiente código:

_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) {

_root.contador_txt = hours+”:”+minutes+”:”+seconds;

}

}

};

Hasta este punto el cronometro esta listo para ser visto en todo su esplendor, solo tienes que presionar (ctrl. + Enter) y listo, el crono comenzara un conteo de 0 segundos y al llegar a sesenta segundo comenzara el conteo de los minutos. Sitienes alguna duda o comentario no dudes en escribirlo. Well done!!

No me dejo muy convencido como quedo el diseño del cronometro así que le añadí tres pasos mas para darle un poquito de diseño (que quede bien claro solo es un poquito de diseño) jajajajajajaja.

13)-. Insertar una cuarta capa y cambiarle el nombre por el de (detalles crono).

a)-. Seleccionar la herramienta rectángulo,  luego dar las propiedades al rectángulo que va hacer dibujado: el Color de trazo es #000000 y la Altura de trazo es 2, colocar como Color de relleno #0000CC.

b)-. Las dimensiones del rectángulo son: 400.0 * 22.0 pixeles de ancho y alto.

c)-. Una vez dibujado el rectángulo colocarlo en coordenadas X = 0.0 Y = 0.0.

14)-. Seguir el paso anterior para volver a dibujar el mismo rectángulo (o simplemente copiar el rectángulo anterior y pegarlo).

a)-. Este nuevo rectángulo colocarlo en coordenadas X = 0.0 Y = 200.0.

15)-. Dibujar un nuevo rectángulo (herramienta de Rectángulo Simple) pero ahora colocarle un borde redondeado de 20 en cada una de las esquinas.

a)-. Este rectángulo solamente tiene Color de borde #000000 no tiene Color de relleno.

b)-. Las dimensiones del rectángulo son 345.0 * 80.0 pixeles de ancho y alto.

c)-. Colocar esta forma en coordenadas X = 26.0 Y = 40.0.

Finalmente te muestro como queda el diseño del cronometro ya con los nuevos detalles, te advertí que solo le daría un poquitín de diseño jajajajaja

P.D. Presionar nueva mente ctrl. + Enter para ver como funciona el crono con el nuevo diseño:). Espero tus comentarios y de esta forma seguir juntos aprendiendo de mundo maravilloso de Flash CS3. Hasta el próximo tutorial:).

Descargar El Archivo FLA CS3

Visualizar El Archivo SWF De Este Tutorial

Búsquedas:

• cronometro en flash
• cronometro flash
• Como hacer un cronometro en flash
• flash cronómetro
• cronometro as2
• 399 pixeles de ancho imagenes
• CRONOMETRO
• cronometro en as3
• crear cronometro en flash
• cronometro en flash cs5

Artículos relacionados:

• Programar Un Cronometro Con Centésimas De Segundo En Flash CS3
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Segunda Parte
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Primera Parte
• Diseñar y Programar Galería En Adobe Flash Segunda Parte