概要
FlashからAnimateになって、本格的にcanvasアプリ作っていなかったので、Action Scriptで実現していた基礎的なことをJavaScriptでどう書けばよいのか、作ってみながらメモります。
環境
Windows10 + Adobe Animate CC 2015.2
初期
新規作成で「HTML5 Canvas」を選択する
いろいろやってみる
基本事項
- JavaScriptはタイムラインスクリプトとして、直にかけばOK。
- 昔は、
/*js */で囲って書くなど必要だったが、ベタにかけばOK。 - 実行タイミングも、Flashと同じ。JSをかいたスクリプトのフレームに入ったら実行される。
細かいこと
-
thisは省略できない。 - タイプミスなど全く指摘してくれないので、かなり不便。
-
console.logを多用してデバッグしていくのがよさげ。
フレーム間の変数の取り扱い
1フレーム目で、以下のように書く
var a = "あ";
b = "い";
２フレーム目で、console.log すると、
a は、undefined。
b は、文字列"い"が出力される。
var 宣言をすると、そのフレームのみのローカル変数となるようだ。
play(),stop();
ASとほぼ同じ
this.play();
this.stop();
ボタンクリック
ボタンシンボルのつくりかた、インスタンス名の付け方は、Flashと同じ。アップ、オーバー、ダウン、ヒットも何もせず動作する。
クリック時のJSは以下。(btn1がボタンシンボルにつけたインスタンス名)
this.btn1.addEventListener('click',clickFunc);
function clickFunc(){
//処理をかく
}
- ボタン自身のオブジェクト自身を取得したい（ASの
Event.target）が、まだその方法がわかっていない。どなかた教えてください。
gotoAndPlay() gotoAndStop()
ASと同様にフレーム番号指定もできるが、ASはフレーム番号1から始まるのに対し、JSは、フレーム番号0から始まる。よって、1つずれる。
分かりらいので、ラベルをつけてジャンプするのがオススメ。ラベルの設定は、ASと同じ。
また、クリックして gotoAndPlay するようなときは、以下のようにroot宣言しておく。
var root = this;
this.btn1.addEventListener('click',clickFunc,this);
function clickFunc(_obj){
root.gotoAndPlay("page1");
}
MovieClip制御 .x .y .scaleX .scaleY .visible .alpha
以下は動いた
var root = this;
this.btn2.addEventListener('click',clickFunc2);
function clickFunc2(){
root.mc.x += 10;
root.mc.y += 10;
root.mc.scaleX += 0.1;
root.mc.scaleY += 0.1;
root.mc.visible = !root.mc.visible;
root.mc.alpha -= 0.1;
}
以下のプロパティは動かなかった。
.width .height
ローカルで動かす場合の注意
Webサーバーではなくローカルファイルを開いて使う機会は少ないと思いますが…
ローカルで動作させる場合に特有のエラー回避方法です。
特にChromeでエラーがでます。
スプライトシートは使わない
パブリッシュ設定で「スプライトシートに結合」のチェックを外す。これのチェックが入っていると、以下エラーで表示自体ができない。
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
なお、スプライトシートを使わないと、画像ファイルがライブラリ内のシンボル名どおり出力されます。日本語OSならバグることはないですが、英数字にしておいたほうが無難です。
ボタンは使わない。
ボタンシンボルではなく、ステージに配置した「ボタンインスタンス」は使わない。
正確には、「ビットマップが含まれるファイルでボタンがあるとエラー」になります。「ムービークリップインスタンス」にすればOK。
ボタンの中にビットマップを使わない。
上記の注意事項で「ムービークリップインスタンス」にしても、そのクリックアクションをつけたムービークリップの中にビットマップがあると、クリックアクションが発動したときに以下エラーになる。
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.
解決策は、ボタンの上に、アルファ1のムービークリップ（中身はシェイプだけ）を重ね、そのムービークリップに対してアクションを設定する。
※アルファ0だと、クリックアクションが設定できない（イベントが発生しない）ため、アルファ1にする。
参考サイト
公式
CreateJS http://www.createjs.com/
参考にした記事など
https://github.com/HAKASHUN/manabi/issues/11
徐々に追記していきます。