第1回、第2回と連載してきた、一体誰が得をするのか分からないこのEseclock改造版の解説シリーズも、今回をもって最後とさせていただきます。最後は、
『時計表示（と下のテキスト）を好きなビジュアルにしよう』
です。でもあまり解説することがないです（ぉぃ

5．時計下のテキスト部分（以下テキスト）を書き換える
これは簡単で、

description = "EBISU / JAPAN"

などとすれば良いです。これでデフォルトの「TOKYU / JAPAN」が「EBISU / JAPAN」となります。恵比寿とした理由は職場が恵比寿だからです。僕の怠慢により、EseclockがaddChildされた後に書き換えないと例外エラーが出るかも知れません。ごめんなさい。
　

6．時計やテキストを好きな形式のTextFieldで表示する
この場合、表示に使用したいTextFieldをもったカスタムクラスを作成する必要があります。

まず、時計やテキストを好きなフォントで表示する場合です。この場合、表示に使用したいテキストフィールドをもったカスタムクラスを作成する必要があります。今回、サンプルではテキストののカスタムクラスをCustomClockFieldクラスとして、Helveticaフォントで表示することにしました。flaファイル内のライブラリに、TextFieldをもったCustomDescriptionFieldというムービークリップがあり、CustomDescriptionFieldクラスに関連づけられています。

そして、CustomDescriptionField.asを見てみると、CustomDescriptionFieldクラスはEseclockDefaultDescriptionTextFieldを継承しているのが分かるかと思います。このEseclockDefaultDescriptionTextFieldクラス（以下デフォルトクラス）は、Eseclockにデフォルトで表示されるテキストを管理するクラスです。

今回のようにデフォルトの表示からの変更点がTextFormatのみの場合、カスタムクラスにデフォルトクラスを継承させるとほとんど何もすることがありません。カスタムクラスのコンストラクタ内で、表示に使用したいTextFieldインスタンスを_fieldプロパティに渡してあげればカスタマイズ完了です。以下、テキスト部分のカスタムクラスです。ソースコードはsample\06に入っています。

package {
    import flash.text.TextField;
    import flash.text.TextFormat;
    import org.libspark.eseclock.textfield.EseclockDefaultDescriptionTextField;

    //時計に使うクラスはEseclockDefaultClockTextFieldを, テキストに使うクラスはEseclockDefaultDescriptionTextFieldをそれぞれ継承させる
    public class CustomDescriptionField extends EseclockDefaultDescriptionTextField {

        //ライブラリのCustomDescriptionFieldシンボルの中に配置してあるTextField
        public var tf:TextField;

        //コンストラクタ
        public function CustomDescriptionField():void {

            //tfというTextFieldインスタンスを表示に使う
            _field = tf;

            //ボールド表示にしてみる
            var fmt:TextFormat = _field.defaultTextFormat;
            fmt.bold = true;
            _field.defaultTextFormat = fmt;
        }
    }
}

>>Sample
　

7．時計やテキストを好きなように表示する
デフォルト表示では例えば「01 23 45」のように、時分秒の間に半角スペースを入れることで時間を1つのTextFieldのみで表示しています。しかし今回は字詰めの関係で時分秒を3つのTextFieldに分けることにしました。このカスタマイズは、デフォルトのTextFieldのtextFormatを変更するだけでは対応できません。そこで、時計部分のデフォルトクラス（EseclockDefaultClockTextFieldクラス）を継承させずにカスタムクラスを作ります。継承させてもいいのですが、この場合ほとんどのメソッドをオーバーライドしないといけないので継承させない方がてっとり早いと思います。。。

実際どうやるかというと、ライブラリのCustomClockFieldというムービークリップに3つのTextFieldを入れて、CustomClockFieldクラスに関連づけておきます。ここで大事なのは、CustomClockFieldクラスにIEseclockTextFieldインターフェースを実装させるということです。

IEseclockTextFieldインターフェースは、カスタムクラスがEseclockの時計もしくはテキストとして振る舞うために、最低限必要なメソッドをまとめたインターフェースとなっており、カスタムクラスは以下のメソッドを実装する必要があります。

