アナログ時計を作る

| comment (0) | trackback (0)

日付や時刻を取得することのできる Date クラスを使ってアナログ時計を作りましょう。
Date オブジェクトもほかのオブジェクトと同じように new 演算子を使って生成します。

var myDate:Date = new Date();

Date クラスにはさまざまなプロパティやメソッドがあり,それらを用いて日時情報を取得することができます。
例えば、現在の時間(ローカル時間)の「時」 ( 0 ~ 23 の整数)を取得するには、hours プロパティか、あるいは getHours メソッドで取得することができます。
次の例では、同じ現在の「時」の値を出力します。

var now:Date = new Date();
trace(now.hours);
trace(now.getHours());

アナログ時計を作るためには、現在の時刻に合わせて秒針、分針、時針の角度を得る必要があります。
それぞれ3つの針の位置を調べるために次の3つのプロパティを利用します。

プロパティ 説明
hours Date オブジェクトのローカル時間による「時」を0 ~ 23 の整数で返します。
minutes Date オブジェクトのローカル時間による「分」を0 ~ 59 の整数で返します。
seconds Date オブジェクトのローカル時間による「秒」で0 ~ 59 の整数で返します。

時刻更新の繰り返し処理に Event.ENTER_FRAME イベント を使用します。
次の例では、フレームが進むたびに現在の「時」、「分」、「秒」の値を出力します。

addEventListener (Event.ENTER_FRAME, onUpdate);
function onUpdate (event:Event):void {
	var now:Date = new Date();
	trace (now.hours);
	trace (now.minutes);
	trace (now.seconds);
}

時刻を取得できました。あとはその値に合わせて各針の角度を設定します。

秒針は1秒に 360 ÷ 60 つまり 6 度ずつ進みますので現在時刻の秒針の角度は、現在の「秒」×( 360 ÷ 60 )であらわせます。秒針のムービークリップ second_mc の rotation プロパティにその値を代入します。
現在時刻の秒針の角度を設定するには以下のようになります。

var now:Date = new Date();
var mySecond:Number = now.seconds;
second_mc.rotation = mySecond*(360/60);

長針も同様に 1 分間に 6 度ずつ進みますので現在時刻の秒針の角度は、現在の「分」×( 360 ÷ 60 )です。よって、分針のムービークリップ minute_mc に現在時刻の角度を設定するには以下のようになります。

var now:Date = new Date();
var myMinute:Number = now.minutes;
minute_mc.rotation = myMinute*(360/60);

短針も同様に考えれば、1 時間に 360 ÷ 12 つまり 30 度ずつ進みます。しかしこれでは、短針は 1 時間ごとにしか動かないことになり不自然な動作になります。
短針が1時間に動く角度は 30 度回転するのですから、1 分間には 30 ÷ 60 つまり 0.5 度進む事になります。 よって、短針の角度は現在の「時」×( 360 ÷ 12 )+現在の「分」×( 30 ÷ 60 )であらわすことがます。
時針のムービークリップ hour_mc に現在時刻の角度を設定するには以下のようになります。

var now:Date = new Date();
var myHour:Number = now.hours;
hour_mc.rotation = myHour*(360/12) + myMinute*(30/60);

リスナー関数onUpdateの中を修正すると次のようになります。

addEventListener (Event.ENTER_FRAME, onUpdate);
function onUpdate (event:Event):void {
	var now:Date = new Date();
	var mySecond:Number = now.seconds;
	var myMinute:Number = now.minutes;
	var myHour:Number = now.hours;
	second_mc.rotation = mySecond*(360/60);
	minute_mc.rotation = myMinute*(360/60);
	hour_mc.rotation = myHour*(360/12) + myMinute*(30/60);
}

trackback (0)

trackback URL: http://gelsol.sub.jp/core/mt-tb.cgi/38

Post your comment