ГлавнаяПо делу › SWFObject2 Документация на русском языке.

SWFObject2 Документация на русском языке.

December 29th, 2008

Что такое SWFObject?

SWFObject 2:

Зачем использовать SWFObject?

SWFObject 2:

Статья в журнале A List Apart, Flash Embedding Cage Match [ http://www.alistapart.com/articles/flashembedcagematch/ ] отлично обосновуящая использование SWFObject 2.

Зачем SWFObject использует JavaScript?

SWFObject 2 использует JavaScript главным образом для решения задач которые невозможно реализовать, используя один лишь язык разметки страниц; А именно:

Динамически или статический способ публикации контента?

SWFObject 2 имеет два отдельных способа для встраивания контента отображаемого Flash Playerом:

  1. Статический способ публикации встраивает Flash и альтернативное содержание страницы, используя стандартный язык разметки, JavaScript используется лишь в тех местах где обычного языка разметки не хватает для реализации поставленой задачи
  2. Динамический способ публикации основан на использовании изначально альтернативного содержимого страницы с дальнейшим его замещением Flash содержимым посредством JavaScript если установлена минимально возможная версия Flash Playerа и обозревателем поддерживается JavaScript на достаточном уровне для запуска сценария (все как и в предыдущей версии SWFObject и UFO)

Преимущества статического способа таковы:

  1. Способствует применению стандартной разметки
  2. Механизм встраивания Flash содержимого не зависит от используемого языка написания сценариев, таким образом, Flash содержимое страницы будет доступно более широкому кругу аудитории:
    • Если у вас установлен Flash плагин, но при этом отключена поддержка JavaScript или же используется обозреватель, не поддерживающий JavaScript, вы все же сможете просмотреть Flash содержимое страницы
    • Так же Flash будет отображаться и на таких устройствах как Sony PSP, в которых используется весьма урезанная поддержка JavaScript
    • Флеш содержимое становится доступно для программам чтения RSS потоков

Преимуществами динамического способа являются:

  1. Обходит сообщения "нажмите здесь для активации этого элемента" присутствующие в Internet Explorer 6/7 и Opera 9 и выше. Примите к сведению, что Microsoft сейчас в стадии сворачивания всякого рода активаций в линейке обозревателей Internet Explorer [ http://www.swffix.org/devblog/?p=19 ]
  2. Очень хорошо интегрируется в скриптовые приложения

Статический способ публикации Flash содержимого с помощью SWFObject

Шаг 1: Встраиваем обе, Flash и альтернативную версию наполнения страницы используя стандартный язык разметки

В разметке с SWFObject используется метод вложенных объектов (с характерными для Internet Explorer условными комментариями ) [ http://www.alistapart.com/articles/flashembedcagematch/ ]
дабы обеспечить поддержку наибольшим числом веб-обозревателей средствами стандартной разметки и при поддержке альтернативного содержания страницы [ http://www.swffix.org/testsuite/ ]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
        <title>SWFObject - step 1</title>
            <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1" />
   </head>
             <body>
                   <div>
                       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
                       <param name="movie" value="myContent.swf" />
                                <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
                                 <!--<![endif]-->
                        <p>Альтернативное содержание страницы</p>
                                 <!--[if !IE]>-->
                       </object>
                                 <!--<![endif]-->
                       </object>
                  </div>
             </body>
   </html>

ПРИМЕЧАНИЕ: Способ с вложенными объектами требует двойного определения тега object (внешний тэг object используется для веб-обозревателя Internet Explorer, а внутренний для всех остальных обозревателей ) поэтому необходимо прописывать свойства тэга object и вложенные значения для тега param дважды.

Обязательные свойства:

Обязательное значение для тэга param:

ПРИМЕЧАНИЕ: Мы не рекомендуем использовать свойство codebase для указания ресурса установщика Flash плагина напрямую с сервера Adobe, поскольку это выходит за рамки спецификации устанавливающей ограничение на доступ к домену только текущего документа. Вместо этого, рекомендуется использовать альтернативное содержание страницы, информирующее пользователя о том, что для просмотра содержания данной страницы ему необходимо скачать и установить Flash плагин.

Как использовать HTML для конфигурирования Flash содержимого страницы?

Вы можете добавить следующие необязательные но часто используемые свойства [ http://www.w3schools.com/tags/tag_object.asp ] составные части object:

Вы можете использовать следующие необязательные но характерные для Flash
составные части param [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:

В чем необходимость альтернативного содержимого страницы?

Составляющая object позволяет встраивать альтернативное содержание внутри себя в случаях, когда Flash не установлен или не поддерживается установленной программой обозревателем. Так же это содержание страницы будет проиндексировано поисковыми системами, что делает его весьма подходящим средством для индексации в поисковых системах. Резюмируя изложенное, можно сказать что альтернативное содержание страницы служит для тех случаев, когда пользователи совсем не используют или отключили плагины в установленной программе обозревателе [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ], а так же для создания страниц легко индексируемых поисковыми системами [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html ]
для информирования пользователя о том, что установив Flash плагин он сможет посмотреть куда более яркую и полную версию страницы.

ШАГ 2: Включени JavaScript SWFObject библиотеки в заголовок HTML страницы

Библиотека SWFObject состоит всего лишь из одного внешнего файла JavaScript. Сценарий SWFObject начинает исполняться сразу после загрузки файла, запуская обращения к DOM которые начинают исполняться как только загрузится DOM для всех программ обозревателей, таких как IE, Firefox, Safari and Opera 9+ -или же в случаи когда сработает событие onLoad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject- шаг 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
</body>
</html>

ШАГ 3: Запись Flash содержимого страницы с помощью библиотеки SWFObject

Во-первых, добавьте уникальный id внешнему элементу object определяющему Flash содержимое страницы. Во-вторых, добавьте метод swfobject.registerObject с такими его аргументами:

  1. Первый аргумент (обязательный строковой) устанавливает id используемый в разметке.
  2. Второй аргумент (обязательный строковой) устанавливает значение версии Flash проигрывателя, который сможет отобразить содержание страницы. Приводится
    в действие проверка версии SWF файла определяющая нужно ли отобразить Flash содержимое страницы или же обращениями к DOM вывести альтернативное содержание
    страницы. Не смотря на то что обычно номер версии состоит из главная версия.второстепенная.номер релиза.номер сборки, SWFObject принимает во внимание только первые три цифры, потому обе "WIN 9,0,18,0" (IE) или "Shockwave Flash 9 r18" (для случаев всех остальных обозревателей ) переводятся в вид "9.0.18".
  3. Третий аргумент (обязательный строковой) может быть использован для запуска экспресс установщика Adobe [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ] и устанавливает значения URL по которому находится ваш SWF файл экспресс
    установки. Экспресс установщик отображает окно со стандартным диалогом скачивания Flash плагина вместо Flash содержимого станицы в случаи, если нужная версия плагина недоступна. Файл expressInstall.swf используемый по умолчанию упакован с остальными файлами проекта. Архив так же содержит соответствующий expressInstall.fla и файлы AS (смотрите в директории SRC ) на случай если вам потребуется создать свой собственный индивидуальный экспресс установщик. Пожалуйста, примите к сведенью, что экспресс установщик срабатывает только один раз (при своем первом запуске) и поддерживается только в Flash проигрывателях начиная с версии 6.0.65 и выше на всех платформах Win или Mac при минимальном значении размеров SWF файла 310 на 137пх.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
            swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>
  </head>
  <body>
    <div>
      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Подсказки

Динамический способ публикации Flash содержимого с помощью SWFObject

ШАГ 1: Встраивание Flash и альтернативного контента с помощью стандартной разметки

Динамический метод публикации SWFObject следует принципу постепенного улучшения (progressive enhancement) [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ] и заменяет альтернативное HTML содержание страницы на Flash содержание в случае если есть достаточная поддержка JavaScript и Flash. При использовании динамического метода публикации нужно создать HTML слой с альтернативным содержанием страницы и указать для него id:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
      <div id="myContent">
      <p>Альтернативное содержания</p>
    </div>
 </body>
</html>

ШАГ 2: Подключение библиотеки SWFObject в заголовок HTML страницы

Библиотека SWFObject состоит всего лишь из одного внешнего файла JavaScript. Сценарий SWFObject начинает исполняться сразу после загрузки файла, запуская обращения к DOM которые начинаю исполнятся как только загрузится DOM для всех программ обозревателей таких как IE, Firefox, Safari and Opera 9+ -или же в случаи когда сработает событие onLoad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
  <head> 
    <title>SWFObject dynamic embed - step 2</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
      <script type="text/javascript" src="swfobject.js"></script> 
  </head> 
  <body> 
    <div id="myContent"> 
      <p>Alternative content</p> 
    </div> 
  </body> 
</html>

STEP 3: Встраивание SWF файла с помощью JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) имеет пять обязательных и четыре опциональных аргумента:

  1. swfUrl (обязательный строковой) указывает путь к SWF файлу
  2. id (обязательный строковой) указывает id HTML элемента (содержащего альтернативное наполнение страницы) которое нужно будет заменить Flash содержанием
  3. width (обязательный строковой) служит для определения ширины SWF файла
  4. height (обязательный строковой) служит для определения высоты SWF файла
  5. version (обязательный строковой) указывает версию Flash проигрывателя нужного для запуска SWF файла на странице (формат таков: "главный.второстепенный.сборка")
  6. expressInstallSwfurl (опциональный строковой) указывает путь к SWF файлу экспресс установщика (express install) и запускает сам Adobe экспресс установщик [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]. Пожалуйста, примите к сведенью, что экспресс установщик срабатывает только один раз (при своем первом запуске) и поддерживается только в Flash проигрывателях начиная с версии 6.0.65 и выше на всех платформах Win или Mac при минимальном значении размеров SWF файла 310 на 137пх.
  7. flashvars (Объект, опциональный) определяет сочетание значений flashvars в виде имя:значение
  8. params (Объект, опциональный) определяет сочетание значений для вложенного в object элемента params в виде имя :значение
  9. attributes (Объект, опциональный) определяет сочетание значений для атрибутов элемента object в виде имя:значение

ПРИМЕЧАНИЕ: Необязательные параметры можно пропустить, в случаи если не нарушается порядок их следования. В случаи если не требуется использовать необязательный параметр, но нужно использовать следующий за ним необязательный параметр, можно указывать false в качестве его значения. Для flashvars, params и attributes являющихся типом Объект, можно просто указывать пустой объект: {}.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>
  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Конфигурирование Flash содержимого страницы

Весьма часто используются такие необязательные атрибуты [ http://www.w3schools.com/tags/tag_object.asp ] элемента element:

Вы можете использовать специфичные для Flash элементы param [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]:

Создание JavaScript объектов для определений членов объектов и их значений используемых в flashvars, params и attributes?

Наилучшим способом создания JavaScript объектов является объектный литерал, выглядящий так:

<script type="text/javascript">
   var flashvars = {};
   var params = {};
   var attributes = {};
   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Сочетания значений (имя: значение) можно добавлять внутрь созданного объекта (примечание: не ставьте запятую после последней пары сочетаний значений (имя: значение) )

<script type="text/javascript">
     var flashvars = {
        name1: "hello",
        name2: "world",
        name3: "foobar"
};
var params = {
        menu: "false"
};
var attributes = {
        id: "myDynamicContent",
        name: "myDynamicContent"
};
   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Или же добавлять свойства и значения после создания объекта используя точечное обозначение:

<script type="text/javascript">
      var flashvars = {};
      flashvars.name1 = "hello";
      flashvars.name2 = "world";
      flashvars.name3 = "foobar";

      var params = {};
      params.menu = "false";

      var attributes = {};
      attributes.id = "myDynamicContent";
      attributes.name = "myDynamicContent";

   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Что так же может быть записано в виде (менее читаемый способ для ярый скриптовальщиков в одну строку):

<script type="text/javascript">
     var flashvars = false;
     var params = {}; 
     var attributes = {id: "myDynamicContent", name: "myDynamicContent" };
  swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Если не нужно использовать необязательные аргументы, их значения можно определить как false или в виде пустого объекта, там где используется тип Объект (ПРИМЕЧАНИЕ: с версии SWFObject 2.1 и старше так же можно использовать значения null или 0):

<script type="text/javascript">
    var flashvars = false;
    var params = { menu: "false",  flashvars: "name1=hello&name2=world&name3=foobar"};
    var attributes = { id: "myDynamicContent", name: "myDynamicContent"};
   swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

The flashvars Object is a shorthand notation that is there for your ease of use. You could potentially ignore it and specify your flashvars via the params Object:

TIPS

Советы по переходу от версии SWFObject 1.5 к версии SWFObject 2

  1. В SWFObject 2 НЕТ обратной совместимости с SWFObject 1.5
  2. Предпочтительно чтобы все скриптовые блоки JavaScript находились в разделе head
  3. Имя библиотеки теперь записывается в нижнем регистре: swfobject вместо SWFObject
  4. Методы доступны только через библиотеку (вместо экземпляра SWFObject в SWFObject 1.5)
  5. Программный интерфейс приложения (API) разработанный тщательно и детально и выглядит полностью по-новому: [ http://code.google.com/p/swfobject/wiki/api ]
  6. SWFObject 2 заменяет указанный HTML блок с альтернативным контентом полностью, включая элемент контейнер, в случае если есть достаточная поддержка Flash и JavaScript, тогда как SWFObject 1.5 заменяет только содержимое указанного контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным содержанием страницы

Советы по переходу из UFO на SWFObject 2

  1. SWFObject 2 заменяет указанный HTML блок с альтернативным контентом полностью, включая элемент контейнер, в случае если есть достаточная поддержка Flash и JavaScript, тогда как UFO заменяет только содержимое указанного контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным содержанием страницы
  2. Функциональная возможность setcontainercss, которая есть в UFO не является частью SWFObject 2, тем не менее ее легко заменить : swfobject.createCSS(selStr, declStr) смотрите подробнее [ http://code.google.com/p/swfobject/wiki/api ]

Поддерживает ли SWFObject 2 MIME тип application/xhtml+xml?

SWFObject 2 НЕ поддерживает XML MIME типы, и этого не планировалось изначально.

Есть несколько причин, почему такой поддержки нет:

Категория: По делу Ярлыки:

Смотрите также

Конвертирование Nellymoser ASAO Codec FLV файлов в WAV/MP3 E4X: Сборник кода от учасников конференции [ruFlash]
  1. Пока без комментариев.
  1. Пока нету.