AnimateCC (createjs) のメモ

AnimateCCを使った、Canvas+jsの案件を受けることになった。
Flashでの作業は結構慣れたものだと思っていて、多少ブランクは有るが、まぁなんとかなるだろうと思ったけれども、やはりFlashとは別物だと感じたので、備忘録的メモ。

###大体this。
Flashだと、何も考えずに

stop();

とフレームに書くと、そのフレームでアニメが止まってくれたが、AnimateCCの場合は、

this.stop();

と、大抵thisをつける必要がある。

###rootの参照は、exportRoot。
rootと呼ばれていた部分のタイムラインにアクセスする場合は、

exportRoot.gotoAndStop(2);

rootにあるインスタンスsampleのタイムラインを制御するときは、

exportRoot.sample.gotoAndPlay("start");

###フレームナンバーが1じゃなくて0から。
Flashでは、フレーム1の場所が、フレーム0。
一個ずれてるので、タイムラインの下に見えてる数字を指定すると、ひとつ先を見るので、頭のなかで数字を一つ引く。（例：6は5）

###フレーム1に置かれてないインスタンスは以降のフレームスクリプトから呼べない。
Flash時代は忘れてしまったのだけれども、createjsでは、ステージやmovieclipの0フレーム目にインスタンス名付きオブジェクトがないと初期化してくれない。
例えば、レイヤー１の0フレーム目に空白のキーフレームを置き、1フレーム目にインスタンス"test"を置き、
1フレーム目のフレームスクリプトで、

this.test.gotoAndPlay(1);

とかしても動かない。
0フレーム目に、インスタンス"test"を置いておかないと、どうも使えないよう。
インスタンスtestにスクリプトがない状態では0フレーム目を空白にしておくか、
testを置いたmcの0フレーム目のtestにキーフレームを打ってアルファを0にすることで対応。

###連番のMCを呼ぶときは、this["obj_" + num]。
MC内に、obj_0,obj_1,obj_2... と置くことってよくあると思うんだけど、とり方がわからず嵌った。
Stage => Sample => objs => obj_n
とあるときは、

for(var num=0;num<10;num++){
	exportRoot.Sample.objs["obj_" + num].gotoAndPlay(1);
}

みたいにすれば動く。
0番だけ動かしたいときは、

exportRoot.Sample.objs.obj_0.gotoAndPlay(1);

だよ、念のため。

###子供から親を参照するときは、parent。
子供のmcから親のタイムラインにおいてあるmcをいじりたいときは、

this.parent.sample.gotoAndPlay(1);

親のタイムラインをいじる場合は、

this.parent.gotoAndPlay(1);

###addEventListenerの書き方は同じ。
AS3と同じ。
ただし、イベント名がAS3とは異なっている。
例えば、マウスダウンは、"mousedown"。

this.addEventListener("mousedown",mousedownHandler);

###関数定義するとスコープ外れる。
rootで、フレームスクリプトを書いて、関数を定義してインスタンスを呼ぼうとすると、呼べない。
具体的にはこんな感じ。
rootにインスタンスsampleを置いて、フレームをいじりたいとき。

this.clickbox.addEventListener("mousedown", mousedownHandler);
function mousedownHandler(event){
	this.sample.gotoAndPlay(1);
}

はエラーになる。

this.clickbox.addEventListener("mousedown", mousedownHandler);
function mousedownHandler(event){
	exportRoot.sample.gotoAndPlay(1);
}

で動く。
つまり、関数内に入るとスコープがずれるっぽい。

###グローバル変数の書き方。
rootに、

var globalvariablesint = 0;

みたいに書いても、どこからも参照できない。
アクションパネルの、左ペインの、グローバル、という項目があるのでそこを開くと、スクリプトという項目があり、そこに変数を定義すると動く。
何だそれ。
（こうすると、jsをパブリッシュした際に、html側に変数として書き出してくれる。なんだそれ）
あと、外部jsの呼び方は、さっきのグローバルという項目人クルードという項目があるので、そこの＋マークをクリックすると読める。
そこに定義しても大丈夫。

###キャストは、parseInt()。
キャストをする際に、

int(1.2);

みたいに書きたいのに、書けない。

parseInt(1.2);

とかかくとキャストされるっぽい。深いところはわからない。
ちなみに、ランダムっぽいことをしたいときは、Math.random()。
整数で取り出したいなーっていう印象のときは、

var i = parseInt(Math.random()*10);

みたいにすれば雑に取れる。
詳しいところはわからない。

###jsなので、型指定しなくてもいい。

var i = "1";

って、string型みたいに書いても、

var n = i + i;

は、11にならない。みたい。この辺もよくわからん。

多分めっちゃ突っ込みたいだろうから、突っ込んで下さい。
とりあえず、未だ調べないといけないところが結構ある…。
あと間違ってるところとかは、ビシビシ指摘してほしいです。