AnimateCC シンボルに外部のプログラムをリンケージしたい

プログラムを紐付ける

AnimateCC（ターゲットcanvas）で、
ライブラリ内のシンボルに、旧Flashの様にプログラムをリンケージして使いたい
と思ってライブラリ内のシンボルの「シンボルプロパティ」を見ても、グレーアウトされてて使えないm(__)m
なので、強引?にプログラムを紐付けたいなと思って、試行錯誤

んで、これでいいのかな

各シンボルの先頭フレームのアクションに、
例えばルートの先頭フレームに、

let myobj = new Main(this, lib);

Mainクラスは予め html でインポートしている jsファイルになります
（記述は TypeScript を使っています）

class Main{
	private _myDisp:createjs.MovieClip = null;
	private _lib:any = null;

	constructor(current:createjs.MovieClip, lib:any){
		this._myDisp = current;
		this._lib = lib;
		this._myDisp.stop();
		console.log("this._myDisp:"+this._myDisp);
	}
}

これで、シンボルにクラスを紐付けることができました

コンストラクタの
第一引数に、シンボル自身
第二引数に、グローバル変数の lib を渡しています

実行すると、コンソールに
this._myDisp:[MovieClip (name=null)]
が表示されます

newしてみる

上記はステージに配置している（またはルート）場合でしたが、
動的にシンボルを生成することも可能です
例えば、シンボルItemを用意して
Itemシンボル内には Animate上で、適当に図形を書いといて、
先頭フレームのアクションに、

let myobj = new Item(this, lib);

を記述
クラスファイルは（これも htmlでインポートしておきます）、

class Item{
	private _myDisp:createjs.MovieClip = null;
	private _lib:any = null;

	constructor(current:createjs.MovieClip, lib:any){
		this._myDisp = current;
		this._lib = lib;
		this._myDisp.stop();
		this._myDisp.alpha = 0;
		this._myDisp.scale = 0;

		this._init();
	}

	private _init():void{
		createjs.Tween.get(this._myDisp).wait(300 * Math.random()).to({scale:1, alpha:1}, 1000, createjs.Ease.circOut);
	}
}

これを Main から生成してみます。
Mainクラスに以下のメソッドを追加、

class Main{
// ... 略
	constructor(current:createjs.MovieClip, lib:any){
// ... 略
		this._randomDisp();
	}

	private _randomDisp():void{
		let i:number;
		for(i = 0; i < 5; i++){
			let item:Item = new this._lib.Item();
			item.x = 100 + 600 * Math.random();
			item.y = 100 + 500 * Math.random();
			this._myDisp.addChild(item);
		}
	}
}

注意点として、動的に生成するシンボルは以下の設定が必要となります
・クラス名とシンボル名は同一にしておく
・ステージに1つ配置しておく
なんかステージに配置されてないと生成できないみたいなので
ステージの見えないところに1つダミーとして配置しておきます

実行すると、Itemを5つ表示して、Item自体はフェードインしながらだんだん大きくなります

共通項をクラス分け

Mainクラス と Itemクラスと、コンストラクタ内の3行は共通項なので、
AbstractDispクラスとして、

class AbstractDisp{
	protected _myDisp:createjs.MovieClip = null;
	protected _lib:any = null;

	constructor(current:createjs.MovieClip, lib:any){
		this._myDisp = current;
		this._lib = lib;
		this._myDisp.stop();
	}
}

Mainクラス修正

class Main extends AbstractDisp{
	constructor(current:createjs.MovieClip, lib:any){
		super(current, lib);
// ... 略

Itemクラス修正

class Item extends AbstractDisp{
	constructor(current:createjs.MovieClip, lib:any){
		super(current, lib);
// ... 略

ちょっとだけ楽になる

まとめ

これで、Animate上でのレイアウト・アニメーション作業と、プログラミング作業と、切り分けて進めることができます
プログラムを外部にだすメリットとして、分担作業もあるけど、Animate内部にプログラムを書いちゃうといちいちパブリッシュしないといけないけど、
これだと、ブラウザをリロードするだけで確認できます
ブラウザによってはキャッシュを毎回クリアしないといけないかもだけど、それでも、圧倒的に時間の短縮になります