Exempel på datum och tid: enkel analog klocka

Flash Player 9 och senare, Adobe AIR 1.0 och senare

En enkel analog klocka kan få illustrera de här två begreppen för datum och tid:

  • Hämtar aktuella datum- och tidpunktsvärden för timme, minut och sekund.

  • Använda en timer för att ange tempot för ett program

    Programfilerna för det här exemplet finns på www.adobe.com/go/learn_programmingAS3samples_flash_se. Programfilerna för SimpleClock finns i mappen Samples/SimpleClock. Programmet består av följande filer:

    Fil

    Beskrivning

    SimpleClockApp.mxml

    eller

    SimpleClockApp.fla

    Huvudprogramfilen i Flash (FLA) eller Flex (MXML).

    com/example/programmingas3/simpleclock/SimpleClock.as

    Huvudprogramfilen

    com/example/programmingas3/simpleclock/AnalogClockFace.as

    Ritar en rund urtavla med tim-, minut- och sekundvisare baserat på aktuell tidpunkt.

Definiera klassen SimpleClock

Klockexemplet är enkelt, men det är en god idé att organisera även enkla program så att du enkelt kan utöka dem i framtiden. Hittills används klassen SimpleClock i SimpleClock-programmet för att hantera start- och tidsplaneringsåtgärder. Därefter används en annan klass som heter AnalogClockFace för att visa tiden.

Nedan följer koden som definierar och initierar klassen SimpleClock (observera, att i Flash-versionen utökas i stället klassen Sprite):

public class SimpleClock extends UIComponent 
{ 
    /** 
     * The time display component. 
     */ 
    private var face:AnalogClockFace; 
     
    /** 
     * The Timer that acts like a heartbeat for the application. 
     */ 
    private var ticker:Timer;

Klassen har två viktiga egenskaper:

  • Egenskapen face, som är en instans av klassen AnalogClockFace.

  • Egenskapen ticker, som är en instans av klassen Timer.

    I klassen SimpleClock används en standardkonstruktor. Metoden initClock() tar hand om inställningarna, skapar urtavlan och startar Timer-instansen.

Skapa urtavlan

Med följande rader i SimpleClock-koden skapas urtavlan som används för att presentera tiden:

    /** 
     * Sets up a SimpleClock instance. 
     */ 
    public function initClock(faceSize:Number = 200)  
    { 
        // creates the clock face and adds it to the display list 
        face = new AnalogClockFace(Math.max(20, faceSize)); 
        face.init(); 
        addChild(face); 
         
        // draws the initial clock display 
        face.draw();

Storleken på urtavlan kan skickas till metoden initClock(). Om inte värde för faceSize skickas så används standardstorleken på 200 pixlar.

Därefter initierar programmet urtavlan och lägger sedan till det till visningslistan via metoden addChild(), som ärvs från klassen DisplayObjectContainer. Därefter anropas metoden AnalogClockFace.draw() för att visa urtavlan en gång och presentera den aktuella tiden.

Starta timern

Efter att urtavlan skapats anger metoden initClock() en timer:

        // creates a Timer that fires an event once per second 
        ticker = new Timer(1000);  
     
        // designates the onTick() method to handle Timer events 
        ticker.addEventListener(TimerEvent.TIMER, onTick); 
 
        // starts the clock ticking 
        ticker.start();

Först instansieras en Timer-instans som skickar en händelse en gång per sekund (var 1000:e millisekund). Eftersom ingen andra repeatCount-parameter har skickats till konstruktorn Timer() upprepas Timer i oändlighet.

Metoden SimpleClock.onTick() körs en gång per sekund när händelsen timer tas emot:

    public function onTick(event:TimerEvent):void  
    { 
        // updates the clock display 
        face.draw(); 
    }

Metoden AnalogClockFace.draw() ritar helt enkelt urtavlan och visarna.

Visa aktuell tid

Den mesta koden i klassen AnalogClockFace handlar om inställning av urtavlans visningselement. När AnalogClockFace initieras ritar den en cirkel, placerar en numerisk textetikett vid varje timmarkering och skapar sedan tre Shape-objekt, en för respektive tim-, minut- och sekundvisare.

När SimpleClock-programmet körs anropas metoden AnalogClockFace.draw() varje sekund, enligt följande:

    /** 
     * Called by the parent container when the display is being drawn. 
     */ 
    public override function draw():void 
    { 
        // stores the current date and time in an instance variable 
        currentTime = new Date(); 
        showTime(currentTime); 
    }

Med den här metoden sparas aktuell tid i en variabel så att tidpunkten inte kan ändras precis när visarna ska flyttas. Därefter anropas metoden showTime() för att visa visarna, enligt följande:

    /** 
     * Displays the given Date/Time in that good old analog clock style. 
     */ 
    public function showTime(time:Date):void  
    { 
        // gets the time values 
        var seconds:uint = time.getSeconds(); 
        var minutes:uint = time.getMinutes(); 
        var hours:uint = time.getHours(); 
 
        // multiplies by 6 to get degrees 
        this.secondHand.rotation = 180 + (seconds * 6); 
        this.minuteHand.rotation = 180 + (minutes * 6); 
 
        // Multiply by 30 to get basic degrees, then 
        // add up to 29.5 degrees (59 * 0.5) 
        // to account for the minutes. 
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5); 
    }

Först extraheras värdena för timma, minut och sekund motsvarande aktuell tidpunkt. Därefter används dessa värden till att beräkna vinkeln för respektive visare. Eftersom den andra visaren roteras ett helt varv på 60 sekunder så roteras den 6 grader per sekund (360/60). Minutvisaren roteras lika mycket varje minut.

Timvisaren uppdateras varje minut, så den visar en liten förändring allteftersom minuterna tickar. Den roteras 30 grader varje timme (360/12), men den roteras även en halv grad varje minut (30 grader dividerat med 60 minuter).