Beispiel: Einfache Analoguhr -- Flash CS3

Am Beispiel einer einfachen Analoguhr werden zwei der in diesem Kapitel erörterten Verfahren zum Festlegen von Datums- und Uhrzeitangaben veranschaulicht:

Die Anwendungsdateien für dieses Beispiel finden Sie unter www.adobe.com/go/learn_programmingAS3samples_flash_de. Die Dateien der Anwendung „SimpleClock" befinden sich im Ordner „Samples/SimpleClock". Die Anwendung umfasst die folgenden Dateien:

Datei	Beschreibung
SimpleClockApp.mxml oder SimpleClockApp.fla	Die Hauptanwendungsdatei im Flash-Format (FLA) oder Flex-Format (MXML).
com/example/programmingas3/simpleclock/SimpleClock.as	Die Hauptanwendungsdatei.
com/example/programmingas3/simpleclock/AnalogClockFace.as	Zeichnet ein rundes Zifferblatt sowie Stunden-, Minuten- und Sekundenzeiger entsprechend der aktuellen Uhrzeit.

Unterthemen

Definieren der SimpleClock-Klasse

Dieses Beispiel ist relativ einfach. Es empfiehlt sich jedoch, auch einfache Anwendungen gut zu strukturieren, sodass sie zu einem späteren Zeitpunkt problemlos erweitert werden können. Zu diesem Zweck werden die Start- und Zeitmessungsaufgaben in der Anwendung „SimpleClock" mit der SimpleClock-Klasse verarbeitet. Zum Anzeigen der Zeit wird eine weitere Klasse, die AnalogClockFace-Klasse, verwendet.

Mit dem folgenden Code wird die SimpleClock-Klasse definiert und initialisiert (beachten Sie, dass SimpleClock in der Flash-Version stattdessen die Sprite-Klasse erweitert):

public class SimpleClock extends UIComponent
{
    /**
     * Die Komponente für die Anzeige der Uhrzeit
     */
    private var face:AnalogClockFace;
    
    /**
     * Der Timer, mit dem die Zeitintervalle für die Anwendung angegeben werden.
     */
    private var ticker:Timer;

Bei der SimpleClock-Klasse wird ein Standardkonstruktor verwendet. Mit der initClock()-Methode wird die Einrichtung vorgenommen, d. h. das Zifferblatt erstellt und die Timer-Instanz gestartet.

Erstellen des Zifferblatts

Mit den folgenden Zeilen des SimpleClock-Codes wird das Zifferblatt erstellt, mit dem die Zeit angezeigt wird:

    /**
     * Richtet eine SimpleClock-Instanz ein.
     */
    public function initClock(faceSize:Number = 200) 
    {
        // Erstellt das Zifferblatt und fügt es zur Anzeigeliste hinzu.
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // Zeichnet die ursprüngliche Uhranzeige.
        face.draw();

Die Größe des Zifferblatts kann an die initClock()-Methode übergeben werden. Wenn kein Wert für faceSize angegeben ist, wird die Standardgröße von 200 Pixel verwendet.

Dann wird das Zifferblatt initialisiert und mit der addChild()-Methode, die aus der DisplayObject-Klasse übernommen wurde, zur Anzeigeliste hinzugefügt. Anschließend wird die AnalogClockFace.draw()-Methode aufgerufen, damit das Zifferblatt mit der aktuellen Uhrzeit angezeigt wird.

Starten des Timers

Nach dem Erstellen des Zifferblatts wird mit der initClock()-Methode ein Timer eingerichtet:

        // Erstellt einen Timer, der einmal pro Sekunde ein Ereignis auslöst.
        ticker = new Timer(1000); 
    
        // Gibt die onTick()-Methode zum Verarbeiten der Timer-Ereignisse an.
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // Startet die Uhr.
        ticker.start();

Mit dieser Methode wird zunächst eine Timer-Instanz instanziiert, mit der einmal pro Sekunde (alle 1000 Millisekunden) ein Ereignis ausgelöst wird. Da kein zweiter repeatCount-Parameter an den Timer()-Konstruktor übergeben wird, wird der Timer unbegrenzt wiederholt.

Die SimpleClock.onTick()-Methode wird einmal pro Sekunde ausgeführt, wenn ein timer-Ereignis empfangen wird:

    public function onTick(event:TimerEvent):void 
    {
        // Aktualisiert die Uhranzeige.
        face.draw();
    }

Mit der AnalogClockFace.draw()-Methode werden das Zifferblatt und die Zeiger gezeichnet.

Anzeigen der aktuellen Uhrzeit

Mit dem Code der AnalogClockFace-Klasse werden hauptsächlich die Anzeigeelemente des Zifferblatts eingerichtet. Nach dem Initialisieren der AnalogClockFace-Methode wird ein runder Rahmen gezeichnet und für jede Stunde ein numerisches Textfeld positioniert. Dann werden drei Shape-Objekte erstellt, jeweils für den Stunden-, den Minuten- und den Sekundenzeiger.

Beim Ausführen der Anwendung „SimpleClock" wird die AnalogClockFace.draw()-Methode jede Sekunde aufgerufen, wie im Folgenden dargestellt:

    /**
     * Aufruf durch den übergeordneten Container, wenn die Anzeige gezeichnet wird.
     */
    public override function draw():void
    {
        // Speichert das aktuelle Datum und die aktuelle Uhrzeit in einer Instanzvariable.
        currentTime = new Date();
        showTime(currentTime);
    }

Mit dieser Methode wird die aktuelle Uhrzeit in einer Variablen gespeichert, sodass sich die Uhrzeit beim Zeichnen der Uhrzeiger nicht ändert. Dann wird die showTime()-Methode aufgerufen, mit der die Uhrzeiger gezeichnet werden:

    /**
     * Zeigt das Datum und die Uhrzeit im gewohnten Stil einer Analoguhr an.
     */
    public function showTime(time:Date):void 
    {
        // Ruft die Werte für die Uhrzeit ab.
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // Multiplikation mit 6 zur Berechnung der Gradangaben
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // Multiplikation mit 30 zur Berechnung der Grundgradangaben,
        // dann Addition von bis zu 29,5 Grad (59 * 0,5)
        // zur Berücksichtigung der Minuten.
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

Mit dieser Methode werden zunächst die Werte für die Stunden, Minuten und Sekunden der aktuellen Uhrzeit abgerufen. Anschließend wird mit diesen Werten der Winkel für die einzelnen Uhrzeiger berechnet. Da beim Sekundenzeiger eine volle Umdrehung in 60 Sekunden erfolgt, dreht er sich pro Sekunde um 6 Grad (360/60). Auch der Minutenzeiger dreht sich pro Minute um 6 Grad.

Der Stundenzeiger wird ebenfalls jede Minute aktualisiert, sodass nach jeder Minute eine Änderung festzustellen ist. Er dreht sich pro Stunde um 30 Grad (360/12), jedoch auch pro Minute um 0,5 Grad (30 Grad geteilt durch 60 Minuten).