時計を作ってみる_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(310)
Flashソース:clock2.fla(322)
Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.