僕の大好きな、「マッチ箱の脳」という本があります。
人工知能についてとってもおもしろく解説してあるこの本を書いたのは、「がんばれ森川君2号」や「アストロノーカ」などの人工知能が組み込まれたゲームを作ったすごい人です。

» マッチ箱の脳(AI)―使える人工知能のお話

僕はアストロノーカしかやったこと無いのですが、人工知能が自然にゲームに組み込まれていてすごいなあと当時思ってました。中ではすっごい難しいことをやっているのに。その影響か、僕も人工知能を組みたいと思ってこれまで何度もチャレンジしては挫折してきましたが、懲りずにまたチャレンジすることにしました。

てなわけで、シャクトリムシに歩き方を学習させようと思います。昔は全部自分で作ろうとして失敗したけど、今は高速なAS3や物理エンジンライブラリもあるし、やってみよーGOGO！というわけで今はこんな感じ。

» Earthwalker Prototype01

ちなみに、まだ人工知能を組み込んでいないので、どれだけ待ってもうまく歩けません。クリックでカメラを切り替えるなどという、見た目な機能ばかり付けています。さいさき不安です。

まず、シャクトリムシの歩行について考えてみます。人工知能を組むときは、何を学習させるのかが一番大事なので、ここを見極めます。

いくつかの棒状のパーツが繋がった体をシャクトリムシと見立てます。体の繋ぎ目である関節を適当に動かすと、シャクトリムシがウニョウニョ動きます。でもこれだけだと、ただ暴れているだけで全然前へ進みません。前へ歩かせるためには、全ての関節が連携しながら動く必要があります。じゃあ、どのタイミングで、どのくらいの速さで、どれくらいの力で動かせば、もっとも前へ進めるのか。人が手動で調整しても良いのですが、関節の数が増えたら大変だし、途中で重力の大きさとか、少しでも変えるとまた最初から調整というのはちょっと。。。

なので、その辺をシャクトリムシ自身に学習してもらいます。問題を簡単にするために、0.5秒ごとに各関節の速度が決められた数値に切り替わるようにして、それを8回繰り返します。その8回の切り替わりをまとめて、1回の歩行動作のサイクルとします。関節は5個あるので、一体のシャクトリムシの歩行方法を決定するために、8×5=40のパラメータを必要とします。とりあえず、当面はこの40個のパラメータを学習していきます。そのうち形状の進化もさせたいので、そしたらまた別のパラメータにしなければならないのですが。

学習方法は、分かりやすくて学習過程が楽しい遺伝的アルゴリズム（Genetic Algorithm、以下GA）を使っていくことにします。

さてここからは、GAをちょっとでも分かってもらえればということで、GAの概要を書いておきます。うろ覚えな上に下手にドラマチックにしようとしたので、正確ではないと思いますが、興味のある方は何かの足しになるかも知れません。多分本当はもっとドラマチックなんです、きっと。それに、僕もこれ以上のことは分からずにやっているので大丈夫なはずです（何が）。本気で勉強したい人にはこのサイトがおすすめです。

準備編
適当な数のシャクトリムシを作ります。
このとき、シャクトリムシの関節の動き方（どんなタイミングで、どんな速度で、どんな力で動かすのか）をランダムに決定し、パラメータとして持たせておきます。このパラメータを生物のそれぞれの個性になぞらえてシャクトリムシの染色体と呼びます。同じ染色体を持ったシャクトリムシは、全く同じ動きをするわけです。で、色んな個性をもったシャクトリムシをひとまとめにして世代と呼ぶことにします。

激闘編
世代ができたところで、次はどいつが一番優秀なシャクトリムシなのかを見極めます。何をもって優秀なのかは色々意見がありますが、とりあえず全員を歩かせてみて、一定時間内に一番遠くまで歩いたシャクトリムシを優勝とします。歩かせた後は成績順にソートでもしておきましょう。

愛憎編　～淘汰～
競争すれば優秀なやつも出てくるし、落ちこぼれも出てきます。手を繋いでみんなで一等賞なんてこの世界には存在しません。しょせんこの世は弱肉強食、弱いシャクトリムシは生存競争に負けて死んでしまいます。この弱肉強食の世界をGAでは淘汰（選択）という処理でおこないます。

GAとは、何百世代も世代交代しながら、だんだんと優秀なシャクトリムシを作っていくという仕組みです。弱いシャクトリムシは次の世代に自分の子孫を残せず、捨てられます。どのシャクトリムシを、どれくらいの数だけ淘汰させるのかを決める方法もたくさんあって、単純にランキング最下位から選んだり、確率的に選んだり色々です。

愛憎編　～交叉～
生存競争に敗れるシャクトリ虫もいれば、生き残るシャクトリ虫もいます。そして、次世代に向けてシャクトリ虫をさらに進化させるべく、生き残ったシャクトリ虫の優秀な染色体をかけあわせて、もっと優秀な染色体をつくりだす処理を交叉といいます。

生き残ったシャクトリ虫の中から、何らかの方法（ランキングの上位からだったり、ランダムだったり色々あります）で2匹の親を選びます。選ばれた親は交配し、2匹の子供を作ります。この子供は、生き残った親の染色体から生まれるので、そこそこ優秀なシャクトリ虫だと予想されます。たまに親の良くない部分を引き継いだ子供も生まれますが。交叉の方法もそれこそたくさんあって、親の遺伝子をある1点で入れ替える一点交叉だったり、二点交叉だったり、解きたい問題によって良い方法は違ってきます。結構バクチなのがアレですが、これでひとまず次世代に希望をもたせることができました。

そうそう、淘汰しすぎた場合はランダムな染色体を持った新入りを追加したり交配したり、増えすぎた場合は多めに淘汰させるなどして、今の世代と次世代とでシャクトリ虫の総数が同じになるようにするのを忘れずに。いつの間にか絶滅しちゃったりとか寂しいから。

愛憎編　～突然変異～
次世代の卵もそろい、愛憎編もそろそろ終幕です。が、最後にちょっと味付けします。というのも、淘汰と交叉だけを繰り返していくと秀才はだんだんと多くなっていくのですが、壁をぶち破る天才は生まれにくいのです。このままだと、やがてそこそこ優秀な染色体にみんな同化し、進化が止まってしまいます。

そこで、染色体のどこか一部分を、極めて低い確率で全く別の値に書き換えてしまいます。これを突然変異と呼びます。突然変異のおかげで進化が停滞せずに、常にチャレンジャーな世代を生み出すことができます。突然変異をさせすぎると、副作用としてせっかくこれまで培ってきた優秀な染色体の情報が壊されてしまうので注意です。

歴史はちょっとだけ進んで繰り返す
そして、次世代はまた激闘編へと進み、だんだんとシャクトリムシは歩行動作を獲得していくのでした。

なので久々にQuickBox2Dネタを書こうとActionSnippetを見てみると、僕の知らないサンプルが30個以上。凄い、どれを紹介しようか迷う。というか機能が増えすぎてよくわからん、やばい！というわけで何日かに分けてこのエントリに、サンプルがどんなことをやっているのか、どこの部分がキモなのかだけ勉強がてら書いてみます。間違っていればどうぞ突っ込みお願いします。

QuickBox2Dのメソッドは引数にObject型を渡すことが多いです（Tweenerみたいに）。このObjectでメソッド特有の色々パラメータを指定します。例えば多角形を作成するaddPolyなど、剛体を作り出すaddXXX系のメソッドではx座標やy座標や角度などを標準で指定できます。今回このようなパラメータについて記述するとき、これらの標準プロパティについては省略して、addPolyならaddPolyでしか指定できない引数だけを記述していきます。addXXX系のメソッドで指定できる標準パラメータに関してはこちらのエントリの下の方にまとまっていますので参照してください。

コード中に出てくるsimはQuickBox2Dのインスタンスを表しています。

 var sim:QuickBox2D = new QuickBox2D(this, {オプション});

　
追記 09.10.04
とりあえずタイトルだけ書いた、先に。
　

32. setGroupIndexによる衝突判定有無の切り替え – QuickBox2D Mini-Machine
執筆中

31. テクスチャをジョイントに適用する – QuickBox2D Joint Skinning
執筆中

30. テクスチャサイズの自動調整 – QuickBox2D Skinning Examples
執筆中

29. 指定したgroupIndex同士の衝突を検出する – QuickBox2D Contact Filtering
執筆中

28. FlashPlayer10の3D表現 – QuickBox2D 3D
執筆中

27. QuickBox2Dによる衝突判定3 – QuickBox2D Contacts Part 3
執筆中

26. QuickBox2D 1.0の特長 – QuickBox2D 1.0 Features
執筆中

25. QuickBox2Dによる衝突判定2 – QuickBox2D Contacts Part 2
執筆中

24. QuickBox2Dによる衝突判定1 – QuickBox2D Contacts Part 1
執筆中

23. QuickBox2D 1.0リリース – QuickBox2D 1.0
執筆中

22. 指定時間後に関数を呼び出す – QuickBox2D addTimeStepSequence() Preview

sim.addTimeStepSequence(
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] },
  ...
  { time:時間, callback:呼び出す関数, args:[呼び出し時の引数配列] }
);

addTimeStepSequenceにあらかじめ登録しておくことで、指定した時間ステップが経過すると指定し関数を指定した引数と共に呼び出すことができる。呼び出しのタイミングはFRIM(フレームレートに依存しない)ので、オブジェクトの状態とずれることがない。デモではオブジェクトの動きやタイミングに合わせての視点移動やズームをおこなっている。addTimeStepSequenceには一度にいくらでも登録可能。timeに指定する数値の計算方法を後で確認する。

21. ピタゴラスイッチ的なサンプル – QuickBox2D Vaguely Goldberg-esque
シーソー機構や、反発係数(restitution)を1以上にすることで打ち返す機構をつかったピタゴラスイッチのようなサンプル。おもしろい。

20. createメソッドによるオブジェクトの生成 – QuickBox2D create() Method

sim.create(生成するオブジェクトの種類, {オプション});

これまでaddCircle、addBox、addPolyなどメソッドそのものを使い分けることで様々なオブジェクトを生成したが、実はcreateメソッドだけで任意のオブジェクトを生成できる。第1引数に”circle”、”box”、”poly”などオブジェクトの種類を文字列で指定すればOK。第2引数はオブジェクトの生成パラメータ。

19. 衝突判定の有無をを動的に切り替える – QuickBox2D groupIndex Platforms

var object:QuickObject = ...
var filter:b2FilterData = object.shape.GetFilterData();
filter.groupIndex = 1;
object.shape.SetFilterData(filter);

