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

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

#とりあえずコードを読む
教えられたとおりにやっていく。

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

書き出されたjsファイルを読んでいく。
###ビットマップ1
ビットマップ1のオブジェクトです。サクサク読み飛ばします。

```js

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

###ねこ
ねこのオブジェクト。

```js

(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``とかはサクサク読み飛ばします。

###はこ
はこのオブジェクト。

```js

(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)``の中身は、「ねこのきもち」というフレームに移動して停止。

###メインフレーム
```js

// 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);
```

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

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

##さらっと概要
「ねこ」シンボルはビットマップとなっているため、プロパティでは以下のようになっています。
<img width="302" alt="スクリーンショット 2018-10-16 01.10.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/30df129d-5f5f-4c5f-72f1-0ad917b78271.png">


ムービークリップの場合はこうなります。
<img width="300" alt="スクリーンショット 2018-10-15 00.31.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/241a5ad5-d15f-1756-122e-72d2ef1619c2.png">

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

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

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


```js

this.instance.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
		
		function fl_ClickToGoToAndStopAtFrame()
		{
			exportRoot.gotoAndStop("ねこのきもち");
		}
```

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

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