Edge Animateを試そう:HTMLアニメーションに効果音を追加する

Creative Cloud

Edge Animateを試そう:レスポンシブなアニメーションの作成

HTMLアニメーションにサウンドを追加して、より豊かな体験をつくってみませんか?

サウンドは、どんなインタラクティブなコンテンツにとっても重要な要素です。ごく簡単な効果音でもアニメーションの表現力を高めることができます。

Edge Animateの[オーディオ]機能は、HTML5 audioの全ての機能をサポートし、アニメーションの再生と同期したサウンド再生を効率的に支援します。

Edge Animate CC の体験版をダウンロード  サンプルファイルをダウンロード

HTML5 オーディオとアニメーションを同期

この記事では、[オーディオ機能]を使い、HTMLアニメーションにサウンドを追加する手順を解説します。

記事内で使用するサンプルのベースとなったコンテンツが公開されています。下のリンクをクリックするとご覧になれます。

[レスポンシブな拡大/縮小]を使ったコンテンツ。BGMが流れ、クリックするとシュートして、GOALのメッセージが表示される

[オーディオ機能]を使ったコンテンツを見る
(※表示すると効果音が再生されるのでご注意ください。iOSなど、一部モバイル環境では再生されないことがあります)

上のコンテンツの制作には、Edge Animateのレスポンシブな拡大/縮小や、モーションパスの機能も使われています。この2種類の機能については、別の記事で詳しく紹介しています。

参考:Edge Animateの基本的な使い方は「Edge Animate入門」をご覧ください。

音を再生する

まずは、ダウンロードしたサンプルファイルの(01_編集前)内にあるindex.anファイルをダブルクリックしてEdge Animate内で開いてください。

このプロジェクトは、レスポンシブな拡大/縮小の設定を一通り終えたものに、モーションパスを使いボールの動きを追加したものとなります。Ctrl + Enterキーを押すと、ブラウザでプレビューが表示できます。

Edge Animateでは、オーディオを他の画像などと同様にエレメントとして扱います。なお、Edge Animateでは以下のオーディオ形式を扱うことが可能です。

  • mp3
  • ogg/.oga
  • wav
  • m4a
  • aac

スマートフォンなどのモバイル端末におけるオーディオ再生には、一部制限があります。詳しくは、Edge Animateヘルプの「デバイスでのオーディオの使用」をご覧ください。

それでは、実際に音を再生してみましょう。

BGMの再生

まずは、BGMをループ再生させてみましょう。その手順は以下の通りです。

  1. ライブラリの[オーディオ]から、「bgm」を選択し、ステージ上に設置する([エレメント&タイムライン]パネルに追加されます)。
  2. エレメントの「bgm」を選択し、[プロパティ]パネル内の[自動再生]と[ループ]にチェックを入れる。
  3. タイムライン上で再生ヘッドを「0:00」に合わせ、[プロパティ]パネル内の[ボリューム]を「10%」に変更する。

 [自動再生]と[ループ]にチェックを入れ、[ボリューム]を設定する

以上で、BGMの設定が完了致しました。ブラウザーでプレビューしてみましょう。

上記の設定でブラウザープレビューを行うと、BGMの再生開始時の数秒間、設定したボリュームが反映されない場合があります。その場合は、BGMの[自動再生]のチェックを外し、タイムライン上で、例えば「0:00.500」に再生ヘッドを合わせ、「+」ボタン(再生ボタン)を選択してください。

このようにすることで、BGMの再生より先に、設定内容が読み込まれ、適切なボリュームで再生されるようになります。

BGMの再生(フェードイン)

オーディオはタイムライン上で、他のシンボルと同様に扱うことができます。ここでは、先程設定したBGMの再生開始時に、フェードインを設定してみましょう。その手順は以下の通りです。

なお、BGM再生開始時を「0:00.500」に設定していると仮定します。「0:00」に設定しているボリュームのキーフレームは削除、または「0%」に設定しておいてください。

  1. 先程設定した「bgm」エレメントを選択し、タイムライン上の編集点を「0:00.500」に設定する。
  2. [プロパティ]パネル内の[ボリューム]を「0%」に設定する。
  3. タイムライン上の再生ヘッドを「0:01」に設定する。
  4. [プロパティ]パネル内の[ボリューム]を「20%」に設定する。

 [ボリューム]を0%から20%へと変化するようにする

これでフェードインの設定が完了です。数値を逆に設定することにより、フェードアウトさせることもできます。ブラウザーで確認してみましょう。変化がわかりづらい場合は、%の数値を上げてみてください。

効果音(SE)の再生

次は、スポットで鳴らす効果音を設置してみましょう。その手順は以下の通りです。

  1. ライブラリの[オーディオ]から、「bseWhistle」を選択し、ステージ上に設置する([エレメント&タイムライン]パネルに追加されます)。
  2. タイムライン上で再生ヘッドを「0:02」に合わせる。
  3. エレメントから「seWhistle」選択し、「+」ボタン(再生ボタン)を選択する。

以上で設置は完了です。ブラウザーでプレビューをして、音声が流れるか確認してみましょう。

通常オーディオエレメントは、ステージ上に置いただけでは見た目上何も表示されません。しかし、そのエレメントの[プロパティ]パネル内の[表示]をオンにすると、オーディオプレイヤーがステージ上に表示されるようになります。

 [プロパティ]パネル内の[表示]をオンにすると、オーディオプレイヤーがステージ上に表示される

終わりに

サンプルコンテンツの残りのアニメーションについては、これまでのバージョンの機能を利用することで実装が可能です。また、必要な素材はサンプルファイルに含めていますので、完成版のサンプルを参考にしながら、ぜひ、引き続いてアニメーションを完成させてみてください。

POSTED ON 2014.03.18