Box2DFlashAS3の衝突判定フィルタであるb2FilterDataのgroupIndexを動的に書き換えることで、上方向からの衝突判定だけを持っているオブジェクトを生成するサンプル。
また、sim.w.GetContactCount() メソッドにより現在衝突が起こっているオブジェクトの数を知ることができる。

18. 人体と一輪車の連動サンプル – QuickBox2D Unicycler
一輪車でバランスを取りながら前後に移動する人間を模したデモ。一見リアルな動きに、バランスと取るための凄いアルゴリズムが組まれていそうに感じるが、実は転けないように毎フレーム上体の角度をコントロールしている。
バランスを取っているように見せるために腕の動きをフリーにしていること、上体を三角関数で揺らしていること、車輪と足の繋ぎの見せ方が秀逸。上体と車輪の接続部分にどうもテクニックを使ってるっぽいので後で調べないと。あと、QuickBox2DのコンストラクタパラメータとしてrenderJointsを指定するとジョイントを表示するかどうか切り替えられる。

17. 足の動きを作るサンプル – QuickBox2D Floating Walker
原始的な二足歩行ロボットのスケッチらしい。ジョイントを使って足の動きを作ってる。ジョイント生成用のconnect関数が便利そう。あと、QuickBox2DのコンストラクタパラメータにgravityX、gravityYを指定すれば重力を簡単に設定できる。

16. プリズムジョイント（PrismaticJoint）を作る – QuickBox2D Prismatic Joint

var object:QuickObject = sim.addJoint({
  type:"prismatic",
  a:オブジェクトAのbody,
  b:オブジェクトBのbody,
  anchor:オブジェクトAとジョイントの接続点(b2Vec2),
  axis:ジョイントの駆動方向を表すベクトル(b2Vec2)
});

DistanceJoint以外のジョイントを作ろう第四弾はプリズムジョイント。このジョイントはピストンの動きを実現する。anchorを軸として、axisの方向に向かってピストン運動をするっぽいな。
ピストンの移動幅はupperTranslationやlowerTranslationで制御できる。こういう、サンプルで使われてないけど指定できるパラメータに関しても後で追記しときます。
あまり関係ないけどオブジェクトのbody.GetWorldCenter()でそのオブジェクトのグローバル座標をb2Vecインスタンスで取得できるのか、なるほど。
QuickBox2Dクラスによく使いそうな文字列は定数化されてるのを発見したのでメモ。

QuickBox2D.STEP      // "step"
QuickBox2D.DISTANCE  // "distance"
QuickBox2D.REVOLUTE  // "revolute"
QuickBox2D.PRISMATIC // "prismatic"
QuickBox2D.GEAR      // "gear"
QuickBox2D.PULLEY    // "pulley"

これでジョイントの指定にスペルミスが減る、よかった。

15. ギアジョイント（GearJoint）を作る – QuickBox2D Gear Joint

var object:QuickObject = sim.addJoint({
  type:"gear",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  joint1:影響するジョイント1,
  joint2:影響するジョイント2
});

DistanceJoint以外のジョイントを作ろう第三弾はギアジョイント。このジョイントは2つのジョイントの動きの大きさの和を保存するように働く。
デモでは、joint1としてプリズムジョイント（次のサンプルで解説）、joint2として回転ジョイントを指定してる。このとき、joint1の伸びとjoint2の回転角の和はいつも等しくなる。また、joint1とjoint2の接続オブジェクトaはどちらも空間（sim.w.GetGroundBody()）である必要がある。これは使ってみて慣れるしかない。難しいねー。

14. ジョイントを空間中の1点と接続する – QuickBox2D Connect to GroundBody

var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトのbody,
  b:sim.w.GetGroundBody()
});

QuickObjectインスタンスのwプロパティ（b2World）のGetGroundBodyメソッドで取得したb2bodyを、ジョイントの片方の接続オブジェクトとして設定すると、空間にジョイントを接続することができる。上手くいえないけど空中に固定する感じ。

13. 回転ジョイントに角速度を加える – QuickBox2D Revolute Walker

var joint:b2RevoluteJoint = revJointA.joint as b2RevoluteJoint
joint.SetMotorSpeed(1.0);

3つのオブジェクトを回転ジョイントで接続し、角速度を与えることでモーターの役割をさせるデモ。QuickObjectからb2RevoluteJointを取り出し、Box2DFlashAS3のSetMotorSpeedメソッドを呼び出して回転させている。

12. 滑車ジョイント（PulleyJoint）を作る – QuickBox2D Pulley Joint

var object:QuickObject = sim.addJoint({
  type:"pulley",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  groundAnchor1:オブジェクトA側の固定接続点(b2Vec2),
  groundAnchor2:オブジェクトB側の固定接続点(b2Vec2)
});

DistanceJoint以外のジョイントを作ろう第二弾は滑車ジョイント。固定接続点は2次元ベクトル(b2Vec2)で渡すこと。そうするとオブジェクトA-groundAnchor1-groundAnchor2-オブジェクトBという関係で結ばれる。

11. 回転ジョイント（RevoluteJoint）を作る – QuickBox2D Revolute Ragdoll

var object:QuickObject = sim.addJoint({
  type:"revolute",
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトAのbody,
  enableLimit:回転角度を制限する場合はtrue、360度ぐるぐる回す場合はfalse,
  lowerAngle:最小の回転角度,
  upperAngle:最大の回転角度
});

DistanceJoint以外のジョイントを作ろう第一弾は回転ジョイント。enableLimitで回転角度を制限する場合はlowerAngle、upperAngleで回転範囲を指定する（ラジアン角）。

10. リンケージされているテクスチャを貼る – QuickBox2D Skinning

var object:QuickObject = sim.addXXX({
  skin:リンケージクラス名
});

QuickObjectを生成するときにオブジェクトに貼り付けるテクスチャを指定できる。貼り付けるテクスチャはflaファイルのライブラリにリンケージされている必要がある。Bitmapじゃなくても大丈夫。

9. groupIndexによる衝突判定の制御 – QuickBox2D groupIndex

var object:QuickObject = sim.addXXX({
  groupIndex:衝突グループインデックス（符号付き整数）
});

QuickObjectを生成するときにgroupIndexを整数で指定できる（負の値も可）。同じ正の数でグループ付けされたオブジェクトは必ず衝突し、同じ負の数でグループ付けされたオブジェクトは必ず衝突しない。デモがとても楽しいので是非見るべし！QuickBox2Dにおける衝突判定の制御については『QuickBox2DやBox2DFlashAS3での衝突判定をグループ分け』参照。

8. 外部XMLにASを記述して動的に実行する – XML to ActionScript #3 (AsXML)
ちょっとこれはよく読んでないのでわかんない。どうやらASを記述した外部XML（AsXML形式？）をswfに読み込んでスクリプトを実行する様子。デモでは、QuickBox2D、Papervision3D、TweenLiteのスクリプトをAsXMLに記述して連携させている。勉強しとこう。

7. フレームレートに依存しないシミュレーション – QuickBox2D FRIM

var sim:QuickBox2D = new QuickBox2D(this, {
  frim:FRIMを使用する場合はtrue、そうでない場合はfalse
});

QuickBox2D初期化時に、frimプロパティをtrueにするとFRIM(frame rate independent motion)モードとなる。通常フレームレートが低いとモーションは遅く、逆にフレームレートが高いと速くなる。FRIMモードではフレームレートに関わらない時間ベースでのシミュレーションが可能となる。そのかわり、フレームレートが低いとそれだけ粗いモーションとなることに注意。とっても便利な機能。

6. オブジェクトに速度を加える – QuickBox2D w/ Key Controls

var object:QuickObject = ...
var vec2:b2Vec2 = object.body.GetLinearVelocity();
var scalar:Number = object.body.GetAngularVelocity();
object.body.SetLinearVelocity(vec2);
object.body.SetAngularVelocity(scalar);

キー操作によってオブジェクトに力を加えるデモ。GetLinearVelocityで現在の速度、GetAngularVelocityで現在の角速度をそれぞれ取得できる。また、SetLinearVelocityとSetAngularVelocityで速度、角速度を設定できる。この辺はQuickBox2Dから、直接Box2DFlashAS3のメソッドを呼び出している感じ。

5. addGroupによるテトリスのブロック生成 – QuickBox2D Tetris Pieces
addBoxで生成したたくさんの正方形をaddGroupで結合し、テトリスのブロックを形作るデモ。

4. addGroupによるオブジェクトのグループ化 – QuickBox2D Groups

var object:QuickObject = sim.addGroup({
  objects:[オブジェクトA, オブジェクトB, オブジェクトC, ... , オブジェクトZ]
});

objects配列で渡したオブジェクトをひとまとめにしたQuickObjectを生成する。frequencyHzとdampingRatioを適度に設定したバネっぽいジョイントの動きにも注目。

3. addPolyによる多角形の生成（凹面も可能） – QuickBox2D Polys

var object:QuickObject = sim.addPoly({
  points:[x1, y1, x2, y2, x3, y3, ... , xn, yn],
  wireframe:全ポリゴンのワイヤーフレームを表示する場合はtrue、輪郭のみを表示する場合はfalse
});

addPolyによる複雑なポリゴン生成のデモ。頂点を格納する順番はどうすればいいのか要確認。

2. addJointによるジョイントの生成 – QuickBox2D Chain

var object:QuickObject = sim.addJoint({
  a:接続するオブジェクトAのbody,
  b:接続するオブジェクトBのbody,
  x1:Aとジョイントの接続点のx座標,
  y1:Aとジョイントの接続点のy座標,
  x2:Bとジョイントの接続点のx座標,
  y2:Bとジョイントの接続点のy座標,
  length:ジョイントの長さ,
  frequencyHz:ジョイントの伸びやすさ,
  dampingRatio:ジョイントの元の長さへの戻りやすさ,
  collideConnected:AとBの間に衝突判定を持たせる場合はtrue、そうでない場合はfalse
});

addJointでオブジェクトAとオブジェクトBをつなぐジョイントを生成できる。このサンプルが投稿されたときはまだDistanceJointしか実装されていなかった。それ以外の、ギアや滑車などのジョイント生成のサンプルは後述。
x1,y1,x2,y2はオブジェクトAやオブジェクトBのローカル座標系でなく、QuickBox2Dのグローバル座標系で指定することに注意。省略するとそれぞれのオブジェクトの基準点が接続点となる。
lengthプロパティはジョイントの長さ。デフォルトではジョイント生成時のオブジェクト同士の距離となるが、別の値を指定する場合は設定する。
frequencyHzはジョイントの柔らかさ。0に近い数値ほどよく伸びるジョイントになり、大きな数値ほど固いジョイントとなる。また、0で完全に剛体となる。
dampingRatioは弾性。0に近い数値ほど伸びた状態から元の長さに戻る力が強まり、大きな数値ほど元の長さへ戻ろうとしなくなる。frequencyHzとdampingRatioでバネのようなジョイントを実現できる。

