« 7.1 Spriteクラスに図形を描く(1) | メイン | 9.1 イメージファイルの読み込み(1) »

8.1 時計を作る (1)デジタル時計

■デジタル時計
Dateクラスを利用して時分秒のデジタル時計を作ります。Dateクラスのインスタンスを作ると、その時点の日時データがDateオブジェクトというかたちで作られます。DateオブジェクトのdateObjから年を調べるにはdateObj.getFullYear()、月はdateObj.getMonth()、日はdateObj.getDate()というようにメソッドを実行します。なお、getMonth()は1月が0、2月が1のように0からカウントするので注意してください。曜日を調べるgetDay()も日曜日から土曜日を0〜6で示します。このほうが月名や曜日名を配列に入れて参照する際にインデックス番号が一致して扱いやすいためです。

[:sample:] dateSample.fla
例:フレームアクション
var week:Array = ["日","月","火","水","木","金","土"];
var dateObj:Date = new Date();
var yyyy:Number = dateObj.getFullYear();
var mm:Number = dateObj.getMonth()+1;
var dd:Number = dateObj.getDate();
var youbiIndex:Number = dateObj.getDay();
var today:String = yyyy+"年"+mm+"月"+dd+"日("+week[youbiIndex]+")";
trace(today); //出力→ 2007年6月2日(土)

次のDigitalClockクラスでは時刻を時分秒で表示するデジタル時計を作るクラスです。秒は1000分の1秒まで表示する時計を作ることが可能ですが、実際にはフレーム処理が間に合わないので表示が追いつきません。DigitalClockクラスでは、時刻更新の繰り返し処理をEvent.ENTER_FRAMEイベントのフレーム再生のタイミングに合わせて行います。

fig08-01-01.jpg
fig08-01-01 時分秒表示のデジタル時計。

[:sample:] DigitalClock.as
例:時分秒のデジタル時計を作るDigitalClockクラス
package {
	import flash.events.Event;
	import flash.display.MovieClip;

	public class DigitalClock {
		var clock_mc:MovieClip;
		//コンストラクタ
		function DigitalClock(mc:MovieClip) {
			clock_mc = mc;
			clock_mc.addEventListener(Event.ENTER_FRAME, updateDigiClock);
		}
		//時計を更新する
		function updateDigiClock(event:Event):void {
			var dateDigitObj:Object = getNowDateDigit();
			//0〜9の数字を各桁で表示する
			clock_mc.hh.num10.gotoAndStop(dateDigitObj.h10+1);
			clock_mc.hh.num01.gotoAndStop(dateDigitObj.h01+1);
			clock_mc.mm.num10.gotoAndStop(dateDigitObj.m10+1);
			clock_mc.mm.num01.gotoAndStop(dateDigitObj.m01+1);
			clock_mc.ss.num10.gotoAndStop(dateDigitObj.s10+1);
			clock_mc.ss.num01.gotoAndStop(dateDigitObj.s01+1);
		}
		//現在時刻を調べる
		function getNowDateDigit():Object {
			//現在時刻の時分秒を調べる
			var now:Date = new Date();
			var hh:Number = now.getHours();
			var mm:Number = now.getMinutes();
			var ss:Number = now.getSeconds();
			//2桁を1桁ずつに分ける
			var dateDigitObj:Object = new Object();
			dateDigitObj.h10 = Math.floor(hh/10);
			dateDigitObj.h01 = hh%10;
			dateDigitObj.m10 = Math.floor(mm/10);
			dateDigitObj.m01 = mm%10;
			dateDigitObj.s10 = Math.floor(ss/10);
			dateDigitObj.s01 = ss%10;
			return dateDigitObj;
		}
	}
}

