Clever Geek Handbook

SWFObject 2でFlashを埋め込む

標準に準拠したマークアップを使用してFlashを実装する問題が頻繁に発生しますが、この問題にはよく知られたソリューションSWFObjectがあります。 SWFObject 2では、JavaScriptを使用してFlashを動的に埋め込むことができるだけでなく、標準のマークアップを実装に使用すると静的に静的に埋め込むことができ、JavaScriptが無効になっている場合でも、JavaScriptはマークアップの解決できない問題を修正するだけで、ユーザーにはFlashが表示されます。



ライブラリをダウンロードして、Google CodeのSWFObjectプロジェクトページで追加情報を取得できます。



SWFObjectとは何ですか？



SWFObject 2：





なぜSWFObjectを使用する必要があるのですか？





SWFObject 2を使用するための詳細な正当性は、A List Apart [ http://www.alistapart.com/articles/flashembedcagematch/ ]で公開されている記事Flash Embedding Cage Matchにあります 。



SWFObjectがJavaScriptを使用しているのはなぜですか？



SWFObject 2は主にJavaScriptを使用して、マークアップでは克服できない問題を克服します。





静的または動的のどちらの公開方法が推奨されますか？



SWFObject 2では、2つの異なる方法でFlashを実装できます。

  1. 静的な公開方法では、 Flashおよび代替コンテンツは標準のマークアップを使用して埋め込まれ、JavaScriptはマークアップの克服できない問題を解決するために使用されます。
  2. 動的な公開方法は 、FlashプレーヤーとJavaScriptサポートの十分に新しいバージョンがある場合、代替のFlashコンテンツをコンテンツに置き換えることに基づいています。


静的公開方法の利点：

  1. 標準のマークアップが使用されます。
  2. Flashコンテンツを実装するメカニズムはJavaScriptに依存していないため、Flashは非常に多くのユーザーが利用できます。


動的公開方法の利点：

  1. Internet Explorer 6/7およびOpera 9+のアクティブコンテンツアクティベーションメカニズムをバイパスできます。 Microsoftは、Internet Explorerブラウザーのアクティベーションメカニズムを除外するアップデートをリリースしていることに注意してください[ http://www.swffix.org/devblog/?p=19 ]
  2. JavaScriptアプリケーションに完全に統合します




SWFObjectを使用した静的Flash公開メソッド





ステップ1：標準マークアップを使用してFlashと代替コンテンツをデプロイする



SWFObjectはネストされたオブジェクトメソッドを使用します（Internet Explorerの条件付きコメント付き）[ http://www.alistapart.com/articles/flashembedcagematch/ ]これは、標準を満たし、代替コンテンツを設定できる最適なクロスブラウザマークアップです[ http：//www.swffix .org / testsuite / ]： 

  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject-ステップ1 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
   </ head>
   <本体>
     <div>

       <object classid = "clsid：D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">
         <param name = "movie" value = "myContent.swf" />

         <！-[if！IE]>->
         <オブジェクトタイプ= "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <！-<！[endif]->
           <p>代替コンテンツ</ p>
         <！-[if！IE]>->
         </ object>
         <！-<！[endif]->

       </ object>

     </ div>
   </ body>
 </ html>


注：ネストされたオブジェクトのメソッドでは、オブジェクト宣言の複製が必要です（外部オブジェクトはInternet Explorer用であり、他のブラウザーの内部オブジェクトです）。オブジェクトの属性またはパラメーターを定義する必要がある場合、外部および内部オブジェクトにそれらを複製する必要があります。

必須の属性：



必須のパラメーター要素：



注：現在のドキュメントへのドメインアクセスを制限する仕様と矛盾するため、codebase属性を使用してAdobeサーバーからFlashインストールURLを指定しないことをお勧めします。 代わりに、Flashプラグインをインストールすることでユーザーがフルバージョンを取得できるというメッセージを含む代替コンテンツを使用します。



HTMLを使用してFlashコンテンツを構成する方法



オブジェクト要素のオプション属性[ http://www.w3schools.com/tags/tag_object.asp ]を使用できます。



Flash固有のparam要素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]を使用できます。





代替コンテンツが必要なのはなぜですか？



object要素には、Flashプレーヤーがインストールされていないか、サポートされていない場合に表示される代替コンテンツが含まれる場合があります。 代替コンテンツは検索エンジンで利用できるため、検索エンジン向けにサイトを最適化する際の優れたツールとなります。 プラグイン[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ]なしでユーザーがサイトにアクセスできるようにするには、検索エンジン[ http://www.adobe.com/ devnet / flash / articles / Progress_enhancement_04.html ]と、Flashプラグインをインストールすると、すべての栄光で見ることができることをユーザーに優しく示します。



ステップ2：SWFObjectライブラリの接続



SWFObjectライブラリは、1つの外部JavaScriptファイルで構成されています。 IE、Firefox、Safari、Opera 9+などのそれをサポートするブラウザーでSWFObjectコードがダウンロードされた直後に実行され、DOMが読み込まれた後にDOM操作が実行されます。 

  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject-ステップ2 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />

     <script type = "text / javascript" src = "swfobject.js"> </ script>

   </ head>
   <本体>
     <div>
       <object classid = "clsid：D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">

         <param name = "movie" value = "myContent.swf" />
         <！-[if！IE]>->
         <オブジェクトタイプ= "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <！-<！[endif]->
           <p>代替コンテンツ</ p>
         <！-[if！IE]>->
         </ object>
         <！-<！[endif]->

       </ object>
     </ div>
   </ body>
 </ html>




ステップ3：Flashコンテンツを登録してオプションを設定する



最初に、Flashコンテンツを定義するオブジェクトの外部要素に一意のIDを追加してから、次の引数を指定してswfobject.registerObjectメソッドを呼び出す必要があります。

  1. マークアップで使用される最初の引数（文字列、必須）id。
  2. 2番目の引数（文字列、必須）は、Flashプレーヤーの必須バージョンです。 Flash Player SWFObjectの古いバージョンがインストールされている場合、代替コンテンツの表示を強制します（DOM操作が実行されます）。 通常、Flashプレーヤーのバージョン番号には4つのmajor.minor.release.build要素が含まれます。SWFObjectは最初の3つの番号でのみ機能するため、「WIN 9,0,18,0」（IE）と「Shockwave Flash 9 r18」（他のすべてのブラウザー） ）は「9.0.18」に変換されます。
  3. 3番目の引数（文字列、オプション）は、Adobe Expressインストール[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]をアクティブにするために使用され、高速インストールSWFファイルのURLと等しくなければなりません。 高速インストールでは、必要なバージョンのプラグインがインストールされていない場合、Flashコンテンツの代わりに標準のFlashプラグインダウンロードダイアログが表示されます。 プロジェクトアーカイブには、すでに既製のexpressInstall.swfが含まれています。 さらに、既存のものを変更するか、独自の高速インストールを作成する必要がある場合に備えて、対応するexpressInstall.flaおよびASファイル（SRCディレクトリ内）があります。 高速インストールは（最初の実行中に）1回のみ動作し、WinまたはMacプラットフォームではFlashプレーヤーバージョン6.0.65以降が必要であり、動作するための最小SWFサイズは310x137pxであることに注意してください。 




  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject-ステップ3 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
     <script type = "text / javascript" src = "swfobject.js"> </ script>

     <script type = "text / javascript">
     swfobject.registerObject（ "myId"、 "9.0.0"、 "expressInstall.swf"）;
     </ script>

   </ head>

   <本体>
     <div>

       <object id = "myId" classid = "clsid：D27CDB6E-AE6D-11cf-96B8-444553540000" width = "780" height = "420">

         <param name = "movie" value = "myContent.swf" />
         <！-[if！IE]>->
         <オブジェクトタイプ= "application / x-shockwave-flash" data = "myContent.swf" width = "780" height = "420">

         <！-<！[endif]->
           <p>代替コンテンツ</ p>
         <！-[if！IE]>->
         </ object>
         <！-<！[endif]->

       </ object>
     </ div>
   </ body>
 </ html>




ヒント







SWFObjectを使用した動的公開メソッド





ステップ1：標準マークアップを使用して代替コンテンツを作成する



ダイナミックパブリッシングの方法は、プログレッシブエンハンスメント[ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ]の原則に従い、JavaScriptとFlashの十分なサポートがある場合、代替HTMLコンテンツをFlashコンテンツに置き換えます。 動的公開方法を使用する場合、代替コンテンツを含むHTMLコンテナーを作成し、そのIDを設定する必要があります。 

  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject動的埋め込み-ステップ1 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
   </ head>
   <本体>

     <div id = "myContent">

       <p>代替コンテンツ</ p>
     </ div>

   </ body>
 </ html>




ステップ2：SWFObjectライブラリの接続



SWFObjectライブラリは、1つの外部JavaScriptファイルで構成されています。 IE、Firefox、Safari、Opera 9+などのそれをサポートするブラウザー、または東部のオンロードの場合、ダウンロードした直後にSWFObjectコードが実行され、DOMのロード後にDOM操作が実行されます。 

  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject動的埋め込み-ステップ2 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />

     <script type = "text / javascript" src = "swfobject.js"> </ script>

   </ head>
   <本体>
     <div id = "myContent">
       <p>代替コンテンツ</ p>
     </ div>

   </ body>
 </ html>




ステップ3：JavaScriptを使用してSWFを実装する



swfobject.embedSWF（swfUrl、id、幅、高さ、バージョン、expressInstallSwfurl、flashvars、params、attributes）このメソッドには、5つの必須パラメーターと4つのオプションパラメーターがあります。

  1. wfUrl（文字列、必須）SWFファイルのURL
  2. id（文字列、必須）Flashコンテンツに置き換える必要があるHTML要素（代替コンテンツを含む）のid
  3. width（文字列、必須）SWFの幅
  4. height（文字列、必須）SWFの高さ
  5. version（文字列、必須）このSWFに必要なFlashプレーヤーのバージョン（形式：「major.minor.release」）
  6. expressInstallSwfurl（文字列、オプション）は、高速インストールSWFのURLを設定し、Adobe Expressインストール[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]をアクティブにします。 高速インストールは（最初の実行中に）1回しか機能せず、Flashプレーヤーバージョン6.0.65またはWinまたはMacプラットフォームが必要です。動作するために可能な最小のSWFサイズは310x137pxです。
  7. 名前：値のペアの形式でFlashに渡されるflashvars（文字列、オプション）変数
  8. params（文字列、オプション）名前としてオブジェクトにネストされたparams要素：値のペア
  9. 名前（値のペア）の形式のオブジェクト要素の属性（文字列、オプション）


注：これによりパラメーターの順序が変更されない限り、オプションのパラメーターを省略できます。 オプションのパラメーターを使用したくないが、それに続くパラメーターを使用したい場合は、単にfalseに設定します。 パラメーターflashvars、params、および属性はJavaScriptオブジェクトです。これらのメソッドは、上記のメソッドだけでなく、空のオブジェクト{}を渡すことでもスキップできます。 

  <！DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml：lang = "en">
   <head>
     <title> SWFObject動的埋め込み-ステップ3 </ title>

     <meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
     <script type = "text / javascript" src = "swfobject.js"> </ script>


     <script type = "text / javascript">
     swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"）;
     </ script>

   </ head>
   <本体>
     <div id = "myContent">
       <p>代替コンテンツ</ p>
     </ div>

   </ body>
 </ html>




Flashコンテンツの構成



オブジェクト要素のオプション属性[ http://www.w3schools.com/tags/tag_object.asp ]を使用できます。



Flash固有のparam要素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]を使用できます。





JavaScriptオブジェクトを使用して変数、パラメーター、属性を設定する方法は？



オブジェクトリテラルを使用してJavaScriptオブジェクトを作成できます。 

  <script type = "text / javascript">

 var flashvars = {};
 var params = {};
 var attributes = {};

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、flashvars、params、attributes）;

 </ script>


名前：値のペアは、オブジェクトの作成時に追加できます（注：姓：値のペアの後にコンマを入れないでください）： 

  <script type = "text / javascript">

 var flashvars = {
   name1：「hello」、
   name2： "world"、
   name3： "foobar"
 };
 var params = {
  メニュー：「false」
 };
 var attributes = {
   id： "myDynamicContent"、
  名前： "myDynamicContent"
 };

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、flashvars、params、attributes）;


 </ script>


またはその後： 

  <script type = "text / javascript">

 var flashvars = {};
 flashvars.name1 = "hello";
 flashvars.name2 = "world";
 flashvars.name3 = "foobar";

 var params = {};
 params.menu = "false";

 var attributes = {};
 attributes.id = "myDynamicContent";
 attributes.name = "myDynamicContent";

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、flashvars、params、attributes）;


 </ script>


これは次のように1行で記述できます。 

  <script type = "text / javascript">

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、{name1： "hello"、name2： "world"、name3： "foobar"}、
                    {menu： "false"}、{id： "myDynamicContent"、name： "myDynamicContent"}）;


 </ script>


オプションの引数を使用したくない場合は、falseまたは空のオブジェクトを渡すことができます（注： SWFObject 2.1では、nullまたは0も使用できます）。 

  <script type = "text / javascript">

 var flashvars = false;
 var params = {};
 var attributes = {
   id： "myDynamicContent"、
  名前： "myDynamicContent"
 };

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、flashvars、params、attributes）;


 </ script>


flashvarsオブジェクトは、Flashに渡される変数の処理を簡素化することを目的としています;必要に応じて、それを無視して、paramsオブジェクトにflashvarsを渡すことができます。 

  <script type = "text / javascript">

 var flashvars = false;
 var params = {
  メニュー：「false」、
   flashvars： "name1 = hello＆name2 = world＆name3 = foobar"
 };
 var attributes = {
   id： "myDynamicContent"、
  名前： "myDynamicContent"

 };

 swfobject.embedSWF（ "myContent.swf"、 "myContent"、 "300"、 "120"、 "9.0.0"、
                    「expressInstall.swf」、flashvars、params、attributes）;

 </ script>




ヒント







SWFObject 1.5からSWFObject 2への移行



  1. SWFObject 2にはSWFObject 1.5との下位互換性はありません
  2. できればすべてのJavaScriptコードはheadセクションにある
  3. ライブラリ名が小文字になりました：SWFObjectではなくswfobject
  4. メソッドは、（SWFObject 1.5のSWFObjectインスタンスの代わりに）ライブラリを介してのみ使用できます。
  5. APIは最新です：[ http://code.google.com/p/swfobject/wiki/api ]
  6. SWFObject 2は、FlashとJavaScriptを十分にサポートしている場合、指定されたHTMLブロックを代替要素（コンテナ要素を含む）で完全に置き換え、SWFObject 1.5は指定されたコンテナのコンテンツのみを置き換えます。 id属性を明示的に指定していない場合、オブジェクト要素は、指定されたHTMLコンテナのIDを代替コンテンツとともに自動的に継承します




UFOからSWFObject 2への移行



  1. SWFObject 2は、FlashとJavaScriptを十分にサポートしている場合、コンテナ要素を含む代替コンテンツコンテンツで指定されたHTMLブロックを置き換えますが、UFOは指定されたコンテナのコンテンツのみを置き換えます。 id属性を明示的に指定していない場合、オブジェクト要素は、指定されたHTMLコンテナのIDを代替コンテンツとともに自動的に継承します
  2. SWFObject 2にはsetcontainercssがありません。同様の機能がSWFObject JavaScript APIによって提供されています：swfobject.createCSS（selStr、declStr）[ http://code.google.com/p/swfobject/wiki/api ]




SWFObject 2 MIMEはapplication / xhtml + xmlをサポートしていますか？



SWFObject 2はXML MIMEタイプをサポートしていません;これは意識的な決定です。

サポートしない理由はいくつかあります。





コメントで提案された追加：



一般的なJSフレームワークにFlashを実装するためのツール



jQuery- jQuery Flashプラグイン

mootools- Swiff



WMODE



特筆に値するパラメーター。

wmodeは、window、opaque、transparentの値を取り、Webページ上のFlashの表示モードを決定します。

windowはデフォルト値です。このモードでは、（ページ内の）フラッシュに別のウィンドウが使用されます。このモードの主な問題は、フラッシュのポップアップの理由であるzオーダーに関係なく、ページの要素の上にフラッシュが表示されることですメニューやその他のトラブル。

不透明 -重複してはならないページ要素と重複しない不透明フラッシュ。

透明な-前の例のように、HTMLページの背景が透けて見える透明なフラッシュは、重複してはならないものと重複しませんが、このモードでは、アニメーションの使用時にパフォーマンスの問題が発生する可能性があります。

残念ながら、wmodeはフラッシュムービーとLinuxの他の要素との重複の問題を解決しません。少なくともFF3では間違いなく解決します。



繰り返しますが、すべてのパラメーターの説明へのリンクhttp://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701&sliceId=1



翻訳のソース：マスター向けデザイン


More articles:


All Articles