日付や時刻を取得することのできる 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);
}
Post your comment