createjs勉強会 (第8回)「adobe animate ccで制作するhtml5 canvas入門編」
TRANSCRIPT
Adobe Animate CC で制作するHTML5 Canvas 入門編株式会社 ICS 加賀 篤史平成 28 年 9 月 30 日CreateJS 勉強会 ( 第 8 回 ) @ アドビ システムズ 株式会社
#CreateJS
自己紹介
加賀 篤史 (Kaga Atsushi)株式会社 ICS 取締役 / クリエイティブ・ディレクター@a_24
• Animate CC について• 概要 / 事例• 使い方• 最新機能の紹介
今回のテーマ
1. CreateJS で制作するウェブのインタラクションコンテンツ2. Animate CC で制作する HTML5 Canvas コンテンツ（実演）3. Animate CC の最新機能の紹介
セッションの流れ
CreateJS で制作するウェブのインタラクションコンテンツ
• HTML5 でリッチコンテンツを制作するためのJavaScript ライブラリのスイート
• グラフィックの表現機能を中心に、リッチコンテンツを作るための統合的なソリューションが提供されている
CreateJS とは
CreateJShttp://createjs.com/
• 得意とする分野• インタラクションコンテンツ• 自由度の高い表現
• 苦手とする分野• ユーザーインターフェース
(HTML や CSS で制御したほうが早い )
CreateJS が得意とする分野
例： http://lab.gskinner.com/
ゲーム
ウェブのインタラクションコンテンツ
バナー広告 スペシャルサイト
• DONGURIhttps://www.don-guri.com/
• グランブルーファンタジー ( ユーザー数 1200 万以上 )http://granbluefantasy.jp/
• ラビとびコレクションhttps://rabitobi.jp/collection/
CreateJS が使われているサイト
※ 独自に調査したもののため、実際と異なる場合があります。
• Three.js3D 表現の JS ライブラリ。 WebGL 界隈では実質的標準の存在。
• PixiJS2D 表現に特化したライブラリ。 CreateJS と役割は競合するが、 PixiJS は WebGL をベースとし、 CreateJS はContext2D をベースとする。
• Snap.svgSVG 要素を使ったインタラクションコンテンツのライブラリ。
類似の選択肢
• Flash プラットフォームとの親和性が高い• Adobe Animate CC と連携できる• ノンプログラマーも制作に参加可能• 直感的な操作が可能
• 既存の Flash コンテンツの再利用性がある• Flash クリエイターが導入しやすい• ActionScript 3.0 経験者なら学習コストは低い
なぜ CreateJS か？
Animate CC で制作するHTML5 Canvas コンテンツ
• アニメーションやインタラクションコンテンツ制作のための多用途のソフトウェア• 名前が変わったが、 Flash Professional そのもの
• CreateJS 、 WebGL 、 Flash(SWF) 、 AIR 、 SVG 、 GAF(Unity) 、 4K ビデオ等に出力可能( 最近では LINE アニメスタンプの制作にも役立つ )
Adobe Animate CC とは
• 「 HTML5 Canvas 」ドキュメントで内部的に CreateJS が利用されている• タイムラインアニメーションを
CreateJS コンテンツ (JS コード ) とし出力可能
Adobe Animate CC とは
• アニメーションの制作• イラストの描画• サウンドの追加
• インタラクションの追加 ( スクリプトも書ける )
Adobe Animate CC でできること
Animate CC から出力されるファイル
Animate CC での制作ワークフロー
Animate CC のワークフロー ( ケース1)
コードを書かなくてもいい😊
デザイナー
• ウェブサイト内のアニメーション• GIF アニメよりも高画質で圧倒的に軽量
• バナー広告• 高いコンバージョンの実現
ケース 1
アニメーション単独として成立するコンテンツ
アニメーターとプログラマの分業も可能 ( ケース2)
イラストやアニメだけ制作☺ インタラクションの実装なら任せな
デザイナー フロントエンドエンジニア
• SPA （ Single Page Application ）• ゲームコンテンツ• 総じて中上級者の使い方
ケース 2
インタラクションの実装に重きを置くようなケース
HTML5 Canvas 制作に役立つAnimate CC の最新情報
• CreateJS 書き出し機能が充実• アセットのスプライトシート化• Retina/HiDPI 対応• レスポンシブ対応• プリローダーの配置• コンテンツの配置設定• TypeKit との連携
Animate CC の最近のアップデート
※2015 年以降の主なアップデートを紹介
Animate CC の最近のアップデート
可変レイアウトのためスマホページに掲載しやすくなった
• タイムライン編集機能の強化• ボーンツール• ブラシライブラリ
• PSD/AI インポーターの改善• フレームピッカー• オニオンスキンのカラーリング• オーディオの分割
Animate CC の最近のアップデート
※2015 年以降の主なアップデートを紹介
Animate CC の最近のアップデート
フレームピッカー ブラシライブラリ
まとめ
1. Animate CC を使うとプログラムのコーディングなしにアニメーションの制作が可能2. 簡単に作れてお手軽。まずは試しましょう
まとめ
ご清聴ありがとうございましたご質問等はメールや Twitter までお気軽に連絡ください
株式会社 ICS加賀 篤史[email protected]
@a_24
Copyright 2016 ICS INC. All rights reserved.