!!!時計を作ってみる

「[[アクション|アクション_Flash]]」にてデジタルな時計を表示しましたが
今度はアナログ時計です。

円状に土台を作り、針が時間・分・秒で移動するものとします。
（わき道にそれますが、WikiではFlashを直接貼り付けることができないため面倒ですねぇ）

{{ref_image clock_20040714.png}}

ライブラリ（シンボルをグラフィックで作成）としては「時間の針」「分の針」「秒の針」を作成し、
これをルートとなるシーンの上に貼り付けています。

{{ref_image clock_lib_20040714.png}}

また、シーンを構成するレイヤを以下のように並べています。
重ね合わせの順番に注意してください。

{{ref_image clock_action_20040714.png}}

注意点として「アニメーションする場合は、２フレーム以上であること」です。
今回は、時計の針が時間により動きますので空のフレームとして２フレーム目を
確保しています。

「時間の針」「分の針」「秒の針」は、時間経過にあわせて動きます。
正確に言うと、中心を軸として回転します。ので、針の根元の部分が回転の中心となるように、あらかじめ個々のシンボルにて原点を決めるようにしてください。
また、12時をさすとき（垂直上向き）が回転の0度とします。配置するときは、
時分秒ともに12時の方向を向くようにしてください。

シーンに配置した「時間の針」「分の針」「秒の針」のオブジェクトを選択し、
それぞれのプロパティにて「m_hour」「m_min」「m_sec」とインスタンス名をつけます。これは、ActionScriptにて個々のオブジェクトを操作する場合に必要になります。

さて、それでは「アクション」レイヤにて1フレーム目をマウスで選択して
ActionScriptを書いていきます。

以下のようなソースを[[アクション|アクション_Flash]]ウィンドウに書きます。

 //時間の取得
 t = new Date();
 h = t.getHours();
 m = t.getMinutes();
 s = t.getSeconds();
 
 if(h > 12) h -= 12;
 
 //時間の針の回転角を指定
 dat = Math.floor(360 * h / 12);
 dat2 = Math.floor((360 / 12) * (m / 60));
 m_hour._rotation = dat + dat2;
 
 //分の針の回転角を指定
 dat = Math.floor(360 * m / 60);
 m_min._rotation = dat;
 
 //秒の針の回転角を指定
 dat = Math.floor(360 * s / 60);
 m_sec._rotation = dat;

やっていることはたいしたことではなく、[[Date|日付時間の取得_Flash]]クラスより現在の時間・分・秒を取得し、「m_hour」「m_min」「m_sec」であらわされる針の回転角度を「_rotation」にて
指定しています。

オブジェクトごとのプロパティについては「[[オブジェクトのプロパティ|オブジェクトのプロパティ_Flash]]」を参照してください。

以上、アナログ時計のソースとswfファイルは以下になります。

Flash swfファイル：{{ref clock2.swf}}

Flashソース：{{ref clock2.fla}}