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

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

Adobe Animate CC と CreateJS の連携 (基本編)

Adobe Animate CCからHTML5 Canvas素材として書き出し、CreateJSで利用する手順を紹介します。YouTubeのチュートリアル動画を参考に進めましょう。

1. Adobe Animate CCを起動

Adobe Animate CCはもともとはFlashやHTML5制作のオーサリングツールです。ステージに直接グラフィックを描いたり、タイムラインを使ってモーションを作ることができます。今回はCreateJS用のグラフィックとモーションを用意したので、起動したら[新規作成]の一覧から[HTML5 Canvas]を選択します。

作成したら作業用フォルダにStarAsset.flaファイルとして保存しましょう。

2. シンボルを作成する (ここでは「Star」という名前で作成)

ツールの一覧から多角形ツールを選択します。

[プロパティ]パネルの[オプション]をクリックし、[スタイル]を「星」に設定します。

ステージ上でドラッグ・アンド・ドロップして星を描いてみましょう。

3. Animate CCで[プレビュー]するとHTML5素材が出力される

メニューバーから[制御]→[プレビュー]を選択しましょう。するとブラウザが立ち上がり、描いたグラフィックが表示されます。これはHTML5 Canvas (つまりCreateJS)で表示されています。

このときStarAsset.flaファイルと同階層に2つファイルが作られます。

  • StarAsset.html : HTML5 Canvasを再生するための再生用のHTMLファイル。
  • StarAsset.js : Animate CCで作成したデータが保存されているファイル。

4. 別ファイルとしてHTMLファイルを作成

制御用のHTMLとして作業用フォルダにindex.htmlファイルを用意しましょう。StarAsset.flaファイルと同階層に配置ください

5. CreateJSフレームワークを読み込みましょう

index.htmlファイルにHTMLコードを書いていきましょう。必要なbodyタグやcanvasタグは事前に記載しておいてください。

まずはCreateJSフレームワークをheadタグの中で読み込みましょう。

<!-- CreateJSを読み込む-->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

※YouTubeのビデオでは、CDNからmovieclipも読み込んでいますが、2015年11月26日から公開された新しいバージョンのCreateJSではmovieclipを別途読み込む必要がなくなりました。

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

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

<!-- Adobe Animate CCのデータを読み込む -->
<script src="StarAsset.js"></script>

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

CreateJSを起動するためのコードを記載しましょう。

window.addEventListener("load", init);
function init(){
  var stage = new createjs.Stage("myCanvas");

  // (省略)
}

8. Animate CCのシンボルは「lib.Star」という名前で呼び出せる

Animate CCのシンボル名の先頭に「lib.」をつけるとクラスとして利用できます。

// Animate CCのシンボル名の先頭に「lib.」をつけると利用できます
var star = new lib.Star();

この「lib.Star」というのはAnimate CCの[ライブラリ]パネル内の名前(シンボル名)と一致します。

9. 表示オブジェクトとしてStageに追加して制御しよう

star.x = 200;
star.y = 200;
stage.addChild(star);

このあとは、tickイベント等を登録してstarインスタンスをマウスに追随させて制御してみましょう。

// 時間経過
createjs.Ticker.addEventListener("tick", onTick);
function onTick(){
  // マウスに追随させる
  star.x = stage.mouseX;
  star.y = stage.mouseY;

  // 画面更新
  stage.update();
}

YouTubeのチュートリアル動画ではさらにAnimate CCでタイムラインアニメーションを実装する方法を紹介しています。

参考

Animate CC内で画像を含めた場合は、初期化の手順が少し複雑になります。

書籍「Flash for HTML5 ―HTML5開発環境としてのFlash Professional CC活用テクニック」の 「外部から更新可能なスライドショーを作ってみよう」(044P)を参照ください。