HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選：Webサイト作成手順を勉強するまとめ（3）（3/3 ページ）

新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。

[岡本紳吾，hatte.Inc]

【ステップ8】HTML5のaudioを使いアニメーションに「音」を付ける

　Edge Animateは以前は音を鳴らすことができなかった（パブリッシュ後にJavaScriptを編集して鳴らすことはできた）が、現在は画面上で音の追加ができるようになっている。音が鳴らせるということは、コンテンツをよりリッチに見せられるということだ。

• Edge Animateを試そう！ HTMLアニメーションをつくろう。第3回 HTMLアニメーションに効果音を追加する（Adobe Pinch In）の主な内容
1. HTML5 オーディオとアニメーションを同期
2. 音を再生する
3. BGMの再生
4. BGMの再生（フェードイン）
5. 効果音（SE）の再生
6. 終わりに

BGMの再生（フェードイン）（Edge Animateを試そう！ HTMLアニメーションをつくろう。第3回 HTMLアニメーションに効果音を追加する（Adobe Pinch In）より引用）

【ステップ9】flaファイルをHTML5書き出し機能でWebアニメーションに変換

　「Flashは終わった」「いやいや、まだ終わっていない」という議論がまだあちこちで聞こえてくる。Flashが使われなくなってきているとはいえ、古いサイトの改修案件やソーシャルゲーム、さまざまなサービスのモックアップ作成などでFlashは活用されている。

　FlashはHTML5書き出し機能が搭載されている。「CreateJS」という技術を使ったもので、CC以前は拡張機能で実現されていた機能だ。コードは「ActionScript 3」ではなくJavaScriptを用いるのだが、拡張機能のときは煩雑だったスクリプト記述がちょっとシンプルに改修されている。

　もちろん、面倒なスクリプトを記述しなくても、タイムラインのアニメーションはそのまま書き出ししてくれる。Flashの持つ便利なアニメーション作成の環境を利用して、マルチデバイスに対応したアニメーションを作成してみよう。

• Flash Professional CC : マルチプラットフォームを制覇しよう第1回 今すぐ試そう！ HTML5書き出し機能（Adobe Pinch In）の主な内容
1. 新しくなったHTML5書き出し
2. 手元のflaファイルですぐに試せる

手元のflaファイルですぐに試せる（Flash Professional CC : マルチプラットフォームを制覇しよう第1回 今すぐ試そう！ HTML5書き出し機能（Adobe Pinch In）より引用）

【ステップ10】Flash LiteコンテンツをHTML5アニメーションに変換

　少々古い記事になるが、Flash CS6でのさまざまなパブリッシュ形式を解説している記事も紹介しておきたい。というのも、Flash CCとCS6は別物と言っていいほど違いがあるツールとなっていて、特に日本のソーシャルゲームでよく使われているFlash LiteはFlash CS6でしか扱えないのだ。

　ActionScript 2.0で開発されたコンテンツのメンテナンスを行う際も、Flash CS6が必要となるので、CCだけではなくCS6もチェックしておくといいだろう。Creative Cloudならどちらもインストールできる。

• Flash Professional入門第1回　様々なシーンで活用できるFlashコンテンツ（Adobe Pinch In）の主な内容
1. 新規ドキュメント作成とパブリッシュ
2. Flashムービーとしてパブリッシュする
3. HTML5コンテンツとしてパブリッシュする
4. 動画ファイルとして書き出す
5. 画像として書き出す
6. アプリケーションとしてパブリッシュする

手元のflaファイルですぐに試せる（Flash Professional入門第1回　様々なシーンで活用できるFlashコンテンツ（Adobe Pinch In）より引用）

次回は、絵心が無い人でもフラットデザインな素材を作る

　今回はWebアニメーションツールにフォーカスして紹介した。最近ではWebサイトの中に小さな動きを加えるマイクロインタラクションというものも注目され始めている。技術の変化が激しい世界なので、過去作成したモノのメンテナンスを行う際、古い技術を知っているかどうかでも対応が大きく変わってくるだろう。

　さて、Webサイトがあらかた作れるようになり、Webアニメーションも作れるようになったら、はやりの「フラットデザイン」も取り込んでWeb制作に生かせるようになろう。まずはフラットデザインがどんなものか理解して、絵心が無い人でもフラットデザインな素材が作れる「Adobe Fireworks」の使い方を例に、アイコンやボタンなどに使える素材の作り方を紹介するのでお楽しみに。

　もちろん「Adobe Pinch In」では、すぐにFireworksの記事が読めるので、そちらも参照してほしい。

岡本 紳吾（おかもと しんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto