Якщо ви працюєте над розробкою флеш-ігор чи будь-яких інших флеш-програм, то швидш за все рано чи пізно зіткнетесь з необхідністю вбудовувати свої swf-файли у веб-сторінки. Існує кілька методів вставки флеш-контенту в html-код. Новачки традиційно користуються найпростішим з них – копіюванням коду зі згенерованого під час публікації у Flash IDE html-файлу.

На жаль, “рідний” код, який генерується програмою Adobe має одразу кілька недоліків. Передусім – він неуніверсальний. Вам доведеться дублювати частину коду для вставки флеш-контенту, щоб останній правильно відображався у IE. При цьому деяких проблем все-одно не уникнути.

По-друге, код, отриманий внаслідок компіляції флеш-контенту у Flash IDE використовує теги, які не відповідають стандартам W3C.

Ну і нарешті, при використанні стандартних для класичного Adobe коду тегів <object> та <embed> можуть виникати проблеми виявлення версії флеш-плеєра, встановленого у користувача, та коректного завантаження флеш-кліпів. З подібною проблемою я зіткнувся, працюючи над розробкою ігрового порталу Jar of Games, який на 90% складається з флеш-контенту. Якщо у Firefox flash-кліпи оброблялися коректно, то IE починав показувати флеш тільки після того, як гра повністю завантажилася (а повинен був показувати прелоадер під час завантаження).

На щастя існує спосіб уникнути всіх перелічених вище проблем вбудовування флеш-контенту, отримавши при цьому безліч додаткових переваг та бонусів – SWFObject. Якщо ви пройдетесь по провідних сайтах, які багато працюють з флеш-контентом (таких як топові ігрові портали), то побачите, що всі вони використовують саме SWFObject для вставки флеш-кліпів. Тобто по факту SWFObject вже став стандартом у цій сфері.

Ось ще кілька аргументів на користь SWFObject:

• він більш оптимізований та гнучкий, ніж будь-який інший спосіб вбудовування Flash-плеєра;
• він є універсальним рішенням для всіх HTML, Flash та JavaScript-розробників;
• він припиняє використання “специфічної” розмітки для деяких браузерів, при цьому даючи змогу використовувати стандартну розмітку та альтернативний контент;
• використовує ненав’язливий JavaScript та найкращі практики JavaScript;
• простий у використанні.

Робота з SWFObject

SWFObject це джаваскриптовий файл, який дозволяє вирішувати практично всі проблеми, що виникають при вбудовуванні флеш-контенту. Завантажити його можна на сторінці проекту SWFObject в Google Code. Там само ви знайдете і детальний посібник для початківців і повну документацію по SWFObject англійською мовою.

Остання версія SWFObject 2 дозволяє вбудовувати Flash двома методами:

1. Статичний метод публікації Flash та альтернативний контент вбудовуються з допомогою стандартної розмітки, а JavaScript використовується лише для вирішення проблем, які неможливо подолати інакше.

Основна перевага цього методу полягає в тому, що виконання Flash контенту не залежатиме від JavaScript, завдяки чому потенційно флеш буде доступний більшій аудиторії.

Втім, “користувачі”, які виключають JavaScript у своїх браузерах – не наша аудиторія. Практика показує, що як правило так поступають зовсім не люди, а різноманітні спам-боти. Тому я не розглядатиму роботу статичного методу публікації в рамках цієї статті. Якщо з якихось причин ви хочете використати саме статичний метод – зверніться до документації, посилання на яку я вже дав вище.

2. Динамічний метод публікації базується на заміні альтернативного контенту Flash-контентом у випадку, якщо на комп’ютері користувача встановлена достатньо нова версія Flash-плеєра та є підтримка JavaScript.

Основні переваги динамічного методу публікації полягають в тому, що він дозволяє обійти механізми активації активного контенту в IE 6, 7 та Opera 9+, а також чудово інтегрується в JavaScript програми.

Тож давайте детальніше розглянемо, як вбудувати Flash-контент в сайт з допомогою динамічного методу публікації.

Крок 1. Створення альтернативного контенту.

Передусім, потрібно знати, що динамічний метод публікації втілює принципи так званого “прогресивного покращення” (progressive enchancement). Використовуючи його ви не в буквальному сенсі вставляєте флеш-контент у сайт, як це було при використанні традиційної розмітки, а замінюєте альтернативний HTML-контент флеш-контентом у випадку, якщо є достатня підтримка JavaScript та Flash.

