Intégration d’un contenu SWF en HTML

Adobe AIR 1.0 et les versions ultérieures

Vous pouvez intégrer un contenu SWF dans un contenu HTML au sein d’une application AIR comme vous le feriez dans un navigateur. Intégrez le contenu SWF à l’aide d’une balise object, d’une balise embed ou de toutes les deux.

Remarque : une pratique courante de développement sur le Web consiste à utiliser à la fois une balise object et une balise embed pour afficher un contenu SWF dans une page HTML. Vous ne tirez aucun avantage de cette pratique avec AIR. Vous pouvez utilisez la seule balise object, conforme à la norme W3C, dans le contenu pour l’afficher dans AIR. Cependant, vous pouvez continuer à utiliser les balises object et embed ensemble, le cas échéant, pour du contenu HTML qui est également affiché dans un navigateur.

Si vous avez activé la transparence dans l’objet NativeWindow qui affiche le contenu HTML et SWF, AIR n’affiche pas le contenu SWF lorsque le mode Fenêtre (wmode) activé pour intégrer le contenu est défini sur la valeur window. Pour afficher le contenu SWF dans une page HTML de fenêtre transparente, définissez le paramètre wmode sur opaque ou transparent. Etant donné que le paramètre window correspond à la valeur par défaut de wmode, le contenu risque de ne pas être affiché si vous ne stipulez pas de valeur.

L’exemple ci-dessous illustre l’utilisation de la balise object HTML pour afficher un fichier SWF au sein d’un contenu HTML. Le paramètre wmode étant défini sur opaque, le contenu est affiché même si l’objet NativeWindow sous-jacent est transparent. Le fichier SWF est chargé à partir du répertoire de l’application, mais vous pouvez utiliser tout modèle d’URL pris en charge par AIR. L’emplacement à partir duquel le fichier SWF est chargé détermine le sandbox de sécurité dans lequel AIR place le contenu.

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

Vous pouvez également utiliser un script pour charger un contenu dynamiquement. L’exemple ci-dessous crée un nœud object pour afficher le fichier SWF spécifié dans le paramètre urlString. L’exemple ajoute le nœud en tant qu’enfant de l’élément de page avec l’ID spécifiée par le paramètre 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>

Le contenu SWF n’est pas affiché si l’objet HTMLLoader est mis à l’échelle ou pivoté, ou si la propriété alpha est définie sur une valeur autre que 1.0. Dans les versions d’AIR antérieures à 1.5.2, le contenu SWF ne s’affichait pas dans une fenêtre transparente, quelle que soit la valeur définie de wmode.

Remarque : lorsqu’un objet SWF incorporé tente de charger un actif externe, notamment un fichier vidéo, il est possible que le contenu SWF ne soit pas rendu correctement si un chemin absolu vers le fichier vidéo n’est pas fourni dans le fichier HTML. Un objet SWF incorporé peut néanmoins charger un fichier image externe à l’aide d’un chemin relatif.

L’exemple suivant explique comment charger les actifs externes via un objet SWF incorporé dans un contenu 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"); 
      
    }

Dans l’exemple ActionScript suivant, le chemin d’image transmis par le fichier HTML est lu et l’image est chargée sur la scène :

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