blog.alumican.net

ESEQLOCK アナログ時計バージョン

第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_,`人)・:*:・

Posted in DEVELOPMENT No Comments »