Atelierで“リンクボタン”タグの付いているブログ記事

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!」に変えると、問題なく動くようになった。
 基本的なところで抜かっている。歳のせいにしておきたい。

2007年1月 5日

MTに自作Flashリンクボタンを置く

 右サイドのメニューに、総集編的なページや昔のHPなどにリンクするボタンを置いてきた。これらのボタンは、SothinkSWFQuickerのテンプレートを使って Flash で作ったものもあるが、それぞれ個別に作ってきたので統一がとれていなかった。テンプレートでは、自分の思うようにデザインができないことも不満であった。それに大枚をはたいて手に入れた Flash8 をなんとか使ってみたいという願望もあった。初心者向けの参考書これで完璧 Flash8では、もうひとつ自分の思うような例がなかった。Flash8 のヘルプに、ファーストステップガイドやチュートリアルもあるが、記憶力が悪くなっているので印刷物でないと使いづらい。それでまた、下の『Flash 8 レベルアップコース』という書籍を買った。何のことはない書籍代に結構使っている。
この『Flash 8 レベルアップコース』は丁寧に書いてあり、なかなか手助けになる。この中の作成例を参考になんとかたどり着いたのが、現在の Flash リンクボタンである。一応、Flash の基本であるボタンへのカーソル状況によって、動いたり音がでたり、半透明のカバーが覆けられる。もちろん、クリックによって目的とするURLが現れる。また、作例にはなかったが管理者(私)へメールするリンクボタン(mailto:)も同じ動きで設置できるようになった。歳をとっての学習は、エキスパートの真似をなんども繰り返してするしかないかと変に得心している。幸い時間はある。

Flash8 レベルアップコース
Flash8 レベルアップコース
posted withamazleton 07.01.05
ななきち
毎日コミュニケーションズ
売り上げランキング: 210708






2006年12月29日

MTテンプレートでのCSSによるタブメニューの作成

 いろいろと遠回りをしたが、ブログのヘッダー部分に、以前から設置したかったタブメニューを作った。このようなリンクボタンは、Flashで作るものとばかり思いこんでいた。そのために、ボタンを作るFireworksやFlash8などの学習をボチボチとしてきた。Fireworksには、Javascriptをつかうタブメニューの作り方のステップガイドがある。新しくページを作るときには有用と思えるが、MovableType(MT)に持ち込むにはいささか難しそうだ。Flash での例示は、もう少し高度なプルダウンメニューのようなものが多い。Google でサーチをしてみると、JavaScript や Flash は使わずにスタイルシートを上手く使ってHTMLで作成できることが分かった。ちなみにいつも参考にさせてもらっている小粋空間さんのタブメニューもページのソースコードを見るとHTMLで作られているようだ。(一部、JavaScripts が使われているようだ。
 いろいろ探してみると CSS Tab Designer というフリーの Software(?) に行き当たった。同様の日本語サイもあるが、どうも海外のサイトの方があか抜けている。早速、css_tab.zip ファイルをダウンロードして展開してみるとお誂え向きのサンプル (Tab Menu10)があった。これには、そのサンプルのHTMLコードがついており、これをページ作成ソフト(私の場合、Dreamweaver MX )にコピー&ペーストして、いろいろと弄って応用した。主な変更点は、文字コードを utf-8 にして日本語が扱えるようにすることとボタンのテキストやリンク先の指示やボタンの色を変えることなどである。
 MTへの持ち込みは、StyleText 部分を本来のスタイルシート(styles-site.css) に付け加え、<body><div> 部分のコードをテンプレートに挿入した。なお、私はテンプレートのヘッダー部分などは、モジュール化しているので以前に自分で作成しているテンプレートへの追加となる。このように多くのテンプレートを修正する場合には、モジュール化は重宝する。
 できあがりは画面でご覧いただけると思うが、このようなタブ区分と右サイドのカテゴリー区分とが完全に一致していないので、カテゴリーを再度見直す必要がある。また、サブカテゴリーも設けているので、プルダウンできるような改良も必要である。
 なお、IEではボタンテキストの日本語だけのものと英語まじりのものとでは、表示が微妙に異なるようである。Firefoxでは揃って表示されている。

2006年12月11日

隠居のFlash:&lt;object&gt; と&lt;embed&gt;

 先日来、右サイドメニューに Flash リンクボタンを置くことを試みている。Flash8 Basic で、日本語表示のFlash リンクボタン・ファイル(xxx.swf)をいくつか作って設置してみる作業である。この作業の中で、エキスパートの方なら常識と思うが、初心者には新たな発見があったので備忘録的に書き留めておくことにした。
 メインページおよびエントリー・カテゴリー・日付各アーカイブのテンプレートでは、リンク用のテンプレートを別に作って readfile している。このリンク用テンプレートでの flash file の設置するためのコードは、引用のように、Flash のエキスパートが提供してくれているものをコピペし、 flash file のありかなどを指示するなどの必要箇所を訂正して使っている。
<!--泉北近辺私的観光地図-->
<span align="left"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="120" height="30"> <param name="movie" value="http://xxxxxxxxxx/xxxxx/map_03.swf" /> <param name="quality" value="high" />
<!-- LiteboxでFlash を隠す -->
<param name="wmode" value="transparent" />
<embed src="http://xxxxxxxxxx/xxxxx/map_03.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" width="120" height="30"></embed></object></span>

   この HTML には、<object>と<embed>という同じようなタグが使われている。この経緯については、高橋 登史朗さんのAllAboutの解説に詳しい。この解説でも分かるように、ブラウザーによって表示が変わる。私の場合、主として編集は Firefox2.0 を使い、サイトの確認は使用している人が多い IE7 で行う。この確認作業で、Firefox と IE では表示が異なることに気が付いた。<object>と<embed>タグ部分で同じような名前の swf ファイルを使っていて分かったのであるが、 IE7 では<object>タグでのファイルが使われ、Firefox2.0では<embed>タグでのファイルが使われる。Netscape でも<embed>タグでのファイルが使われるようである。
 どちらのタグ部分でも同じファイル名にするのは当たり前の話であるが。