マイナビの月刊誌Web Designingにてクリエイティブなコンテンツの制作手法をテーマとした「応用講座 Flash for HTML5」を沖良矢さん(世路庵)と私の二人で連載していました。本記事では連載で開設したHTML5 Canvas (CreateJS)のサンプルをまとめて紹介します。

▲連載では操作手順を図解で説明。ソフトの使い方や、コードの流れを丁寧に解説した。

※連載ではHTML5関連機能が充実しているAnimate CC(旧:Flash Professional CC)を使っているので、直感的&効率的にHTML5 Canvasコンテンツを作ることができます。またAnimate CCではJSライブラリCreateJSが内部的に使われていることもあり、連載ではCreateJSの使い方もあわせて解説しています。

HTML5 Canvas のサンプル紹介

光を駆使したHTML5アニメーション

▲光を駆使したHTML5アニメーション。JavaScriptが苦手な方でもAnimate CCを使えば直感的に制作することができる。

▲アナログ時計の中にストップウォッチを配置。目盛り描画処理を関数化することで、時計のバリエーションを簡単に作成できるようにしている。

パーティクル表現

▲HTML5 Canvasが得意とするパーティクル表現。ゲームの表現で役立たせることができる。

HTML5でサウンド再生の方法を紹介したサンプル

▲HTML5でサウンド再生の方法を紹介したサンプル。CreateJSの一つ「SoundJS」ライブラリの使い方を紹介。

Canvas要素を使えばお絵かきアプリケーションを実装することができる

▲Canvas要素を使えばお絵かきアプリケーションを実装することができる。jQueryとの連携方法もあわせて解説。

文字を印象的に表示するテキストモーション

▲文字を印象的に演出するテキストモーション。

Flash Pro CCで制作したHTML5コンテンツはFlash PlayerがインスールされていないiPhoneでも再生できる

▲Animate CCで制作したHTML5コンテンツはFlash PlayerがインスールされていないiPhoneでも再生できる。それもパフォーマンスが良い。

160114_createjs_touchapp

▲マウスの軌跡に沿って線を描くドローイング。線の描画時に加速度を取り入れ、さらに一度に描画する線の数を増やすことで、多重線がバネのような動きでマウスに追従するという表現となっている。

連載のサンプルを紹介

連載記事で解説しているサンプルは公式サイトから試すことができます。記事はHTML5コンテンツ制作のポイントとなるテクニックや手法を取り上げ、サンプルの制作を通してそれらを学習するスタイルとなっています。なお、サンプルのソースコードもダウンロードできますので、連載とあわせて確認することでより深く学習することができます(ダウンロードには誌面に掲載のID/PASSが必要)。

最後に

ここ最近はスマートフォンの性能が著しく向上し、HTML5 Canvasがデスクトップブラウザのみならずスマートフォンのブラウザでも十分に動作するようになってきました(60fpsのコンテンツも再生できるようになってきました)。ウェブサイトにおけるキャッチーな表現や、ゲームコンテンツにおけるインタラクティブな描画領域にHTML5 Canvasは適しており、今後はますますその需要が高まっていくでしょう。

連載ではインタラクティブコンテンツ制作の基本的な実装力が身につくようにまとめています。連載は電子書籍「Flash for HTML5 ―HTML5開発環境としてのFlash Pro CC活用テクニック」として販売されていますので、興味のある方はぜひ次のリンクから購入くださいませ。

Web Designing Library #15「Flash for HTML5 ‐HTML5開発環