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

ブラウザーでの埋め込みと同じ方法で、AIR アプリケーション内で HTML コンテンツに SWF コンテンツを埋め込むことができます。SWF コンテンツを埋め込むには、 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 コンテンツは透明ウィンドウに表示されませんでした。

次の例では、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; 
                  } 
            } 
      } 
}

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。