連載
» 2010年05月18日 10時00分 公開

D89 デザインTips - デザインのハウツーテクニック集(10):Flashのタイムラインでアニメーションを作るには (3/3)

[福田寅成,@IT]
前のページへ 1|2|3       

Flashでボタンを作って音源を再生するには

 本稿では、音声を扱う一番簡単なコントロールを紹介します。音声を一番簡単に使うシーンとしては、BGMや効果音を思い付くと思います。ボタンクリックで音を鳴らす基礎的なTIPSを紹介します。

 まず、ボタン風の画像をステージ上で作成してみましょう。角丸の矩形を書いて、グラデーションを掛けます。さらに「Click!」というテキストを配置します。ボタンっぽく作れたでしょうか?

画像を[シンボルに変換]するには

 次に、ステージ上にある矩形とテキストをすべて選択して右クリックし、[シンボルに変換]で[ボタン]を選択します。ボタンは、[アップ][オーバー][ダウン][ヒット]という4つの状態を初期状態で持っているシンボルです。

図1 ボタンにされたシンボルのレイヤの状態 図1 ボタンにされたシンボルのレイヤの状態

 まず、[オーバー][ダウン]状態にキーフレームを追加します。さらに、新規レイヤを作成し同様に[オーバー][ダウン]に[空白のキーフレーム]を挿入します。

 キーフレームは、挿入したいタイムラインのフレームを選択し、右クリックメニューから挿入します。

図2 新規レイヤとキーフレームが挿入されたタイムライン 図2 新規レイヤとキーフレームが挿入されたタイムライン

音声ファイルを読み込むには

 図2のようになったら、今度は音声をライブラリに読み込みます。音声の読み込みは、ライブラリパネルに直接ドラッグ&ドロップで追加するか、ファイルメニューから[読み込み]を選択します。

図3 [ファイル]→[読み込み]→[ライブラリに読み込み] 図3 [ファイル]→[読み込み]→[ライブラリに読み込み]

 音源は、例えば「効果音源」などのサイトからダウンロードして使うのもいいでしょう。

 ライブラリに読み込まれると、スピーカーのアイコンでファイル名が表示されるので、確認しましょう。

図4 ライブラリへの音声ファイル読込結果 図4 ライブラリへの音声ファイル読込結果

 ボタンの新しいレイヤ「レイヤー 2」の[ダウン]のフレームをクリックして選択状態にします。その状態でライブラリからボタンにドラッグ&ドロップします。

 ここまで作成したら、実行してみましょう。クリックに対応して音が出ましたか?

Profile

福田 寅成

クラスメソッド株式会社


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。