flashアーカイブ: Atelier

Main | JavaScript »

2014年10月20日

隠居のパソコン備忘録：mp3ファイルをWebページ内で再生する

　以前は、同じページ内で、Yahoo! のMedia Playerを使って、mp3ファイルをコントロールすることができた。
　ところが、最近になって、再生ボタンをクリックすると、QuickTime Player が別ページ（別ウインドウ）に立ち上がり再生が始まるようになった。（Windows Media Playerでも再生できるようにできるんだろうが、設定方法がわからない。）

　なんとか、同一ページ内で MP3ファイルを再生できるようにできないかとネットサーチをしてみると、いくつかの方法がみつかった。いずれもFlash Player を使う。
　その中で、Flash-mp3-player.net　が提供している　MP3 Player は、いくつかのパターンが用意されており、ページの　body 部に下のような数行のコードを挿入することで、実現することができる。
　例えば、ツクツクボウシの鳴き声を録音した MP3 ファイルを配置すると次のようになり、再生ボタンをクリックすると、鳴き声が聞こえるようになる。再生中に表示されているポーズ・ボタンをクリックすると、再生が停止する。

　　sample
　

ツクツクボウシの鳴き声

sample の Flash MP3 player のコード


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="25" height="20">
                    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
                    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/atelier/photo_insects/110923_tukutukuhousi.mp3&amp;showslider=0&amp;width=25" />
</object> ツクツクボウシの鳴き声

　再生をしたい MP3 ファイルは、青色文字で表示している。
　このコードは、Flash-mp3-player.net　が提供している mini の MP3 Player の　Generator で作成したコードを、一部修正したものである。今後は、少々面倒であるが、その都度記載することにしたいと思う。

　先日の和泉の国ジャズストリートで録音した飯田宗雪のライブ録音 MP3 ファイルを、同じように、ページ内で再生できるようにしてみた。

沖縄民謡「花」を歌う飯田宗雪

隠居のMovable Type備忘録：ブログの記事に、MP3 Player を埋め込む　

　ブログの記事中に、小鳥のさえずりや虫の声などのMP3 ファイルを記載すると、小さな再生ボタン

が表示されて、これをクリックすると音が聞こえてくるという JavaScript で作られた del.icio.us/js/playtagger を提供していたサービスページが閉じられてしまった。これは、URL のページHTML コードのどこかに（<head> 部分がリコメンドされているが）次のコードを挿入するだけでよかった。

<script type="text/javascript" src="http://del.icio.us/js/playtagger">

この playtagger という Javascript を運用してくれていたサイトが突如閉鎖したようでリンクが切れてしまった。非常に便利であったので残念である。
　それで、それに代るものをサーチしてみると【How to Embed MP3 Audio Files In Web Pages】というページがヒットした。
ここでは、Google と Yahoo! が提供するサービスが紹介されている。

Google Reader MP3 Player
　再生したい Mp3 ファイルを次のコードの中で指定すれば、ブログの中で MP3 が Windows Media Player などを介さずに再生される。

<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

　　sample

Yahoo! Media Player
次のコードを URL の<head> 部分にでも一行書き入れ、

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

ブログの文中に、次のように MP3 file を指定すれば良い。del.icio.us/js/playtagger と同じ方式である。ただし、再生ボタンをクリックすると、下のスクリーンショットのような再生画面が表示される。右端の縮小ボタンで折りたためるが。

<a href="http://n-shuhei.net/xxxxx/photo_insects/110923_tukutukuhousi.mp3">ツクツクボウシ</a>

　　sample
ツクツクボウシ

　上記以外にも、カスタマイズすることのできる Flash player　を作成できる【MP3 Player】というサイトも見つかった。上の　Google Rader MP3 Player とここで紹介されている Mp3 Player も Flash を使っている。
flash-mp3-player.net
コード例

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_button.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#0000ff" />
    <param name="FlashVars" value="mp3=http%3A//n-shuhei.net/xxxxxx/photo_insects/110923_tukutukuhousi.mp3" />
</object>

　　sample

　Yahoo! の Javascript 方式を使えば、今までの記述を訂正しなくても良いので、これを使うことにした。Flash Player を使うとすべての MP3 file の記述を書き直す必要がある。Yahoo! なら、そう簡単に閉鎖をすることはあるまいと思っている。

関連エントリー
隠居のスマートフォン備忘録:（3）Xperia acro で音楽(mp3)を楽しむ

隠居のパソコン：素晴らしい E-cards の紹介

　2006年7月にロサンゼルスに住んでいる先輩女史から送ってもらったアメリカ独立記念日のGreeting Cardがが素晴らしかったので、この E-cards を作成して有料で提供している jacquielawson と契約した。年間 $12 （2年間：$18 ）で、作成されたそれぞれが素晴らしい E-cards が自由に使える。

　１０月終わり近くになって、jacquielawson から、右のような新しい Hallowe'en（ハロウィン）の E-card をリリースしたとのメールが届いた。（メンバーになると新しい E-card が発表されるたびにメールをしてくれる）　 E-cards はカードといっているが、 Flash で動くアニメーションである。余談ではあるが、このカラスはハシブトカラスだろう。
長い間私の右サイトにボタンを置いている　Season's　Greeting を更新していなかったので、今回このハロウィンの E-card に置き換えた。最近作成された E-cards は、次の記述にあるように"back story"がついている。これもなかなか洒落ている。今回の "back story"は、scarecrow（かがし）について興味ある記述がつけられている。

Handy Tip!
Have you noticed how many of our recent cards include what we call a "back story" - a few extra pages of fascinating information about the subjects of the cards.
They're well worth exploring - recent cards have included hints on hunting for sunken（海底の） treasure, potted histories of the Blue Danube waltz and the Great Western Railway - and a story about hedgehogs!（ハリネズミ）

　　提供されている E-cards　は欧米圏の文化に基いており英語であり残念ながら年賀状はないが、誕生日・出産の祝い・結婚祝い・新築祝い・お見舞いなどもあるので年間1000円少しほど払って使ってみられたらいかがだろうか。（念のために言っておくが、私はこの jacquielawson のアフリエートをしているわけではない。）　こういうものが容易く手にはいるようになったのも、インターネットの発展のおかげである。ネットの暗い部分ばかりに疑心暗鬼にならずに、sunny side を上手く活用すれば生活はもっと便利に潤いのあるものになるだろう。行動範囲の狭くなってきている私のような高齢者でも、パソコンの前に座ることによって若いときよりずっと世界が広がってきていると感じている。

Kinarie&Mayさんの横長Flash CalendarをMT4.1に設置する

　MT4.1 にアップグレードしてから、Kinarie&May さんのFlash Calendar が使えなくなっていた。MT3.3 のときに、アーカイブテンプレートのところにおいていた　月別XML の XML ファイルをどのように置き、アーカイブマッピングをどのように設定するのかの知識がなかったためである。

　それで、「小粋空間」さんが提供している「Ajax 月送りカレンダー（MT4版）」を３つ運営しているブログのうちひとつに導入した。うまく動くようなので、メインのこのブログにも導入してみた。ところが、はじめのブログでは上手く動いているのに、こちらではカレンダーは表示されるもののエントリーがある日のリンクをクリックすると、アドレスはリンク先のエントリーになっているのに

error in template: found but mtifnonzero was expected

というエラー・メッセージが表示されるだけである。

　この原因を探るうちに、Kinarie&May さんのFlash Calendar でつかう XML ファイルの置き場所とアーカイブマッピングの仕方が分かった。忘れないうちに書き留めておきたい。
　なお、エラーの原因はあとで判明したことであるが、テンプレートをいじっている間に、テンプレート・タグの残骸が「ブログ記事」テンプレートに残っていたためらしい。いつものように初歩的なミスである。

横長Flash Calendar 3.0 のダウンロードと解凍、アップロードなどについては、Kinarie&May さんのページ　「Falsh」→「MT用横長Flash Calendar 3.0」に詳しくでているのでそちらを参考にする。
　私の場合、MT3.3 のときに使っていた Flash File があったので、これを使った。
MT4 になって、XML ファイルの設定が異なる。
1. ブログ管理画面で（MT4 からダッシュボードという）設置するブログを選択し、「デザイン」→「テンプレート」→「アーカイブテンプレート」を選択する。
2. 上段の「アーカイブテンプレートを作成」→「ブログ記事リスト」を選択する。
3. 空白のテンプレート作成画面がでるのでファイル名を「月別XML」（なんでもいいようだが）とし、Kinarie&Mayさんの「月別XMLファイルのテンプレート修正」のページから、呈示されている XML ファイルを C&P して保存する。
4. 保存すると、テンプレートの下に「アーカイブマッピング」が表示されるので、「新しいアーカイブマッピングを作成」をクリックし、種類「月別」を選択し追加ボタンをクリックする。「パス」はカスタムを選び、次のパスを入力（C&P）し保存する。
  xml/<MTArchiveDate format="%Y_%m"$>.xml
5. Kinarie&Mayさんの手順にはないが、MT4では「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」の下部にある「アーカイブマッピング」で「日別」のパスを表示しておく必要がある。表示がない場合は、「新しいアーカイブマッピング作成」をクリックしてでてくるリストボックスから「日別」を選び「追加」をクリックする。パス表示はそのままでよいようだ。
あとは、Kinarie&Mayさんの手順とおりに、Flash を貼り付けるHTMLソースをつくって、テンプレートに貼り付けるだけである。
私の場合、MT3.3 のときのソースが残っていたので、URL のパス部分を変更して、MT4 の「テンプレートモジュール」→「ヘッダー」の<div id="header">　～　</div> の部分に貼り付けた。ただし、私は「小粋空間」さんのテンプレート・セットを使わせてもらっている。

　友人が原稿を書いているもう一つのブログでは、「小粋空間」さんの「月送りカレンダー」を設置しているが、どちらも甲乙がつけがたい。「小粋空間」さんの「月送りカレンダー」では、スタイルシートでデザインをいじれるのがいい。
Kinarie&Mayさんのカレンダーは横長があるのと、投稿している日にカーソルを合わせるとエントリーのタイトルが出てくる。どちらも愛用させてもらっている。　

MT用フォトサムネイラーのインストール

　このブログに 2005年3月から掲載してきた種々雑多な写真も結構な量になってきた。これらの写真をカテゴリー別にアルバムにしたいと、ブログのタイトルなどで使っている Sothink SWF Quicker という Flash 作成ソフトのテンプレート利用も考えてきたが、日本語対応ができないなど意図したとおりにできないので諦めていた。

　写真のアルバムは、DIY作品集で実現しているが、新しいエントリーをあげるたびに修正しなければならないなど結構面倒な作業である。サムネイルに載せる写真を選択できるのは、いい点であるが。

　Flash カレンダーや Flash 天気予報を利用させていただいている Kinarie&May さんにMT用フォトサムネイラーというエントリーの中の画像ファイルをサムネイルで表示する Flash プラグインがある。前から気になっていたが、トライする機会がないままになっていた。今回、試してみると思い通りのインストールができたので、注意点などを記録として残しておきたい。

　次のサムネイルは、私のブログでカテゴリーを Gardening として分類しているエントリーに掲載されている写真である。下の << Prev ボタンをクリックすると日付を遡って見ることができる。サムネイルをクリックすると該当するエントリーが表示される。サムネイルに戻る場合は、ブラウザーの戻るボタンを使う。

　　

　インストールの手順は、Kinarie&May さんのMT用フォトサムネイラー1.20 に親切に書いてある。
　以下は、注意点。

サムネイルされる写真は、HTMLに、<"img","src" >で指定される　.ｊｐｇ写真である。いずれも小文字でなければならない。Picasa2 でエクスポートした写真は、大文字の .JPG となりサムネイルされないので要注意である。
テンプレートの新規作成で作成した xml ファイルは、作成した blog のルートフォルダーに保存される。ダウンロードしたphoto_thumbnailer120.zip を解凍してできる photo_thumbnailer120.swf ファイルは、同じフォルダーに置けばよい。
カテゴリー別にサムネイルを作る場合は、 xml ファイルの中で、<MTEntries category="004Gardening" lastn="999">　のようにするが、category の名前は、ブログ管理画面のカテゴリー名と一致させる必要がある。なお、サブカテゴリーも指定できる。私の場合、ソートのためにつけていた頭3桁の数字を忘れていたので、当初上手くいかなかった。
いくつかのカテゴリーでサムネイル集を作成する場合は、出力名を変えた xml ファイルをいくつか作ればOKである。

　このプラグインを応用して、私のサイトで運営している友達のブログの写真集とかのようなカテゴリー別のサムネイル集を作成していきたいと考えている。
　Kinarie&May さん　Thanks a lot !!

（追記：2008/3/12）　私のサイトで運営している Studio YAMAKO はプロ級の腕前の YAMAKO が撮った趣味の蝶の写真が中心である。この蝶の写真のサムネイルを MT用フォトサムネイラー1.20　で作成してみました。右サイドメニューの Studio YAMAKO をクリックしてみてください。素晴らしい写真集がご覧になれます。

（追記：2008/3/13）サムネイルされる写真の拡張子は小文字の jpg でなければならない。ブログに写真を掲載するには Picasa2 でデジカメ写真を整理しエクスポートするのが便利であるが、拡張子が大文字の JPG となる。そのため、MTで写真ファイルをアップする前に該当するフォルダーの写真ファイルを　Renamin.exe で拡張子を小文字の jpg としなければならない。ただし、この逆手をとって、サムネイルに載せたい写真だけ、小文字の jpg とする手もあるが、サーバーとエントリーのファイル名を変えねばならない。　

隠居、メニューをFlashボタンに変えてみる

　エントリーした日が表示される Flash の横長カレンダーや表示する地方を指定できる Flash 天気予報は、Kinarie&May さんの作品を使わせてもらっている。

　このサイトのメニューボタンが、なかなか洒落ている。自分でカストマイズできるように、Flashメニュー素材も公開されている。変化するメニューボタンを作りたかったので導入させてもらおうと思ったが、今気に入っている動きのあるタイトルを変えなければならないので諦めた。

　もう一度、Flash8 を学習しなおすうちに、先日作った「音の鳴る動きのあるリンク・ボタン」を作ったときの方法を応用すれば、少し似通ったものができるのではないかと気がついた。どうにか形になったので、例によって自分の記録用にかきとめておきたい。
　

Flash8 を立ち上げ、新規→フラッシュドキュメントを選択する。
「修正」→「ドキュメント」で、メニューボタンを設置する場所の大きさに合わせて、ステージの大きさ・背景色を決める。今回は、1000px X 40px の大きさで、カラーピッカーでスポイドしたブログ・タイトルの背景色（#784028）にした。
「挿入」→「新規シンボル」でボタンを選択して、title_homeとボタン名を付ける。（名前はなんでもよい。）
ボタン作成画面の再生ヘッドがアップにある状態で、ツールパネルの矩形ツールでステージ内に長方形を描く。
レイヤー１のアップフレームをクリックし、ステージ上の長方形をクリックすると、プロパティ・インスペクターがシェイプに変わって、長方形を編集することができる。今回は、130 x 25px の長方形を描いた。
アップ時のボタンの色（塗りのカラー）は、プロパティ・インスペクターにあるバケツの横の四角をクリックすると出てくるスポイドで、画面上の好きな色をクリックすると変えることができる。また、出てくる色パネルから選択したり、６桁の色番号を指定したリストことができる。色番号を指定する場合には、WebColorCreator というカラーピッカーを利用すると便利である。
ボタンの枠線は、境界線を明瞭にするために、細い実線とした。
テキストは、ツールパネルから、テキスト[A]アイコンをクリックし、プロパティ・インスペクターで、フォント・大きさ・色などを指定し、ステージ上で入力し、ボタン上にドラッグする。今回は、フォントは Verdana 12pt Bold 白を選んだ。
次に、ボタンのオーバーフレームを右クリックして、「キーフレームを挿入」をえらぶと、アップ・フレームと同じボタンが表示される。
アップ・フレームと変化をつけるため、塗り色は、プロパティ・インスペクターのバケツアイコンをクリックしてでるカラーピッカーで水色を選んだ。
次に、ダウン・フレームで「キーフレームを挿入」をえらぶとオーバーフレームのボタンがコピーされる。
ヒット・フレームにも「キーフレームを挿入」をえらんでおく。このフレームは表示されないから、そのままでも問題はないようだ。
「タイムライン」横の「シーン１」をクリックし、ステージに先ほど作成したボタンをライブラリーからドラッグする。このとき、「表示」→「表示比率」→「ウインドウに合わせる」に設定しておくと全体像がつかめる。
ステージにあるボタンをクリックするとプロパティ・インスペクターのプロパティがボタンに変化するのを確かめて、インスペクターの左下の位置決めを、今回の場合、w 130 H 25 X 0.0 Y 15 .0 とした。
次に、ボタンをクリックしたときに、リンク先につながるようにするには、簡単な Action Script を使う。「アクション」パネルを開き、「ムービークリップ制御」「ブラウザ/ネットワーク」から、下のようなスクリプトを作る。
on (release) {
getURL("http://n-shuhei.net/blog/);
}
ここまで作成した Flash ボタンの動きは、「ファイル」→「バブリッシュ・プレビュー」→「Flash」で確認するのがよいようだ。 [F12]キーを押してHTMLでの確認はうまくいかなかった。
この時点での画面は、左の screenshot のようになる。
ここまでうまくいけば、あとは同様の作業の繰り返しとなる。まず、右のライブラリーの title_home のボタンを右クリックして、「複製」を選択すると、ポップアップ画面がでるので、新たなボタン名を、例えば、title_radio のようにつける。
このライブラリーのtitle_radio ボタンをダブルクリックすると、 title_home のボタンの複製ボタンがでてくるので、アップ・オーバー・ダウン　フレームのそれぞれのテキスト部分を RadioSenboku　のように変える。
シーン１上に、このボタンをライブラリーからドラッグして、設置する。このときの位置表示は、w 130 H 25 X 130.0 Y 15 .0 とすればよい。
ステージ上でこのボタンを選択して、アクションパネルから、新しいリンク先URLを含むスクリプトを入力する。これで、メニューボタンの２つめができる。
ほかのボタンの設置は、17～20 の繰り返しである。
このようにしてできたファイルを「書き出し」→「ムービーの書き出し」で swf ファイルで保存し、FTPソフトでサーバーにアップロードする。あとは、Web Title 部分に設置するだけである。
なお、ボタンのオーバーフレームのときに音を出すようにするのは、「音の鳴る動きのあるリンク・ボタン」のエントリーでの９.項を参照にして設定する。

　このエントリーは前に書いたエントリーが基礎になっている。記録することによって、知識はアンプリファイ（増幅）することを身にしみて感じている。

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

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

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

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

隠居のHP備忘録：音の出るリンクボタンの作成

　Atelier Shuhei Weblog の右サイドメニューでのサイト内リンクボタンの統一が取れていなかったので、作り直すことにした。物覚えが悪くなって Flashのリンクボタンを作るたびに参考書を片手に一からやり直すことになるので、今回は備忘録として書き留めておくことにした。Flash製作に長けた人なら幼稚な話であるが。
　下に、今回作成した蝶の写真集 Studio YAMAKO　へのリンクボタンを例示する。

続きを読む "隠居のHP備忘録：音の出るリンクボタンの作成"

Permalink | Category : HP作成, MovableType, flash | Comments [2]

2007年4月23日

XHTMLstrict に　Flash を表示する

＜隠居のFlash:<object> と<embed>＞で書いたように、どのブラウザでも動くように Flash をHTMLに埋め込むには、<object> と<embed>という同じようなタグを書かねばならない。最近はHTMLをもっと厳密（strict）に書いて、どのブラウザでも動くようにしようということで、W3C（The World Wide Web Consortium ）は、XHTML strict を推奨している。この XHTML strict では、<embed>タグは使えない。現在MovableTypeで使っている「小粋空間」さんのテンプレートは、移行段階のXHTML Transitional なので現状で困っているわけではないが、Flashを XHTMLstrictで表示させる（embedタグを使わずに表示させる）コードが紹介されていたので、ブログのヘッダー部分の Flash を変更してみた。

続きを読む "XHTMLstrict に　Flash を表示する"

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

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

Flash8 レベルアップコース

posted withamazleton 07.01.05

ななきち
毎日コミュニケーションズ
売り上げランキング: 210708

Amazon.co.jp で詳細を見る