Вложение SWF-содержимого в HTML

Adobe AIR 1.0 и более поздних версий

В приложении AIR SWF-содержимое можно встроить в HTML-содержимое точно так же, как в обозревателе. Встроить SWF-содержимое можно с помощью тега object , тега embed или обоих.

Примечание. Общие рекомендации по веб-разработке предполагают использование и тега object , и тега embed для отображения SWF-содержимого на HTML-странице. Эти рекомендации не помогут при работе с AIR. Тег object стандарта W3C может сам по себе использоваться в содержимом, отображаемом в AIR. В то же время теги object и embed могут при необходимости использоваться вместе — такая необходимость может возникнуть при отображении HTML-содержимого в обозревателе.

Если в объекте NativeWindow, отображающим содержимое HTML и SWF, включена прозрачность, то AIR не отобразит содержимое SWF, если режим окна ( wmode ), в которое внедрено содержимое, принимает значение window . В данном случае для отображения содержимого SWF на прозрачной странице HTML задайте для параметра wmode значение opaque или transparent . По умолчанию параметр wmode использует значение window , поэтому содержимое может не отображаться, если не задать требуемое значение.

В примере ниже показано, как с помощью тега HTML object отобразить SWF-файл в содержимом HTML. Параметру wmode присваивается значение opaque , чтобы содержимое отображалось даже в том случае, когда под ним находится прозрачный объект NativeWindow. SWF-файл загружается из каталога приложения, но использоваться может любая схема URL-адресов, поддерживаемая AIR. (Расположение, из которого загружается 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>

Можно также загрузить содержимое динамически при помощи сценария. В следующем примере узел object создается для отображения SWF-файла, заданного параметром urlString . В примере узел добавляется в качестве дочернего элемента страницы с ID, указанным в параметре 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>

Содержимое SWF не отображается при изменении масштаба или повороте объекта HTMLLoader, а также если свойству alpha присвоено значение, отличное от 1.0. В версиях, предшествовавших AIR 1.5.2, содержимое SWF не отображалось в окне с прозрачностью при любых значениях wmode .

Примечание. Когда внедренный объект SWF пытается загрузить внешний ресурс, например видеофайл, SWF-содержимое может быть некорректно визуализировано, если в HTML-файле не указан абсолютный путь к видеофайлу. Тем не менее внедренный объект SWF может загрузить внешний файл изображения с использованием относительного пути.

В этом примере демонстрируется, как внешние ресурсы можно загрузить через объект SWF, внедренный в 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"); 
      
    }

В следующем примере 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; 
                  } 
            } 
      } 
}