Tutorial FLASH - Tutorial para crear un reloj de agujas en Flash.

Versión Flash: MX y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Principiante   |   Hits: 142175

Para crear un reloj de agujas, obtendremos la hora del sistema operativo con la clase Date y colocaremos las agujas en la posición correspondiente.

COMO HACERLO.
El reloj de este tutorial es lo más sencillo posible. Consiste en un dibujo de una esfera de fondo y tres clips con una línea cada uno, que hacen de agujas.

Las fórmulas para obtener los ángulos son de lo más simple, sólo hay que saber cuántos grados tiene que girar cada aguja al minuto, hora o segundo. El código se explica por sí mismo:

//este código se ejecutará contínuamente:
_root.onEnterFrame = function() {
//creamos un objeto Date con la fecha y hora actuales
fecha = new Date();
//extraemos del objeto la hora, minuto y segundo actuales
hora = fecha.getHours();
minuto = fecha.getMinutes();
segundo = fecha.getSeconds();
//establecemos la rotación de las manecillas, calculando el ángulo
//360 grados entre 12 horas, son 30 grados por hora.
//pero la manecilla de las horas va avanzando cada minuto, así que
//a esto hay que sumarle: 30 grados entre 60 minutos, que son 0.5
manecillaHoras._rotation = hora*30+minuto*0.5;
//360 grados entre 60 minutos, son 6 grados por minuto
manecillaMinutos._rotation = minuto*6;
//con los segundos, igual que con los minutos
manecillaSegundos._rotation = segundo*6;
};

Si queréis modificar el aspecto del reloj, solo hay que cambair el dibujo de la esfera, y hacer un gráfico más elaborado dentro de cada clip de las agujas.

Aquí está el archivo de ejemplo: relojEsfera.fla

Tutoriales Flash relacionados

Tutorial para poner la fecha y la hora con Flash (crear un reloj).
Tutorial para comparar fechas en Flash.