・objectWidth、objectHeight メソッド
時計またはテキストの幅および高さを取得するためのgetterメソッドです。

function get objectWidth():Number;
function get objectHeight():Number;

・setColor メソッド
表示オブジェクトの色を変更するメソッドです。
表示オブジェクトを、引数で指定された色へと変更するコードを実装することになります。

function setColor(color:uint):void;

・updateClock メソッド
時計を表示するカスタムクラスの場合、毎秒updateClockメソッドが呼び出されます。
引数としてh（時）、m(分)、s(秒)を受け取れるので、その情報を元に時計を書き換えることになります。

function updateClock(h:uint, m:uint, s:uint):void;

・updateDescription メソッド
テキストを表示するカスタムクラスの場合、テキストが書き換わったタイミングでupdateDescriptionメソッドが呼び出されます。
引数としてmessage（テキストの内容)を受け取れるので、その情報を元にテキストを書き換えることになります。

function updateDescription(message:String):void;

以下、テキスト部分のカスタムクラスです。時計部分を3つのTextFieldに分けています。ソースコードは上記と合わせてsample\06に入っています。

package {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import org.libspark.eseclock.Eseclock;
    import org.libspark.eseclock.textfield.IEseclockTextField;

    public class CustomClockField extends Sprite implements IEseclockTextField {

        //ライブラリのCustomDescriptionFieldシンボルの中に配置してあるTextField
        public var hours:TextField;
        public var minutes:TextField;
        public var seconds:TextField;

        /**
         * objectWidth, objectHeightは時計全体のサイズを返す
         */
        public function get objectWidth():Number { return seconds.x + seconds.textWidth; }
        public function get objectHeight():Number { return hours.textHeight; }

        /**
         * コンストラクタ
         */
        public function CustomClockField():void
        {
            //それぞれのTextFieldのフォーマットを調整
            var fmt:TextFormat = hours.defaultTextFormat;
            fmt.letterSpacing = -3;
            hours.defaultTextFormat   = fmt;
            minutes.defaultTextFormat = fmt;
            seconds.defaultTextFormat = fmt;
        }

        /**
         * 色を設定する関数
         * @param color 16進数で表された色情報
         */
        public function setColor(color:uint):void
        {
            //それぞれのTextFieldの色を更新
            var fmt:TextFormat = hours.defaultTextFormat;
            fmt.color = color;
            hours.defaultTextFormat   = fmt;
            minutes.defaultTextFormat = fmt;
            seconds.defaultTextFormat = fmt;
        }

        /**
         * 時計表示を更新する関数
         * @param h 時
         * @param m 分
         * @param s 秒
         */
        public function updateClock(h:uint, m:uint, s:uint):void
        {
            //それぞれのTextFieldのtextを更新
            hours.text   = Eseclock.toDigitString(h);
            minutes.text = Eseclock.toDigitString(m);
            seconds.text = Eseclock.toDigitString(s);
        }

        /**
         * テキストを更新する関数
         * @param message 表示文字列
         */
        public function updateDescription(message:String):void
        {
            //CustomClockFieldは時計用クラスなので何も書かなくて良い
            //テキスト用のカスタムクラスを作るときは textField.text = message; などと書く
        }
    }
}

>>Sample（上記サンプルと同じもの）

最後に、時計部分にTextFieldすら使用しないサンプルを置いておきます。基本方針は上述の、TextFieldを3つに増やすカスタマイズと同じです。ライブラリに空のシンボルを作り、CustomClockFieldクラスに関連付けておきます。ソースコードは上記と合わせてsample\07に入っています。
>>Sample

Eseclockは時計の下にテキストが配置されるように、objectHeightを用いて自動でy座標を調整します。上記サンプルでは時計とテキストを常にEseclockの中心に配置したかったので、objectWidthとobjectHeightが0を返すようにしています。こうすることで座標調整はおこなわれず、両インスタンスの原点が常にEseclockの中心に揃うよう配置されるようになります。（インスタンスそれぞれの原点が、時計の中心もしくはTextFieldの中心に無ければなりませんが）。
　

