Adobe Animate CCからHTML5 Canvas素材として書き出し、CreateJSで利用する手順の解説、2弾目です。
Adobe Animate CCで画像ファイルを含むコンテンツを作っていた場合に、先の解説と一部手順が異なります。
※この記事は、Animate CC 19.1 (CC 2019)での解説内容となります。Animateの以前のバージョンでは動作しない可能性が高いのでご了承ください。
Adobe Animate CCを起動
今回はCreateJS用のグラフィックとモーションを用意したいので、起動したら[新規作成]の一覧から[HTML5 Canvas]を選択します。
作成したら作業用フォルダにHeartAsset.flaファイルとして保存しましょう。
2. シンボルを作成する (ここでは「Star」という名前で作成)
ファイルの読み込みをして、画像を取り込みましょう。
3. Animate CCで[プレビュー]するとHTML5素材が出力される
メニューバーから[制御]→[プレビュー]を選択しましょう。するとブラウザが立ち上がり、描いたグラフィックが表示されます。これはHTML5 Canvas (つまりCreateJS)で表示されています。
このときHeartAsset.flaファイルと同階層にいくつかファイルとフォルダが作られます。
HeartAsset.html: HTML5 Canvasを再生するための再生用のHTMLファイル。HeartAsset.js: Animate CCで作成したデータが保存されているファイル。images: 画像が格納されたフォルダ。
4. 別ファイルとしてHTMLファイルを作成
制御用のHTMLとして作業用フォルダにindex.htmlファイルを用意しましょう。HeartAsset.flaファイルと__同階層に配置ください__。
5. CreateJSフレームワークを読み込みましょう
index.htmlファイルにHTMLコードを書いていきましょう。必要なbodyタグやcanvasタグは事前に記載しておいてください。
まずはCreateJSフレームワークをheadタグの中で読み込みましょう。
<!-- CreateJSを読み込む-->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
6. Animate CCから出力したJSファイルも読み込む
index.htmlファイルと同じ階層に、HeartAsset.flaファイルから出力したHeartAsset.jsファイルが存在するはずです。このファイルを読み込むため<script>タグで取り込みましょう。
<!-- Adobe Animate CCのデータを読み込む -->
<script src="HeartAsset.js"></script>
7. CreateJS起動のためのコードを記載する
CreateJSを起動するためのコードを記載しましょう。コードが長くなりますが、モーション中に利用する画像ファイルを先読み（プリロード）する仕組みが入っています。コード中の★★★の箇所はFLAファイルごとにIDが異なりますので、パブリッシュしたファイル内からIDを調べて入力ください。
window.addEventListener("load", init);
// コンポジションのIDは出力したJSファイルから調べる必要がある
var comp = AdobeAn.getComposition("★★★");
var lib = comp.getLibrary();
function init() {
images = window.images || {};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt) {
handleFileLoad(evt, comp);
});
loader.addEventListener("complete", function(evt) {
handleComplete(evt, comp);
});
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
// 読み込んだ画像を保存
var images = comp.getImages();
if (evt && evt.item.type == "image") {
images[evt.item.id] = evt.result;
}
}
function handleComplete(evt) {
// スプライトシートに展開
var ss = comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for (i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({
images: [queue.getResult(ssMetadata[i].name)],
frames: ssMetadata[i].frames
});
}
// ここから初期化処理を書く
}
8. Animate CCのコンテンツを呼び出す
Animate CCのシンボル名の先頭に「lib.」をつけるとクラスとして利用できます。ルートのタイムラインは「lib.ファイル名」として呼び出せます。
var root = new lib.HeartAsset();
stage.addChild(root);
この「lib.HeartAsset」というのはFLAファイル名と一致します。
9. 表示オブジェクトとしてStageに追加して制御しよう
このあとは、tickイベント等を登録して画面更新をさせましょう。
// 時間経過
createjs.Ticker.addEventListener("tick", onTick);
function onTick(){
// 画面更新
stage.update();
}
代替手段
Animate CCで出力したHTML/JSファイルは構成が複雑なため、データを持ってくるのは大変です。 代替手段としてAnimate CCで出力したHTMLファイルをそのまま使って、JSを書く方が簡単かもしれません。
この場合、flaファイルと同名のHTMLには、次のコードが末尾に記載されています。fnStartAnimation();の次の行からJavaScriptを書き始めるといいでしょう。
makeResponsive(false,'both',false,1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
この方法で処理する場合は、Animate CC側で［パブリッシュ時にHTMLファイルを上書き］のチェックマークを外すことを忘れないようにしましょう。これのチェックボックスが付いていると、パブリッシュする度にHTMLファイルが上書きされてしまうためです。
