オーディオの操作

稲妻のエフェクトを加えたところで 全体の雰囲気を盛り上げるサウンドを加えましょう さっそく始めましょう まず、ライブラリをご覧ください 様々な種類のアセットがあって、見分けにくいですね 新しいフォルダーを追加して整理しましょう クリックして新しいフォルダーを作成します 名前を付けます 「Lightning Assets」にしましょう そのフォルダーの中にこのフォルダーを入れます オリジナルのPSDです ここに稲妻のビットマップと稲妻のコピーを入れます フォルダーをもう1つ増やしましょうか 「SOUND」と名付けます ライブラリをより効果的に整理する方法があります 今はフォルダーが上に2つ 下の方に1つあります 名前の先頭にアンダースコアを追加します 「_SOUND」に変更すると、上に上がりました Lightning Assetsも同様に変更します アンダースコアを追加してEnterを押せば フォルダーが一番上に来るように整理できます これで、あらゆる種類のサウンドを読み込めます Adobeサウンドファイル、WAVファイル AIFファイル、MP3ファイルなど 様々な種類がありますが、どれもポピュラーなものです ではサウンドを読み込みましょう 「ファイル」 「読み込み」を選択して ステージまたは直接ライブラリに読み込みます サウンドを追加するには、まず新しいレイヤーを追加します Animateには、サウンド専用のレイヤーや場所がないため サウンドを読み込むときは、新しいレイヤーを 新しいオーディオチャンネルとみなして作成しましょう ここをクリックして、Wavesと入力します 最初に読み込むサウンドです キーフレーム1を選択した状態で 「ファイル」 「読み込み」 「ステージに読み」を選択します ステージに読み込むと サウンドはライブラリにも入ります Waves.mp3をダブルクリックします タイムラインの最初のキーフレームに波形が表示されます ライブラリの中にも入っています Waves.mp3を、_SOUNDフォルダーにドラッグします 波のサウンドが入りました いいですね この波のサウンド、最初のキーフレームをクリックして プロパティパネルを表示します プロパティパネルに「サウンド」がありますね そのため、キーフレームを選択して ドロップダウンからWaves.mp3を選択することもできます Animateには2種類のサウンドがあります イベントサウンドとストリーミングサウンドです イベントサウンドは 完全にダウンロードしてから再生を開始し 最後まで再生が続きます ActionScriptで停止するか、サウンドが終了するまでです ActionScriptで停止するか、サウンドが終了するまでです もう1つのストリーミングサウンドは 残念ながらCanvasでは使用できません ストリーミングサウンドは最初のフレームのデータが ダウンロードされると同時に再生され 各フレームがタイムラインと正確に同期します 1フレーム移動するとサウンドを再生され 次のフレームでまたサウンドが再生される形式で 各フレームにサウンドが分割されます しかし、HTML5 Canvasで使用できるのはイベントサウンドのみです プラグインなしで、書き出すことができます ここで使用するサウンドは1つだけです 「イベント」を選択します 最初のキーフレームでサウンドがロードされ、最後まで再生が続きます 必要ならば、繰り返すこともできます まずは、一回だけ再生されるということです ここでは1回で十分です 波のサウンドは約130フレームあるため アニメーション全体をカバーできます しかし、長いアニメーションの場合は ここでサウンドを繰り返す回数を 指定するか、終了のない「ループ」を指定します ここでは、繰り返し回数を1回のままにします ライブラリに戻ります 次に稲妻のサウンドを読み込みますが タイムラインには読み込みません 稲妻が光る3箇所のフレームに 配置するためです そこで、ライブラリに読み込みます その上で、タイムラインの必要な場所に読み込みます 「ファイル」 「読み込み」 Command（Ctrl）+Rキーは「ステージに読み込み」なので ここでは、ライブラリに読み込みを選択します Lightning.mp3をダブルクリックします これでライブラリに読み込まれます _SOUNDフォルダーに入れて ファイルを整理しましょう タイムラインで、どこで稲妻が光るか確認します このあたりですね 新しいレイヤーを追加します 「Lightning」と名付けます そして、ここにキーフレームを追加します 「キーフレームを挿入」アイコンをクリックします キーフレームをクリックして選択します プロパティパネルを見てみましょう 「フレーム」セクションに 「サウンド」セクションがあり ドロップダウンで、ライブラリに入っている サウンドが表示されます Lightning.mp3とWaves.mp3です Lightning.mp3を選択します 次のレイヤーでも同様に操作します タイムラインを進め、稲妻が光るタイミングを見つけます ここですね そのレイヤーを選択した状態で、キーフレームを追加します ダブルクリックします 「Lightning」と名付けます また、このキーフレームをクリックして選択します プロパティパネルで、Lightning.mp3を選択します 稲妻のインスタンスをもう1つ追加しましょう ちょうどこのあたり フレーム66でした 今回は別の方法として、レイヤーを複製します 右クリックして サウンドの入ったLightningレイヤーを複製します Lightningのコピーを 66フレームまでドラッグします キーフレームを一度クリックします 次にクリックしたままドラッグします 66フレームあたりからです いいでしょう ここに余分な部分があります サウンドがタイムラインをオーバーしたからです クリック＆ドラッグで これらのレイヤーを選択し 右クリックして 「フレームを削除」を選択、またはShift+F5キーを押します タイムラインが混み合っています Lightningオーディオレイヤーが3つあり Wavesレイヤーもあります 新しいフォルダーを作成して整理しましょう クリックして新しいフォルダーを追加します 「AUDIO」または「sound」と名付けます それを一番上にドラッグします Lightningをクリックして WavesレイヤーでShiftキーを押しながら このフォルダーの中にドラッグします これで閉じれば、すっきりしますね Command（Ctrl）+Enterを押してプレビューします ぴったりですね いかがでしたか サウンドの追加方法を紹介しました またお会いしましょう