範例：簡單的類比時鐘 --Flash CS3

這個簡單的類比時鐘範例將說明本章所討論的兩個日期與時間概念：

若要取得此樣本的應用程式檔案，請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw。您可以在 Samples/SimpleClock 檔案夾中找到 SimpleClock 應用程式檔案，它是由下列檔案組成：

檔案	說明
SimpleClockApp.mxml 或 SimpleClockApp.fla	Flash (FLA) 或 Flex (MXML) 中的主應用程式檔案。
com/example/programmingas3/simpleclock/SimpleClock.as	主應用程式檔案。
com/example/programmingas3/simpleclock/AnalogClockFace.as	繪製圓形鐘面，並根據時間繪製時針、分針和秒針。

副主題

定義 SimpleClock 類別

這個時鐘範例雖簡單，但即使是簡單的應用程式，最好還是能組織清楚，以便日後擴充。因此，SimpleClock 應用程式會使用 SimpleClock 類別處理啟動和計時工作，然後使用另一個名為 AnalogClockFace 的類別來顯示時間。

以下是定義並初始化 SimpleClock 類別的程式碼 (請注意，在 Flash 版本中，SimpleClock 會改為擴充 Sprite 類別)：

public class SimpleClock extends UIComponent
{
    /**
     * 時間顯示組件。
     */
    private var face:AnalogClockFace;
    
    /**
     * 做為應用程式活動訊號的 Timer。
     */
    private var ticker:Timer;

SimpleClock 類別使用預設建構函式。initClock() 方法則負責實際的設定工作，包括建立鐘面和啟動 Timer 實體計時。

建立鐘面

    /**
     * 設定 SimpleClock 實體。
     */
    public function initClock(faceSize:Number = 200) 
    {
        // 建立鐘面並將其加入顯示清單中
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // 繪製初始的時鐘顯示畫面
        face.draw();

您可將鐘面的大小傳遞至 initClock() 方法。如果沒有傳遞 faceSize 值，會使用預設的 200 像素。

接下來，應用程式會初始化鐘面，然後使用從 DisplayObject 類別繼承的 addChild() 方法，將鐘面加入顯示清單。然後會呼叫 AnalogClockFace.draw() 方法顯示鐘面一次，在其中顯示目前的時間。

啟動計時器

        // 建立 Timer，每秒引發一次事件
        ticker = new Timer(1000); 
    
        // 指定 onTick() 方法處理 Timer 事件
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // 啟動時鐘開始計時
        ticker.start();

首先，這個方法會建立 Timer 實體，設定每秒 (即每 1000 毫秒) 傳送一次事件。由於沒有第二個 repeatCount 參數傳遞至 Timer() 建構函式，Timer 會不斷重複。

SimpleClock.onTick() 方法會在收到 timer 事件時，每秒執行一次：

    public function onTick(event:TimerEvent):void 
    {
        // 更新時鐘顯示畫面
        face.draw();
    }

顯示目前時間

AnalogClockFace 類別中的大部分程式碼都是用來設定鐘面的顯示元素。當初始化 AnalogClockFace 時，會繪製一個圓形、將數字文字標籤放在每個小時刻度，然後建立三個 Shape 物件，各代表時鐘上的時針、分針和秒針。

當 SimpleClock 應用程式執行時，會每秒呼叫一次 AnalogClockFace.draw() 方法，如下所示：

    /**
     * 當繪製畫面時，由父輩容器呼叫。
     */
    public override function draw():void
    {
        // 將目前日期與時間儲存在實體變數中
        currentTime = new Date();
        showTime(currentTime);
    }

這個方法會將目前時間儲存在變數中，使時間無法在繪製指針的期間改變。然後會呼叫 showTime() 方法顯示指針，如下所示：

    /**
     * 以舊式類比時鐘顯示指定日期/時間。
     */
    public function showTime(time:Date):void 
    {
        // 取得時間值
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // 乘以 6 取得角度
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // 乘以 30 取得基本角度，然後
        // 加上 29.5 度角 (59 * 0.5)
        // 來求得分鐘的角度。
        this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
    }

首先，這個方法會擷取目前時間的時、分和秒值。接著會使用這些值來計算每個指針的角度。由於秒針會 60 秒旋轉一圈，表示每秒旋轉的角度為 6 度 (360/60)。分針也是每分鐘旋轉 6 度。

時針也會每分鐘更新一次，以跟著分針走。時針會每小時旋轉 30 度 (360/12)，但也會每分鐘旋轉半度 (30 度除以 60 分鐘)。