web dimension maker

Adobe - デベロッパーセンター : ラクラクかんたん！Flash Video組み込み手法に載っている Express Install が気になってました。そこで、これが同封されているというのを知ったので、自サイトの swfobject を 1.5 から 2.1 にバージョンアップしました！

前回の記事のサンプルから使用しています。また、AIR 版のジェネレーターがあるので、基本的にはそれを活用しました! かなり便利です!!

• サンプル

Win IE6/7 FF2/3 Opera9.63 safari3 google Chrome で検証しました。Mac は未検証です。上記のサンプルでのコードを下に書いてみます。

CSS,JS 部分

<style type="text/css">
<!--
html, body {overflow:hidden;}
body {position:fixed; width:100%; height:100%; margin:0; padding:0;}
-->
</style>
<script src="/js/swfobject/swfobject2.1.js" type="text/javascript"></script>
<script type="text/javascript">
        var flashvars = {};
                flashvars.url = "/swf/sample2009/01/golf.swf";
                flashvars.color = "0xFFFFFF";
        var params = {}; // param要素 必須の要素とかあるのか？
                params.play = "true";
                params.loop = "false";
                params.quality = "best";
                params.scale = "noscale";
                params.salign = "tl";
                params.bgcolor = "#000000";
                params.allowfullscreen = "true";
                params.allowscriptaccess = "sameDomain";
        var attributes = {}; // object要素に設定する属性 とりあえずテストとして、id , class を設定してみる。
                attributes.id = "flashId";
                attributes.styleclass = "flashClass";
        swfobject.embedSWF("/swf/sample/main.swf", "flash", "100%", "100%", "10", "/swf/expressinstall/expressinstall.swf", flashvars, params, attributes);
</script>

nondelion.com - 続・swfobject で flash を Window 内に全画面表示 の記事を参考にさせて頂いて、全画面表示時のCSSを記載してます。

flashvars、params、attributes はオブジェクト型(?)で生成しています。

1. 1. flashvars では、AS 側で読み込む SWF の URL と、右下のロゴ(?)の色を渡しています。
2. 2. params は、XHTML の param要素 になる部分です。ここに何を指定するかは、Flashで使える属性(パラメータ):Web Design Tips を参考にしました。
3. 3. attributes は、XHTML の object要素に設定する属性です。特になくてもかまわないかと思いますが、実験なので、id と class をつけてみました。

その他、詳しいことは、八角研究所 : FlashをHTMLに貼るライブラリ swfobject 2 を使う を参考にしました。

Express Install

embedSWFメソッド の第六引数です。これで、自サイト内で FP のバージョンアップができます！簡単ですね！

XHTML 部分

<div id="flash">
<p>Flashが表示できません。表示させるには、Javascriptをonにするか、最新の<a href="http://www.adobe.com/go/getflashplayer" class="blank">FlashPlayer</a>をダウンロードしてください。</p>
</div>

id が embedSWFメソッド の第二引数です。

おまけ

ちゃぶ台メモ - IEのFlash Playerが遅い件と、wmodeとの悩ましい関係を考慮して、param要素には wmode をつけませんでした。

気になること

swfobject は javascript で object要素 や param要素 を挿入するというのが基本なので、その object要素 や param要素 が きちっと valid になってるのかが気になるところです。

つまり、params と attributes に何を設定するかなんですが・・・。Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト を見ても、「まるまるは、あったほうがよい」程度なんですよね?。どうなんでしょう??

最後に

参考にさせていただいた皆様に感謝です!!