ようこそゲストさん

文系デザイナーが1から学び直すFlash+ActionScript

2009/08/06(木) [ SWFObject ] HTMLにFlashを配置するときの、いまどき式の方法

仕方ないので、Flash側のパブリッシュ機能に頼るのはやめて、ごく一般的に使われているHTMLへのFlashの配置方法をおぼえてみます。もともとは、embedタグとか、objectタグとか、そういうのを使っていた記憶がありますが、最近は、javascriptを呼び出して表示させる(&Flashのバージョン検知をする)というのが主流なのだとか。そのときに使うのが、SWFObjectというものだそうです。

[参考] SWFObjectのドキュメントを日本語に翻訳してみたよ
http://www.trick7.com/blog/2006/06/15-135235.php

SWFObjectの中身や仕組みに関する細々とした所には現時点では立ち入らないことにしましょう。なんかファイルをひとつアップして、それをHTML側から読み込んで、指示通りに数行のコードを書いて調整すれば、適当に良い感じにしてくれる、なんだかとっても気の利いた出来合いのプログラム、くらいにとりあえず把握しておきます。

バージョンアップしているので、新しいバージョンでおぼえないといけない様子。

[参考] SWFObject v2.0 ドキュメント日本語訳
http://mtl.recruit.co.jp/blog/2007/10/swfobject_v20.html

これの、いちばん簡単そうな「オプション2」の方法に準拠して書いたものが下記。
http://echo.ktlt.org/flash-study/1-02/
(読み込んでいる1-01.swfは前のポストのswfと同じもの。swfobject.jsと、main.cssは、今後も流用するため、ひとつ上のディレクトリから参照しています。)
HTMLソースを確認してもらえればわかりますが、Flashからパブリッシュしたものとくらべて、思いっきりスッキリしましたね。まったく素の状態のHTMLに、Flashを配置するために書くコードは、ほんのひとケタ行です。でも、ちょっとバグがあるようなので、調整してあります。内容は以下の通り。

[参考] SWFObjectで縦横100%表示するときって??
http://www.ekkun.com/2009/07/31/swfobject-has-problem-about-100percent-height.html

CSS側でHTMLとbodyの要素を100%指定しておかないと、SWFObject側で100%指定しても、Firefoxとかの表示でバグになり、Flashが全く見えなくなるみたいです。(IEでは何となく平気でした。)あと、HTML要素に「overflow: hidden;」というのを入れてあげないと、100%表示なのにスクロールバーが出てきてしまう感じになるようなので、それも付加。

仕上げに、ブラウザ標準のマージンとパディングもCSS側の設定でゼロにしていしてしまいます。これで、最初のFlashが、全画面に、隙間無くピッタリ表示されるようになりました。

ふぅ。なんとか一応、いわゆる「フルFlash仕様」ができましたね。

名前:  非公開コメント   

  • TB-URL  http://ktlt.org/echo/adiary/adiary.cgi/rint/018/tb/