Animateテクニカルノート

タイムラインに置いた子インスタンスを参照したい

ID: FN1703002
Product: Animate CC
Version: 2017.1

Animate CC 2017の[HTML5 Canvas]ドキュメントで、タイムラインに置いた子インスタンスを参照して扱おうとしたとき、インスタンスがつくられてから表示リストに加わるまでには段階を経ます。その過程を知っておくことが、子インスタンスを扱ううえで大切です。

01 インスタンス名で参照する

タイムラインに置いたMovieClipインスタンスには、[プロパティ]パネルでインスタンス名をつけておきます(図001)。すると、つぎのように「this.インスタンス名」という書き方で、インスタンスの参照が得られます。console.log()メソッドからは、「lib.シンボル名」と示されるでしょう。インスタンスの参照に対して、プロパティを調べたり、メソッドの呼び出しができます。ただし、このときは、まだStageオブジェクトを頂点とする表示リストの階層には加わっていません。


var pen = this.pen;
console.log(pen);  // lib.pen_walk

図001■フレームアクションからインスタンス名で参照する

02 親タイムラインから子インスタンスを調べる

インスタンスが表示リストに加わっていないと、親のタイムラインから子インスタンスを調べようとしたときに失敗します。Container.numChildrenプロパティの数に加わらず、Container.getChildAt()メソッドでインスタンスを得ることもできません。簡単な対処方法は、フレームアクションをつぎのフレーム以降に書くことです(図002)。はじめのフレームを過ぎれば、表示リストは正しくつくられます。


this.stop();
var numChildren = this.numChildren;
var child_0 = this.getChildAt(0);

図002■フレームアクションを1フレームあとに書く

けれど、フレームアクションをあちこちに分けたくない場合もあるでしょう。第1フレームにまとめた方が、管理はしやすくなります。その場合、つぎのようにTickerクラスのTicker.tickイベントで1フレーム待つ手が考えられます。このとき、リスナー関数の中と外とでthis参照が違うことにご注意ください。また、Event.remove()メソッドを用いると、呼び出された関数自信をイベントリスナーから除けます。名前のない関数をイベントリスナーに定めたときに使うと便利でしょう(「EaselJS次期バージョンのイベントモデル改訂」04「Event.remove()メソッド」参照)。


var root = this;
createjs.Ticker.addEventListener('tick', function(eventObject) {
	console.log(root.numChildren, root.getChildAt(0));
	eventObject.remove();
});

作成者: 野中文雄
作成日: 2017年3月9日