Exemple : une horloge analogique simple -- Flash CS3

Cet exemple d'horloge analogique simple illustre deux des concepts de date et heure étudiés dans ce chapitre :

Pour obtenir les fichiers d'application pour cet exemple, voir www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d'application SimpleClock se trouvent dans le dossier Samples/SimpleClock. L'application se compose des fichiers suivants :

Fichier	Description
SimpleClockApp.mxml ou SimpleClockApp.fla	Le fichier d'application principal dans Flash (FLA) ou Flex (MXML).
com/example/programmingas3/simpleclock/SimpleClock.as	Fichier d'application principal.
com/example/programmingas3/simpleclock/AnalogClockFace.as	Dessine un cadran d'horloge rond et les aiguilles des heures, des minutes et des secondes en fonction de l'heure.

Sous-rubriques

Définition de la classe SimpleClock

Si l'exemple d'horloge est simple, il est toujours judicieux de bien organiser les applications de manière à faciliter leur extension future. Dans ce but, l'application SimpleClock utilise la classe SimpleClock pour gérer les tâches de démarrage et de mesure temporelle. Elle se sert ensuite d'une autre classe, AnalogClockFace, pour l'affichage réel de l'heure.

Voici le code qui définit et initialise la classe SimpleClock (vous remarquerez que dans la version Flash, SimpleClock étend la classe Sprite à la place) :

public class SimpleClock extends UIComponent
{
    /**
     * Le composant d'affichage de l'heure.
     */
    private var face:AnalogClockFace;
    
    /**
     * L'horloge qui marque le rythme de l'application.
     */
    private var ticker:Timer;

La classe SimpleClock utilise un constructeur par défaut. La méthode initClock() se charge de la véritable configuration, en créant le cadran et en lançant le décompte de l'instance Timer.

Création du cadran

Les lignes suivantes du code SimpleClock créent le cadran utilisé pour afficher l'heure :

    /**
     * Définit une instance SimpleClock.
     */
    public function initClock(faceSize:Number = 200) 
    {
        // Crée le cadran et l'ajoute à la liste d'affichage
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // Dessine l'affichage initial de l'horloge
        face.draw();

La taille de l'horloge peut être transmise à la méthode initClock(). Si aucune valeur faceSize n'est transmise, la taille par défaut de 200 pixels est utilisée.

Ensuite, l'application initialise le cadran et l'ajoute à la liste d'affichage à l'aide de la méthode addChild() héritée de la classe DisplayObject. Elle appelle enfin la méthode AnalogClockFace.draw() pour afficher une fois le cadran, qui indique l'heure actuelle.

Lancement du minuteur

        // Crée un minuteur qui déclenche un événement toutes les secondes.
        ticker = new Timer(1000); 
    
        // Désigne la méthode onTick() pour la gestion des événements Timer.
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // Lance le décompte de l'horloge.
        ticker.start();

Cette méthode commence par instancier une instance Timer qui va distribuer un événement par seconde (toutes les 1000 millisecondes). Comme le constructeur Timer() ne reçoit pas de second paramètre repeatCount, l'horloge se reproduit indéfiniment.

La méthode SimpleClock.onTick() s'exécute une fois par seconde après réception de l'événement timer :

    public function onTick(event:TimerEvent):void 
    {
        // Met à jour l'affichage de l'horloge
        face.draw();
    }

La méthode AnalogClockFace.draw() dessine simplement le cadran de l'horloge et des aiguilles.

Affichage de l'heure actuelle

La plupart du code de la classe AnalogClockFace implique la définition des éléments d'affichage du cadran. Lors de son initialisation, AnalogClockFace dessine un contour circulaire, place des libellés numériques pour chaque heure, puis crée trois objets Shape , un pour l'aiguille des heures, un pour celle des minutes et un pour l'aiguille des secondes de l'horloge.

Lorsque l'application SimpleClock s'exécute, elle appelle la méthode AnalogClockFace.draw() toutes les secondes, comme suit :

    /**
     * Appel effectué par le conteneur parent lors du dessin de l'affichage.
     */
    public override function draw():void
    {
        // Stocke la date et l'heure actuelle dans une variable d'instance
        currentTime = new Date();
        showTime(currentTime);
    }

Cette méthode enregistre l'heure actuelle dans une variable, pour que l'heure ne puisse changer pendant le dessin des aiguilles de l'horloge. Elle appelle ensuite la méthode showTime() pour afficher les aiguilles, comme illustré ci-après :

    /**
     * Affiche la date et l'heure indiquée sur une horloge analogique des plus classiques.
     */
    public function showTime(time:Date):void 
    {
        // Obtient les valeurs temporelles
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // Multiplie par 6 pour obtenir les degrés
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // Multiplie par 30 pour obtenir les degrés de base, puis
        // ajoute à 29,5 degrés (59 * 0.5)
        // pour tenir compte des minutes.
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

Tout d'abord, cette méthode extrait les valeurs des heures, des minutes et des secondes pour l'heure actuelle. Elle utilise ensuite ces valeurs pour calculer l'angle de chaque aiguille. Comme l'aiguille des secondes effectue une rotation complète en 60 secondes, elle tourne de 6 degrés par seconde (360/60). L'aiguille des minutes pivote selon le même angle chaque minute.

L'aiguille des heures se met à jour toutes les minutes également et doit donc progresser à chaque minute. Elle tourne de 30 degrés toutes les heures (360/12), mais pivote également d'un demi-degré toutes les minutes (30 degrés divisés par 60 minutes).