Flash時計を作る

Flashで、ActionScriptを使用して現在時刻を表示する時計を作ることが出来ます。
ただし、ここでの「現在時刻」とはそのFlashを再生しているコンピュータに設定されている時刻のことを指しているので、
コンピュータの時刻の設定がずれていた場合、Flashで表示する時刻も同じようにずれてしまうので注意してください。
ActionScriptに少し慣れていて、「変数の内容をテキストで表示する」ことが理解できていれば簡単に作れます。

▼パソコン用のFlash時計　　▼携帯電話用のFlash時計

■パソコン用のFlash時計

ActionScriptで現在時刻を取得するには、まず「デートオブジェクト（DateObject）」というものを作成します。

n_date = new Date();

ここでは例として、「n_date」という名前をデートオブジェクトとして設定しましたが、実際には自分の好きな名前をつけてください。
デートオブジェクトに設定した「n_date」には、デートオブジェクトに設定された瞬間の時刻の情報が入っています。

getMonth()のみ、実際の月よりも -1 された数値が入っているので、あらかじめ +1 してから表示してください。
デートオブジェクトに入っている情報は、「デートオブジェクトを設定した瞬間の時刻」なので、
常に最新の時刻を取得するには、デートオブジェクトを何度も設定して時刻データを更新しなければいけません。

デジタル時計を作る場合、以下のように時刻の情報を変数に代入して表示するだけなので簡単です（ここでは例としてnow_timeという変数に代入しています）。

n_date = new Date();
now_time = "";
week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
now_time = n_date.getFullYear() + "/";
now_time += (n_date.getMonth() + 1)+ "/";
now_time += n_date.getDate() + " (";
now_time += week[n_date.getDay()] + ") ";
now_time += n_date.getHours() + ":";
now_time += n_date.getMinutes() + ":";
now_time += n_date.getSeconds();

曜日の表示について　（読まなくてもOK）
getDay()は「日、月、火、水、木、金、土」の曜日を、
「0、1、2、3、4、5、6」のように数字で返すので、
曜日用の配列変数を作成して、数字に見合った曜日名をnow_timeに代入するようにしています。

ただし、このままだと先ほど言ったように時刻を1回取得するだけで時刻が更新されないので、
この処理を毎フレーム行って時計として機能するようにします。

まず ParaFla!（Suzuka）で新しくスプライトとテキストを作成します。

ParaFla! の場合はテキストの「ファイルのプロパティ」を開き、「変数名」のところに「now_time」と入力して、「OK」を押します。
スプライトを「イベントに追加」したあと、「スプライトを編集」を押して、スプライトの中に先ほどのテキストを「イベントに追加」。
メインイベントに戻り、スプライトの「イベントのプロパティ」を開いたら、「スクリプトを編集」を押してください。

Suzuka の場合は、テキストの「テキストのプロパティ」を開き、フォントを「_ゴシック」にして「変数名」のところに「now_time」と入力して「OK」を押します。
スプライトを「レイヤーに追加」したあと、「編集」を押してスプライトの編集画面に移り、スプライトの中に先ほどのテキストを「レイヤーに追加」。
メインイベントに戻り、スプライトの「キーフレーム編集枠」にある「スクリプトを編集」を押してください。

そうしたら、スクリプトエディタに以下を書き込みます。

onClipEvent(enterFrame) {
    n_date = new Date();
    now_time = "";
    week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    now_time = n_date.getFullYear() + "/";
    now_time += (n_date.getMonth() + 1)+ "/";
    now_time += n_date.getDate() + " (";
    now_time += week[n_date.getDay()] + ") ";
    now_time += n_date.getHours() + ":";
    now_time += n_date.getMinutes() + ":";
    now_time += n_date.getSeconds();
}

「プレビュー」してみてください。デジタル時計のように表示されていますか？

2007/2/15 (Thu) 23:10:43

