シンプルなアナログ時計を作成

以前作成した時計はデジタル時計でしたが、今回はアナログ式の時計を作成していきます。

_rotationプロパティを利用したアナログ時計。 (.flaファイルはページの最後でダウンロードできます)

角度を扱う「_rotation」プロパティ

1.　ここからサンプルのFlashをダウンロードしてください。
オーソドックスな、時を表わす短針(インスタンス「hourHand」)、分を表わす長針(インスタンス「minuteHand」)、秒を表わす秒針(インスタンス「secondHand」)と、3つのムービークリップがそれぞれのレイヤーに配置されていることを確認してください。

2.　レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。

_root.onEnterFrame = function(){
	nowTime = new Date();
	hour = nowTime.getHours();
	if(hour>12){
		hour = hour -12;
	}
	minute = nowTime.getMinutes();
	second = nowTime.getSeconds();
	minuteHand._rotation = Math.floor(minute/60*360);
	secondHand._rotation = Math.floor(second/60*360);
	hourHand._rotation = Math.floor(hour/12*360);
}

1行ずつ解説していきます。

まず、1行目から

_root.onEnterFrame = function(){ }

これは以前も出てきた、タイムラインが1つ進む毎に{ }内の処理を実行するという意味でした。

2行目に移ります。

nowTime = new Date();

これはDateオブジェクトを生成する記述でしたね。以降Dateオブジェクト「nowTime」を利用していきます。

3～6行目のif文を含む行です。

hour = nowTime.getHours();
if(hour>12){
		hour = hour -12;
	}

アナログ時計は一般的に12時間表示ですから、取得した時が13時以降であった場合、12を引くことで12時間表示に変換しています。

7、8行目で分と秒をそれぞれの変数に格納しています。
9～11行目に移ります。

minuteHand._rotation = Math.floor(minute/60*360);
secondHand._rotation = Math.floor(second/60*360);
hourHand._rotation = Math.floor(hour/12*360);

時針、分針、秒針の角度を時間によってそれぞれの角度に移動させます。
「_rotation」というのは、指定のインスタンスの角度を示すプロパティになります。
分の場合、「現在の分/最大値(60分)×360(角度)」として分を角度に変換しています。端数が出るので、「Math.floor()」を使用して整数値に変換しています。

これで完成です。

完成したファイルをダウンロード


例えばWindowsの場合、HTMLに張り付けたFlashを壁紙として利用することもできます。シンプルなデザインのアナログ時計でしたが、これを利用してオリジナルのデスクトップ時計作りにチャレンジしてみてください。