Toolkit for CreateJS: 入れ子状態のムービークリップで gotoAndStop 命令が効かない場合の対処
どちらかのサイトで同じような問題の記事を見たことがあったような気がしますが、メモする意味で記述します。
Toolkit for CreateJS にて入れ子状態のムービークリップを出力後、スクリプトから制御しようとした所、入れ子内部のムービークリップに gotoAndStop 命令が効かない、という現象が発生しました。
解決方法としましては、大本のムービークリップに対して gotoAndStop or gotoAndPlay 命令を記述すればよし、となりました。
詳細は以下となります。
CreateJS バージョン
検証で利用した CreateJS のバージョンは以下となります。
easeljs-0.6.1
tweenjs-0.4.1
movieclip-0.6.1
状況確認用 サンプル作成
オーサリング
まず card というムービークリップを作成しました。number レイヤー 1フレーム目には数字の 1、2フレーム目には数字の 2 といった数字連番のベクターデータを配置しています。
次に View というムービークリップを作成し、card レイヤーに先ほど作成した card ムービークリップを配置しました。プロパティ名も card にしています。
View ムービークリップではクラシックトゥイーンを用いて card ムービークリップを左右に動かす内容となっています。
Toolkit for CreateJS での書き出し
View ムービークリップをルートのステージ上に配置し、Toolkit for CreateJS で出力を行なったものが以下となります。
http://www.dango-itimi.com/blog/swf/191/1/
card ムービークリップには stop 命令を入れていないので、すごい勢いで数値がループしています。
gotoAndStop が効かない例
card を任意の数値の表示で停止したいので、sample.View.card に対し gotoAndStop 命令を実行します。例えばカード番号 5 を表示するには gotoAndStop(4); と記述すればよいはずです。(createJSではフレーム番号は 0 から始まる)
Toolkit for CreateJS から出力された js ファイル内 以下の箇所に gotoAndStop 命令を追加してみます。
this.view = new lib.sampleView(); this.view.setTransform(56,77,1,1,0,0,0,35,45); this.addChild(this.view); this.view.card.gotoAndStop(4); //記述追加
結果は以下となります。数字の 5 にはなってくれず、1フレーム目の数字の 1 になってしまっています。
http://www.dango-itimi.com/blog/swf/191/2/
親となる lib.sampleView 生成直後では this.view.card.timeline.position が null になっていたりと、なんだか正常な状態ではないようです。それがため gotoAndStop 命令が正常に実行してくれないのかもしれません。
試しに 2, 3 フレームほど待機すると、gotoAndStop 命令が正常に実行されるようになりました。
gotoAndStop を即有効にする方法
何フレームか待機しなくてはならない というのは使い勝手が悪いので、どうにかならないだろうかと色々と検証してみた所、親となる lib.sampleView ムービークリップに対し gotoAndStop or gotoAndPlay 命令を実行すると、子の card ムービークリップに対しても gotoAndStop 命令が有効となる事がわかりました。
this.view = new lib.sampleView(); this.view.setTransform(56,77,1,1,0,0,0,35,45); this.view.gotoAndPlay(0); //記述追加 this.addChild(this.view); this.view.card.gotoAndStop(4);
http://www.dango-itimi.com/blog/swf/191/3/
親に対して gotoAndPlay or gotoAndStop 命令を実行することにより、子のムービークリップに何らかの初期化処理のようなものが実行されたのでしょうか。詳細はわかりませんが、ひとまずの解決としておきます。
今回の検証で作成した fla ファイルは以下となります。
http://www.dango-itimi.com/blog/swf/191/sample.zip
今後の CreateJS のバージョンでは動作が異なる可能性があります。