Submit Search
Upload
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
•
Download as PPTX, PDF
•
7 likes
•
5,023 views
Atsushi Kaga
Follow
CreateJS勉強会 (第8回) で使用した資料です。Adobe Animate CCで出来ること、使い方、ワークフロー、新機能などを紹介しています。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 30
Download now
Recommended
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
Yuichi Ishii
Los 80s [Historia del diseño - 18]
Los 80s [Historia del diseño - 18]
AlejandroEscalanteMa1
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
ビデオゲームにおける時間
ビデオゲームにおける時間
zmzizm
和製レトロゲームの珍翻訳・良翻訳 (Web公開版) 訂正バージョン
和製レトロゲームの珍翻訳・良翻訳 (Web公開版) 訂正バージョン
eagle0wl
【Unite 2018 Tokyo】そろそろ楽がしたい!新アセットバンドルワークフロー&リソースマネージャー詳細解説
【Unite 2018 Tokyo】そろそろ楽がしたい!新アセットバンドルワークフロー&リソースマネージャー詳細解説
Unity Technologies Japan K.K.
Case study on concept art
Case study on concept art
DarylBatesGames
Blender で作ったアニメーションを Unreal Engine 4 で利用する
Blender で作ったアニメーションを Unreal Engine 4 で利用する
rarihoma
Recommended
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
第1回 【初心者向け】Unity+Oculus Riftで次世代の3Dゲームを作って感じるワークショップ
Yuichi Ishii
Los 80s [Historia del diseño - 18]
Los 80s [Historia del diseño - 18]
AlejandroEscalanteMa1
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
[Glitch版] 0から始めようWebAR/VR入門ハンズオン with 織りなすラボ
Takashi Yoshinaga
ビデオゲームにおける時間
ビデオゲームにおける時間
zmzizm
和製レトロゲームの珍翻訳・良翻訳 (Web公開版) 訂正バージョン
和製レトロゲームの珍翻訳・良翻訳 (Web公開版) 訂正バージョン
eagle0wl
【Unite 2018 Tokyo】そろそろ楽がしたい!新アセットバンドルワークフロー&リソースマネージャー詳細解説
【Unite 2018 Tokyo】そろそろ楽がしたい!新アセットバンドルワークフロー&リソースマネージャー詳細解説
Unity Technologies Japan K.K.
Case study on concept art
Case study on concept art
DarylBatesGames
Blender で作ったアニメーションを Unreal Engine 4 で利用する
Blender で作ったアニメーションを Unreal Engine 4 で利用する
rarihoma
History Of Video Games
History Of Video Games
Arsi hbk
Belmetal catalogo tecnico telhas
Belmetal catalogo tecnico telhas
Ailton Soares
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
Takahiro YAMAGUCHI
HISTORIA DE LOS VIDEOJUEGOS
HISTORIA DE LOS VIDEOJUEGOS
xPablo199
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
Mio Ku-tani
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
KLab Inc. Creative
Learning Water Graphics in UE4
Learning Water Graphics in UE4
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
【Unity Reflect】どんなものか試してみよう〜基礎編〜
【Unity Reflect】どんなものか試してみよう〜基礎編〜
Unity Technologies Japan K.K.
UE4とUnrealC++について
UE4とUnrealC++について
Masahiko Nakamura
第2部 自作ライブラリ紹介
第2部 自作ライブラリ紹介
らりお ザ・何とは言わない天然水ソムリエ
リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現
kurosaurus
Creative Conference 2017 「リギングヘルプミー」
Creative Conference 2017 「リギングヘルプミー」
Tetsuya Nozawa
はじめてのUnreal Engine 4
はじめてのUnreal Engine 4
Shun Sasaki
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
Katsumi Mizushima
Workflow of Creating Game UX/UI Design
Workflow of Creating Game UX/UI Design
DevGAMM Conference
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
Unity Technologies Japan K.K.
Just add points? What UX can (and cannot) learn from games
Just add points? What UX can (and cannot) learn from games
Sebastian Deterding
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
KLab Inc. / Tech
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
Tsuzurahara Tohru
More Related Content
What's hot
History Of Video Games
History Of Video Games
Arsi hbk
Belmetal catalogo tecnico telhas
Belmetal catalogo tecnico telhas
Ailton Soares
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
Takahiro YAMAGUCHI
HISTORIA DE LOS VIDEOJUEGOS
HISTORIA DE LOS VIDEOJUEGOS
xPablo199
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
Mio Ku-tani
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
KLab Inc. Creative
Learning Water Graphics in UE4
Learning Water Graphics in UE4
エピック・ゲームズ・ジャパン Epic Games Japan
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
【Unity Reflect】どんなものか試してみよう〜基礎編〜
【Unity Reflect】どんなものか試してみよう〜基礎編〜
Unity Technologies Japan K.K.
UE4とUnrealC++について
UE4とUnrealC++について
Masahiko Nakamura
第2部 自作ライブラリ紹介
第2部 自作ライブラリ紹介
らりお ザ・何とは言わない天然水ソムリエ
リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現
kurosaurus
Creative Conference 2017 「リギングヘルプミー」
Creative Conference 2017 「リギングヘルプミー」
Tetsuya Nozawa
はじめてのUnreal Engine 4
はじめてのUnreal Engine 4
Shun Sasaki
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
Katsumi Mizushima
Workflow of Creating Game UX/UI Design
Workflow of Creating Game UX/UI Design
DevGAMM Conference
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
Unity Technologies Japan K.K.
Just add points? What UX can (and cannot) learn from games
Just add points? What UX can (and cannot) learn from games
Sebastian Deterding
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
KLab Inc. / Tech
What's hot
(20)
History Of Video Games
History Of Video Games
Belmetal catalogo tecnico telhas
Belmetal catalogo tecnico telhas
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
CEDEC2013 ソーシャルゲームの開発現場でUXについて思いっきりあがいてみた1年間の話
HISTORIA DE LOS VIDEOJUEGOS
HISTORIA DE LOS VIDEOJUEGOS
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
UE4初心者がUE4で2D横スクロールアクションゲームを作ってみるお話
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
CGWORLD 2021 クリエイティブカンファレンス
CGWORLD 2021 クリエイティブカンファレンス
Learning Water Graphics in UE4
Learning Water Graphics in UE4
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
【Unity Reflect】どんなものか試してみよう〜基礎編〜
【Unity Reflect】どんなものか試してみよう〜基礎編〜
UE4とUnrealC++について
UE4とUnrealC++について
第2部 自作ライブラリ紹介
第2部 自作ライブラリ紹介
リアルタイムレンダリングでのマテリアル表現
リアルタイムレンダリングでのマテリアル表現
Creative Conference 2017 「リギングヘルプミー」
Creative Conference 2017 「リギングヘルプミー」
はじめてのUnreal Engine 4
はじめてのUnreal Engine 4
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
Workflow of Creating Game UX/UI Design
Workflow of Creating Game UX/UI Design
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
【CEDEC2018】CPUを使い切れ! Entity Component System(通称ECS) が切り開く新しいプログラミング
Just add points? What UX can (and cannot) learn from games
Just add points? What UX can (and cannot) learn from games
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
Similar to CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
Tsuzurahara Tohru
ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01
Kazuhiko Tsuchiya
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
Yasunobu Ikeda
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
Yasunobu Ikeda
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
Yasunobu Ikeda
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
Amazon Web Services Japan
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
Akira Inoue
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
(2017.4.27) IBM watson developer cloudのアプリケーションログを可視化する
(2017.4.27) IBM watson developer cloudのアプリケーションログを可視化する
Mitsutoshi Kiuchi
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
Akira Inoue
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
Akira Inoue
組み込みメーカーだからこそのAWS Cognitoの使い方
組み込みメーカーだからこそのAWS Cognitoの使い方
shotaueda3
Amazon kinesisで広がるリアルタイムデータプロセッシングとその未来
Amazon kinesisで広がるリアルタイムデータプロセッシングとその未来
Shinpei Ohtani
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Shotaro Suzuki
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
Atsushi Fukui
Similar to CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
(20)
HTML5 & The Web Platform
HTML5 & The Web Platform
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
Adobe CC最新機能を使ったクリエイティブ制作 with iPad Pro
ウェブディレクターのための Web A11Y 勉強会 #01
ウェブディレクターのための Web A11Y 勉強会 #01
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
CreateJS最新情報〜Adobe MAX 2013より〜 / CreateJS勉強会(第3回)発表資料
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure を使ったスマートフォンサイト構築のすすめ
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
(2017.4.27) IBM watson developer cloudのアプリケーションログを可視化する
(2017.4.27) IBM watson developer cloudのアプリケーションログを可視化する
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
組み込みメーカーだからこそのAWS Cognitoの使い方
組み込みメーカーだからこそのAWS Cognitoの使い方
Amazon kinesisで広がるリアルタイムデータプロセッシングとその未来
Amazon kinesisで広がるリアルタイムデータプロセッシングとその未来
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
CreateJS勉強会 (第8回)「Adobe Animate CCで制作する HTML5 Canvas入門編」
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.
Download now