Flash制作を簡単にする
ActionScriptライブラリとは？

特集：Flasherに便利なオープンソース「Spark project」

Spark project コミッタ
新藤 愛大
2008/12/10

どんだけ便利かをコードで実感

　では、いよいよTeraClockを使ってアナログ時計を動かすActionScriptのコードを書いてみます。

☆ TeraClockを使ってみよう

　作り方としては、いま作った針のクリップの角度を、時間に応じて変えることになります。まずは、ドキュメントクラスとなるMain.asファイルを作ります。

図4　Main.asファイルを作成

　次に、Flashの［プロパティインスペクタ］で、Main.asをドキュメントクラスに設定しましょう。

図5　Main.asをドキュメントクラスに設定

☆ TeraClockを使ったActionScriptのコード

　そして、Main.asに以下のコードを書きます。

package { import flash.display.MovieClip; import flash.events.Event; import com.trick7.utils.TeraClock; // -- 【1】 public class Main extends MovieClip {     public function Main()     {         _clock = new TeraClock(); // -- 【2】         _clock.addEventListener(TeraClock.SECONDS_CHANGED,             secondsHandler); // -- 【3】     }     private var _clock:TeraClock;     private function secondsHandler(e:Event):void     {         hoursClip.rotation = _clock.hoursDegree; // -- 【4】         minutesClip.rotation = _clock.minutesDegree; // -- 【4】         secondsClip.rotation = _clock.secondsDegree; // -- 【4】     } } }

　このコードについて簡単に解説します。まず【1】のところで、TeraClockクラスをインポートしています。インポートとは、「このクラスを使いますよ」という宣言ですね。今回TeraClockを使うので、もちろんこの宣言をする必要があります。

　続いて【2】のところで、TeraClockクラスのインスタンスを作成しています。そして【3】のところで、作ったTeraClockクラスのインスタンスに対して、SECONDS_CHANGEDイベントのリスナーを追加しています。

　TeraClockには、「HOURS_CHANGED」「MINUTES_CHANGED」「SECONDS_CHANGED」の3つのイベントが定義されており、それぞれ、「時」「分」「秒」が変わったときに呼び出されます。今回は、SECONDS_CHANGEDイベントを使ったので、秒が変わるたびに、secondsHandlerが呼び出されることになります。

　secondsHandlerの中、【4】のところでは、先ほど作ったhoursClip、minutesClip、secondsClipに対して、角度を設定しています。TeraClockでは、アナログ時計を作るときに設定すべき角度を返してくれる、「hoursDegree」「minutesDegree」「secondsDegree」という、とてもとても便利なプロパティがあるので、それをそのまま使っています。

　これで、「秒が変わるたびにそれぞれの針の角度を適切なものに更新する」ActionScriptの出来上がりです。とても簡単だと思いませんか？

☆ 実行して確かめてみよう

　実行してみると、きちんとアナログ時計が表示されます。

TeraClockを使ったアナログ時計のサンプル（このまま動かせますが、実行にはFlash Playerが必要になります。Flash Playerのダウンロードページはこちら ）

☆ TeraClockを使わずに書くと……

　ちなみに、同じことをTeraClockを使わずに書くと、次のようになります。

package { import flash.display.MovieClip; import flash.events.Event; public class Main2 extends MovieClip {     public function Main2()     {         addEventListener(Event.ENTER_FRAME, enterFrameHandler);     }     private var _seconds:int;     private function enterFrameHandler(e:Event):void     {         var date:Date = new Date();         var hours:int = (date.getUTCHours() + 9) % 24;         var minutes:int = date.getUTCMinutes();         var seconds:int = date.getUTCSeconds();         if (seconds != _seconds) {             var hoursDegree:Number = ((hours % 12) * 30)                 + (minutes / 2) + (seconds / 120);             var minutesDegree:Number = (minutes * 6)                 + (seconds / 10);             var secondsDegree:Number = seconds * 6;             hoursClip.rotation = hoursDegree;             minutesClip.rotation = minutesDegree;             secondsClip.rotation = secondsDegree;             _seconds = seconds;         }     } } }

　コードの量も計算も増えていて差は歴然ですね。ActionScriptライブラリを使うと、このような手間を省くことができ、コードも見やすくなります。

2/3

INDEX
特集：Flasherに便利なオープンソース「Spark project」 Flash制作を簡単にするActionScriptライブラリとは？
	Page1 「ActionScriptライブラリ」って何？ ActionScriptライブラリでどんだけ便利になるの？
	Page2 どんだけ便利かをコードで実感
	Page3 便利なActionScriptライブラリをSpark projectで探そう ActionScriptライブラリをFlash制作に役立てよう

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）