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月号)で作成したサンプルを紹介します。
テキストアニメーション
画面上から一文字ずつ登場し、バウンドしながら整列する。クリックするとリプレイするようになっている。
マウスやキーボード操作に対するインタラクション
表示オブジェクトに対するイベントを、各ボタンに適用したサンプル。ボタンに対して、ボタンラベル(clickやmouseoverなど)にあるマウス操作を行うとアラートが表示される。
自由度の高いスライドショー
画面下部の左右ボタンをクリックすると、スライドアニメーションしながらスライドが切り替わる。各スライドには、写真と説明テキストを掲載しているほか、写真の撮影場所を日本地図上でアニメーション表示している。
アニメーションと連動するデジタル時計
年・月・日・時・分・秒を取得してデジタル表示するだけでなく、時・分・秒に連動した円アニメーション(青・緑赤の部分)をつけている。
サウンドを使ったコンテンツ
マウス移動に合わせて、音符が生成されるとともに、「ド・レ・ミ・ファ・ソ・ラ・シ」の音が鳴る。
タイムラインを利用したスロットゲーム
3つのリール内で絵柄が回転しており、ステージをクリックするたびに、左のリールから順に止まっていく。3つすべてのリールを止めた後にステージをクリックすると、再度ゲームを始めることができる。
お絵描きツール
お絵描きツール。ブラシの色や太さを変えることで、多彩なイラストを描くことができる。
リキッドレイアウトでマルチデバイス対応
ロゴと著作権表記は、スクリーンサイズにかかわらず、常にそれぞれ左上隅、右下隅に配置される。ダイアログボックスは、常に画面中に配置され、スクリーンサイズに応じて拡大率が変化する。
スプライトシートのアニメーション
作成するサンプルはキャラクターのアニメーションで、クリックするとキャラクターの動作(待機とジャンプ)が切り替わるようになっている。
外部から更新できるスライドショー
ラップトップをモチーフとしたスライドショー。ステージをクリックするとフェードイン/アウトで次の写真が表示される。写真はmanifestで管理し、さらにmanifestの定義ファイルも外部ファイル化することで、Flash Professionalで再編集しなくても、外部ファイルの変更だけで更新できるようになっている。
光を駆使したモーション
キラリと光るテキストロゴの出現モーション。ロゴが出現するとロゴの左側から右側へと光が当たったかのようにキラリと光らせ、また、ロゴ周辺に小さな光パーティクルとレンズフレアをほどこしてロゴの輝きを演出している。
ストップウォッチ付きアナログ時計
アナログ時計の中にストップウォッチ(左が秒計測、右が分計測)を配置している。目盛り描画処理を関数化することで、時計のバリエーションを簡単に作成できるようにしている。
マルチデバイス対応ゲーム
画面の左右半分のいずれかをタップ、もしくはクリックすることで主人公を左右に動かし、画面上から降ってくるコインを受け取るミニゲーム。PC、スマートフォン、タブレットなど、あらゆる端末で適切に表示されるようになっている。
HTMLの背景をアニメーションで演出
HTMLの背景で、4種類のアセット(星、ハート、サボテン、キノコ)が、ズームイン・ズームアウトのアニメーションをしながら切り替わる。アセットを表示する際は、ランダムに種類を選び、ランダムなサイズでタイル状に配置している。
プログラミングアート
マウスの軌跡に沿って線を描くドローイング。線の描画時に加速度を取り入れ、さらに一度に描画する線の数を増やすことで、多重線がバネのような動きでマウスに追従するという表現となっている。