更新日
やりたいこと
にゃんこの画像をクリックすると、ちゅーるを貪るにゃんこの画像が表示される。
その際、ムービークリップシンボルにビットマップシンボルを入れ子にせず、ビットマップシンボルに直接アクションを与える。
現状
「はこ」シンボルに「ねこ」シンボルを配置、インスタンス名を「ハコネコ」とし、
「ハコネコ」インスタンスに対して「クリックすると指定したフレーム(ねこのきもち)に移動する」アクションを与えている。
アクションウィンドウからコードを確認すると、こんなかんじです。
this.ハコネコ.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));
function fl_ClickToGoToAndStopAtFrame_2()
{
exportRoot.gotoAndStop("ねこのきもち");
}
とりあえずやる
とりあえずやる
新規シンボルを作成し、画像を読み込む
新規シンボルを作成(ムービークリップ)
今回は「ねこ」とします。
ドラッグアンドドロップ、もしくはコピペで画像を貼り付けると、ビットマップ(今回は「ビットマップ1」)として読み込まれる。
ライブラリから確認すると、こんなかんじ。
「ビットマップ1」にコードスニペットを適用する(試み)
「ねこ」シンボル編集画面にて、「ビットマップ1」を選択
コードスニペットから、「HTML5 Canvas」→「クリックして特定のフレームに移動し、停止」をクリック
すると、警告が出る。
OKをクリックすると、
このようになります。
コードを読んでみる
コードの1行目を確認します(画像だと12行目)
this.movieClip_1.addEventListener("click",fl...)
この「movieClip_1」ってなんだ！？って感じなので、一旦、アクションウィンドウを閉じて確認します。
すると、ライブラリに、「シンボル1」が追加されています。
「ねこ」シンボル編集画面にて、にゃんこの画像をクリック、プロパティにて確認すると、
「movie_Clip_1」というインスタンス名が与えられている。(さっきみたやつだ！)
そして、「ねこ」に読み込んだ「ビットマップ1」は、「シンボル1」というシンボル(種類はムービークリップ)に変換されたようです。
これ、つまり、
「はこ」に、「ねこ」を入れ子にしていたときと同じです。
「ねこ」に、「シンボル1」が入っている状態です。
やりたいのはコレジャナイ
これじゃあ入れ子にするしかないみたいじゃないか！
ちょっと強引にやってみる
コレデイインデショってなげやりに試したのが動いたので、
デメリットとか考えずにとりあえず強引にやっていく。
シンボル1を削除する
さっきのつづき
「ねこ」から、「シンボル1」を選択してdeleteでもよいのですが、
後々わかりづらいので、ライブラリから「シンボル1」削除してしまいます。
すると、「ねこ」からも当然のごとく消えます。
このことで、インスタンス「movie_Clip_1」もなくなりました。
ビットマップ1を「ねこ」に配置
「ねこ」編集画面に入り、「ビットマップ1」をドラッグアンドドロップで配置します。
アクションからコードを編集する
どれを編集するか
アクションウィンドウを開くと、先程コードスニペットから適用したコードがそのままになっています。
これを書き換えていく。
アクションウィンドウからコードが確認できないときは、「ねこ」をシーン1に配置すると表示されるようになります。
この、「ねこ」のActions:フレーム１を書き換えるよ。
Actionsというのは、コードスニペットを適用したときに、Animateが勝手に作ってくれるレイヤーです。
フレーム１は１フレーム目ということ。
つまり、「ねこ」シンボルの1フレーム目の動き(アクション)を編集していきます。
実際に編集する
編集前
this.movieClip_1.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));
function fl_ClickToGoToAndStopAtFrame_2()
{
exportRoot.gotoAndStop(5);
}
編集後
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 を理解する(はてブロ)
[JavaScript の this を理解する多分一番分かりやすい説明(Qiita)]
(https://qiita.com/takkyun/items/c6e2f2cf25327299cf03)