Top > HP作成> 隠居、音の鳴る動きのあるリンク・ボタンをつくる

2008年2月 7日

隠居、音の鳴る動きのあるリンク・ボタンをつくる

 リンクボタンを Flash で作成する方法をすぐに忘れてしまい、新たに作るときは一からの学習となるので、今回右サイドメニューのリンクボタンをいじった経緯を備忘録として書いておきたい。
 Flash 作成は、日本語が扱えるので Macromedia FLASH8 を使用しているが、使い込めばいろいろと面白いことができそうだが、まずは基本的な学習からである。
 なお、Flash リンクボタンの作成については、過去に何度かエントリーしている。それらは、ほとんど tutorial のものまねである。過去のエントリーについては、TagCloud の "Flash" で検索して欲しい。

  1. Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
  2. 「修正」→「ドキュメント」で、ボタンを設置する場所に合わせて、ステージの大きさ・背景色を決める。デフォールトに設定しておくと、同じようなボタンを作る作業を続ける場合は、便利である。
  3. 「挿入」→「新規シンボル」でボタンを選択して適当なボタン名を付ける。
  4. ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
  5. レイヤー1のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。
  6. アップ時のボタンの色(塗りのカラー)は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、6桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
  7. テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。
  8. 次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
  9. アップ・フレームと変化をつける場合、たとえばボタンの色を同色で薄くする場合は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーの「アルファ」を50%にでもすればよい。カーソルがボタンの上にくると音がでるようにするには、事前に、MP3ファイルをライブラリーに読み込んでおく。フレームをクリックしたときのプロパティ・インスペクターにあるサウンド・リストボタンをクリックすると読み込んでおいたMP3ファイルが表示されるので、これを選択する。効果:なし、同期:スタート、繰り返し:1でよい。(アップ・フレーム、ダウン・フレームでは、同期:ストップを選ぶ)
  10. 次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
  11. ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
  12. 次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「タイムライン」横の「シーン1」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。
  13. ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
    on (release) {
    getURL("http://n-shuhei.net/xxxxx/xxxx", "_blank");
    }
  14. 問い合わせなどのメール送信ボタンの場合には、次のようなスクリプトにする。
    on(release){
    mURL="mailto:xxxxxxxxxxx@n-shuhei.net";
    mURL+="?subject="+"問い合わせ:";
    mURL+="&body="+"よろしければ、お名前をお聞かせください。";
    getURL(mURL);
    }
  15. このようにして作成した Flash ボタンの動きは、[F12]キーを押してHTMLで確認する。「ファイル」→「バブリッシュ・プレビュー」→「HTML」でも確認できる。
  16. 動きが確認できれば、「ファイル」→「書き出し」→「ムービーの書き出し」で、.swf ファイルを保存し、FTPソフトでサーバーにアップする。
    なお、.fla ファイルも保存をしておいた方が、後の編集に有用である。


 あとで気づいたことであるが、2006年12月のエントリーが多いに参考になる。何回も同じことを繰り返すのは、アルツハイマーの典型的な症状である。
(追記:2007/2/11) メール送信ボタンの試験をしていて気づいたことがある。動きの確認で、うまくメールが立ち上がるときと立ち上がらないときがある。ActionScript に自信がないので、そのせいかと疑ったが違うらしい。いろいろとサーチしてみたが、よく分からなかった。
 うまくメーラーが立ち上がるときは、Outlook が立ち上がる。私は、普段メーラーは、Beckey! を使っているのに、「コントロールパネル」→「インターネット・オプション」→「プログラム」の電子メールが「Microsoft Outlook」となっているせいであった。これを「Beckey!」に変えると、問題なく動くようになった。
 基本的なところで抜かっている。歳のせいにしておきたい。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1420

トラックバック

» 隠居、メニューをFlashボタンに変えてみる from Atelier Shuhei Weblog
 エントリーした日が表示される Flash の横長カレンダーや表示する地方を指定できる Flash 天気予報は、Kinarie&May さんの作品を使わせ... 続きを読む

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)