Osadzanie treści SWF w kodzie HTML

Adobe AIR 1.0 i starsze wersje

W aplikacji AIR treść SWF można osadzić w treści HTML tak, jak przy użyciu przeglądarki. Treść SWF można osadzić za pomocą znacznika object , znacznika embed lub obu.

Uwaga: Częstą praktyką w programowaniu stron internetowych jest użycie obu znaczników object i embed w celu wyświetlenia treści SWF na stronie HTML. Ta praktyka nie przynosi korzyści w środowisku AIR. W treści można użyć samego znacznika object w standardzie W3C, aby został on wyświetlony w środowisku AIR. W razie konieczności w tym samym czasie można nadal wspólnie używać znaczników object i embed dla treści HTML, która jest również wyświetlana w przeglądarce.

W przypadku włączenia przezroczystości w obiekcie NativeWindow wyświetlającym treść HTML i SWF środowisko AIR nie wyświetla treści SWF w przypadku, gdy tryb okna ( wmode ) używanego do osadzania treści jest ustawiony na wartość: window . W celu wyświetlenia treści SWF na stronie HTML przezroczystego okna należy ustawić parametr wmode na wartość opaque lub transparent . Wartość window jest wartością domyślną dla wmode , dlatego w przypadku nieokreślenia wartości treść może nie być wyświetlana.

Poniższy przykład ilustruje użycie znacznika HTML object w celu wyświetlenia pliku SWF w zawartości HTML. Parametr wmode jest ustawiany na opaque , co pozwala na wyświetlenie treści, nawet jeśli zasadniczy obiekt NativeWindow jest przezroczysty. Plik SWF ładowany jest z katalogu aplikacji, ale możliwe jest użycie dowolnego schematu URL obsługiwanego przez środowisko AIR. (Lokalizacja, z której ładowany jest plik SWF, wskazuje obszar izolowany zabezpieczeń, w którym środowisko AIR umieszcza treść).

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

Można użyć również skryptu, aby załadować treść dynamicznie. Poniższy przykład tworzy węzeł object , aby wyświetlić plik SWF określony w parametrze urlString . Przykład dodaje węzeł jako element podrzędny strony z ID określonym w parametrze elementID :

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

Treść SWF nie jest wyświetlana, jeśli obiekt HTMLLoader jest skalowany lub obracany, lub jeśli właściwość alpha zostanie ustawiona na wartość inną niż 1.0. W wersjach wcześniejszych niż AIR 1.5.2 treść SWF nie była wyświetlana w przezroczystym oknie, niezależnie od ustawionej wartości wmode .

Uwaga: Gdy osadzony obiekt SWF próbuje wczytać zasób zewnętrzny, taki jak plik wideo, zawartość SWF może nie być prawidłowo renderowana, jeśli bezwzględna ścieżka do pliku wideo nie jest podana w pliku HTML. Osadzony obiekt SWF może wczytać zewnętrzny plik obrazu za pomocą ścieżki względnej.

Poniższy przykład przedstawia, w jaki sposób można wczytywać zasoby zewnętrzne za pośrednictwem obiektu SWF osadzonego w zawartości HTML.

    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"); 
      
    }

W poniższym przykładzie kodu ActionScript ścieżka pliku obrazu przekazana przez plik HTML jest odczytywana i obraz jest wczytywany na stole montażowym.

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