使用したバージョン
- Animate CC 2015
- CreateJS 8.0.2
- Chrome 48.0
Animate CCから書き出されるCreateJSのMovieClipの構造
変数として書き出される名前はAnimate CC側でつけたインスタンスの名前と同じ名前が付く（タイムラインに分割して配置されると、_1といった連番の番号が後ろに付く)
myShapeColor.js抜粋
(lib.FaceBase = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// レイヤー 1
this.shape = new cjs.Shape();
this.shape.graphics.f("#CCCCCC").s("#D4D4D4").ss(1,1,1).de(-61.9,-61.9,123.8,123.8);
this.shape.setTransform(61.9,61.9);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,125.8,125.8);
...略
(lib.MyFace = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// mouth
this.mouth = new lib.Mouth();
this.mouth.setTransform(62.2,113.4,1,1,0,0,0,26.7,26.7);
this.timeline.addTween(cjs.Tween.get(this.mouth).wait(8));
...略
// レイヤー 6
this.faceBase = new lib.FaceBase();
this.faceBase.setTransform(61.9,61.9,1,1,0,0,0,61.9,61.9);
this.timeline.addTween(cjs.Tween.get(this.faceBase).wait(8));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-0.5,-0.5,124.8,124.8);
MovieClipの構造をたどるには？
Object.keys等でコンテナ内のプロパティを辿ることが出来る。createjs.MovieClipの時に再帰的に同じ関数を呼び出すことで、更に奥深くのcreatejs.MovieClipを取得することが出来る。
function searchHierarchy(container) {
Object.keys(container).forEach(function (key) {
if (container[key] instanceof createjs.Shape) {
// Shapeの時の処理
}
if (container[key] instanceof createjs.MovieClip) {
// MovieClipの時は同じ関数を呼び出して、更に深い階層を取得する
searchHierarchy(container[key]);
}
});
}
シェイプの色を変えるには？
createjs.Shapeはグラフィックスを描画した時のコマンドを保持している。
shape.graphics.instructionsプロパティーに描画したグラフィックスの配列が入っているので、グラフィックスの中身を直接編集することで色を変更することが可能。
function changeColor(shape, color) {
var instructions = shape.graphics.instructions;
if (instructions && instructions.length > 0) {
for (var i = 0; i < instructions.length; i++) {
var cmd = instructions[i];
if (cmd instanceof createjs.Graphics.Fill) { // 塗りのとき
cmd.style = color;
} else if (cmd instanceof createjs.Graphics.Stroke) { // 線のとき
cmd.style = color;
}
}
}
}
まとめ
MovieClipの構造を辿り、シェイプの色を変更することで、Animate CCで描いたシェイプの色を変更することが出来る。
例えば、とある名前のインスタンスのムービークリップの色だけを変えるといったことが可能で、応用することで自由に色を変えられるようなアバターシステムのようなものが作成できる。はず。