おさらい

1羽目ではムービークリップシンボルにビットマップシンボルを入れ子にせずに、ビットマップシンボルに、直接コードスニペットを適用できるか、ということについて検証しました。
結果としてはできる、でも複雑化したときにどうも挙動がオカシイ。
(コードは思ったとおりに動くのではない、書いたとおりに動くのだ。)
そこで、別の方法を使って今回は実現していきます。

とりあえずコードを読む

教えられたとおりにやっていく。

ビットマップ1を「ねこ」シンボルに変換
「はこ」シンボルに「ねこ」シンボルを配置、「ハコネコ」インスタンスとする。
「ハコネコ」に「クリックすると特定のフレームに移動し、停止」アクションをコードスニペットから適用。今回、特定のフレームは「ねこのきもち」(メインタイムラインの2フレーム目)です。
「はこ」をメインタイムラインの1フレーム目に配置。
メインタイムラインの1,2フレーム目にthis.stop()

書き出されたjsファイルを読んでいく。

ビットマップ1

ビットマップ1のオブジェクトです。サクサク読み飛ばします。


(lib.ビットマップ1 = function() {
    this.initialize(img.ビットマップ1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1620,1080);

ねこ

ねこのオブジェクト。


(lib.ねこ = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // レイヤー1
    // インスタンスを生成(ん？)
    this.instance = new lib.ビットマップ1();
    // 初期位置
    this.instance.setTransform(-810,-540);
    // タイムラインを持っているシンボルはaddTweenで配置される
    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-810,-540,1620,1080);

ちょっと気になるのは、this.instance = new lib.ビットマップ1();の部分。
ビットマップでもインスタンス名あるじゃないか。

setTransformとかはサクサク読み飛ばします。

はこ

はこのオブジェクト。


(lib.はこ = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {

        /* クリックして特定のフレーム("ねこのきもち")に移動し、停止 */
        this.ハコネコ.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

        function fl_ClickToGoToAndStopAtFrame()
        {
            exportRoot.gotoAndStop("ねこのきもち"); 
        }
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));


    // レイヤー1
    // 「ハコネコ」インスタンスを生成。中身は「ねこ」シンボル。
    this.ハコネコ = new lib.ねこ();
    // 初期位置
    this.ハコネコ.setTransform(-2,0,1,1,0,0,0,101.1,105.2);
    this.timeline.addTween(cjs.Tween.get(this.ハコネコ).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-812,-540,1620,1080);

「ハコネコ」インスタンスを生成し、「ハコネコ」がクリックされたらfl_ClickToGoToAndStopAtFrame.bind(this)という処理をするよ。
fl_ClickToGoToAndStopAtFrame.bind(this)の中身は、「ねこのきもち」というフレームに移動して停止。

メインフレーム


// stage content:
(lib.hakoneko = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        /* このフレームで停止 */
        this.stop();
    }

    this.frame_1 = function() {
        /* このフレームで停止 */
        this.stop();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1).call(this.frame_1).wait(1));

    // レイヤー 1
    this.instance = new lib.はこ();
    this.instance.setTransform(958.2,540);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(2));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(1108.2,540,1620,1080);

メインフレームは今回は放置。
どうでもいいけど、コード内にニホンゴあるのに動くの、すごくキモい。

あらためて

シンボルにシンボルを入れ子にせずに、(ムービークリップシンボルをインスタンス化する必要がある)コードスニペットを適用できるか、という課題に取り組んでいきます。

さらっと概要

「ねこ」シンボルはビットマップとなっているため、プロパティでは以下のようになっています。

ムービークリップの場合はこうなります。

ビットマップだと、インスタンス名を与えられない。

でも、さきほどコードを読んだとおり、
ビットマップ1には、「instance」というインスタンス名がありましたね。

実際のコード(一部)

コードスニペットからは適用できないので、「ねこ」にActionsレイヤーを作り、1フレーム目にアクションウィンドウから直接書いていきます。


this.instance.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

        function fl_ClickToGoToAndStopAtFrame()
        {
            exportRoot.gotoAndStop("ねこのきもち");
        }

補足

ビットマップを同じシンボルに追加したとします。(仮にビットマップ2)
このとき、ビットマップ1は「instance_1」となり、新しく追加したビットマップ2が「instance」となるので要注意。(なにかが変わると変わるかもしれない)
別のシンボルを用意し、ビットマップを配置すると、インスタンス名は「instance」となります。

疑問

インスタンス名が重複することでなにか不具合は起きないのか。
教えて、えらい人！

烏でもわかるAnimateで作るCanvas 1.5羽目