HTML에 SWF 내용 포함

브라우저의 경우와 같이 AIR 응용 프로그램 내에서 HTML 내용에 SWF 내용을 포함할 수 있습니다. object 태그와 embed 태그 중 하나 또는 둘 다를 사용하여 SWF 내용을 포함합니다.

HTML 및 SWF 내용을 표시하는 NativeWindow 객체에서 투명도를 설정한 경우, 내용을 포함하는 데 사용되는 윈도우 모드( wmode )가 window 값으로 설정되면 SWF 내용이 표시되지 않습니다. 투명 윈도우의 HTML 페이지에서 SWF 내용을 표시하려면 wmode 매개 변수를 opaque 또는 transparent 로 설정하십시오. window 가 wmode 의 기본값이므로 값을 지정하지 않으면 내용이 표시되지 않을 수 있습니다.

다음 예제에서는 HTML object 태그를 사용하여 HTML 내용 내에 SWF 파일을 표시하는 방법을 보여 줍니다. 기본 NativeWindow 객체가 투명한 경우에도 내용이 표시되도록 wmode 매개 변수가 opaque 로 설정됩니다. SWF 파일은 응용 프로그램 디렉토리에서 로드되지만 사용자는 AIR에서 지원하는 모든 URL 스킴을 사용할 수 있습니다. SWF 파일이 로드되는 위치에 따라 AIR이 내용을 배치하는 보안 샌드박스가 결정됩니다.

<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>

또한 스크립트를 사용하여 내용을 동적으로 로드할 수 있습니다. 다음은 urlString 매개 변수에 지정된 SWF 파일을 표시하기 위해 object 노드를 만드는 예제입니다. 이 예제에서는 노드를 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 약관을 적용받지 않습니다.