1. x、y、angleプロパティによるオブジェクトの移動と回転 – QuickBox2D Play

var object:QuickObject = ...
object.x = 10;
object.x = 5;
object.angle = 1;

addBoxやaddCircleなどで作成できるQuickObjectはx,y,angleプロパティの変更で簡単に移動や回転が可能。『QuickBox2D オブジェクトの平行移動と回転』参照。
　

他のQuickBox2Dネタ一覧もどうぞ » tag : QuickBox2D

最新版のダウンロードはこちらです。
変更点は以下の通りです。

• wp_al_swfobject_echo関数により、エントリー以外でもswfを貼り付けられるようになりました。詳しくはこちら。
• 最新版のSWFObject2.2に入れ替えました。

エントリー以外へのswf貼り付けについて、以前Yahoo!知恵袋で間違った回答をしてしまいましたので、訂正してお詫びします。

エントリー以外への貼り付けはWP-Al-SWFObjectが今まで対応していなかっただけで、WP-SWFObjectは対応しています（wp_swfobject_echo関数）。僕が知らなかっただけでした。。。

質問者のarupa2008さん、WP-SWFObjectの中の人であるJim Penaloza Calixtoさん、知恵袋を見てくださった方、誤解を与えてしまってごめんなさいごめんなさい；；

今後はこのようなことが無いよう気をつけます OTL…

先月の大阪てら子でSaqooshaさんがつくってたのが素敵だったので、見よう見まねでやってみました。ただやるだけだとつまんないので、RGBのカラーバージョンでアンサンブルしてみました（音の動的生成を使っているのでFlashPlayer10以上じゃないと動きません）。

webカメラ（カメラがない人はサンプルの静止画像）からリアルタイムで読み込んだ画像をRGB分解します。分解されたRGB画像をもとに音を鳴らすおもちゃです。RGBの順にオクターブ単位で音域が低くなっているので、頑張れば3パートでハモれるかも知れません。

