隠居のHP備忘録：音の出るリンクボタンの作成
Atelier Shuhei Weblog の右サイドメニューでのサイト内リンクボタンの統一が取れていなかったので、作り直すことにした。物覚えが悪くなって Flashのリンクボタンを作るたびに参考書を片手に一からやり直すことになるので、今回は備忘録として書き留めておくことにした。Flash製作に長けた人なら幼稚な話であるが。
下に、今回作成した 蝶の写真集 Studio YAMAKO へのリンクボタンを例示する。
下に、今回作成した 蝶の写真集 Studio YAMAKO へのリンクボタンを例示する。
ボタンの日本語表示が求められるときは、Micromedia Fireworks8とFlash8を使う。まず、Fireworksでボタン画像を作る。ツール・ボタンで角丸矩形を選んで矩形を描いて、メニューバー・ウィンドウからアセット・スタイルを開いて好みのスタイルを選ぶと矩形のデザインや色を決めることができる。この矩形を載せるキャンバスの背景色は、透明にしておくのが良いようだ。矩形の大きさと位置は、下のプロパティで調節できる。ツール・ボタンからテキストツールを選び、目的とする文字を描く。これを .png ファイルで保存しておくと後で変更することができる。
Flash8 を立ち上げ、ファイル→開くで先ほど保存した .png ファイルを開く。その前に、キャンバスの大きさを目的とするボタンの大きさより縦横10ｐｘ程度大きくし背景色をブログの背景色と同じに設定しておく。画像は下のプロパティで大きさと位置を指定する。次に画像（.png)を 修正→シンボルに変換 でボタンに変換する。名前は適当でよい。右下のライブラリーにボタンができるので、これをクリックするとボタンの動き設定画面に変わるので オーバー ダウン をキーフレームとする。（カーソルがオーバー状態の時やクリックしたときにボタンが変化させることもできるが、次回以降に学習することにした）
クリックしたときに効果音が鳴るようにするには、好みのサウンドファイルを選んで、ファイル→読み込み→ライブラリーに読み込み で読み込む。ボタン設定画面でダウンフレームを選択するとプロパティの右にサウンド：セレクトボックスが現れるので、今読み込んだファイルを選択する。余談だが、私はアメリカへ旅行したときに見つけて買っていた 150 Spectacular SOUND EFFECTS の２枚組のＣＤ（MP3ファイル）を持っている。また、wavファイルであるが、 Encyclopedia of Sound というCDも持っているので、これらの中から好みのサウンドを探している。最近は、Web上にもフリーで多くのサウンドが提供されているようだ。
シーン画面に戻って、下のプロパティがボタン選択になっていることを確認したら、アクションスクリプトを編集する画面を開けて、グローバル関数→ムービークリップ制御 から on をダブルクリックすると右の編集画面に、構文が出てくるので release を選択する。２行目の ｝ 前にカーソルを合わせ、ブラウザ/ネットワークで getURL をダブルクリックすると右の編集画面に指示がでる。例えば私のホームページにリンクさせる場合は、getURL("http://n-shuhei.net/blog/", "_blank"); とinputする。"_blank"部分を指定しないと音が出ないようである。これで設定は終わりである。Ctrl＋Enter でパブリッシュ・プレビューを実行して音が出て、目的のリンク先にリンクすれば成功である。
これをフラッシュボタンとしてHTMLに組み込むためには、ファイル→書き出し→ムービーの書き出し で .swf ファイルを保存する。これを以下のようにテンプレートなどに埋め込めばよい。
なお、上記のような Flash を表示させるコードは、XHTMLstrict に Flash を表示するで書いたように従来の書き方を修正している。
Flash8 を立ち上げ、ファイル→開くで先ほど保存した .png ファイルを開く。その前に、キャンバスの大きさを目的とするボタンの大きさより縦横10ｐｘ程度大きくし背景色をブログの背景色と同じに設定しておく。画像は下のプロパティで大きさと位置を指定する。次に画像（.png)を 修正→シンボルに変換 でボタンに変換する。名前は適当でよい。右下のライブラリーにボタンができるので、これをクリックするとボタンの動き設定画面に変わるので オーバー ダウン をキーフレームとする。（カーソルがオーバー状態の時やクリックしたときにボタンが変化させることもできるが、次回以降に学習することにした）
クリックしたときに効果音が鳴るようにするには、好みのサウンドファイルを選んで、ファイル→読み込み→ライブラリーに読み込み で読み込む。ボタン設定画面でダウンフレームを選択するとプロパティの右にサウンド：セレクトボックスが現れるので、今読み込んだファイルを選択する。余談だが、私はアメリカへ旅行したときに見つけて買っていた 150 Spectacular SOUND EFFECTS の２枚組のＣＤ（MP3ファイル）を持っている。また、wavファイルであるが、 Encyclopedia of Sound というCDも持っているので、これらの中から好みのサウンドを探している。最近は、Web上にもフリーで多くのサウンドが提供されているようだ。
シーン画面に戻って、下のプロパティがボタン選択になっていることを確認したら、アクションスクリプトを編集する画面を開けて、グローバル関数→ムービークリップ制御 から on をダブルクリックすると右の編集画面に、構文が出てくるので release を選択する。２行目の ｝ 前にカーソルを合わせ、ブラウザ/ネットワークで getURL をダブルクリックすると右の編集画面に指示がでる。例えば私のホームページにリンクさせる場合は、getURL("http://n-shuhei.net/blog/", "_blank"); とinputする。"_blank"部分を指定しないと音が出ないようである。これで設定は終わりである。Ctrl＋Enter でパブリッシュ・プレビューを実行して音が出て、目的のリンク先にリンクすれば成功である。
これをフラッシュボタンとしてHTMLに組み込むためには、ファイル→書き出し→ムービーの書き出し で .swf ファイルを保存する。これを以下のようにテンプレートなどに埋め込めばよい。
<object data="http://n-shuhei.net/blog/xxxx/xxxx_xxxxxx_x.swf" width="180" height="40" type="application/x-shockwave-flash"><param name="movie" value="http://n-shuhei.net/blog/xxxx/xxxx_xxxxxx_x.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /></object>
なお、上記のような Flash を表示させるコードは、XHTMLstrict に Flash を表示するで書いたように従来の書き方を修正している。
コメント
>yamakoさん
コメントありがとうございます。
音などは入れ替えることができますのでご希望のファイルがあれば、送ってください。
Posted by n_shuhei at 2007年6月16日 19:29
ご隠居様、立派なリンクボタンをつけてくださり、ありがとうございます。開いてみると鐘の音が聞こえました。
Posted by yamako at 2007年6月16日 17:25
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)