こんな感じで表示されるはずです。
表示されない場合は、テキストの「変数名」のところに「now_time」と入力されているか、
スプライトの中にテキストを配置しているか、スプライトからメインイベントに戻ってからプレビューしているか、を確認してみてください。

アナログ時計を作りたい場合は、時刻にあわせて針の絵を回転させるようなActionScriptを記述します。
時刻を取得するところまでは同じですが、時、分、秒を以下のようにそれぞれ別の変数に代入すると処理しやすくなるかもしれません。

n_date = new Date();
h_time = n_date.getHours();
m_time = n_date.getMinutes();
s_time = n_date.getSeconds();

まず、ペイントソフトなどで針の絵（秒針、長針、短針の3種類）を作ります。

このように、すべて上向きにデザインするとスクリプトで制御しやすいです。

＊ParaFla! の場合は、スプライトを3つ新規作成して「イベントに追加」、3枚の絵をそれぞれのスプライトに入れます。
絵をスプライトに入れたら、それぞれ絵の「イベントのプロパティ」を開き、
「中心位置」の欄に回転の軸にしたい座標を入力します。
このとき、描画位置のX、Y座標は0になるようにしてください。

3枚とも設定し終わったら、メインイベントに戻ってスプライトの「イベントのプロパティ」を開き、
秒針を入れたスプライトに「sec_t」、分針を入れたスプライトに「minu_t」、
時針を入れたスプライトに「hour_t」というインスタンス名を付けてください。
また、それぞれ3つのスプライトに描画位置のX、Y座標を入力しておきます。
Flashのサイズが 320*320 なら、スプライトの座標は 160*160 あたりにしておくといいと思います。
3つのスプライトともX、Y座標は同じ値を入力しておいてください。すると、針がこのX、Y座標を基準に回転するようになります。

さらに、3つのスプライトすべて「固定画面」に設定し、
深度を「hour_t」⇒「0」、「minu_t」⇒「1」、「sec_t」⇒「2」というように設定したら、
3つのスプライトの一番下に「アクションを追加」⇒「<スクリプト>」でフレームアクションを作成します。

＊Suzuka の場合は、スプライトを3つ新規作成して「レイヤーに追加」、3枚の絵をそれぞれのスプライトに入れます。
絵をスプライトに入れたら、それぞれ絵の「キーフレーム編集枠」で、
「制御点」の欄に回転の軸にしたい座標を入力します。
このとき、X、Y座標は0になるようにしてください。

3枚とも設定し終わったら、メインイベントに戻ってスプライトの「レイヤーのプロパティ」を開き、
秒針を入れたスプライトに「sec_t」、分針を入れたスプライトに「minu_t」、
時針を入れたスプライトに「hour_t」というインスタンス名を付けてください。
また、それぞれ3つのスプライトに「キーフレーム編集枠」からX、Y座標を設定しておきます。
Flashのサイズが 320*320 なら、スプライトの座標は 160*160 あたりにしておくといいと思います。
3つのスプライトともX、Y座標は同じ値を入力しておいてください。すると、針がこのX、Y座標を基準に回転するようになります。

レイヤーリストでスプライトの順番が上から順に「sec_t」、「minu_t」、「hour_t」となるように配置したら、
その下に「アクションレイヤーを挿入」でフレームアクションを作成します。

＊フレームアクションを作成できたら、スクリプトエディタに以下を書き込みます。

onEnterFrame = function(){
    n_date = new Date();
    //デートオブジェクト作成
    _root.hour_t._rotation = n_date.getHours() * 30 + n_date.getMinutes() / 2;
    //時針を回転
    _root.minu_t._rotation = n_date.getMinutes() * 6;
    //分針を回転
    _root.sec_t._rotation = n_date.getSeconds() * 6;
    //秒針を回転
};

メインイベントに戻り、プレビューすれば針がアナログ時計のように動いているはずです。
動いていない場合は、スプライトにインスタンス名が設定されているか、スプライトの中に針の絵が入っているか、などを確認してください。

上に示したスクリプトで針は時計のように回転しますが、
改良を加えることで針の動きを滑らかにすることができます。

_root.hour_t._rotation = n_date.getHours() * 30 + n_date.getMinutes() / 2;

時針を動かす部分で、上記の太字の部分はもともと時針の動きを滑らかにするためのものなので、
これを応用して、分針と秒針にも同じ仕組みを挿入してみます。

onEnterFrame = function(){
    n_date = new Date();
    //デートオブジェクト作成
    _root.hour_t._rotation = n_date.getHours() * 30 + n_date.getMinutes() / 2;
    //時針を回転
    _root.minu_t._rotation = n_date.getMinutes() * 6 + n_date.getSeconds() / 10;
    //分針を回転
    _root.sec_t._rotation = n_date.getSeconds() * 6 + n_date.getMilliseconds() / 180;
    //秒針を回転
};

上記のようにする事によって、時針、分針、秒針のすべてが滑らかに動作するようになります。
ただし、滑らかに動作するようにした場合、FPSが低いと画面が更新されず動きがぎこちなくなることがあるので、なるべくFPSを 24 以上にすることをおすすめします。

以下は、時計のサンプル。

Flash時計サンプルソースのダウンロード

■携帯電話用のFlash時計

携帯電話用のFlash時計を作る場合、時刻の取得方法がPC用のものとは異なってきます。
携帯電話で時刻を取得するには、「FSCommand」というものを使います。
ただし、FSCommandはパソコンでは動作しませんので、
動作の確認は実際に携帯電話で行うか、パソコンで携帯端末をシミュレートして表示できるブラウザを使うなどの必要があります。

FSCommandには時刻を表示するのにてっとりばやいスクリプトがあるので紹介します。

FSCommand2("GetLocaleTime", "変数名");

「変数名」の部分に時刻を代入したい変数の名前を入力すると、その変数に時刻、分、秒が代入されます。

11:03:18

変数の中身はこのようになっているので、時刻を表示するだけならこれを使えばとても楽です。

もちろん、項目別に取得するスクリプトもあります。

FSCommandのGetDateMonthは、表示の際に +1 する必要はありません。
曜日は数字で返されるので、表示する際には文字に置換する必要があります。

デジタル時計を作りたい場合、時刻を取得するスクリプトが違うだけで、時計を表示する処理は殆どPC用のものと同じですが、
SWF4のActionScript構文にあわせなければいけないので少々めんどうです。

now_time = "";
//変数の初期化
("week" & "0") = "Sun";
("week" & "1") = "Mon";
("week" & "2") = "Tue";
("week" & "3") = "Wed";
("week" & "4") = "Thu";
("week" & "5") = "Fri";
("week" & "6") = "Sat";
//曜日用の擬似配列
now_time_yr = FSCommand2("GetDateYear") & "/";
now_time = now_time & now_time_yr;
//西暦
now_time_mth = FSCommand2("GetDateMonth") & "/";
now_time = now_time & now_time_mth;
//月
now_time_dy = FSCommand2("GetDateDay") & " (";
now_time = now_time & now_time_dy;
//日付
wd = FSCommand2("GetDateWeekday");
now_time = now_time & valueOf("week" & wd) & ") ";
//曜日
now_time_h = FSCommand2("GetTimeHours") & ":";
now_time = now_time & now_time_h;
//時刻
now_time_m = FSCommand2("GetTimeMinutes") & ":";
now_time = now_time & now_time_m;
//分
now_time_s = FSCommand2("GetTimeSeconds");
now_time = now_time & now_time_s;
//秒

このようになります。
動作を確かめるには、まず「プロジェクトのプロパティ」の「SWFバージョン」で「SWF4」を選択します。

