時計を作ろう

アナログ時計（鳩時計）を作る

これまでの節で紹介した知識を応用すれば、時計を作るのはそれほど難しくありません。まずは、アナログ式の鳩時計を作ります。

制作のポイントとしては、

• 文字盤に表示する針が時間通りの向きになる
• 時間がきたら鳩が鳴く
• 目覚ましをセットした時間になったら鳩が鳴く

の3 点です。

とりあえず、鳩時計のページを開いてみましょう。010401

実行すると、まず最初に鳩がいまの時間の数だけ鳴く動きをすることが確認できるかと思います。また、時計もいまの時間通りに表示され、秒針が1 秒ごとに移動している様子が見られるでしょう。

この鳩時計がどのようなしくみで動いているのかを解説していきます。

コードの全体像

コードを全体的に眺めると、ドキュメントクラスのPigeonClock クラス、その他に時計を管理するClockMaster クラス、データを読み込むDataLoaders クラス、カスタムイベントクラスのClockEvent クラスの3 つのクラスからできていることがわかると思います。

コード01 コードの構造 010401

public class PigeonClock extends Sprite
{
	//表示パーツ
	private var _longDart:Sprite = new Sprite();
	private var _shortDart:Sprite = new Sprite();

/**
*時計を管理するクラス
*/
class ClockMaster extends EventDispatcher {
private var _hours:int;
private var _minutes:int;

/**
* データ読み込みクラス
*/
class DataLoaders extends Sprite {
private var _counter:int = 0;
private var _loadNum:int = 0;

/**
*時計イベントクラス
*/
class ClockEvent extends Event {
	public static const HOURS_CHANGED:String = "hoursChanged";
	public static const MINUTES_CHANGED:String = "minutesChanged";

PigeonClock クラスがこのサンプルにおけるドキュメントクラスであり、すべての機能の中心となるものです。こちらでClockMaster を呼び出し、ClockMaster が発行する時計イベントに合わせて表示要素を操作します。また、今回は複数のパーツをロードして表示するため、すべてのパーツを読み込み、完了したらイベントを発行するDataLoaders クラスに読み込みの処理を任せます。2 つのカスタムイベントは、それぞれClockMaster クラスとDataLoadersクラスで使うカスタムイベントです。

これらのクラスを用いて、

1. データ読み込み
2. 表示オブジェクトを現在の時間に合わせて配置する
3. 時計を回す

という順番で処理を進めていきます。

データを読み込む

ドキュメントクラスのコンストラクタを見ると、_step1_dataload() の関数が実行されています。この関数では、DataLoaders クラスのインスタンスである_allLoader に対してEvent.COMPLETE イベントが起こったら_LoadCompHandler 関数を実行しなさい、という命令を出しています。

DataLoaders においてEvent.COMPLETE イベントがどういうタイミングで発行されるかですが、該当の箇所を見ると、_counter はデータが1 つロードされるたびにカウントアップされる変数で、_loadNum は読み込むデータの個数です。ということは、すべてのデータの読み込みが確認されたら次の処理に進める、という条件がここで設定されているということになります。

コード02 Event.COMPLETEイベントの発行 010401

if(_counter == _loadNum){
	dispatchEvent(new Event(Event.COMPLETE));
}

_step1_dataload メソッドで実行されている、_allDataLoad 関数ではDataloaders クラスの_addLoadItem 関数を使って、読み込みたいファイルのアドレスとid をDataloaders クラスに登録していきます。登録後、_loadStart 関数を実行します。この関数ではfor in を使って、登録されたアドレスが入っているオブジェクトすべてに対して読み込みを開始します。

今回は単純にすべてのデータの読み込み完了まで待つだけでよいため、１つのファイルの読み込みが完了するたびにカウントアップし、すべてのファイルの読み込みが完了 = カウントがアイテム数に到達したときにEvent.COMPLETE を発行する、というわけです。

表示オブジェクトを配置する

読み込み完了で呼び出される_LoadComplete 関数では、まず_step2_setItems 関数を実行します。この関数では表示するオブジェクトを配置し、位置など調整します。長針、短針、時計本体などをそれぞれ配置しますが、これらは単純に時計を形作るように配置する、というだけですので、ここでは図1 で示すにとどめておきましょう。

次のような構成で、それぞれのオブジェクトが配置されています。

時計を設定する

次に実行される関数は_step3_setClock です。こちらでは時計の動きを設定して表示オブジェクトに反映します。

関数の中身を見ると、○○ Handler という関数が実行されつつ、ClockEvent のハンドラに設定されているのがわかるかと思います。

コード03 step3_setClock 010401

_secHandler(null);
_minHandler(null);
_hourHandler(null);
_clock.addEventListener(ClockEvent.SECONDS_CHANGED, _secHandler);
_clock.addEventListener(ClockEvent.MINUTES_CHANGED, _minHandler);
_clock.addEventListener(ClockEvent.HOURS_CHANGED, _hourHandler);

この処理により○○ Handler はそれぞれ時、分、秒が変わるたびに実行される関数になり、はじめに1 回実行しておくことでいまの時間の条件に合わせることになっています。

では、それぞれのHandler での処理内容を見てみましょう。まず、毎秒実行の_secHandlerでは、_secDart のrotation が_clock.secondsDegree に設定されています。この_clock.secondsDegree というのは、現在の時間での秒針の角度を返す、ClockMaster クラスのgetterメソッドです。

毎時実行の_hourHandler も同様です。ただし、時間が変わるときは鳩時計が鳴くときなので、ここでは鳩を動かす_pigeonPlay 関数も実行します。_pigeonPlay 関数は、受け取った数値の回数だけ鳩が鳴く動きをさせます。しくみとしては、_pigeonCoo 関数において、_pigeon と_pigeon2 の表示を入れ替えていることによって鳴く動きになります。

_pigeon は通常の状態、_pigeon2 は鳴いている状態です。Timer クラスのインスタンス、_timer に対してTimerEvent を設定し、指定の時間（今回は500 ミリ秒）が経過したら_pigeonCoo 関数を実行します。_pigeonCoo 関数ではもう1 つのTimer インスタンス「_pigeonPlayTimer」をstart させます。

表示を入替→ _pigeonPlayTimer の時間到達→表示を戻す、という流れで処理することにより、鳩が鳴く動きを表現します。

_pigeonPlayTimer 関数の実行のたびに_pigeonCounter がカウントアップされ、時間の回数だけ再生したらタイマーイベントを解除するように設定します。