サイトトップ

Director Flash 書籍 業務内容 プロフィール

Animateテクニカルノート

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


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

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

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


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

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

図001左図001右

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

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


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

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

図002上
図002下

けれど、フレームアクションをあちこちに分けたくない場合もあるでしょう。第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日


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.