Einbetten von SWF-Inhalten in HTML

Adobe AIR 1.0 und höher

Sie können beim Einbetten von SWF-Inhalt in HTML-Inhalt in einer AIR-Anwendung genauso verfahren wie in einem Browser. Betten Sie den SWF-Inhalt mit einem object-Tag, einem embed-Tag oder beiden in.

Hinweis: Bei der Webentwicklung ist es üblich, sowohl einen object-Tag als auch einen embed-Tag zum Anzeigen von SWF-Inhalt in einer HTML-Seite zu verwenden. Diese Praxis bringt in AIR keinerlei Vorteile. Sie können das dem W3C-Standard entsprechende object-Tag allein in Inhalt verwenden, der in AIR angezeigt werden soll. Dennoch können Sie bei Bedarf das object- und den embed-Tag weiterhin für HTML -Inhalt verwenden, der zusätzlich in einem Browser angezeigt werden soll.

Wenn Sie die Transparenz für das NativeWindow-Objekt, in dem der HTML- und SWF-Inhalt angezeigt wird, aktiviert haben, zeigt AIR den SWF-Inhalt nicht an, wenn der Fenstermodus (wmode) zum Einbetten des Inhalts auf den Wert window eingestellt ist. Zum Anzeigen von SWF-Inhalt in einer HTML-Seite eines transparenten Fensters muss der wmode-Parameter auf opaque oder transparent eingestellt werden. Da window der Standardwert für wmode ist, wird der Inhalt möglicherweise nicht angezeigt, wenn Sie keinen Wert angeben.

Das folgende Beispiel veranschaulicht die Verwendung des HTML-object-Tags zum Anzeigen einer SWF-Datei in HTML-Inhalt. Der wmode-Parameter ist auf opaque eingestellt, sodass der Inhalt auch dann angezeigt wird, wenn das zugrunde liegende NativeWindow-Objekt transparent ist. Die SWF-Datei wird aus dem Anwendungsverzeichnis geladen, Sie können allerdings ein beliebiges, von AIR unterstütztes URL-Schema verwenden. (Der Ort, von dem die SWF-Datei geladen wird, bestimmt die Sicherheits-Sandbox, in der AIR den Inhalt ablegt.)

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

Mit einem Skript können Sie Inhalt außerdem dynamisch laden. Das folgende Beispiel erstellt einen object-Knoten zum Anzeigen der im urlString-Parameter angegebenen SWF-Datei. Der Knoten wird als untergeordnetes Element des Seitenelements hinzugefügt, dessen ID vom elementID-Parameter angegeben wird:

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

SWF-Inhalt wird nicht angezeigt, wenn das HTMLLoader-Objekt skaliert oder gedreht wurde oder wenn die alpha-Eigenschaft auf einen anderen Wert als 1.0 eingestellt ist. Vor AIR 1.5.2 wurde SWF-Inhalt grundsätzlich nicht in einem transparenten Fenster angezeigt, unabhängig davon, auf welchen Wert wmode eingestellt war.

Hinweis: Wenn ein eingebettetes SWF-Objekt versucht, ein externes Element wie eine Videodatei zu laden, wird der SWF-Inhalt möglicherweise nicht richtig dargestellt, wenn in der HTML-Datei kein absoluter Pfad zur Videodatei angegeben wurde. Ein eingebettetes SWF-Objekt kann jedoch eine externe Bilddatei über einen relativen Pfad laden.

Das folgende Beispiel zeigt, wie externe Elemente über ein SWF-Objekt geladen werden können, das in HTML-Inhalt eingebettet ist:

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

Im folgenden ActionScript-Beispiel wird der von der HTML-Datei übergebene Pfad der Bilddatei gelesen und das Bild wird auf der Bühne geladen:

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