Incorporación de contenido SWF en HTML

Adobe AIR 1.0 y posterior

Se puede incorporar contenido SWF en el contenido HTML dentro de una aplicación de AIR de igual modo como se haría en un navegador. Incorpore el contenido SWF utilizando una etiqueta object una etiqueta embed o ambas.

Nota: una práctica normal de desarrollo es utilizar ambas etiquetas object y embed para mostrar el contenido SWF en una página HTML. Esta práctica no tiene ninguna ventaja en AIR. Se puede utilizar la etiqueta object de estándar W3C por si sola en el contenido que se muestra en AIR. Al mismo tiempo, se puede continuar utilizando las etiquetas object y embed juntas, si es necesario, para el contenido HTML que también se muestra en un navegador.

Si ha activado la transparencia en el objeto NativeWindow que muestra el contenido HTML y SWF, AIR no mostrará el contenido SWF si el modo de ventana ( wmode ) utilizado para incorporar el contenido se establece en el valor: window . Para ver contenido SWF en una página HTML de una ventana transparente, establezca el parámetro wmode como opaque o transparent . window es el valor predeterminado para wmode , por lo que si no especifica ningún valor, no podrá ver el contenido.

En el siguiente ejemplo se muestra el uso de la etiqueta HTML object para mostrar un archivo SWF dentro del contenido HTML. El parámetro wmode se establece como opaque para que el contenido se visualice, incluso si el objeto NativeWindow subyacente es transparente. El archivo SWF se carga desde el directorio de la aplicación, pero se puede utilizar cualquiera de los esquemas de URL admitidos por AIR. (La ubicación desde donde se carga el archivo SWF determina el entorno limitado de seguridad en el que AIR coloca el contenido).

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

También puede utilizar un script para cargar el contenido de forma dinámica. En el siguiente ejemplo se crea un nodo object para mostrar el archivo SWF especificado en el parámetro urlString . En el ejemplo se añade el nodo de un elemento secundario con el ID especificado por el parámetro 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>

El contenido SWF no se visualiza si el objeto HTMLLoader se escala o se gira, o si la propiedad alpha se establece en un valor que no sea 1.0. Antes de AIR 1.5.2, el contenido SWF no se visualizaba en ventanas transparentes independientemente del valor dado wmode .

Nota: cuando un objeto SWF incorporado intenta cargar un activo externo (por ejemplo, un archivo de vídeo), el contenido SWF podría no procesarse correctamente si no se proporciona una ruta absoluta al vídeo en el archivo HTML. Sin embargo, un objeto SWF incorporado sí puede cargar un archivo de imagen externa con una ruta relativa.

El siguiente ejemplo describe cómo se pueden cargar activos externos a través de un objeto SWF incorporado en contenido 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"); 
      
    }

En el siguiente ejemplo de ActionScript, la ruta de imagen transferida por el archivo HTML se lee y la imagen se carga en el escenario

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