Вбудовуємо флеш-ролики, підтримуючи стандарти
Малобюджетні сайти.
Просування веб-сайту.
Вбудовуємо флеш-ролики, підтримуючи стандарти
ActionScript 2: програмування у Flash MX. Для професіоналів
Flash Satay: Embedding Flash While Supporting Standards
Я працюю з Flash'ем вже кілька років і завжди відчував легке розчарування від того, який HTML-код слід писати, щоб вбудувати ролик у веб-сторінку. Нещодавно я створив сайт на XHTML, і моє розчарування зросло: HTML-код, необхідний для відображення ролика на сайті, просто не відповідає стандартам. На допомогу був покликаний новий, акуратніший метод, який би не конфліктував, а дружив зі стандартами XHTML.
Довіряй але перевіряй
Flash завжди постачався із засобами розробки, що дозволяють автоматично генерувати сторінки, що містять флеш-ролики. Починаючи з четвертої версії, сама програма почала створювати таких монстрів:
Зважаючи на те, що такий код використовується на 95% сторінок, він став стандартом де-факто.
Як неважко помітити будь-кому, хто приділив увагу жахливому html-коду вище, для відображення роликів використовується два головні теги:
На жаль, це не працює в не-IE браузерах, але ми ж і не очікували, що вони здадуться так швидко. Витративши деякий час на пошук, я виявив, що атрибут classid є специфічним для ActiveX конфігурації браузера. До речі, саме він умовляв Netscape і Mozilla ігнорувати об'єкт. Тим часом роль цього атрибуту вкрай важлива: він повідомляє браузеру, яким плеєром програватиме об'єкт. Так що нам не вдасться так само легко, як минулого разу, помахати ручкою і попросити зачинити за собою двері.
Ефективна робота: Flash MX 2004
Попередні махінації все одно непризвели до того, щоб Netscape показував флеш-ролики. Наступною перешкодою на шляху відображення став атрибут codebase, який містить шлях до копії плагіна Flash на сервері Macromedia. Насправді атрибут зовсім не передбачався для такого використання, оскільки всі шляхи в його значеннях повинні бути в тому ж домені з міркувань безпеки.
У багатьох браузерах (і особливо в IE) цей атрибут виконує іншу функцію: у дорозі, що містить його значення, записаний необхідний для запуску ролика номер версії флеш-плеєра. Виконавши просте порівняння, браузер може запропонувати користувачеві завантажити свіжішу версію програвача. Зворотною стороною медалі в даному випадку є те, що цей атрибут зупиняє відтворення роликів у Netscape і Mozilla, якщо його використовувати даним чином. Значить, доведеться пустити його у витрату. Як поповнити втрату функціональності ми обговоримо пізніше.
Отже, після того, як codebase ми визнали не мешканцем, html-код нарешті став виглядати більш менш витончено:
Якщо спробувати відкрити цей код, він все одно не відобразить ролик Netscape. Дійшовши до цієї точки, я злякався, що у всьому Всесвіті не знайти мені способу здійснення задуманого. Тож мені довелося вдатися до звичайного для таких ситуацій випробування найбожевільніших ідей.
Коли я скористався атрибутом data, у мене мало не стався удар – ролики почали раптово програватись у Netscape та Mozilla. Як з'ясувалося, IE також не відмовлявся їх показувати.
Після серії перевірок з великими роликами я помітив недолік: браузер IE під Windows не починав програвання ролика, поки не завантажував його весь, від початку до кінця. Зрозуміло, що такий недолік є прийнятним для невеликих роликів, але ніяк не може ужитися з величезними. Я прийшовдо висновку, що створення відповідного стандарту коду можливе, але тільки після того, як Microsoft виправить свої помилки.
Метод Satay
Через кілька днів я обговорював цю проблему з Джефрі Зельдманом (Jeffrey Zeldman), пояснюючи, наскільки близький я був до вирішення проблеми. Він також зацікавився, оскільки зіткнувся з такою самою проблемою, розробляючи останні проекти. Все це змусило мене замислитися, і, нарешті, коли я брів до будинку по пустельних нічних вулицях, мене вразила здогадка.
Як ми вже з'ясували, проблема полягає в тому, що Windows не хоче програвати ролик, доки не скачає його весь. А як щодо створення дуже маленького ролика, який у першому ж кадрі підвантажуватиме в себе той ролик, який ми дійсно хочемо показати?
Я перевірив цей здогад, і вона спрацювала. Можливо, це невелике загравання зі стандартами, але у цілком допустимих межах. Найкраще в цьому способі те, що можна створити універсальний контейнер і користуватися ним надалі для підвантаження роликів з такими ж пропорціями, як у ролика контейнера.
Образно кажучи, не має значення, чи виготовлений ролик із шинки, курятини або яловичини, вам все одно доведеться спочатку вмочити його в кетчуп, щоб відчути справжній смак. Ми назвали це методом Satay.
Ролик-контейнер
Я створив новий ролик, у першому кадрі якого розмістив наступний ActionScript:
Він вказує флеш-плеєр, щоб той завантажив ролик, ім'я якого зберігається в змінній path на нульовому рівні. Залишилося лише динамічно передавати цю змінну. Завдяки рядковим параметрам і тому, що вони обробляються Flash, це навіть не назвеш проблемою. Ось як вирішується це питання: c.swf? path = movie.swf
Ролик-контейнер називається c.swf, і притакому виклику вираз, що вказує на завантаження потрібного ролика, виглядає для Flash так: _root.loadMovie("movie.swf",0);
Можна змінювати поведінку контейнера, пересилати значення змінної, використовуючи методи post і get , але слід пам'ятати, що розмір ролика-контейнера може бути дуже маленьким.
Фінальний код
Залишилося лише завершити починання. Отже, ми відмовилися від багатьох атрибутів, додали нові, перемішали та залили в судочки:
Чи це не той код, про який я говорив із самого початку? Але не слід забувати про те, що, відкинувши codebase, ми позбавили себе непоганої частини функціональності. Що ж робити?
Компенсація жертвам
Головна проблема при відсутності атрибуту codebase полягає в тому, що браузер просто не пропонуватиме користувачам оновити флеш-плеєр. Як нам з вами відомо, сподіватися, що більшість користувачів оновить свої програвачі власноруч, не доводиться.
Пам'ятайте, що я говорив, що тег
Якщо браузер не знайомий з MIME-типом application/x-shockwave-flash, він просто покаже відвідувачеві картинку noflash.gif.
Далі буде
Я написав цю статтю, знаючи, що це дослідження всього однієї людини, тому науково-дослідна робота на цю тему триває. Поставтеся до наведеної інформації як до наукової теорії: вона вважається доведеною, доки не доведена зворотна.