ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS入門

目次

このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、Webでのインタラクションデザインについて学んでいきましょう。

導入編

Webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。

CreateJS の基本的な使い方

描画の基本

グラフィックの描き方からテキストや画像の表示といったCreateJSの基本的な使い方を一つ一つ覚えていきましょう。表示オブジェクトというインタラクションデザインを作る上で必要不可欠な概念を解説します。

モーションの実装

時間経過の処理を学びましょう。時間経過処理はモーション/アニメーションの制作の基本となります。CreateJSでは、createjs.Tickerクラスがその中心的な役割を担っています。

初級編

ユーザーインタラクションの実装

マウスやキーボードなど、パソコンでのユーザー入力の制御方法を学びましょう。UI(ユーザーインターフェース)の具体的な一例としてボタンの作成方法も解説します。

サンプル (初級編)

ここまで学習した内容の理解を深めるべく、サンプル制作に挑戦ください。まずは自分でコードを書いていくといいでしょう。困ったら完成形のサンプルのコードを参照してください。

中級編

トゥイーンモーションの実装

トゥイーンを使えば、少ないコードで多彩なモーションを手軽に実装することができます。トゥイーンは特にUI(ユーザーインターフェース)の実装で役立ちます。

数学の活用

高校数学で学ぶ三角関数。三角関数は将来、何の役に立つのかと思っていた方も多いのではないでしょうか。インタラクションデザインの世界では三角関数は頻繁に利用します。簡単なサンプルを通して、三角関数の活用方法を学んでいきましょう。

マルチメディア

サンプル (中級編)

中級編までで学習した内容の理解を深めるべく、サンプル制作に挑戦してみましょう。

応用編

サンプル(応用編)

様々な応用サンプルに挑戦してみましょう。表現のリッチさに比例してコード量も増えますが、これまでに解説した内容を組み合わせた内容になっています。

Flash Professional CCを使おう

Adobe Flash Professional CCというアプリケーションを使えば、CreateJS用のグラフィックやモーションをコードを書かなくても作ることができます。コードが書くのは苦手という方はFlash Professional CCでCreateJSコンテンツを作ってみるといいでしょう。ここではFlash Professional CCで作ったCreateJSコンテンツを、プログラムで連携する方法を解説します。

その他

目次に戻る
サイトトップに戻る