このDigitalClockクラスでデジタル時計を作るには、ムービークリップの作り方が大事になってきます。時分秒の数字を表示するために、0〜9の数字を書いたのムービークリップインスタンスに参照するためにスクリプトに合わせてインスタンス名を正しく付ける必要があります。たとえば、時の10の桁の数字は次の式で表示するので、10の桁の数字であるインスタンスにはclock_mc.hh.num10で参照できるようにムービークリップを作らなければなりません。
例:時の10の桁の数字を表示する
clock_mc.hh.num10.gotoAndStop(dateDigitObj.h10+1);

このような構造になるように時分秒を作るには、まず最初に0〜9の数字を書いたムービークリップを作ります。フレーム数が10フレームのムービークリップcount9を作り、すべてのフレームをキーフレームにします。そして、フレーム1は0、フレーム2は1のように、0から順に9までの数字を各キーフレームに1つずつ表示します。そしてムービークリップの1フレーム目のフレームアクションにはstop()と書いておきます。この数字が時分秒の各桁になります。


fig08-01-02 キーフレームに0〜9の数字を配置したムービークリップcount9を作ります。先頭フレームにはstop()と書いておきます。

次にムービークリップcount9のインスタンスを2個並べたムービークリップcount99を作り、num10、num01とインスタンス名を付けます。これが時分秒のそれぞれの2桁の数字になります。

fig08-01-03 ムービークリップcount9のインスタンスを2個並べたムービークリップcount99を作ります。

さらに時分秒と表示するために「00:00:00」のようにムービークリップcount99のインスタンスを並べたムービークリップdigitalClockを作り、count99のインスタンスにhh、mm、ssとインスタンス名を付けます。

fig08-01-04 「00:00:00」のようにムービークリップcount99のインスタンスを並べ、hh、mm、ssとインスタンス名を付けたムービークリップdigitalClockを作ります。

最後にムービークリップdigitalClockのインスタンスをステージに作り、インスタンス名をdigiClock_mcと付けます。そしてメインのタイムラインのフレームアクションに次のスクリプトを書きます。

[:sample:] digitalClock_test.fla
例:メインのタイムラインのフレームアクション
import DigitalClock;
var digiClockObj:DigitalClock = new DigitalClock(digiClock_mc);

fig08-01-05 ステージにムービークリップdigitalClockのインスタンスdigiClock_mcを作り、メインのタイムラインにフレームアクションを書きます。

現在の時刻はDateクラスのインスタンスを作ってgetHours()、getMinutes()、getSeconds()のメソッドで簡単に調べることができますが、このサンプルのように0〜9の数字を使ったデジタル時計で表示するには、時分秒のそれぞれ2桁の数字を1桁ずつの数字にばらす必要があります。次のように計算することで、hhに入っている日付の10の桁の数をh10に入れ、1の桁の数をh01に入れることができます。mm、ssの値も同様です。計算式で使っているMath.floor()は小数点以下切り捨ての関数で、%は余りを求める演算子です。
ObjectクラスでdateDigitObjオブジェクトを作り、それぞれの値をdateDigitObjオブジェクトのプロパティの値として設定することで、h10〜s01の6個の値が1つのdateDigitObjオブジェクトにまとまって扱いが簡単になります。

例:時刻の数字を取り出す
//現在時刻を調べる
function getNowDateDigit():Object {
	//現在時刻の時分秒を調べる
	var now:Date = new Date();
	var hh:Number = now.getHours();
	var mm:Number = now.getMinutes();
	var ss:Number = now.getSeconds();
	//2桁を1桁ずつに分ける
	var dateDigitObj:Object = new Object();
	dateDigitObj.h10 = Math.floor(hh/10);
	dateDigitObj.h01 = hh%10;
	dateDigitObj.m10 = Math.floor(mm/10);
	dateDigitObj.m01 = mm%10;
	dateDigitObj.s10 = Math.floor(ss/10);
	dateDigitObj.s01 = ss%10;
	return dateDigitObj;
}

About

2007年8月 1日 08:13に投稿されたエントリーのページです。

ひとつ前の投稿は「7.1 Spriteクラスに図形を描く(1)」です。

次の投稿は「9.1 イメージファイルの読み込み(1)」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。