終わりに
3回にわたって書いたEseclockのエントリですが、これで終わりにしたいと思います。いったいどれくらいの人が読んでくれているのかは分かりませんが（笑）、楽しいEseclockライフを送ってもらえればうれしいです。
僕はEseclockばかり考えすぎて、ついUNIQLOで買い物をしてしまいました、1万円分（笑）

質問事項はコメント欄やメールでお気軽にどうぞー(o’c_,`人)・:*:・

前回のエントリに引き続き、今回もEseclockについてです。

テーマはずばり
『改造版Eseclockの使い方』
色々やり方はあると思いますが、ドキュメントクラスにEseclockを継承させる方法を紹介します。誰も使わないかも知れない（ていうかむしろいつ使えるの？）なライブラリをこつこつ紹介するという、なんともストイックな企画です。

0．ライブラリをダウンロードする
SparkProjectはSubversion（以下SVN）というファイル管理ソフトによって全てのプロジェクトが管理されています。まず、このSVNから手元にライブラリをダウンロードする必要があります。詳しくはzyass_takさんのこちらの記事がわかりやすいので参考にしてください。

さて、無事にライブラリを落とし終わって中身をのぞいてみると、いくつものフォルダがあると思います。とりあえず、http://www.libspark.org/svn/をチェックアウトしたものとして、as3\Eseclock\branches\alumican\srcフォルダの中にあるcaurina、org、jpフォルダをコピーして、自分のflaファイルのあるフォルダにペーストします。別階層にペーストする場合には、ライブラリフォルダまでのクラスパスを適宜通しておいてください（CS3の場合は[パブリッシュ設定]->ActionScriptのバージョンの隣の[設定]->クラスパス）。これで準備は完了です。おそらく.svnという隠しフォルダもペーストされたかと思いますが、これは削除していただいて構いません。なお、サンプルはソースコード含めCS3形式でas3\Eseclock\branches\alumican\samplesフォルダに入っています。
　

1．とりあえず動かしてみる
何はともあれ、ドキュメントクラスを作ります。今回はMain.asという名前のクラスを作りました。MainクラスにEseclockを継承させているだけです。サンプルのソースコードはsample\01に入っています。

package {
    import org.libspark.eseclock.Eseclock;

    //Eseclockクラスを継承させる
    public class Main extends Eseclock {

        public function Main():void {
        }
    }
}

>>Sample
ドキュメントクラスとして設定するのを忘れずにパブリッシュすると、白黒の時計の合間に水玉が表示される何とも味気のないUNIQLOCKもどきができるかと思います。これがプレーンな状態ですが、この時点で時計部分の大きさを保ったまま自動でステージにフィットするようになっています。これを元に拡張していきます。
　

2．色を変えてみる
白黒だとつまらないので、ランダムな色のカラフルな時計にします。本家UNIQLOCKを真似して、白黒からランダム色と白色に変えます。Mainクラスのコンストラクタ内で、親クラス、つまりEseclockのコンストラクタを呼び出します。サンプルのソースコードはsample\02に入っています。

package {
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        public function Main():void {
            //1番目と2番目の引数で色を指定する
            super(uint(Math.random() * 0xffffff), 0xffffff);
        }
    }
}

>>Sample
最初の引数と2番目の引数で、テキストと背景の2色を指定できます。ここでは、最初の引数で0から0xffffffまでのランダムな数値を渡し、2番目の引数で固定の白色を渡しています。ちなみに、色はコンストラクタで指定できる他にも、後からcolor1、color2プロパティで変えることができます。
ちょっと華やかなEseclockができました。
　

3．好きな動画を時計の合間に表示する
やはり、UNIQLOCKもどきなるもの、時計の合間には水玉ではなく好きなコンテンツを表示したいです。改造版Eseclockでは、_createContentメソッドをオーバーライドすることでこれを実現できます。_createContentメソッドはコンテンツが表示される直前に毎回呼ばれ、2つの引数wとhを受け取ってDisplayObjectを返します。要は、wとhのサイズ作ったビジュアルをreturnすれば次の瞬間それが表示されるというわけです。サンプルでは、FLVPlaybackコンポーネントを使って動画を再生してみます。動画を何本も用意するのは面倒なので、1本の動画をランダムにシークさせて再生するようにします。

手順は少し複雑です。まず、動画を読み込むまで時間がかかるので、Eseclockを停止しておきます。そして、動画の読み込みが終わった後に、Eseclockをスタートさせます。Eseclock実行中、_createContentが呼ばれる度に動画をランダムにシークして再生させます。そして動画から時計に戻る瞬間に、動画がバックグラウンドで再生され続けないようにFLVPlaybackを一時停止します。

ひとつずつ考えていきます。

>Eseclockを停止しておきます。
EseclockはデフォルトでaddChildされた瞬間にスタートしますが、コンストラクタの第6引数（autoPlay）をfalseに設定することで自動再生させないようにできます。この場合、任意のタイミングでstartメソッドを呼び出すことでEseclockをスタートさせられます。

>Eseclock実行中、_createContentが呼ばれる度に動画をランダムにシークして再生させます。
_createContentメソッド内で、FLVPlaybackをseekしてplayすればいいかと思います。

>動画から時計に戻る瞬間に、動画がバックグラウンドで再生され続けられないように一時停止します。
改造版Eseclockでは、_createContentメソッドの他にもいくつかオーバーライド可能なメソッドが定義されています。その一つが_removeContentで、このメソッドはコンテンツが完全に隠れる瞬間に呼び出されます。このメソッドをオーバーライドして、FLVPlaybackをpauseなどすれば良さそうです。

以上をふまえたサンプルはこちらです。swfファイルと同階層にmovie.flvを置いておいてください。flv含めソースコードはsample\03に入っています。

package {
    import fl.video.FLVPlayback;
    import fl.video.VideoEvent;
    import fl.video.VideoScaleMode;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        //時計の合間に表示するFLVを再生させるFLVPlayback
        private var _flvp:FLVPlayback;

        public function Main():void {
            //自動スタートさせないように第6引数（autoPlay）をfalseにしておく。第3、第4、第5引数はとりあえずデフォルトのまま
            super(uint(Math.random() * 0xffffff), 0xffffff, 640, 320, true, false);

            addEventListener(Event.ADDED_TO_STAGE, _initialize);
        }

        //addChildされるのを待ってから初期化をおこなう
        private function _initialize(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, _initialize);

            //FLVの読み込み
            _flvp = new FLVPlayback();
            _flvp.autoPlay = false;
            _flvp.autoRewind = false;
            _flvp.scaleMode = VideoScaleMode.EXACT_FIT;
            _flvp.addEventListener(VideoEvent.READY, _flvpRedyHandler);
            _flvp.load("movie.flv");
        }

        //動画の再生準備完了時に呼び出されるイベントハンドラ
        private function _flvpRedyHandler(e:VideoEvent):void {
            _flvp.removeEventListener(VideoEvent.READY, _flvpRedyHandler);

            //Eseclockスタート
            start();
        }

        //コンテンツが表示される直前に呼び出されるメソッド
        override protected function _createContent(w:Number, h:Number):DisplayObject {
            //再生開始位置をランダムで選択(動画が途中で終わらないように, 6秒ほど余裕を持たせておく)
            var head:uint = uint(Math.random() * (_flvp.totalTime - 6));

            //EseclockのサイズにFLVPlaybackをフィットさせる
            _flvp.width  = w;
            _flvp.height = h;

            //FLVPlaybackを再生する
            _flvp.seek(head);
            _flvp.play();

            return _flvp;
        }

        //コンテンツが完全に隠れる直前に呼び出されるメソッド
        override protected function _removeContent(content:DisplayObject):void {
            //動画がが裏側で再生され続けないように一時停止処理をかけておく
            FLVPlayback(content).pause();
        }
    }
}

>>Sample
ちょっと長いですが、大半は動画の読み込み処理のコードです。大事なのはコンストラクタのautoPlay、startメソッド、_createContentメソッド、_removeContentメソッドです。ちなみに_removeContentでは引数として表示中のコンテンツを受け取れます。サンプルではこのcontent引数を使ってFLVPlaybackを停止させていますが、この例ではFLVPlaybackをインスタンス変数_flvpとして保持しているので、_flvp.pause();で全く問題ありません。
だんだんそれっぽくなってきました。
　

4．ピッピッピッピッポーン音を付ける
よりそれらしくするために、時報の音（ピッ音とポーン音）を付けたいと思います。どうやらピッ音は秒数の一の位が0以外の時に鳴って、ポーン音は秒数の一の位が0の時になるようです。改造版Eseclockでは、こういった毎秒の処理を簡単におこなうために_tickメソッドをオーバーライドできるようになっています。_tickメソッドは毎秒呼び出され、引数として時分秒を表す3つの引数h、m、sを受け取ることができます。サンプルでは、リンケージされた2つのライブラリのサウンドオブジェクトSound1（ピッ音）とSound2（ポーン音）を使って時報の音を鳴らします。
実際のコードはこちらです。サウンドデータ含めソースコードはsample\01に入っています。

package {
    import fl.video.FLVPlayback;
    import fl.video.VideoEvent;
    import fl.video.VideoScaleMode;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import org.libspark.eseclock.Eseclock;

    public class Main extends Eseclock {

        private var _flvp:FLVPlayback;

        private var _sound1:Sound1; //ピッ音
        private var _sound2:Sound2; //ポーン音

        public function Main():void {
            super(uint(Math.random() * 0xffffff), 0xffffff, 640, 320, true, false);
            addEventListener(Event.ADDED_TO_STAGE, _initialize);
        }

        private function _initialize(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, _initialize);
            _flvp = new FLVPlayback();
            _flvp.autoPlay = false;
            _flvp.autoRewind = false;
            _flvp.scaleMode = VideoScaleMode.EXACT_FIT;
            _flvp.addEventListener(VideoEvent.READY, _flvpRedyHandler);
            _flvp.load("movie.flv");

            //ライブラリのサウンドを割り当てる
            _sound1 = new Sound1();
            _sound2 = new Sound2();
        }

        private function _flvpRedyHandler(e:VideoEvent):void {
            _flvp.removeEventListener(VideoEvent.READY, _flvpRedyHandler);
            start();
        }

        override protected function _createContent(w:Number, h:Number):DisplayObject {
            var head:uint = uint(Math.random() * (_flvp.totalTime - 6));
            _flvp.width  = w;
            _flvp.height = h;
            _flvp.seek(head);
            _flvp.play();
            return _flvp;
        }

        override protected function _removeContent(content:DisplayObject):void {
            _flvp.pause();
        }

        //_tickメソッドは毎秒呼び出される
        override protected function _tick(h:uint, m:uint, s:uint):void {

            if (s % 10 == 0) {
                //秒数の一の位が0ならポーン音を鳴らす
                _sound2.play();

            } else {
                //それ以外ならポーン音を鳴らす
                _sound1.play();
            }
        }
    }
}

>>Sample
だいぶ良い感じに仕上がってきました。

さらに、コンテンツが表示されるときには音量がフェードインし、コンテンツが隠れるときには音量がフェードアウトする演出を、TweenerのSoundShortcutsを使って実装したサンプルを置いておきます。ソースコードはsample\05フォルダに入っています。
>>Sample

今回は必要ないのですが、ついでに紹介しておくと、オーバーライド可能なメソッドはもう1つあります。それは、コンテンツを表示中にEseclockがリサイズされたときにだけ呼び出される_resizeContentメソッドです。このメソッドでは3つの引数content、w、hを受け取れて、それぞれ表示中のコンテンツ、リサイズ後のEsclockの幅、リサイズ後のEseclockの高さを表しています。_resizeContentメソッドはデフォルトで

content.width  = w;
content.height = h;

を実行するため、今回のようにFLVPlaybackを縦横比無視でEseclockのサイズにフィットさせるぶんには特にオーバーライドする必要がありません。しかし、コンテンツの縦横比を無視したくない場合などには適宜オーバーライドする必要があるかと思います。

今回はここまでです。

次回は、時計表示部分と時計下のテキスト表示部分を好きなフォーマットに組み替える方法を紹介します。
みんなでおもしろいEseclock作品を作ると楽しそうですね～(o’c_,`人)・:*:・

