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

#更新日

- 2018.10.14 
    - 記事を書いた日
- 2018.10.15
    - [イエハコネコ問題](#%E3%82%A4%E3%82%A8%E3%83%8F%E3%82%B3%E3%83%8D%E3%82%B3)が発生
    - 書き出されたjsのコードを読んだので、訂正版Qiitaをそのうち書きます。
- 2018.10.16
    - 訂正版[1.5羽目](https://qiita.com/5sick/items/e7b4e8f807b81a3273a9)
  
#やりたいこと
にゃんこの画像をクリックすると、ちゅーるを貪るにゃんこの画像が表示される。
その際、ムービークリップシンボルにビットマップシンボルを入れ子にせず、ビットマップシンボルに直接アクションを与える。


##現状
「はこ」シンボルに「ねこ」シンボルを配置、インスタンス名を「ハコネコ」とし、
「ハコネコ」インスタンスに対して「クリックすると指定したフレーム(ねこのきもち)に移動する」アクションを与えている。
アクションウィンドウからコードを確認すると、こんなかんじです。


```js


this.ハコネコ.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

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

```
#とりあえずやる

とりあえずやる
##新規シンボルを作成し、画像を読み込む
新規シンボルを作成(ムービークリップ)
今回は「ねこ」とします。
ドラッグアンドドロップ、もしくはコピペで画像を貼り付けると、ビットマップ(今回は「ビットマップ1」)として読み込まれる。
ライブラリから確認すると、こんなかんじ。
<img width="301" alt="スクリーンショット 2018-10-15 00.20.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/b2f29c24-574c-cfb8-5548-4439556e416a.png">



##「ビットマップ1」にコードスニペットを適用する(試み)
「ねこ」シンボル編集画面にて、「ビットマップ1」を選択
コードスニペットから、「HTML5 Canvas」→「クリックして特定のフレームに移動し、停止」をクリック
すると、警告が出る。
<img width="493" alt="スクリーンショット 2018-10-15 00.09.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/3a35b9ae-88c0-5cea-b7a7-51e98539af6f.png">

OKをクリックすると、

<img width="792" alt="スクリーンショット 2018-10-15 00.17.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/f0ae2108-2f12-0f69-dec3-88b8d93b980c.png">

このようになります。

##コードを読んでみる
コードの1行目を確認します(画像だと12行目)

```js
this.movieClip_1.addEventListener("click",fl...)
```

この「movieClip_1」ってなんだ！？って感じなので、一旦、アクションウィンドウを閉じて確認します。
すると、ライブラリに、「シンボル1」が追加されています。


<img width="303" alt="スクリーンショット 2018-10-15 00.31.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/fc8441e6-5869-f9eb-0d74-98eacfd230c3.png">


「ねこ」シンボル編集画面にて、にゃんこの画像をクリック、プロパティにて確認すると、

<img width="300" alt="スクリーンショット 2018-10-15 00.31.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/f2f05451-3744-0eb1-ee1f-462276b8fea1.png">

「movie_Clip_1」というインスタンス名が与えられている。(さっきみたやつだ！)
そして、「ねこ」に読み込んだ「ビットマップ1」は、「シンボル1」というシンボル(種類はムービークリップ)に変換されたようです。

これ、つまり、

「はこ」に、「ねこ」を入れ子にしていたときと同じです。
「ねこ」に、「シンボル1」が入っている状態です。

#やりたいのはコレジャナイ
これじゃあ入れ子にするしかないみたいじゃないか！

#ちょっと強引にやってみる
コレデイインデショってなげやりに試したのが動いたので、
デメリットとか考えずにとりあえず強引にやっていく。

##シンボル1を削除する
さっきのつづき

「ねこ」から、「シンボル1」を選択してdeleteでもよいのですが、
後々わかりづらいので、ライブラリから「シンボル1」削除してしまいます。
すると、「ねこ」からも当然のごとく消えます。
このことで、インスタンス「movie_Clip_1」もなくなりました。

##ビットマップ1を「ねこ」に配置
「ねこ」編集画面に入り、「ビットマップ1」をドラッグアンドドロップで配置します。

##アクションからコードを編集する
###どれを編集するか
アクションウィンドウを開くと、先程コードスニペットから適用したコードがそのままになっています。
これを書き換えていく。


アクションウィンドウからコードが確認できないときは、「ねこ」をシーン1に配置すると表示されるようになります。


<img width="230" alt="スクリーンショット 2018-10-15 01.12.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/43453/f37acaf1-6987-3613-26b9-7f7ca148caa6.png">
この、「ねこ」のActions:フレーム１を書き換えるよ。
Actionsというのは、コードスニペットを適用したときに、Animateが勝手に作ってくれるレイヤーです。
フレーム１は１フレーム目ということ。
つまり、「ねこ」シンボルの1フレーム目の動き(アクション)を編集していきます。

###実際に編集する
####編集前

```js
this.movieClip_1.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()
{
	exportRoot.gotoAndStop(5);
}
```

####編集後
```js
this.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

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

movie_Clip_1はさっき削除しましたよね。
ということで、ここからも消してしまいます(強引に)

3行目の、(5)は("ねこのきもち")に変更しておきます。
"ねこのきもち"はフレーム名です。後ほど説明。

##移動先のフレームをつくる
シーン1にて、2フレーム目を右クリックし、空白キーフレームを挿入。
ちゅーるを貪るねこの画像を貼っておきます。
プロパティから、ラベル名をつけます。今回は、「ねこのきもち」とします。

Tips.
今回は関係ありませんが、コードを書き換えるときに、nフレーム目を指定する場合は、n-1と記述する必要があります。配列の関係です。ActionScriptではnですが、JSだとn-1です。

##シーン1の1,2フレーム目にコードスニペットを適用する
コードスニペットから「このフレームで停止」を適用しておきます。

##実行してみる
にゃんこをクリックすると、チュールを貪るねこの画像が表示されるはずです。

#検証
ちょっと検証していく。

##イエハコネコ問題
###Q

①

- ねこ：ねこそのもの。クリックでAにとぶ
- はこ：ねこが入っている。ハコネコと名付ける。Bにとぶ

②

- ねこ：ねこそのもの。なにもおきない
- はこ：ねこが入っている。ハコネコと名付ける。Bにとぶ
- いえ：はこが入っている。イエハコネコと名付ける。Cにとぶ

さてどうなるでしょう。

###A

①

- ねこ：A
- はこ：A

②

- ねこ：-
- はこ：B
- いえ：C


##原因
たぶん、子要素から親要素のイベントを拾ってきてる。
バブリングとかそういうやつ。気が向いたらjsの勉強します。


#補足とか
あれば
##JSにおけるthisの参考資料
[JavaScript の this を理解する(はてブロ)](http://tacamy.hatenablog.com/entry/2013/01/06/224718)
[JavaScript の this を理解する多分一番分かりやすい説明(Qiita)]
(https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)