ActionScript 3.0で始めるオブジェクト指向スクリプティング

第6回 Dateクラスで時刻を調べる

この記事を読むのに必要な時間:およそ 2.5 分

時計をつくる

前節でご紹介したDateクラスのプロパティを使って,前回までのスクリプトによるアニメーションの知識を応用すれば,時計をつくることはそう難しくないだろう。ただし,Dateインスタンスについて,ひとつだけ注意しておくことがある。

たとえば,Microsoft Excelには,現在の日時の値を返すNOW()という関数がある。この関数をExcelのワークシートに入力すると,値は時々刻々自動的に更新され,つねに今現在の日時を返す。

しかし,ActionScriptのDateインスタンスは,生成時の日時情報を保持したまま,あえて変更しないかぎりその値は変わらない。したがって,今現在の日時情報を取得したいときは,そのたびにDateインスタンスを生成しなければならない。

ところで,Dateクラスのインスタンスは,Dateインスタンスと表現してきた。この考え方でいうと,ムービークリップインスタンスも, ActionScript上はMovieClipクラスのインスタンスである。そこで,今後はActionScriptとしての扱いを意識するために, MovieClipインスタンスと表記することにする。

さて,時計のMovieClipシンボル(Clock) 内に,時針,分針,秒針のMovieClipインスタンスをそれぞれhour_mc, minute_mc,second_mcとして配置した場合,時計のアニメーションを処理する第1フレームアクションはつぎのとおりだスクリプト3⁠。

スクリプト3 時計のMovieClipシンボルの第1フレームアクション

function xSetTime(eventObject:Event):void {
  var my_date:Date = new Date();
  var nSeconds:Number = my_date.seconds;
  var nMinutes:Number = my_date.minutes;
  var nHours:Number = my_date.hours;
  second_mc.rotation = nSeconds*6;
  minute_mc.rotation = nMinutes*6;
  hour_mc.rotation = nHours*30+nMinutes/2;
}
addEventListener(Event.ENTER_FRAME, xSetTime);

Dateインスタンスの時・分・秒のプロパティhours,minutes,secondsにより現在時刻の各値を取得したら,単位当たりの回転角を乗じたうえで,それぞれの針のMovieClipインスタンスのrotationプロパティに設定して,時計のアニメーションを行っている。

ただし,時針のMovieClipインスタンスhour_mcの,rotationプロパティへの代入式の右辺だけは2項ある。第1項の時(hoursプロパティ)の値にもとづく処理だけでも,時計として誤りとはいえないかもしれない。しかし,時の値は1時間に1度しか更新されず,しかも一気に30度(=360/12)も回転することになる。アナログ時計のアニメーションとしては,少し違和感があろう。

そこで,第2項により,(minutesプロパティ)の値も加味することにした。1分間は1/60時間で,1時間当たりの回転角は30度だ。したがって,1分当たり1/2度(=30/60)回転を加えればよいことになる。[ムービープレビュー]で確かめると,アナログ時計のアニメーションが実行される図3⁠。

図3 アナログ時計のアニメーション

図3 アナログ時計のアニメーション

次回は,この時計に日付の表示を加えてみたい。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書