Web Designing

ウェブデザイニング | Web Designing | 情報戦略でビジネスを加速させる 毎月18日発売

Flash ProfessionalでつくるHTML5クリエイティブ サンプルアーカイブ

Flash ProでHTML5コンテンツをつくろう

インタラクティブコンテンツ制作の中心となるテクノロジーがFlashからHTML5へと移行するなか、 Flash Professionalは2013年6月にリリースされたバージョンからHTML5 Canvasをサポートしました。

それを受けて、Web Designingでは連載「Flash Lab. HTML5オーサリング編」や「応用講座 Flash for HTML5」を通じて、Flash ProfessionalでHTML5 Canvasコンテンツを作成する際に役立つコツやテクニックを解説してきました。

このページでは、それら一連のHTML5オーサリングシリーズ(本誌2014年3月号~2015年7月号)で作成したサンプルを紹介します。

テキストアニメーション

preview

画面上から一文字ずつ登場し、バウンドしながら整列する。クリックするとリプレイするようになっている。

サンプルを見る

マウスやキーボード操作に対するインタラクション

preview

表示オブジェクトに対するイベントを、各ボタンに適用したサンプル。ボタンに対して、ボタンラベル(clickやmouseoverなど)にあるマウス操作を行うとアラートが表示される。

サンプルを見る

自由度の高いスライドショー

preview

画面下部の左右ボタンをクリックすると、スライドアニメーションしながらスライドが切り替わる。各スライドには、写真と説明テキストを掲載しているほか、写真の撮影場所を日本地図上でアニメーション表示している。

サンプルを見る

アニメーションと連動するデジタル時計

preview

年・月・日・時・分・秒を取得してデジタル表示するだけでなく、時・分・秒に連動した円アニメーション(青・緑赤の部分)をつけている。

サンプルを見る

サウンドを使ったコンテンツ

preview

マウス移動に合わせて、音符が生成されるとともに、「ド・レ・ミ・ファ・ソ・ラ・シ」の音が鳴る。

サンプルを見る

タイムラインを利用したスロットゲーム

preview

3つのリール内で絵柄が回転しており、ステージをクリックするたびに、左のリールから順に止まっていく。3つすべてのリールを止めた後にステージをクリックすると、再度ゲームを始めることができる。

サンプルを見る

お絵描きツール

preview

お絵描きツール。ブラシの色や太さを変えることで、多彩なイラストを描くことができる。

サンプルを見る

リキッドレイアウトでマルチデバイス対応

preview

ロゴと著作権表記は、スクリーンサイズにかかわらず、常にそれぞれ左上隅、右下隅に配置される。ダイアログボックスは、常に画面中に配置され、スクリーンサイズに応じて拡大率が変化する。

サンプルを見る

スプライトシートのアニメーション

preview

作成するサンプルはキャラクターのアニメーションで、クリックするとキャラクターの動作(待機とジャンプ)が切り替わるようになっている。

サンプルを見る

外部から更新できるスライドショー

preview

ラップトップをモチーフとしたスライドショー。ステージをクリックするとフェードイン/アウトで次の写真が表示される。写真はmanifestで管理し、さらにmanifestの定義ファイルも外部ファイル化することで、Flash Professionalで再編集しなくても、外部ファイルの変更だけで更新できるようになっている。

サンプルを見る

光を駆使したモーション

preview

キラリと光るテキストロゴの出現モーション。ロゴが出現するとロゴの左側から右側へと光が当たったかのようにキラリと光らせ、また、ロゴ周辺に小さな光パーティクルとレンズフレアをほどこしてロゴの輝きを演出している。

サンプルを見る

ストップウォッチ付きアナログ時計

preview

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

サンプルを見る

マルチデバイス対応ゲーム

preview

画面の左右半分のいずれかをタップ、もしくはクリックすることで主人公を左右に動かし、画面上から降ってくるコインを受け取るミニゲーム。PC、スマートフォン、タブレットなど、あらゆる端末で適切に表示されるようになっている。

サンプルを見る

HTMLの背景をアニメーションで演出

preview

HTMLの背景で、4種類のアセット(星、ハート、サボテン、キノコ)が、ズームイン・ズームアウトのアニメーションをしながら切り替わる。アセットを表示する際は、ランダムに種類を選び、ランダムなサイズでタイル状に配置している。

サンプルを見る

プログラミングアート

preview

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

サンプルを見る