今回は、Adobe AnimateCCで作成したデータを書き出し、CreateJSと連携させて使用する方法を試してみます。
サンプルとして、流星が降り注ぐ夜空を作ってみました。

サンプルはこちら
サンプルコード（GitHub）はこちら

AnimateCCでデータ作成、パブリッシュ

HTML Canvasでデータを作成します。サンプルで使用している星・山・雲など、後にCreateJSから操作したいものはAnimateCCでシンボルとして登録しておきます。今回作成した素材たちはフリー素材のaiデータを用いたり、星などの単純な形状のものはAnimateCCで作成したりなど様々です。

また、星のスケールが変化するアニメーションや、流星が落ちていくアニメーションもAnimateCCのトゥイーンで作成しています。

準備が整ったら、パブリッシュします。

ライブラリへアクセスし、制御スクリプトを記述していく

パブリッシュすると作成した.flaファイルと同名のhtmlファイルとjsファイルが生成されます。
そのhtmlファイルとは別名のhtmlファイルを用意し、そちらに制御用のスクリプトを記述していきます。

まずはCreate.jsと先ほど生成されたjsファイルを読み込みます。

生成されたhtmlファイルからコンポジションIDを調べ、AdobeAn.getCompositionに文字列として記述します。そして.getLibrary()でライブラリに登録したシンボルにアクセスすることが出来るようになります。

let comp = AdobeAn.getComposition("2598143CDF49E34C858423A334E1F8FE");
let lib = comp.getLibrary();

例として、下記のように[new lib.シンボル名]で利用することが出来ます。

// 輝く星1
for (let i=0; i<shineStarCount01; i++) {
  let star = new lib.star_01();
  star.x = 200 + Math.random() * 400;
  star.y = Math.random() * height - 100;;
  star.scaleX = star.scaleY = 0.2 + Math.random() * 0.3;
  stage.addChild(star);

  // 点滅させるタイミングを変更する
  if (i % 5 === 0) {
    star.gotoAndPlay(50);
  } else if (i % 2 === 0) {
    star.gotoAndPlay(80);
  }
}

他に今回工夫したポイントとしては、星が瞬く様子をランダムに表現するために.gotoAndPlayでアニメーションが始まるフレームを変更したり、星のサイズもランダムで大小さまざまな大きさになるようにしました。

サンプルはこちら
サンプルコード（GitHub）はこちら

CreateJSの使い方については、ics.mediaさんの記事がとっても参考になりました！
CreateJS入門サイト