我々はCreateJSをどう使うべきか？

Slide 1

Slide 1 text

2017.12.7 (Thu) 我々はCreateJSをどう使うべきか？世路庵沖良矢

Slide 2

Slide 2 text

沖良矢 ◉ 世路庵 ◉ フリーランス10年目 ◉ インタラクションデザイナー @448jp おきよしや

Slide 3

Slide 3 text

KASHIYAMA the Smart Tailor （2017-）

Slide 4

Slide 4 text

黒歴史トリオ（2017）

Slide 5

Slide 5 text

Web Designing連載（2009-2015）

Slide 6

Slide 6 text

『Flash for HTML5』 ◉ 電子書籍（PDF / Kindle） ◉ 全72ページ ◉ 価格：864円 ◉ 著者：沖良矢、池田泰延 ◉ 出版社：マイナビ出版

Slide 7

Slide 7 text

CreateJS Tシャツ

Slide 8

Slide 8 text

Grant Skinnerも着てます！

Slide 9

Slide 9 text

1. アニメーションが持つ力 2. CreateJSを使いこなすヒント本日お話しすること

Slide 10

Slide 10 text

アニメーションが持つ力 01 The Power of Animation

Slide 11

Slide 11 text

アニメーション非アニメーション時間軸

Slide 12

Slide 12 text

フェナキスティスコープ（和名：驚き盤）

Slide 13

Slide 13 text

フェナキスティスコープ（和名：驚き盤）

Slide 14

Slide 14 text

画は静止していても動いているように見える

Slide 15

Slide 15 text

語源はギリシア語で「騙す」

Slide 16

Slide 16 text

アニメーション（animation）語源はラテン語で「霊魂（anima）」

Slide 17

Slide 17 text

私たちはアニメーションによってそこに存在するはずのない嘘を作り出すことができる

Slide 18

Slide 18 text

webにおけるアニメーションの技術的制約 ◉ インタラクションとの関係性 ◉ 多様な画面解像度 ◉ 再生環境のスペック依存 ◉ ベースとする技術の縛り

Slide 19

Slide 19 text

webにおけるアニメーションの目的 ◉ フィードバック ◉ 世界観の演出 ◉ ストーリーの伝達

Slide 20

Slide 20 text

webにおけるアニメーションの目的 ◉ フィードバック ◉ 世界観の演出 ◉ ストーリーの伝達 CreateJSが強みとするのは、このあたり

Slide 21

Slide 21 text

転倒ます型雨量計の例

Slide 22

Slide 22 text

テキストの場合雨量計の内部に、シーソーの支点（転倒軸）上で結合された2つの容器（枡）からなる転倒ますと呼ばれる機構を持つ。受水器が集めた降水は一方のますに注ぎ込み、一定量（多くは降水量0.5mm相当）がたまると、その重さによってシーソーが転倒し、降水は跳ね上がったもう片方のますに注ぎ込むようになる。これを繰り返して、1時間当たりの左右交互に転倒する回数を数えることによって雨量が測られる（大雨の時には猛スピードで転倒が繰り返されることになる）。引用：https://ja.wikipedia.org/wiki/%E9%9B%A8%E9%87%8F%E8%A8%88

Slide 23

Slide 23 text

画像の場合引用：http://www.snwm.co.jp/uryou2.html

Slide 24

Slide 24 text

テキスト＋画像の場合 ① 受水口（雨が降り込んでくる所） ② 漏斗（降り込んだ雨を集める所） ③ 転倒ます（水を計る所）「受水口」からの雨が「漏斗」で集められ「転倒ます」へ雨水を貯める。0.5mmに達すると「転倒ます」が倒れ、溜まった雨水を排水する。倒れる事により反対側の「ます」へ再び雨水が溜まりはじめる。「転倒ます」が転倒をするたびに接点パルスを発生する。これを計測することによって降水量がわかります。引用：http://www.snwm.co.jp/uryou2.html

Slide 25

Slide 25 text

アニメーションの場合アニメーションを開く

Slide 26

Slide 26 text

アニメーションにしか伝えられないことがある

Slide 27

Slide 27 text

CreateJSを使いこなすヒント 02 Tips on using CreateJS

Slide 28

Slide 28 text

webにおけるアニメーション技術 ◉DOMアニメーション ◉CSS3アニメーション ◉Canvas ◉GIFアニメーション ◉video要素のインライン再生

Slide 29

Slide 29 text

DOMアニメーション要素のstyle属性を連続的に変更する $("#hoge").animate({ "color": "#ff0000", "backgroundColor": "#00ff00" }, 1000);

Slide 30

Slide 30 text

CSS3アニメーション（Transitions / Animations） CSS3で追加されたCSS TransitionsまたはCSS Animationsを利用する #hoge { color: "#ff0000"; transition: 1s ease-in-out; } #hoge:hover { color: "#0000ff"; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #hoge { animation-name: fadeIn; }

Slide 31

Slide 31 text

Canvas（Context2d / WebGL） HTML5で追加されたcanvas要素を利用するフォールバックコンテンツ

Slide 32

Slide 32 text

主流はコード思考のアニメーション three.js

Slide 33

Slide 33 text

CreateJSの強み

Slide 34

Slide 34 text

Animate CCによるアニメーションの圧倒的な作りやすさ

Slide 35

Slide 35 text

コード思考タイムライン思考本来Animateが持つ強み

Slide 36

Slide 36 text

事例紹介

Slide 37

Slide 37 text

まとめ Conclusion

Slide 38

Slide 38 text