先日開催されたSpark project 勉強会 #08で、BeInteractive!のyossyさんが自身の発表時にライブコーディングされていたEseclockライブラリを拡張したのでご紹介します。

http://www.libspark.org/wiki/Eseclock/

Eseclockライブラリとは、UNIQLOCKっぽい何かが作れるライブラリです。UNIQLOCKでいうダンス的な部分をユーザーが自由に変更しながら、UNIQLOCKっぽいビジュアルを簡単に作れちゃいます。

オリジナルの使い方

1. Eseclockクラスを継承したクラス（ここではMyEseclockクラスとする）を作ります。
2. MyEseclockクラスでは、EseclockクラスのcreateContentメソッドをオーバーライドしておきます。ここで、createContentメソッドには時計の合間に表示するコンテンツを返り値とします。このcreateContentメソッドはコンテンツが表示される直前（秒の一の位が6のとき）に毎回呼び出されます。
3. addChild(MyEseclock(0xff9933, 0xffffff));
   引数で時計と背景色の色を指定します。
4. ( ﾟДﾟ)ｳﾏｰ

今回僕が改造したオリジナルからの変更点はこちら

• 描画更新されるときの、色やコンテンツが切り替わるときのアニメーションを追加しました。
• 時計の下表示する文字列を追加および編集可能にしました。
• リサイズに対応し、自動でステージにフィットさせるようにしました。また、固定サイズでの表示にも対応しました。
• 色を途中で変更できるようにしました。
• addChildと同時にスタートさせないオプションを追加しました。それに伴い、任意のタイミングでスタートさせるためのメソッド（startメソッド）を追加しました。
• コンテンツが表示される直前に呼び出されるメソッドの名前を変更しました。（createContent→_createContent）
• コンテンツが表示されている間にEseclockがリサイズされた場合に呼び出されるメソッド（_resizeContentメソッド）を追加しました。
• コンテンツが非表示にされる直前に呼び出されるメソッド（_removeContentメソッド）を追加しました。
• 毎秒必ず呼び出されるメソッド（_tickメソッド）を追加しました。
• _createContent、_resizeContent、_removeContent、_tickを自由に定義するためには各メソッドをサブクラスでオーバーライドする必要がありますが、継承を用いない場合でもcreateContent、resizeContent、removeContent、tick変数に関数を代入することで同様の結果を得られるようにしました。
• IEseclockTextFieldを実装したクラスなら何でも、時計表示および文字列表示部分に使えるようにしました。これにより、好きなフォントを埋め込んだテキストフィールドやライブラリに登録したシンボルを時計や文字列部分に使えるようになりました。

改造版のソースコード（使うときはhttp://www.libspark.org/browser/as3/Eseclock/branches/alumican/src以下全部をごそっと持って行ってください）

こうして見ると結構拡張していますが、使い方は極力簡単にしました。trick7のteraさんの言葉をお借りすると、ライブラリは必殺技ですから。「メラ」のたった二文字で火が出たら格好いいじゃあないですか。

まぁそもそもalumican.netは長い詠唱が必要なほど強大な魔法を唱えるにはMPが足りていないので、メラヒャドギラバギで行かせていただきます。でも、その気になればオプション的に自由に拡張していける仕様にはしているつもりなので、次回よりその辺もふまえて段階的に説明していきます。

最後に、一番簡単な使い方

これだけです。0行でおわり
>>Sample

まさかの次回へ続く(o’c_,`人)・:*:・

　
追記 09.04.08
Shunsuke Ohbaさんが改造版Eseclockを使ってAir版Eseclockを作られました。Eseclockにドロップしたテキストファイルや画像ファイルがランダムに表示されます。