CreateJS勉強会 (第8回) で使用した資料です。Adobe Animate CCで出来ること、使い方、ワークフロー、新機能などを紹介しています。

1. Adobe Animate CCで制作する
HTML5 Canvas入門編
株式会社ICS 加賀 篤史
平成28年9月30日
CreateJS勉強会 (第8回) @ アドビ システムズ 株式会社
#CreateJS

2. 自己紹介
加賀 篤史 (Kaga Atsushi)
株式会社 ICS 取締役 / クリエイティブ・ディレクター
@a_24

3. • Animate CCについて
• 概要 / 事例
• 使い方
• 最新機能の紹介
今回のテーマ

4. 1. CreateJSで制作するウェブのインタラクションコンテンツ
2. Animate CCで制作するHTML5 Canvasコンテンツ（実演
）
3. Animate CCの最新機能の紹介
セッションの流れ

5. CreateJSで制作する
ウェブのインタラクションコンテンツ

6. • HTML5でリッチコンテンツを制作するための
JavaScriptライブラリのスイート
• グラフィックの表現機能を中心に、リッチコンテンツを
作るための統合的なソリューションが提供されている
CreateJSとは
CreateJS
http://createjs.com/

7. • 得意とする分野
• インタラクションコンテンツ
• 自由度の高い表現
• 苦手とする分野
• ユーザーインターフェース
(HTMLやCSSで制御したほうが早い)
CreateJSが得意とする分野
例： http://lab.gskinner.com/

8. ゲーム
ウェブのインタラクションコンテンツ
バナー広告
スペシャル
サイト

9. • DONGURI
https://www.don-guri.com/
• グランブルーファンタジー (ユーザー数1200万以上)
http://granbluefantasy.jp/
• ラビとびコレクション
https://rabitobi.jp/collection/
CreateJSが使われているサイト
※独自に調査したもののため、実際と異なる場合があります。

10. • Three.js
3D表現のJSライブラリ。WebGL界隈では実質的標準の存在。
• PixiJS
2D表現に特化したライブラリ。CreateJSと役割は競合するが
、PixiJSはWebGLをベースとし、CreateJSはContext2Dをベ
ースとする。
• Snap.svg
SVG要素を使ったインタラクションコンテンツのライブラリ
。
類似の選択肢

11. • Flash プラットフォームとの親和性が高い
• Adobe Animate CCと連携できる
• ノンプログラマーも制作に参加可能
• 直感的な操作が可能
• 既存のFlashコンテンツの再利用性がある
• Flashクリエイターが導入しやすい
• ActionScript 3.0経験者なら学習コストは低い
なぜCreateJSか？

12. Animate CCで制作する
HTML5 Canvasコンテンツ

13. • アニメーションやインタラクションコンテンツ制作の
ための多用途のソフトウェア
• 名前が変わったが、Flash Professionalそのもの
• CreateJS、WebGL、Flash(SWF)、AIR、SVG、
GAF(Unity)、4Kビデオ等に出力可能
(最近ではLINEアニメスタンプの制作にも役立つ)
Adobe Animate CCとは

14. • 「HTML5 Canvas」ドキュメントで内部
的にCreateJSが利用されている
• タイムラインアニメーションを
CreateJSコンテンツ(JSコード)とし出力
可能
Adobe Animate CCとは

15. • アニメーションの制作
• イラストの描画
• サウンドの追加
• インタラクションの追加 (スクリプトも書ける)
Adobe Animate CCでできること

16. • https://youtu.be/2xIxrhEvxVA
ライブデモ

17. Animate CCから出力されるファイル

18. Animate CCでの制作ワークフロー

19. Animate CCのワークフロー (ケース1)
コードを書かなく
てもいい😊
デザイナー

20. • ウェブサイト内のアニメーション
• GIFアニメよりも高画質で圧倒的に軽量
• バナー広告
• 高いコンバージョンの実現
ケース1
アニメーション単独として成立するコンテンツ

21. アニメーターとプログラマの分業も可能(ケース2)
イラストやアニメだ
け制作☺
インタラクションの
実装なら任せな
デザイナー
フロントエンドエンジニア

22. • SPA（Single Page Application）
• ゲームコンテンツ
• 総じて中上級者の使い方
ケース2
インタラクションの実装に重きを置くようなケース

23. HTML5 Canvas制作に役立つ
Animate CCの最新情報

24. • CreateJS書き出し機能が充実
• アセットのスプライトシート化
• Retina/HiDPI対応
• レスポンシブ対応
• プリローダーの配置
• コンテンツの配置設定
• TypeKitとの連携
Animate CCの最近のアップデート
※2015年以降の主なアップデートを紹介

25. Animate CCの最近のアップデート
可変レイアウトのためスマホページに掲載しやすくなった

26. • タイムライン編集機能の強化
• ボーンツール
• ブラシライブラリ
• PSD/AIインポーターの改善
• フレームピッカー
• オニオンスキンのカラーリング
• オーディオの分割
Animate CCの最近のアップデート
※2015年以降の主なアップデートを紹介

27. Animate CCの最近のアップデート
フレームピッカー ブラシライブラリ

28. まとめ

29. 1. Animate CCを使うとプログラムの
コーディングなしにアニメーションの制作が可能
2. 簡単に作れてお手軽。まずは試しましょう
まとめ

30. ご清聴ありがとうございました
ご質問等はメールやTwitterまでお気軽に連絡ください
株式会社ICS
加賀 篤史
kaga@ics-web.jp
@a_24
Copyright 2016 ICS INC. All rights reserved.