いい感じの音を鳴らすために
あの楽器っぽいスクリプト Ver1.2(メニューをつけてみた）
の波形生成アルゴリズムを使わせてもらってます。ありがとうございます。

また、単純にBitmapData.copyChannelやColorMatrixFilterなどでRGB分解すると、例えば白い部分などは全チャネルで反応してしまいます。そこで、人の目が見て赤緑青な部分を直感的にRGB成分として取り出せるように、RGBExtractorというクラスを作りました。

このクラスは入力画像の全ピクセルに以下の処理をおこなうことでRGB各成分を抽出します。ここで、R,G,Bはある座標における入力画像の色、R’,G’,B’は分解後のその座標の色となります(計算上マイナスになった場合は0とします)。
scaleは0以上の任意の実数です。写真などの自然画像にはRGBの純色はまず出てこないので、scaleがある程度高くないとハッキリと検出できませんでした。

R' = scale * ( R - max(G, B) )
G' = scale * ( G - max(B, R) )
B' = scale * ( B - max(R, G) )

この処理は、実際にはフィルタで全ピクセルをバッチ処理しています。RGBExtractorクラスはまだ詰めが甘いので、もう少し精度を上げられるように頑張ってSpark Projectにコミットしておきます。

今回初めてFlashPlayer10の動的音生成を使ってみたのですが、鳴らすだけなら思ってたより簡単でした。それ以上に、音の鳴るものは作っててやっぱり面白くて、音楽ってすごいなあって改めて感じました。幸いにもSpark Projectには音関係の素晴らしいライブラリがたくさんあるので、もっと使わせていただこうと思います。そんな感じです。

JPPScrollbar

Just（ただ） Put（置けば） Play（動く） Scrollbar（スクロールバー）
サンプルファイルのライブラリからステージに置けば動いてくれるActionScript3.0製のスクロールバーです。個人的に作っていましたが、割と高機能になったので公開します。

主な機能

• 任意のSpriteやMovieClipをスクロールバーのパーツとしてバインド可能です
• 滑らかな減速スクロールを使用可能です
• コンテンツ量に合わせて縮むスクロールバーを使用可能です
• スライダーの高さを0ピクセルとして扱うことが可能です
• iPhoneのような、スクロールが行き過ぎて戻る演出が使用可能です
• エンドロールのような自動スクロールを実行可能です
• 外部からメソッド呼び出しでスクロールさせることが可能です
• スクロール量など、こと細かく決められます
• スライダーやスクロール対象コンテンツを整数値に吸着できます
• y座標でなくても、任意のプロパティをスクロール可能です
• ライブラリからコピペしなくてもnewして使えます
• SWFWheelを使用しているので大抵の環境でマウスホイールを使えます

などなど色々ありますが、とりあえず目的にかなったサンプルのフォルダからごそっとコピペすれば動くようになっています。もう少し詳しい使い方はSpark Projectのほうに書いてあります。

サンプル

• samples/01 ･･･ コンテンツ量に合わせて伸縮するスライダーを使用した減速スクロールバー（デフォルト）
• samples/02 ･･･ 減速スクロールを使わないスクロールバー
• samples/03 ･･･ iPhoneっぽいスクロールとイベントの使用例 （matsumosさんに作成していただきました）
• samples/04 ･･･ リキッドレイアウトに対応したスクロールバー
• samples/05 ･･･ useIgnoreSliderHeight = true （スライダーの高さを0として扱う）の使いどころ → スライダーの基準点をスクロールエリアの上から下までめいっぱい動かしたいとき
• samples/06 ･･･ 水平スクロールバーのサンプル
• samples/07 ･･･ ASファイルだけで作ったサンプル （matsumosさんに作成していただきました）
• samples/08 ･･･ Papervision3Dのテクスチャに組み込んだサンプル （matsumosさんに作成していただきました）
• samples/09 ･･･ 外部テキストを読み込んでスクロールする（読み込みに失敗する場合はSVNからダウンロードしてお試しください）
• サンプルどしどし受付中です！

つーわけでこのJPPScrollbar、ガンガン使ってもらえると嬉しいです。
めんどくさい部分はちゃちゃっと済ませちゃいましょー。

追記 10.05.12　バージョン1.03への移行について
バージョン1.03へのアップデートに伴い、これまでの使い方ではエラーが出るようになりました。詳しくはSparkProjectに追記していますのでそちらをご覧ください。バージョン1.02もダウンロード可能です。

追記 10.07.04　バージョン1.04をリリースしました
MagicMouse使用時の不具合に対処しました。詳しくはSparkProjectに追記しています。

追記 10.08.02　バージョン1.05 Previewをリリースしました
詳しくはSparkProjectに追記しています。

追記 10.09.17　バージョン1.06Preview, 1.06をリリースしました
詳しくはSparkProjectに追記しています。

追記 11.10.14　バージョン1.07をリリースしました
詳しくはSparkProjectに追記しています。

WP-Al-SWFObject
I made the plug-in to embed on the entry of WordPress easily, so it introduces it. This is powerful plug-in for embedding swf on WordPress. It is possible to specify parameters more in detail than WP-SWFObject.

Download
How to use
・How to use (In a location other than the entry)
Control panel
Examples
Version of SWFObject used
License

- Download
>>Download (Enblish)
>>Download (Japanese)

- How to use

1. The wp-al-swfobject folder is created by defrosting downloaded zip, and you up-load the folder to the wp-content/plugins directory of the server.
2. The WP-Al-SWFObject plug-in is made effective from set screen -> plug-in of WordPress.
3. Describe the following codes at the position in which you want to embed swf. Please replace [ /embedSWF] with [/embedSWF].

[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[ /embedSWF]

The parameter of the deficit is indispensable, and other parameters is optional (It is possible to omit it).

• swf（indispensable） ･･･ The path to embedded swf
• width（optional） ･･･ The width of swf.  If you omit it, the default value specified on a control panel is used.
• height（optional） ･･･ The height of swf. If you omit it, the default value specified on a control panel is used.
• align（optional） ･･･ The position of swf. You can choose from the “left”, the “right”, or the “center”.
  If you omit it, the value isn’t specified especially.
• version（optional） ･･･ The version of necessary FlashPlayer. It becomes 9.0.0 when omitting it.
• expressInstall（optional） ･･･ The path to express-install-swf. It is displayed when the player doesn’t meet the requirement. SWFObject default “expressInstall.swf” is displayed when omitting it.
• flashvars（optional） ･･･ The flashvars a.k.a the variable that html passes swf. It is described by the format {name1:”value1″, name2,”value2″}.
• params（optional） ･･･ The parameters when swf is embedded is described by flashvars and the same format.
• attributes（optional） ･･･ The attributes on html when swf is embedded is described by flashvars and the same format.

・How to use (In a location other than the entry)
If you want to paste swf to the outside of the entry (For example, header and sidebar), you can call the following php function in where you want to paste swf.

<?php wp_al_swfobject_echo('[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]'); ?>

- Control panel
The default value of each parameter can be set from the plug-in Control panel.
The default value is applied to all swf embedded by WP-Al-SWFObject.
The priority level when the same variable is set in two or more parts becomes the following.

Settings in [embedSWF] tag > {name1:”value1″, name2:”value2″} at Control panel > Supplementary setting in control panel(only params can be set).

It is overwrited by the variable with a high priority level. Moreover, for flashvars and params and attributes, the superscription is judged individually in each variable.

For instance, when the following code is set from Control panel,

aaa:"30", bbb:"50"

flashvars (aaa=”50″, bbb=”30″) is passed to all embedded swf by using WP-Al-SWFObject. Under such a condition, as follows is done and swf is embedded.

[embedSWF]hoge.swf,,,,,,{aaa:"10"}[ /embedSWF]

In this case, because variable aaa is alse specified with flashvars in [embedSWF] tag, the default value is not applied to variable aaa. In a word, this swf will receive flashvars as aaa=”10″, bbb=”50″.

- Example
It embeds without specifying the option (Be set it to 300 in width and 50 in height on the Control panel).

[embedSWF]hoge.swf[ /embedSWF]

Next, width and height are embedded specifying it.

[embedSWF]hoge.swf, 200, 100[ /embedSWF]

Next, it makes to right adjust, and flashvars is passed.

[embedSWF]hoge.swf, 200, 100, right,,,{aaa:"10"}[ /embedSWF]

Next, the id and the name attribute of html are added.

[embedSWF]hoge.swf, 200, 100,,,,{},{},{id:"sample", name:"sample"}[ /embedSWF]

Next, all parameters are specified (Flashplayer 9.0.0 or later is required. When the player version is low, http://hogehoge.jp/alt.swf is displayed. The variable named aaa=10 is passed to swf. The context menu is not given. The connection between html and swf is always permitted. The id and the name attribute of html is sample).

[embedSWF]hoge.swf, 400, 360, center, 9.0.0, http://hogehoge.jp/alt.swf, {aaa:"10"}, {menu:"false", allowScriptAccess:"always"}, {id:"sample", name:"sample"}[ /embedSWF]

- Version of SWFObject used
You can switch the version of SWFObject on COntrol panel (It is 2.1 in default).
It corresponds to version from 1.5 to 2.2. But, Callback method that is the new features included of 2.2, and the attributes of 1.5 cannot be specified at current version.

- license
GPL license. Because WP-SWFObject that is origin of WP-SWFObject is GPL license.

前回のエントリに書いたyugop氏の言葉にもろ影響されてますが、美しいものを作りたくなったので、やったった。ActionScript3.0で流体シミュレーション。ついでにサイトトップも更新しました。

実はまともにDisplacementMapFilterを使ったのは初めてでした、うへぁ。流体シミュレーションも初めてだったので色々戸惑ったけど、まあまあおもろいもんが作れた気がするぞ。

どうやってるかというと、基本的なアルゴリズムはblog ViolentCodingさんのを使っていて、それを動画に適用した感じです。で、そのまんまだとマウスを素早く動かすとゼリーみたいにぷるぷるしちゃったので（可愛いけど）、ドロっとするようにアルゴリズムを改造。あとは高速化のためにセルを2次元配列で走査するのではなく、リンクリストを使うように変更しました。他にも色々やった気がするけど、忘れた。

リンクリストってのは、隣のセルを参照として持っておいて、その参照を使って隣へアクセスする方法。配列演算子を使わずに、隣へ隣へとセルの参照をたどることで、まるっとアクセスします。

今回は各セル毎に、forに代わる次セルへの参照と、流体の速度場を更新するための上下左右8方向のセルの参照を持たせました。これがめっぽう速いのなんのなのです。（フレームレートで言うと5フレームくらい違う）

なので、今度から頻繁に配列を回すときはリンクリストを使うようにするとよさげです。ターゲットプレーヤーが10のときにVectorとどっちが速いのか要検証ですが。

あと、この流体表現。
ライブラリは必殺技という精神に基づいて、trick7さんのTeraFireみたいに

alumiFluid(target);

とかで任意のオブジェクトを液状化できると素敵なので現在制作中だったりします。もちろん、汎用流体ライブラリとしても使えるようにするつもりです。需要あるかどうか分からんけど。

wonderflのはソースにコメントを書いてないので、ライブラリ化のときにちゃんとします。少々お待ちを、すみません。

では～。

WP-Al-SWFObject
WordPressのエントリにswfを簡単に貼り付けるためのプラグインを作ったので紹介します。WP-SWFObjectよりも細かくパラメータを指定できます。

ダウンロード
使い方
使い方（エントリー以外の場所に貼り付ける）
管理画面
使用例
使用するSWFObjectのバージョン
ライセンス

・ダウンロード
>>Download （英語版）
>>Download （日本語版）

・使い方

1. ダウンロードしたzipを解凍するとwp-al-swfobjectフォルダができるので、フォルダごとサーバのwp-content/pluginsディレクトリにアップロードします。
2. WordPressの設定画面->プラグインから、WP-Al-SWFObjectプラグインを有効化します。
3. エントリー内のswfを貼り付けたい位置に以下のコードを記述します。[／embedSWF]は[/embedSWF]に置き換えてください。

[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]

赤字のパラメータは必須、黒字のパラメータはオプション(省略可能)です。

• swf（必須） ･･･ 貼り付けるswfへのパスを記述します。
• width（省略可） ･･･ swfの幅を指定します。省略するとプラグインの設定ページで指定したデフォルト値が用いられます。
• height（省略可） ･･･ swfの高さを指定します。省略するとプラグインの設定ページで指定したデフォルト値が用いられます。
• align（省略可） ･･･ swfを貼り付ける際の位置を指定します。左寄せ、右寄せ、中央寄せに対してそれぞれleft、right、centerで指定します。省略すると特に指定されません。
• version（省略可） ･･･ 必要なFlashPlayerのバージョンを記述します。省略すると9.0.0となります。
• expressInstall（省略可） ･･･ プレイヤーが要件を満たさない場合に表示するswfへのパスを記述します。省略するとSWFObjectデフォルトのexpressInstall.swfを表示します。
• flashvars（省略可） ･･･ HTMLからflashに渡す変数（flashvars）を、{変数名1:”値1″, 変数名2:”値2″}という形式で記述します。
• params（省略可） ･･･ swfを貼り付ける際のパラメータを、flashvarsと同形式で記述します。
• attributes（省略可） ･･･ swfを貼り付ける際のhtml属性を、flashvarsと同形式で記述します。

・使い方（エントリー以外の場所に貼り付ける）
ヘッダーやサイドバーなど、エントリ以外の場所に貼り付ける場合は、貼り付けたい場所で以下のphp関数を呼び出します。引数として、エントリー内に貼り付ける場合のタグと同様のものをまるごと文字列で渡します。

<?php wp_al_swfobject_echo('[embedSWF]swf, width, height, align, version, expressInstall, flashvars, params, attributes[／embedSWF]'); ?>

・管理画面
WP-Al-SWFObjectは管理画面から各パラメータのデフォルト値を設定できます。
デフォルト値はWP-Al-SWFObjectによって貼られる全てのswfに適用されます。
同じ変数を複数の箇所で設定した場合の優先順位は
[embedSWF]タグ内 > 設定画面の{変数名1:”値1″, 変数名2:”値2″} > 設定画面の補助設定（paramsのみ設定可）
となっており、優先順位の高い変数に上書きされます。また、flashvars、params、attributesに関しては各変数ごとに上書き判定がなされます。

例えば、管理画面からflashvarsの項目に

aaa:"30", bbb:"50"

を設定すると、WP-Al-SWFObjectを使って貼る全てのswfに aaa=”30″, bbb=”50″ としてflashvarsが渡されます。この状態で、以下のようにしてswfを貼り付けます。

[embedSWF]hoge.swf,,,,,,{aaa:"10"}[／embedSWF]

この場合、タグ内でデフォルト値と同名の変数名aaaでflashvarsを指定しているため、デフォルト値は変数aaaに対して適用されません。つまり、このswfは aaa=”10″, bbb=”50″ としてflashvarsを受け取ることになります。

・使用例
オプションを指定せずに貼り付ける（管理画面で幅300、高さ50に設定してあります）

[embedSWF]hoge.swf[／embedSWF]

幅と高さを指定して貼り付ける

[embedSWF]hoge.swf, 200, 100[／embedSWF]

右寄せにしてflashvarsを渡す

[embedSWF]hoge.swf, 200, 100, right,,,{aaa:"10"}[／embedSWF]

htmlのidとname属性を付加する

[embedSWF]hoge.swf, 200, 100,,,,{},{},{id:"sample", name:"sample"}[／embedSWF]

全パラメータを指定する（プレイヤーは9.0.0以上、プレイヤーバージョンが低い場合はhttp://hogehoge.jp/alt.swfを表示、aaa=10という変数をswfに渡す、右クリックメニューを出さない、htmlとswfの通信を常に許可する、htmlのidとname属性をsampleとする）

[embedSWF]hoge.swf, 400, 360, center, 9.0.0, http://hogehoge.jp/alt.swf, {aaa:"10"}, {menu:"false", allowScriptAccess:"always"}, {id:"sample", name:"sample"}[／embedSWF]

・使用するSWFObjectのバージョン
管理画面から切り替えられます（デフォルトでは2.1）。
バージョン1.5～2.2まで対応していますが、現在のところ1.5のattributesと2.2の新機能であるCallback methodは指定できません。

・ライセンス
元にしたWP-SWFObjectがGPLライセンスなのでGPLでお願いします。

追記 09.04.24
使用方法が2エントリに分割されていたので、1つにまとめました。
swfの幅と高さが省略可能となりましたので、それに伴いエントリ内容を修正しました。
プラグインの紹介に特化するため、前段部分の文章（下記のもの）を削除しました。

前回のエントリにも書いたのですが、WordPressにswfを貼り付けるにはWP-SWFObjectプラグインが便利です。が、どうにもparamsとattributeを指定できないようなので、プラグインを自作しました。（WP-SWFObjectでのflashvarsの渡し方はコメント欄でまつもとさんに教えていただきました、ありがとうございます！）

追記 09.05.11
SparkProjectにコミットしました。

追記 09.05.18
英語版エントリを書きました。

追記 09.06.30
v2.1にバージョンアップしました。wp_al_swfobject_echo関数により、エントリー以外の場所でもswfの貼り付けが可能となりました。

例えば幅400px、高さ300pxのhoge.swfを埋め込みたい場所で

[SWF]hoge.swf, 400, 300[／SWF]

と記述すればSWFObjectタグを挿入してくれるので大変便利です。[／SWF]の部分は[/SWF]に置き換えてください。

オプション画面では、書き出し時のパラメータを調整できて結構融通がきくのですが、wmodeだけはopaqueやtransparentに設定しても、すぐにデフォルトのwindowにもどってしまいます。

何でだろうと思ってwp-swfobjectフォルダのwp-swfobject.phpをみてみると、197行目あたりにタイポを見つけました。

<select name="swf_mode" id="swf_mode"></select>

swf_wmodeとするはずがswf_modeに。。。どうやらこいつが原因のようです。そこで、この行を以下のように変更します。

<select name="swf_wmode" id="swf_wmode"></select>

アップしなおすと上手く動きました。ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

あとは、SWFObjectで言うところのflashvars、params、attributesをWP-SWFObjectから上手く渡せれば完璧なのですが、やり方がよく分かりません。どなたか知っている方がおられましたら教えてください↓

swfobject.embedSWF("hoge.swf", "content_id", "400", "300", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

追記 09.05.03
自ら解決すべく、プラグイン『WP-Al-SWFObject』を自作しました。

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