ParaFla! の場合、その後テキストを新規作成して「変数名」に「now_time」と入力し、
「自動サイズ」のチェックを外して幅と高さに「300」と入力します。
続いて、テキストを「イベントに追加」したら、イベント欄の2段目に「アクションを追加」⇒「<スクリプト>」でフレームアクションを作成し、上に示したスクリプトを書き込みます。

Suzuka の場合、その後テキストを新規作成してフォントを「_ゴシック」にし、変数名に「now_time」と入力し、
「自動サイズ」のチェックを外し、幅と高さに「300」と入力します。
続いて、テキストを「レイヤーに追加」したら、次に「アクションレイヤーを挿入」でフレームアクションを作成し、上に示したスクリプトを書き込みます。

あとは、「SWFファイル生成」でSWFを作り、携帯電話に送信してファイルを開いてみてください。

2007/2/18 (Sun) 12:38:23

このように表示されれば成功です。
ただし、このままだと時刻が更新されないので、「ラベルジャンプ」や「フレームジャンプ」をしてフレームアクションを何度も実行する必要があります。

携帯用のアナログ時計を作りたい場合は、パソコン用のアナログ時計とFSCommandを組み合わせて、
それをSWF4のActionScript構文で書かなければいけません。

針の絵を作成してスプライトに入れ、フレームアクションを挿入するところまではパソコン用アナログ時計と同じなので、説明は割愛します。
「プロジェクトのプロパティ」から「SWFバージョン」で「SWF4」を選択したら、
挿入したフレームアクションに以下を書き込みます。

/hour_t.rotation = FSCommand2("GetTimeHours") * 30 + FSCommand2("GetTimeMinutes") / 2;
//時針を回転
/minu_t.rotation = FSCommand2("GetTimeMinutes") * 6;
//分針を回転
/sec_t.rotation = FSCommand2("GetTimeSeconds") * 6;
//秒針を回転
/hour_t.xscale = 100;
/minu_t.xscale = 100;
/sec_t.xscale = 100;
/hour_t.yscale = 100;
/minu_t.yscale = 100;
/sec_t.yscale = 100;
//画像が縮むのを防ぐ

rotarion で画像を回転させるとなぜか画像が小さくなっていってしまうので、最後の6行でそれを防いでいます。
「SWFファイル生成」で swf を作り、携帯電話に送ってファイルを開けば針がアナログ時計のように回転していると思います。

また、滑らかに動作するようにするには、以下のようにしてください。

fps = 20;
//FPSの設定
/hour_t.rotation = FSCommand2("GetTimeHours") * 30 + FSCommand2("GetTimeMinutes") / 2;
//時針を回転
/minu_t.rotation = FSCommand2("GetTimeMinutes") * 6 + FSCommand2("GetTimeSeconds") / 10;
//分針を回転
t_f = 1 / fps;
if(FSCommand2("GetTimeSeconds") != t_sec){
    cnt = 0;
    t_sec = FSCommand2("GetTimeSeconds");
}else{
    cnt = cnt + 1;
}
millisec = t_f * cnt;
/sec_t.rotation = int((FSCommand2("GetTimeSeconds") + millisec) * 6);
//秒針を回転
/hour_t.xscale = 100;
/minu_t.xscale = 100;
/sec_t.xscale = 100;
/hour_t.yscale = 100;
/minu_t.yscale = 100;
/sec_t.yscale = 100;

1行目にfpsという変数がありますが、ここにはFlashのFPSを入力してください。
なめらかな処理にはミリ秒の値が必要ですが、FSCommandにはミリ秒を取得するスクリプトが無いため、1フレームごとの処理でミリ秒を計算する必要があり、そのためにFPSの数値が必要になります。

SWF4のミリ秒を計算している部分はhisさんに教えていただきました。ありがとうございます。

以下は、SWF4の時計のサンプルです（パソコンで表示しても動作しません）。

携帯端末用Flash時計サンプルソースのダウンロード

戻る