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

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

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

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

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

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

TeraClockを使ってみよう

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

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

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

図5 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】
    }
}
}
- PR -

 このコードについて簡単に解説します。まず【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の出来上がりです。とても簡単だと思いませんか?

実行して確かめてみよう

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

Flashを動かすにはFlash Playerが必要です。Flash Playerのダウンロードページは<a href="http://www.adobe.com/shockwave/download/index.cgi?Lang=Japanese&P1_Prod_Version=ShockwaveFlash" target="_blank">こちら</a>
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制作に役立てよう


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



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH