- 2006-09-12 (火) 16:53
- flash
SWFObjectの記事を翻訳して、おかげさまで結構アクセスがあるのだけれど、さっき自分で読み返してみたら、記事が長過ぎて萎えた。いちげんさんは見てくれない予感。
細かいことは考えず、手っ取り早く使うための方法をまとめておきます。
分かりやすいように文中を色分けしてます。RSSリーダーを使っている方はご注意ください。
1. まずは環境を作っておきます。
deconcept › SWFObjectのサイトから、SWFObject（現在var1.4）をダウンロードする。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておく。
あなたのWebサーバーのwwwルート（トップページのindex.htmlを置いている階層）に「js」フォルダを作り（既にあればその中に）、その中にswfobject.jsを入れる。
※何をしているかというと、webサーバーのどの階層からでも/js/swfobject.jsで呼び出せるようにしてるのです。
以上で下準備は終了です。Dreamweaver等を使っている方は、ローカルプレビュー用に、ローカル環境も同じフォルダ構成にしておいて下さい。
2. 以後、swfを埋め込むときは以下のようにします。
HTMLドキュメントの中の、swfを埋め込みたい箇所に次のように記述します。赤字部分を適宜修正してください。
<script type="text/javascript" src="/js/swfobject.js"></script> <div id="flashcontent"> swfが表示されない時に、代わりに表示される内容。 swfサイズの似たような１枚画像でもいいし、 SEOを考えてHTMLとかで作り込んでも良いです。 </div> <script type="text/javascript"> var so = new SWFObject("hoge.swf", "hogemovie", "200", "100", "7", "#336699"); so.write("flashcontent"); </script>
パラメーターはそれぞれ、
("swfへのパス：blogなら絶対パスにしとくと便利", "ムービーの名前：あんまり気にせず適当に", "swfの幅", "swfの高さ", "必要とするFlashPlayerのバージョン：小数点以下にも対応", "背景色");
となってます。
１ページ中に、複数個のswfを埋め込むときはIDの部分をそれぞれ固有のIDにしておきます。blog等のアーカイブページで複数個表示される場合があるので、swfファイルの名前にしておくといいかも。この例ならhogeにするとか
これで、自分のWebサーバーのどの階層からでもSWFObjectによるswf埋め込みができます。めでたし。
SWFObjectの詳細はこちら。
追記：
ID要素すらしてしなくてもよい、もっと手軽な方法をBicRe様がご紹介くださってます。SWFObjectを語る上では必見。
「BicRe: SWFObjectの便利なメソッド」
それを使って、ブログパーツを提供する際の埋め込みコードをシンプルにすることができます。
「BicRe: ジョネレーター最高！」
ということで、僕のブログパーツの埋め込みタグを修正してみたのだけど、うまくいかない。。他の方の成功事例記事もあるし、動作の仕組みも理解できたのだけど何故？タイプミスはないはずなんだけどなぁ。
- Newer: Flash 9 PSD Importer
- Older: Fuse Kitの使用方法チュートリアルビデオ
Comments:7
- nai 07-05-14 (月) 11:25
-
検索からこのページに迷い込み（笑）、細かな情報が多いのにビックリしました。
日々、テクニックは進化しているんだな～と思い、これからも日々精進だ！と気持ちを新たにしています。追記のおせっかい？
SWFObjectのバージョンが「1.5」に変わっていますよ - tera 07-05-16 (水) 1:49
-
＞nai様
こんにちは。コメントありがとうございます。
このページに迷い込むとは、相当迷われましたね。w
今後ともよろしくお願いします。
バージョンアップの件、了解しました。どうもです。 - sarutaros 08-02-15 (金) 16:03
-
随分前にﾌﾞｯｸﾏｰｸしておいたのを
今読みました。
すすすごい！
ありがとうございます。 - tera 08-02-22 (金) 10:45
-
＞sarutaros様
どうもこんにちは。
参考になれば何よりです。
今後ともよろしくお願いいたします。 - さいきゆみ 08-03-29 (土) 13:14
-
こんにちは貴重な情報ありがとうございます。
早速使ってみましたが、
http://極真館北摂.com/kyokushin.html
中央の文字の部分を簡単なフラッシュにして埋め込んでみたら、IEでは表示されませんが、ファイヤーフォックスとオペラでは表示されます。
いろいろ調べましたが、どうも古いフラッシュが入っているとダメみたいです。
私のパソコンのせいみたいで何回もフラッシュインストールしても見れないのです。
自動でインストールの画面になる方法が今ひとつわからないです。
ご参考までに。失礼しました。 - M-STANDARD 08-06-03 (火) 15:58
-
参考になりました。ありがとうございます。
- mya～ 11-08-12 (金) 4:14
-
はじめまして、自作でＥＣショップを作成中の初心者です。
SWFobject.jsを使ってflashの埋め込みを試しているのですがなぜか反映されません。SWFObject is not defined とエラー表示がでていますが、ｊｓが読まれていないということなんでしょうか。
よろしければご教授ください。指定したデレクトリにはswfとflaファイルをアップしてリンクでは正常に確認できるのですが、、、
Trackbacks:3
- Trackback URL for this entry
- http://www.trick7.com/blog/2006/09/12-165342.php/trackback
- Listed below are links to weblogs that reference
- お手軽にSWFObjectでswfを埋め込む方法 from trick7
- pingback from swfをSWFObjectでページに埋め込む - ウェブミルク 09-02-14 (土) 8:53
-
[...] と、Webで使えるテクニック！Webで困ったときのﾒﾓ帳さんで書かれていて、もとはtrick7さんのお手軽にSWFObjectでswfを埋め込む方法で書かれてあったので、これからこれを使っていこうと思い、以下は引用メモ。 [...]
- pingback from アイキャッチにFLASHを使用する « 海遊旅人 遊行編 10-02-28 (日) 19:12
-
[...] 「trick7.com」の「お手軽にSWFObjectでswfを埋め込む方法」を参考に [...]
- pingback from ガードブロッキング的ブログ（失敗） - 動画をアップロードしようとしたんだけど 10-08-13 (金) 21:42
-
[...] trick7 [...]
