Tutoriales Flash: Reloj analógico con Flash

Donmuerte

Un ejemplo sencillo de como hacer un reloj anal?gico con unas pocas l?neas de c?digo.
Vamos a empezar este tutorial creando una pelicula de 150x150 pixels. Renombramos el layer1 a "reloj" y creamos en esa capa un circulo sin relleno de 60 pixels de radio y un ancho de linea de 2 pixels, apretamos F8 y lo convertimos en Movie Clip llamado reloj. Ahora lo alineamos horizontal y verticalmente en el stage y le damos el nombre de instancia "reloj_mc".

Entramos al modo de edicion haciendo doble click en el MC y le agregamos un layer nuevo a este. En el nuevo layer creamos una linea de 2 pixels de ancho y 30 de largo, la cual convertimos en Movie Clip llamado aguja y seteamos su punto de registro en el centro inferior. Le asignaremos el nombre de instacia "segundero_mc". Ahora solo falta posicionarlo en el centro del reloj. Deber?a quedar algo parecido a esta imagen.

Ahora podemos traer nuevas instancias del Movie Clip aguja para que representen el minutero y la aguja que marcar? la hora, las llamaremos "minutero_mc" y "hora_mc". Les recomiendo que cambien los altos de las diferentes agujas para poder diferenciarlas, yo use 25 pixels para el minutero y 15 pixels para la aguja de la hora. Necesitamos centrarlas igual como hicimos con "segundero_mc", por lo cual quedaran superpuestas.

Ahora llego el momento de poner manos a la obra con el c?digo. Agregamos un nuevo layer llamado "acciones" y abrimos el panel de acciones en el primer frame de este layer (F9). Ahi escribimos lo siguiente:
reloj_mc.onEnterFrame = function() {
objDate = new Date();
hora = objDate.getHours();
minutos = objDate.getMinutes();
segundos = objDate.GetSeconds();
reloj_mc.hora_mc._rotation = (hora * 360) / 12;
reloj_mc.minutero_mc._rotation = (minutos * 360) / 60;
reloj_mc.segundero_mc._rotation = (segundos * 360) / 60;
};

Lo que hace este c?digo es crear un nuevo objeto Date (objDate) cada vez que se produce el evento EnterFrame y captura la hora, los minutos y los segundos asignandolos a varibles. Luego utilizando una regla de tres simple calculamos cuantos grados debe rotar la aguja segun el valor que le pasemos. Por ejemplo: (35 * 360) / 60 = 126, por lo cual la rotacion de esa aguja ser? de 126 grados.

Para hacer el display de la hora, simplemente agregamos un campo de texto din?mico dentro del Movie Clip reloj y le asignamos la variable "hora_display". Para establecer el texto de este solo tenemos que agregar esta linea de c?digo antes de la ?ltima llave:

reloj_mc.hora_display = hora + ":" + minutos + ":" + segundos;

Ac? podemos ver la imagen con el c?digo completo

Cabe aclarar que este reloj funciona con la hora de la maquina en la que se ve, por lo cual, si el usuario no tiene bien configurado el reloj de su sistema la hora indicada ser? incorrecta.