[Tutorial] Reloj Analogico en Flash

Bueno luego de ver el Reloj Digital realizado por Jorge A. Castro en SoloPhotoshop (<a href="http://www.solophotoshop.com/tutoview/flash-reloj-digital.php" target="_blank">Tutorial de Reloj Digital</a>)
, se me ocurrio volver a la epoca de las agujas y realizar un Reloj pero Analogico

<!--Flash 160+180+http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico.swf--><OBJECT CLASSID='clsid27CDB6E-AE6D-11cf-96B8-444553540000' WIDTH=160 HEIGHT=180><PARAM NAME=MOVIE VALUE=http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico.swf><PARAM NAME=PLAY VALUE=TRUE><PARAM NAME=LOOP VALUE=TRUE><PARAM NAME=QUALITY VALUE=HIGH><EMBED SRC=http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico.swf WIDTH=160 HEIGHT=180 PLAY=TRUE LOOP=TRUE QUALITY=HIGH></EMBED></OBJECT><!--End Flash-->

ahi vamos

En primer lugar creamos un documento de 160 x 180, en este caso con fondo Blanco.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico1.JPG" border="0" alt="Imagen IPB" />

En el mismo documento (1) seleccione color de relleno blanco y bordes negro, para dibujar con la herramienta rectangulo (2) uno de 120 x 140 px 8 (3), que luego seleccione con doble click, lo ubicamos en la posicion x = 20, y = 15 (3) para que quede mas o menos al centro.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico2.JPG" border="0" alt="Imagen IPB" />

y converti en MovieClip usando la tecla F8, de nombre al MC le he dado 'mcesfera' como indica la imagen.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico3.JPG" border="0" alt="Imagen IPB" />

Luego entro al MC 'mcesfera' dando doble click en el, para verificar que estamos observemos la parte superior de la linea de tiempo, donde dice Scene 1 (Escena 1) y mcesfera para asegurarnos que estemos en el lugar correcto.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico4.JPG" border="0" alt="Imagen IPB" />

Aqui lo que debemos hacer es completar el dibujo del fondo del reloj, en mi caso solo le coloque los numeros 12, 3, 6 y 9 en Romanos, como indica la imagen. En este punto lo que hice fue presionar CTRL A para seleccionar todo y luego CTRL G para agrupar, de esta forma tanto el marco como los numeros quedan todos juntos.

Tambien le di nombre 'fondoesfera' (1) a la Layer 1 (Capa 1) de manera que nuestro documento quede mas prolijo. Lo siguiente es ubicar nuestro fondo en la (2) posicion x = -60, y = -70, esto debido a que el alto del marco esfera es 120 x 140 y queremos que quede el centro a la mitad. Esto es sumamente importante para la funcion ROTACION de las agujas.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico5.JPG" border="0" alt="Imagen IPB" />

Vamos ahora al tema de las agujas, para esto presionamos CTRL F8 para insertar un MovieClip que le daremos nombres 'mcaguja'.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico6.JPG" border="0" alt="Imagen IPB" />

Dentro del MC 'mcaguja' vamos a dibujar con la herramienta linea, una de 50 de alto ubicada en x = 0, y = -50 o sea la altura en negativo de forma que el pie de la linea comence en el punto 0.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico7.JPG" border="0" alt="Imagen IPB" />

Bien, ahora esta unica aguja que hemos creado la vamos a utilizar para los segundos, minutos y horas del reloj. Hacemos lo siguiente, nos ubicamos Scene 1 (Escena 1) y entramos al 'mcesfera' con doble click, en este lugar agregamos una Layer (Capa) y la llamamos 'segundos' (1), estando en la capa 'segundos', con CTRL L (2) llamamos la Library (Libreria) de objetos donde veremos nuestro 'mcaguja' (3) el que arrastramos a la zona de la esfera del reloj. A esta aguja la ubicamos en la posicion (4) X = 0, Y = -50 y le damos de altura H = 50 en la barra de propiedades. Importante darle nombre de instancia 'mc_segundos'.
<img src="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico8.JPG" border="0" alt="Imagen IPB" />

Esto mismo que hicimos para los segundos lo repetimos para los minutos:
Agregamos una nueva Layer (Capa) y le damos el nombre 'minutos', traemos de la Library (Libreria) otra copia de 'mcaguja' y la ubicamos en X = 0, Y = -40 con altura H: 40. Importante le damos nombre de instancia 'mc_minutos'.
Y repetimos para la hora:
Agregamos una nueva Layer (Capa) y le damos el nombre 'hora', traemos de la Library (Libreria) otra copia de 'mcaguja' y la ubicamos en X = 0, Y = -30 con altura H: 30. Importante le damos nombre de instancia 'mc_hora'.

