HTML への SWF コンテンツの埋め込み

Adobe AIR 1.0 およびそれ以降

ブラウザーでの埋め込みと同じ方法で、AIR アプリケーション内で HTML コンテンツに SWF コンテンツを埋め込むことができます。SWF コンテンツを埋め込むには、 object タグまたは embed タグを使用するか、両方のタグを使用します。

注意: Web 開発の一般的な方法では、 object タグと embed タグの両方を使用して HTML ページ内に SWF コンテンツを表示します。この方法は AIR では利点がありません。AIR では、W3C 標準の object タグを単独で使用してコンテンツを表示できます。同時に、HTML コンテンツをブラウザーにも表示する場合は、必要に応じて object タグと embed タグの両方を使用することもできます。

HTML コンテンツと SWF コンテンツを表示する NativeWindow オブジェクトで透明度を有効にしている場合、コンテンツを埋め込むために使用されるウィンドウモード( wmode )が値 window に設定されているとき、AIR は SWF コンテンツを表示しません。透明ウィンドウの HTML ページで SWF コンテンツを表示するには、 wmode パラメーターを opaque または transparent に設定します。 wmode のデフォルト値は window なので、値を指定しなかった場合、コンテンツは表示されない可能性があります。

次の例では、HTML の object タグを使用して SWF ファイルを HTML コンテンツ内に表示する方法を示します。基になる NativeWindow オブジェクトが透明の場合でもコンテンツが表示されるように、 wmode パラメーターが opaque に設定されています。SWF ファイルはアプリケーションディレクトリから読み込まれますが、AIR でサポートされている任意の URL スキームから読み込むことができます。どこから SWF ファイルを読み込むかによって、コンテンツの挿入先のセキュリティサンドボックスが決まります。

<object type="application/x-shockwave-flash" width="100%" height="100%"> 
    <param name="movie" value="app:/SWFFile.swf"></param> 
    <param name="wmode" value="opaque"></param> 
</object>

スクリプトを使用してコンテンツを動的に読み込むこともできます。次の例では、 object ノードを作成して urlString パラメーターに指定された SWF ファイルを表示します。この例では、 elementID パラメーターによって指定された ID を使用してページエレメントの子としてノードを追加します。

<script> 
function showSWF(urlString, elementID){ 
    var displayContainer = document.getElementById(elementID); 
    var flash = createSWFObject(urlString, 'opaque', 650, 650); 
    displayContainer.appendChild(flash); 
} 
function createSWFObject(urlString, wmodeString, width, height){ 
    var SWFObject = document.createElement("object"); 
    SWFObject.setAttribute("type","application/x-shockwave-flash"); 
    SWFObject.setAttribute("width","100%"); 
    SWFObject.setAttribute("height","100%"); 
    var movieParam = document.createElement("param"); 
    movieParam.setAttribute("name","movie"); 
    movieParam.setAttribute("value",urlString); 
    SWFObject.appendChild(movieParam); 
    var wmodeParam = document.createElement("param"); 
    wmodeParam.setAttribute("name","wmode"); 
    wmodeParam.setAttribute("value",wmodeString); 
    SWFObject.appendChild(wmodeParam);      
    return SWFObject; 
} 
</script>

HTMLLoader オブジェクトが拡大/縮小または回転されている場合、または alpha プロパティが 1.0 以外の値に設定されている場合、SWF コンテンツは表示されません。AIR 1.5.2 より前のバージョンでは、どの wmode 値が設定されていようと、SWF コンテンツは透明ウィンドウに表示されませんでした。

注意: 埋め込まれた SWF オブジェクトがビデオファイルなどの外部アセットを読み込もうとすると、ビデオファイルの絶対パスが HTML ファイルで指定されていない場合に SWF コンテンツが正しくレンダリングされないことがあります。ただし、埋め込まれた SWF オブジェクトでは、相対パスを使用して外部イメージファイルを読み込むことができます。

次の例では、HTML コンテンツに埋め込まれた SWF オブジェクトを通じて外部アセットを読み込む方法を示します。

    var imageLoader; 
     
    function showSWF(urlString, elementID){ 
        var displayContainer = document.getElementById(elementID); 
        imageLoader = createSWFObject(urlString,650,650); 
        displayContainer.appendChild(imageLoader); 
    } 
 
    function createSWFObject(urlString, width, height){ 
    
        var SWFObject = document.createElement("object"); 
            SWFObject.setAttribute("type","application/x-shockwave-flash"); 
            SWFObject.setAttribute("width","100%"); 
            SWFObject.setAttribute("height","100%"); 
             
        var movieParam = document.createElement("param"); 
            movieParam.setAttribute("name","movie"); 
            movieParam.setAttribute("value",urlString); 
            SWFObject.appendChild(movieParam); 
             
        var flashVars = document.createElement("param"); 
            flashVars.setAttribute("name","FlashVars");    
    
        //Load the asset inside the SWF content. 
            flashVars.setAttribute("value","imgPath=air.jpg");    
            SWFObject.appendChild(flashVars); 
    
        return SWFObject; 
    } 
    function loadImage() 
    { 
      showSWF("ImageLoader.swf", "imageSpot"); 
      
    }

次に示す ActionScript の例では、HTML ファイルによって渡されるイメージのパスが読み取られ、そのイメージがステージに読み込まれます。

package 
{ 
      import flash.display.Sprite; 
      import flash.display.LoaderInfo; 
      import flash.display.StageScaleMode; 
      import flash.display.StageAlign; 
      import flash.display.Loader; 
      import flash.net.URLRequest; 
      
      public class ImageLoader extends Sprite 
      { 
            public function ImageLoader() 
            { 
                  
                  var flashvars = LoaderInfo(this.loaderInfo).parameters; 
                  
                  if(flashvars.imgPath){ 
                        var imageLoader = new Loader(); 
                        var image = new URLRequest(flashvars.imgPath); 
                        imageLoader.load(image); 
                        addChild(imageLoader); 
                        imageLoader.x = 0; 
                        imageLoader.y = 0; 
                        stage.scaleMode=StageScaleMode.NO_SCALE;                    
                        stage.align=StageAlign.TOP_LEFT; 
                  } 
            } 
      } 
}