株式会社antsのホームページへようこそ。

コンポーネントをつくろう!<第2回>

0
Posted in Lab. By antsinc

こんにちは。antsincです。かなり間があいてしまいましたが、前回に引き続きコンポーネント制作のあれこれをゆるゆる解説していくぞ!。予告した内容は・・・

  • コンポーネントにアイコンをつける
  • パラメータを追加する

と書いているので有言実行!前回のファイルを持っていない人はダウンロードしてからはじめてね。

コンポーネントにアイコンをつける!

というわけで、早速はじめてみよう。作成したコンポーネントをFlashにインストールしたときにほかのコンポーネントに紛れてしまうのはやっぱりもったいないので、ぱっとみてわかるようにアイコンをつけてあげたほうが親切ってもんだ。もちろんシリーズものであればシリーズってことがわかるようになっているっていうのも重要ってもんだ。

アイコンのデータ形式

アイコンは、サイズが18pixelsでアルファ透明度が8bitのPNG画像を用意する。左上の1pixelsは透明にする必要があるので塗りつぶさないように注意しよう。

僕の場合は透明のことを考えたりするのがめんどくさいので、17pixelsの矩形でデザインして、左と下の1pixlesを透明にしておくんだ。なんでかっていうと、透明部分がないからって18pixels全部に色をぬっておくとMac OS X版のFlashとWindows版のFlashでコンポーネントアイコンの見え方が変わってしまうからなんだ。恐ろしいことにMac OS X版では左上のピクセルと同じ色が透明にされてしまう。僕の方式なら矩形で表示したい範囲が透けちゃうこともないからね。もちろん、17*18pixelsとか18*17pixelsとかにしてもいいよ。

IconFile タグがキーワード

アイコン画像はクラスファイルで指定する。そのときに使うのがIconFile タグだ。コンポーネントのクラスファイルで、クラス定義の前に次の一行を加えよう。

アイコンの指定

[IconFile("icon.png")]

これだけ。アイコン用画像の名前は別になんでもいい。今回はicon.pngとしてるよ。ただし、アイコン用の画像はかならずFLAファイルと同じディレクトリに置くこと!間違うとアイコンが表示されないので注意してほしい。

コンポーネント定義で確認

画像を用意して、クラス内にIconFileタグを書き足したらコンポーネント定義ダイアログを開いてなにも考えずに「OK」ボタンをクリックしよう。アイコンの指定が正しければライブラリのムービークリップシンボルのアイコンが変わるはずだ。もし変わらなければ、画像の形式とIconFileタグをもう一度確認してほしい。

アイコンが更新されたライブラリのシンボル

コンポーネントパラメータを使う!

コンポーネントの初期値をいちいちメソッドやらプロパティで指定するのは面倒なので、パラメータを活用しよう。パラメータなら各コンポーネントインスタンスにどのような初期値が設定されているか一目瞭然だし、実際に利用するひとがコーディングに不慣れな場合の助けにもなる。他にも、再生中に何度も値を変更されては困るようなものもパラメータにしておくといい。

ちなみに、パラメータは[コンポーネントインスペクタ] パネルおよび[プロパティインスペクタ]パネルのパラメータ タブから確認/設定できるぞ。

コンポーネントインスペクタ

プロパティインスペクタ

Inspectable タグがキーワード

コンポーネントパラメータはInspectable タグを使って定義する。Inspectable タグを使用すると、ユーザーが編集もしくは検査可能なパラメータを[コンポーネントインスペクタ] パネルおよび[プロパティインスペクタ]パネルに表示できるんだ。Inspectable タグの詳細については、Flashのヘルプ「Inspectable タグについて」を参照してほしい。

Inspectable タグについて

Flash コンポーネントガイド > コンポーネントの作成 > ActionScript クラスファイルの作成 > コンポーネントメタデータの追加 > Inspectable タグについて

Inspectable タグでは、パラメータの初期値(defaultValue)、値の選択肢(enumeration)、パラメータ名(name)、値の型(type)といった属性を必要に応じて指定する。他にも指定するものがあるけど基本的に不要なので割愛しちゃう。各属性には指定できる値の種類が制限されているから注意してほしい。ちなみに全部指定しないなんてこともできる。

