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

2020年にFlash Playerのサポート終了を控えた今、過去にFlashで作られていたようなアニメーションをブラウザで目にする機会が減っています。一方で、UI/UXを重視する人々からは、動きを伴ったマイクロインタラクションに注目が集まっています。動きを作り出す技術は、時代を問わずに求められています。本セッションでは、HTML5時代にCreateJSをどう用いれば効果的なのか、考えるためのヒントをご紹介します。

Transcript

1. 2017.12.7 (Thu) 我々はCreateJSを どう使うべきか？ 世路庵 沖 良矢
2. 沖 良矢 ◉ 世路庵 ◉ フリーランス10年目 ◉ インタラクションデザイナー @448jp おき よしや
3. KASHIYAMA the Smart Tailor （2017-）
4. 黒歴史トリオ （2017）
5. Web Designing連載 （2009-2015）
6. 『Flash for HTML5』 ◉ 電子書籍（PDF / Kindle） ◉ 全72ページ ◉ 価格：864円 ◉ 著者：沖 良矢、池田 泰延 ◉ 出版社：マイナビ出版
7. CreateJS Tシャツ
8. Grant Skinnerも 着てます！
9. 1. アニメーションが持つ力 2. CreateJSを使いこなすヒント 本日お話しすること
10. アニメーションが持つ力 01 The Power of Animation
11. アニメーション 非アニメーション 時間軸
12. フェナキスティスコープ（和名：驚き盤）
13. フェナキスティスコープ（和名：驚き盤）
14. 画は静止していても 動いているように見える
15. 語源はギリシア語で 「騙す」
16. アニメーション（animation） 語源はラテン語で「霊魂（anima）」
17. 私たちはアニメーションによって そこに存在するはずのない 嘘を作り出すことができる
18. webにおけるアニメーションの技術的制約 ◉ インタラクションとの関係性 ◉ 多様な画面解像度 ◉ 再生環境のスペック依存 ◉ ベースとする技術の縛り
19. webにおけるアニメーションの目的 ◉ フィードバック ◉ 世界観の演出 ◉ ストーリーの伝達
20. webにおけるアニメーションの目的 ◉ フィードバック ◉ 世界観の演出 ◉ ストーリーの伝達 CreateJSが強みとするのは、 このあたり
21. 転倒ます型雨量計の例
22. テキストの場合 雨量計の内部に、シーソーの支点（転倒軸）上で結合され た2つの容器（枡）からなる転倒ますと呼ばれる機構を持 つ。受水器が集めた降水は一方のますに注ぎ込み、一定量 （多くは降水量0.5mm相当）がたまると、その重さによっ てシーソーが転倒し、降水は跳ね上がったもう片方のます に注ぎ込むようになる。これを繰り返して、1時間当たり の左右交互に転倒する回数を数えることによって雨量が測 られる（大雨の時には猛スピードで転倒が繰り返されるこ とになる）。 引用：https://ja.wikipedia.org/wiki/%E9%9B%A8%E9%87%8F%E8%A8%88
23. 画像の場合 引用：http://www.snwm.co.jp/uryou2.html
24. テキスト＋画像の場合 ① 受水口（雨が降り込んでくる所） ② 漏斗 （降り込んだ雨を集める所） ③ 転倒ます（水を計る所） 「受水口」からの雨が「漏斗」で集められ「転倒ま す」へ雨水を貯める。0.5mmに達すると「転倒ます」 が倒れ、溜まった雨水を排水する。倒れる事により反 対側の「ます」へ再び雨水が溜まりはじめる。 「転倒ます」が転倒をするたびに接点パルスを発生す る。これを計測することによって降水量がわかります。 引用：http://www.snwm.co.jp/uryou2.html
25. アニメーションの場合 アニメーションを開く
26. アニメーションにしか 伝えられないことがある
27. CreateJSを使いこなすヒント 02 Tips on using CreateJS
28. webにおけるアニメーション技術 ◉DOMアニメーション ◉CSS3アニメーション ◉Canvas ◉GIFアニメーション ◉video要素のインライン再生
29. DOMアニメーション 要素のstyle属性を連続的に変更する $("#hoge").animate({ "color": "#ff0000", "backgroundColor": "#00ff00" }, 1000);
30. 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; }
31. Canvas（Context2d / WebGL） HTML5で追加されたcanvas要素を利用する <canvas width="640" height="480"> フォールバックコンテンツ </canvas>
32. 主流はコード思考のアニメーション three.js
33. CreateJSの強み
34. Animate CCによる アニメーションの 圧倒的な作りやすさ
35. コード思考 タイムライン思考 本来Animateが持つ強み
36. 事例紹介
37. まとめ Conclusion
38. アニメーションにしか 伝えられないことがある
39. タイムライン思考の アニメーションにしか 伝えられないことがある
40. これからのwebにも アニメーションの力が必要
42. ありがとうございました 沖 良矢 @448jp