En este punto vamos a tener toda la parte grafica de nuestro reloj lista, nos queda volver a la Scene 1 (Escena 1), y vamos a seleccionar el MC de la esfera del reloj y le damos nombre de instancia 'mc_esfera'.

Es importante que la esfera, los segundos, los minutos y la hora tengan estos nombre de instancia para que puedan ser utilizados en la programacion Action Script que movera las agujas del Reloj.

Para terminar, estando en la Scene 1 (Escena 1) vamos a agregar un nuevo Layer (Capa) que llamaremos 'acciones'. En este layer que tiene 1 solo frame (Cuadro) vamos a presionar la tecla F9 para llamar la ventana de acciones y agregamos el siguiente codigo:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->

_root.mc_esfera.onEnterFrame = function() {

&nbsp;&nbsp;&nbsp;&nbsp;objDate = new Date();

&nbsp;&nbsp;&nbsp;&nbsp;hora = objDate.getHours();

&nbsp;&nbsp;&nbsp;&nbsp;minutos = objDate.getMinutes();

&nbsp;&nbsp;&nbsp;&nbsp;segundos = objDate.getSeconds();

&nbsp;&nbsp;&nbsp;&nbsp;_root.mc_esfera.mc_hora._rotation = (hora * 360) / 12;

&nbsp;&nbsp;&nbsp;&nbsp;_root.mc_esfera.mc_minutos._rotation = (minutos * 360) / 60;

&nbsp;&nbsp;&nbsp;&nbsp;_root.mc_esfera.mc_segundos._rotation = (segundos * 360) / 60;

};

<!--c2--></div><!--ec2-->

La explicacion del codigo si tuvimos cuidado en el resto del armado es sencillo:
<!--colororange--><span style="colorrange"><!--/coloro-->_root.mc_esfera.onEnterFrame = function() {<!--colorc--></span><!--/colorc--> Declara una funcion que se ejecutara al comenzar

<!--colororange--><span style="colorrange"><!--/coloro-->objDate = new Date();<!--colorc--></span><!--/colorc--> Crea un objeto para obtener la Fecha y Hora actual.

<!--colororange--><span style="colorrange"><!--/coloro-->hora = objDate.getHours();<!--colorc--></span><!--/colorc--> Toma la Hora actual.

<!--colororange--><span style="colorrange"><!--/coloro-->minutos = objDate.getMinutes();<!--colorc--></span><!--/colorc--> Toma los Minutos actuales

<!--colororange--><span style="colorrange"><!--/coloro-->segundos = objDate.getSeconds();<!--colorc--></span><!--/colorc--> Toma los Segundos actuales.

<!--colororange--><span style="colorrange"><!--/coloro-->_root.mc_esfera.mc_hora._rotation = (hora * 360) / 12;<!--colorc--></span><!--/colorc--> Calcula la Rotation (Rotacion) de la aguja para la Hora.

<!--colororange--><span style="colorrange"><!--/coloro-->_root.mc_esfera.mc_minutos._rotation = (minutos * 360) / 60;<!--colorc--></span><!--/colorc--> Calcula la Rotation (Rotacion) de la aguja para los Minutos.

<!--colororange--><span style="colorrange"><!--/coloro-->_root.mc_esfera.mc_segundos._rotation = (segundos * 360) / 60;<!--colorc--></span><!--/colorc--> Calcula la Rotation (Rotacion) de la aguja para los Segundos.

Tanto para el calculo de Hora, Mintuos, Segundos, tuvimos en cuenta que la esfera tiene 360 grados, por tanto para determinado valor de la Hora los grados de Rotacion de la aguja seran X, por eso usamos una regla de tres.

Listo !!!

<a href="http://www.forocreativo.net/tutoriales/relojanalogico" target="_blank">Aca pueden ver funcionando el Reloj</a>

<a href="http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogico.zip" target="_blank">Y aca puden bajar el FLA y SWF para Flash MX o Superior</a>

Saludos

 

Este tambien es un reloj Flash usando la misma tecnica y lo usamos en uno de mis softwares para Titulacion de Videos en un programa de TV de mi ciudad natal. El programa se llama Hora de Dialogo.

[flash width=250 height=250:6b02da1614]http://www.forocreativo.net/tutoriales/relojanalogico/relojanalogicohdd.swf[/flash:6b02da1614]

Jejej se nota que el diseño no lo hice yo , lo hizo mi hermano Horacio por eso luce un poco mejor que mi engendro del tutorial.

Saludos

 

Cool!!!

 

Wau, muy bueno Jorge.

Espero ponerme con él en cuanto tenga un huequecito =D>

 

ODALES otro tuto bueno

 

Gracias por los comentarios, tengo otros comenzados ya veran ....