Reloj Analógico

      

Autor: Carlos Carmona

Resultado

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

Abre tu flash y crea un nuevo clip de película, para ello, presiona ALT + F8, y llamalo "mireloj", (sin comillas. Vamos a necesitar cinco capas, las siguientes:

Selecciona la capa "esfera" y dibuja un circulo (También podría ser un cuadrado u otra forma, el diseño ya es cosa de cada cual). Lo convertimos en clip de película, lo seleccionamos y apretamos F8, y le damos el nombre "mcesfera".

Ahora, a la instncia de clip de película le damos nuevamente el nombre de "mcesfera", no importa que sea el mismo nombre dado que solo vamos a usar una instancia, si fueramos a usar varias instancias del mismo clip deberían tener distintos nombre para diferenciar. Para hacer tal cosa, seleccionamos el clip, (la esfera), y en el inspector de propiedades le escribimos el nombre:

Ahora, vamos a hacer las agujas del reloj, horas, minutos y segundos. El diseño de las mismas, al igual que el del circulo, es cosa vuestra, lo más sencillo es lo que he hecho, 3 líneas, siendo las líneas de horas y minutos más gruesas que la de segundos, y con la aguja de segundos como la más larga, después la de minutos y la de horas la más corta.

Bien, seleccionamos la capa de horas, y trazamos una línea vertical. La seleccionamos y apretamos F8 para convertirla en clip de película, y le damos el nombre "mchoras". Editamos el clip haciendo doble click sobre el o seleccionandolo y edición>editar simbolo. y veremos ésto:

Como veis, la línea tiene una pequeña cruz en el centro. Ese es el eje sobre el que girará, así que no puede estar en el centro, tiene que estar cerca de uno de los extremos. Ese punto coincidirá con el centro del circulo. Tenemos que alargar la línea de uno de sus extremos, concretamente, la estiraremos de arriba, para ello, ponemos el ratón sobre la punta de arriba de la línea, la agarramos y estiramos, quedando algo así:

Ahora el eje de giro está cerca de uno de los extremos.

NOTA:

Es importante que las agujas se coloquen verticales y con el eje de rotación abajo, ya que si por ejemplo, las dibujasemos horizontales y con el eje de rotación a la izquierda, las horas, minutos y segundos aparecerían con 45º de más, es decir, con 3 horas, 15 minutos y 15 segundos de más.

Volvemos al clip "mireloj", para ello apretamos la flecha azul del navegador de clips:

Y por último, teniendo seleccionado el clip de horas, le damos a la instancia el nombre de "mchoras" (igual que hicimos con "mcesfera"), ojo, siempre sin comillas.

En las capas de minutos y segundos hay que hacer exactamente lo mismo, solo que con los nombre tanto de clip como de instancia de "mcminutos" y "mcsegundos".

Una vez que lo tengamos hecho, tenemos que colocar el circulo y las agujas en su correcta posición. Esto es muy facil gracias al efecto de iman que tiene flash.

Ponemos el circulo más o menos centrado (a ojo), seleccionamos el clip de mchoras, y tenemos que hacer coincidir el eje del que hablamos antes con el centro exacto del circulo, de entrada parece un trabajo de pulso, vista y paciencia, pero no, por que como ya he comentado flash incorpora el efecto iman, de modo que cuando el eje de nuestra aguja esté cerca del centro de la circunsferencia, el centro y el eje se atraerán y se juntarán solos, de modo que es muy facil. Igual con las otras 2 agujas.

Las tres agujas quedarán superpuestas unas sobre otras.

Y con esto ya solo nos queda poner el código que hará que nuestro reloj funcione. Seleccionamos la capa "as" (action script) y en el primer fotograma, botón derecho del ratón y le damos a "acciones":

He introducimos este código:

_root.onEnterFrame = function() {
        myDate = new Date();
        mchoras._rotation = myDate.getHours()*30+myDate.getMinutes()/2;
        mcminutos._rotation = myDate.getMinutes()*6+myDate.getSeconds()/10;
        mcsegundos._rotation = myDate.getSeconds()*6;
};

Y con esto ya está creado el clip del reloj, ahora, utilizando la flecha azul del navegador de clips, nos vamos a la "Escena 1", presionamos sobre F11 y se nos abrirá la biblioteca de clips, donde veremos nuestro clip "mireloj", lo agarramos y arrastramos al escenario, y listo, ya tenemos nuestro reloj analógico.

Como ya comentamos, los diseños pueden ser tan bellos como os lo trabajeis, por poneros un ejemplo, dedicandole unos 2 o 3 minutos, hemos hechos estas simples modificaciones al reloj anterior:

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

O el archivo modificado, el cuadrado.

Scour Design ™ Todos los Derechos Reservados © Carlos Carmona