属性 説明
defaultValue StringNumber パラメータのデフォルト値を指定する。指定しないと値はundefinedとかnullになるよ。
enumeration String パラメータで使用できる値をカンマ区切りで指定する。残念ながら最低0、最大10とかそういう指定はできない。不便というか不憫。
name String パラメータの名前をしてする。 指定しないとタグに対応するクラスのプロパティ名が表示される。日本語も一応つかえるんだけど、たまに不幸がおきてSWCが書き出せないなんてことがあるので基本的に日本語は使わないようにしよう。
type String パラメータのタイプを指定する。 指定しないとタグに対応するクラスのプロパティのタイプが使用される。ここで指定できるのは、Array/Boolean/Color/Font Name/Number/Object/Stringといったもの。

まぁ、いろいろあるけど、一番横着すると次のようになる。あ、でもdefaultValue位は指定しとこうね。

Inspectable タグ横着サンプル

[Inspectable(defaultValue=200)]
public var _minInterval:Number;

スタティックメンバに対して設定したい場合や、パラメータの変更に伴って他のプロパティも変更したいことがあったりする。そういう時はsetter メソッドと組み合わせるんだ。次の例ではクラスのプロパティとしてはスタティックなプロパティとして組み込んであるよ。プロパティ自体はprivateにしておきたいときにも有効だね。

setter メソッドと組み合わせたサンプル

static var _minInterval:Number;
[Inspectable(defaultValue=200)]
public function set minInterval(int:Number):Void {
  _minInterval = int;
}

組み込んでみる

というわけで、前回つくったクラスMyTimer.asにアイコン(IconFile タグ)とパラメータ(Inspectable タグ)を追加してみた。パラメータにする意味はあんまりないけど、タイムアウトの最短時間を設定できるようにして、デフォルトでは200ミリセカンド以下でタイムアウトするタイマーを禁止してみた。テストするときなんかにパラメータを変更する感じかな。

MyTimer.asの中身

[IconFile("icon.png")]
class MyTimer extends MovieClip {
  private var timerList:Object;
  private var lastID:Number;
  private var _minInterval:Number;
  [Inspectable(defaultValue=200)]
  public function set minInterval(int:Number):Void {
    _minInterval = (int > 200)?int:200;
  }
  public function get minInterval():Number {
    return _minInterval;
  }

  public function MyTimer() {
    this._visible = false;
    timerList = new Object();
    lastID = 0;
  }
  public function addTimer(objectRef:Object, funcName:String, interval:Number, paramList:Array):Void {
    var localID:String = "timer"+lastID;
    timerList[localID] = new Object();
    timerList[localID].trg = objectRef;
    timerList[localID].func = funcName;
    timerList[localID].param = (paramList instanceof Array)?paramList:[];
    interval = (_minInterval > interval)?_minInterval:interval;
    timerList[localID].id = setInterval(this, "myTimeOut", interval, localID);
    lastID++;
  }
  public function myTimeOut(localID:String):Void {
    var _obj:Object = timerList[localID];
    clearInterval(_obj.id);
    _obj.trg[_obj.func].apply(_obj.trg, _obj.param);
  }
}

つかってみる。

実際に使うときは、コンポーネントウィンドウからステージにドラッグ&ドロップしてインスタンス名をつける(_timerとしてみた)。これで準備OK。前回と同じだね。あとはメソッドを実行すれば・・・。

お試しソース

function myCompTest(msg:String) {
  trace(msg+(getTimer()-time)+"ミリセカンド後に実行");
}
var time:Number = getTimer();
_timer.addTimer(this, "myCompTest", 1, ["1ミリセカンド後にメッセージトレースできる?"]);
_timer.addTimer(this, "myCompTest", 300, ["300ミリセカンド後にメッセージトレースできる?"]);
_timer.addTimer(this, "myCompTest", 5000, ["5000ミリセカンド後にメッセージトレースできる?"]);

実行結果

実行結果はこんな感じになる。多少の誤差は我慢しなくちゃね。

今回はここまで!

次回は、

  • コードヒントを用意する
  • コンポーネントインストーラーを作る

あたりを説明してみようかな。それでは、また。

今回使ったファイルたち