ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

Adobe Animate CC と CreateJS の連携 (ビットマップ含む編)

Adobe Animate CCからHTML5 Canvas素材として書き出し、CreateJSで利用する手順の解説、2弾目です。

Adobe Animate CCで画像ファイルを含むコンテンツを作っていた場合に、先の解説と一部手順が異なります。

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/createjs-2015.11.26.min.js"></script>

6. Animate CCから出力したJSファイルも読み込む

index.htmlファイルと同じ階層に、HeartAsset.flaファイルから出力したHeartAsset.jsファイルが存在するはずです。このファイルを読み込むため<script>タグで取り込みましょう。

<!-- Flash Professional CCのデータを読み込む -->
<script src="HeartAsset.js"></script>

7. CreateJS起動のためのコードを記載する

CreateJSを起動するためのコードを記載しましょう。コードが長くなりますが、モーション中に利用する画像ファイルを先読み(プリロード)する仕組みが入っています。

window.addEventListener("load", init);

function init() {
  images = images||{};

  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", handleFileLoad);
  loader.addEventListener("complete", handleComplete);
  loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
  if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
  var stage = new createjs.Stage("myCanvas");

  // ココに初期化コードをかく
}

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();
}