トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

時計を作ってみる_Flash

時計を作ってみる

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

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

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

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

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

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

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

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

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

//時間の取得
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クラスより現在の時間・分・秒を取得し、「m_hour」「m_min」「m_sec」であらわされる針の回転角度を「_rotation」にて指定しています。

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

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

Flash swfファイル:clock2.swf(301)

Flashソース:clock2.fla(308)

Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.