Ejemplo: un sencillo reloj analógico -- Flash CS3

En este ejemplo de un sencillo reloj analógico se ilustran dos de los conceptos de fecha y hora tratados en este capítulo:

Para obtener los archivos de aplicación de este ejemplo, vaya a www.adobe.com/go/learn_programmingAS3samples_flash_es. Los archivos de la aplicación SimpleClock se encuentran en la carpeta Samples/SimpleClock. La aplicación consta de los siguientes archivos:

Archivo	Descripción
SimpleClockApp.mxml o SimpleClockApp.fla	El archivo de aplicación principal en Flash (FLA) o Flex (MXML).
com/example/programmingas3/simpleclock/SimpleClock.as	El archivo de la aplicación principal.
com/example/programmingas3/simpleclock/AnalogClockFace.as	Dibuja una esfera de reloj redonda y las manecillas de hora, minutos y segundos, en función de la hora.

Subtemas

Definición de la clase SimpleClock

El ejemplo del reloj es sencillo, pero es recomendable organizar bien incluso las aplicaciones sencillas para poder ampliarlas fácilmente en el futuro. En ese sentido, la aplicación SimpleClock utiliza la clase SimpleClock para gestionar las tareas de inicio y mantenimiento de hora, y luego utiliza otra clase denominada AnalogClockFace para mostrar realmente la hora.

A continuación se muestra el código que define e inicializa la clase SimpleClock (hay que tener en cuenta que, en la versión de Flash, SimpleClock amplía la clase Sprite):

public class SimpleClock extends UIComponent
{
    /**
     * El componente de visualización de hora.
     */
    private var face:AnalogClockFace;
    
    /**
     * El objeto Timer que actúa como un latido para la aplicación.
     */
    private var ticker:Timer;

La clase SimpleClock utiliza un constructor predeterminado. El método initClock() realiza el trabajo de configuración real, pues crea la esfera del reloj e inicia el tictac de la instancia de Timer.

Creación de la esfera del reloj

Las siguientes líneas del código de SimpleClock crean la esfera del reloj que se utiliza para mostrar la hora:

    /**
     * Configura una instancia de SimpleClock.
     */
    public function initClock(faceSize:Number = 200) 
    {
        // Crea la esfera del reloj y la añade a la lista de visualización
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // Dibuja la visualización inicial del reloj
        face.draw();

El tamaño de la esfera puede pasarse al método initClock(). Si no se pasa el valor faceSize, se utiliza un tamaño predeterminado de 200 píxeles.

A continuación, la aplicación inicializa la esfera y la añade a la lista de visualización a través del método addChild() heredado de la clase DisplayObject. Luego llama al método AnalogClockFace.draw() para mostrar la esfera del reloj una vez, con la hora actual.

Inicio del temporizador

Después de crear la esfera del reloj, el método initClock() configura un temporizador:

        // Crea un objeto Timer que active un evento una vez por segundo
        ticker = new Timer(1000); 
    
        // Designa el método onTick() para gestionar eventos Timer
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // Inicia el tictac del reloj
        ticker.start();

En primer lugar, este método crea una instancia de Timer que distribuirá un evento una vez por segundo (cada 1000 milisegundos). Como no se pasa ningún parámetro repeatCount al constructor Timer(), el objeto Timer se repetirá indefinidamente.

El método SimpleClock.onTick() se ejecutará una vez por segundo cuando se reciba el evento timer:

    public function onTick(event:TimerEvent):void 
    {
        // Actualiza la visualización del reloj
        face.draw();
    }

El método AnalogClockFace.draw() simplemente dibuja la esfera del reloj y las manecillas.

Visualización de la hora actual

La mayoría del código de la clase AnalogClockFace se utiliza para configurar los elementos que se visualizan en la esfera del reloj. Cuando se inicializa AnalogClockFace, dibuja un contorno circular, coloca una etiqueta de texto numérico en cada marca de hora y luego crea tres objetos Shape: uno para la manecilla de las horas, otro para la de los minutos y un tercero para la de los segundos.

Cuando se ejecuta la aplicación SimpleClock, llama al método AnalogClockFace.draw() cada segundo, del siguiente modo:

    /**
     * Lo llama el contenedor principal cuando se está dibujando la visualización.
     */
    public override function draw():void
    {
        // Almacena la fecha y hora actuales en una variable de instancia
        currentTime = new Date();
        showTime(currentTime);
    }

Este método guarda la hora actual en una variable, de forma que la hora no puede cambiar mientras se dibujan las manecillas del reloj. Luego llama al método showTime() para mostrar las manecillas, como se muestra a continuación:

    /**
     * Muestra la fecha y hora especificadas en el estilo de reloj analógico antiguo.
     */
    public function showTime(time:Date):void 
    {
        // Obtiene los valores de hora
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // Multiplica por 6 para obtener los grados
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // Multiplicar por 30 para obtener grados básicos y luego
        // sumar hasta 29,5 grados (59 * 0,5)
        // para representar los minutos.
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

En primer lugar, este método extrae los valores de las horas, minutos y segundos de la hora actual. Luego utiliza estos valores para calcular el ángulo de cada manecilla. Como la manecilla de los segundos realiza una rotación completa en 60 segundos, gira 6 grados cada segundo (360/60). La manecilla de los minutos gira en la misma medida cada minuto.

La manecilla de las horas se actualiza también cada minuto, de forma que va progresando a medida que pasan los minutos. Gira 30 grados cada hora (360/12), pero también gira medio grado cada minuto (30 grados divididos entre 60 minutos).