第17回
デジタル時計の作り方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回は、ActionScript 3.0の初歩でもある、デジタル時計の作り方をご紹介します。

▼完成

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビシステムズのホームページよりダウンロードのうえ、インストールをお願いします。

作成方法

新規ファイル（AS3.0）を開き、ステージサイズを「250」×「150」pxに変更します。
背景を作成します。（位置はステージに合わせます。）
［矩形］ツールでステージサイズと同じ、250×150pxの矩形を描画します。描画した矩形を選択し、カラーパネルでカラーを変更していきます。種類で線状を選択し、グラデーションカラーを左「#663333」、右「#D9B3B3」とします。

設定が終わったら誤操作を防ぐために、レイヤーにはロックをかけておきます。
レイヤーを追加し、下記の画像のように日付・時間を表示するテキストをそれぞれ作成します。

「/」、「：」は静止テキスト、それ以外はダイナミックテキストで作成します。入力する文字はあくまでも目安なので何でもOKです。
作成したテキストにグラデーショングローを適用します。
テキスト全てを選択し、プロパティパネルのフィルタでグラデーショングローを適用します。下記の通り設定します。

グラデーションカラーは「#FF6599」とします。
作成したテキストにそれぞれのインスタンス名を設定します。
- 「年」を表示するテキスト⇒「year_txt」
- 「月」を表示するテキスト⇒「month_txt」
- 「日」を表示するテキスト⇒「day_txt」
- 「時」を表示するテキスト⇒「hour_txt」
- 「分」を表示するテキスト⇒「minute_txt」
- 「秒」を表示するテキスト⇒「second_txt」

新規にレイヤーを追加し、下記のスクリプトを記述します。

addEventListener(Event.ENTER_FRAME,digitalclockDate);

function digitalclockDate(evt:Event):void{
	//Dateクラス設定


	var dateObj = new Date();
	//年を表示
	year_txt.text = dateObj.fullYear;
	//月を表示
	if (dateObj.month< 10) {
		//1桁の場合は頭に0を足す


		month_txt.text = "0" + (dateObj.month + 1);
	} else {
		month_txt.text = dateObj.month;
	}
	//日を表示
	if (dateObj.date< 10) {
		//1桁の場合は頭に0を足す


		day_txt.text = "0" + dateObj.date;
	} else {
		day_txt.text = dateObj.date;
	}
	//時を表示
	if (dateObj.hours< 10) {
		//1桁の場合は頭に0を足す


		hour_txt.text = "0" + dateObj.hours;
	} else {
		hour_txt.text = dateObj.hours;
	}
	//分を表示
	if (dateObj.minutes< 10) {
		//1桁の場合は頭に0を足す


		minute_txt.text = "0" + dateObj.minutes;
	} else {
		minute_txt.text = dateObj.minutes;
	}
	//秒を表示
	if (dateObj.seconds< 10) {
		//1桁の場合は頭に0を足す


		second_txt.text = "0" + dateObj.seconds;
	} else {
		second_txt.text = dateObj.seconds;
	}
}

ムービープレビューで動作を確認します。