Можливо, концепція прогресивного покращення здасться вам складною для сприйняття (хоча швидше – просто незвичною), але не хвилюйтеся, з часом ви звикнете до неї і зрозумієте всі її переваги.

Отже, при використанні динамічного методу публікації перше, що потрібно зробити – це створити HTML контейнер з альтернативним контентом (ним може бути текст, зображення чи будь-який інший стандартний HTML-контент) і задати для нього id. Наприклад, так:

<div id="alternativeContent">
<p>Текст альтернативного контенту</p>
</div>

Цей блок ви повинні розмістити в тому місці на вашому сайті, де в майбутньому повинен з’явитися flash-ролик. Альтернативний контент користувач побачить тільки у випадку, якщо можливостей його комп’ютера не вистачає для перегляду флеш-ролика (наприклад, якщо він використовує застарілу версію flash-плеєра або його браузер не підтримує JavaScript). Власне, текст альтернативного контенту зазвичай і є вказівкою користувачеві, що у нього недостатньо інструментів для перегляду флеш-контенту з пропозицією завантажити останню версію flash-плеєра або увімкнути JavaScript.

Крок 2. Підключення бібліотеки SWFObject

Бібліотека SWFObject складається всього з одного зовнішнього файла, який ви повинні завантажити на свій хостинг і підключити в коді (я роблю це в блоці head). Ось як виглядає стрічка підключення скрипта:

<script type="text/javascript" src="swfobject.js"></script>

Відповідно, якщо файл swfobject.js знаходиться не в кореневій папці вашого сайту – до нього потрібно прописати шлях у директиві “src”. Наприклад, якщо swfobject.as знаходиться в папці scripts, то директива виглядатиме наступним чином: src=”scripts/swfobject.js”.

Крок 3. Заміна альтернативного контенту флеш-контентом.

Останній крок – це власне заміна альтернативного контенту флеш-контентом, якщо версія flash-плеєра виявилася достатньою. Ось як виглядає цей метод:

<script type="text/javascript">
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)
</script>

У цього методу п’ять обов’язкових та чотири необов’язкових параметри.

Обов’язкові:

• swfUrl – URL swf-файла;
• id – id HTML-контейнера з альтернативним контентом, який буде замінений на флеш-контент;
• width – ширина swf-файла;
• height – висота swf-файла;
• version – версія флеш-плеєра, необхідного для даного SWF (формат major.minor.release)

Необов’язкові (їх ми також не будемо детально розглядати в рамках цієї статті, просто озвучимо):

• expressInstallSwfurl – задає URL вашого express install SWF та активує Adobe express install;
• flashvars – змінні, які передаються у ваш flash-додаток у вигляді пар “ім’я:значення”;
• params – елементи params вкладені в object у вигляді пар “ім’я:значення”;
• attributes – атрибути елемента object у вигляді пар “ім’я:значення”.

Код заміни альтернативного контенту в нашому прикладі виглядатиме так:

<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "alternativeContent", "300", "120", "9.0.0");
</script>

Тож загальний html з повним кодом вставки swf з допомогою SWFObject 2 міг би виглядати, наприклад, наступним чином:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>

    <script type="text/javascript" src="swfobject.js"></script>

  </head>
  <body>

    <script type="text/javascript">
      swfobject.embedSWF("myContent.swf", "alternativeContent", "300", "120", "9.0.0");
    </script>

    <div id="alternativeContent">
      <p>Текст альтернативного контенту</p>
    </div>

  </body>
</html>

Сподіваюся, ця стаття була для вас корисною та зрозумілою. Якщо після її прочитання залишилися додаткові запитання щодо вставки флеш-контенту з допомогою SWFObject – не соромтесь задавати їх у коментарях.

Інші записи на цю тему:

• Основи Flash та ActionScript: Типи файлів, з якими повинен навчитися працювати флеш-розробник
• FlashGAMM Kyiv 2011: Враження від першого дня
• Організація візуальних об’єктів методами ActionScript 3: Display Object, Display Container та Display List
• Turtle Dreams to Fly: Статистика та висновки після релізу
• Turtle Dreams to Fly: Реліз!