На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Flash

Встраиваем флэш-ролики, поддерживая стандарты

ActionScript 2: программирование во Flash MX. Для профессионалов

Поиск в Интернете и сервисы Яндекс
[Заказать]

Flash Satay: Embedding Flash While Supporting Standards

Я работаю с Flash’ем уже несколько лет и всегда испытывал легкое разочарование от того, какой html-код следует писать, чтобы встроить ролик в веб-страницу. Недавно я создал сайт на XHTML, и мое разочарование возросло: html-код, необходимый для отображения ролика на сайте, просто не соответствует стандартам. На помощь был призван новый, более аккуратный метод, который бы не конфликтовал, а дружил со стандартами XHTML.

Доверяй, но проверяй

Flash всегда поставлялся со средствами разработки, позволяющими автоматически генерировать страницы, содержащие флэш-ролики. Начиная с четвертой версии, сама программа стала создавать подобных монстров:

<object
classid="clsid:D27CDB6E-AE6D
-11cf-96B8-444553540000"
codebase="http://download.macromedia.com /pub/shockwave/cabs
/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high"
width="400" height="300"
name="movie" align="" type="application/x-shockwave-flash"
plug inspage="http://www.macromedia.com
/go/getflashplayer"> </object>

Учитывая то, что такой код используется на 95% страниц, он стал стандартом де-факто.

Как нетрудно заметить любому, кто уделил внимание устрашающему html-коду выше, для отображения роликов используется два главных тэга: <object> и <embed>.

В то время, как Internet Explorer и все хорошие браузеры пользуются соответствующим стандартам тэгом <object>, Netscape и браузеры, считающие себя его друзьями, вовсю развлекаются с <embed>, полностью игнорируя <object>. Тэг <object> содержится в спецификации XHTML, но не совсем верно реализован в IE-дружественных браузерах: он просит браузер запустить объект флэш-плейера и загрузить в него ролик. Элемент <param> этого тэга играет роль злого гения: передает плейеру столько параметров, сколько им (тэгом) было задано.
<embed> не попал в спецификацию XHTML. Параметры в нем передаются через пары «имя/значение».

Элемент <embed>

Этот элемент был создан Netscape как собственный метод встраивания плагинов и плейеров в веб-страницы. Он не попал в XTHML-спецификацию и… мы же не любим нестандартные тэги, правда? Так что — прощай, <embed>… и не забудь закрыть за собой дверь!

Элемент <object>

Flash Hacks

Поиск в Интернете и сервисы Яндекс
[Заказать]

Мы распрощались с тэгом <embed> и у нас на руках остался только <object>, так что придется ему вывернуться наизнанку, стараясь нам помочь. Приятная новость — как для нас, так и для него — это то, что почти каждый браузер в наши дни так или иначе поддерживает этот элемент.

У элемента <object> нет обязательных атрибутов, но список доступных действительно велик. Ниже приведены те, которые могут нас заинтересовать и понадобятся в дальнейших научных исследованиях.

classid (URI) — может использоваться для указания местоположения реализации объекта при помощи URI. Этот атрибут может быть применен вместо атрибута data (рассмотрен ниже) или вместе с ним.

codebase (URI) — указывает основной путь к обработчику относительных путей, заданных атрибутами classid, data и archive. Когда этот атрибут не указан явно, он принимает значение базового URI текущего документа.

data (URI) — может быть использован для указания местоположения данных, ради которых затевались все манипуляции с тэгом <object>, или даже для проставления ссылки на серийный выпуск объекта, который сможет восстановить локальную копию.

type (content-type) — указывает тип содержания для данного «объекта».

codetype (content-type) — указывает ожидаемый тип содержания «объекта» при его открытии с помощью classid.

Есть также другие атрибуты, которые позволяют делать то, что можно запросто реализовать и в самом flash`е, а также такие, как width, height, id, class и другие общеприменимые атрибуты. Те параметры, которые перечислены выше, являются значимыми при встраивании флэш-роликов.

Другой важной вещью, которую стоит запомнить всем разработчикам, является то, что <object> может содержать вложенные элементы, которые будут отображаться, если отображение ролика не поддерживается компьютером (не установлен флэш-плейер). Кстати, вот объяснение, почему этот проклятый <embed> работает в Netscape и его дружках.

Действо

Вооружившись более глубоким пониманием вопроса, я провел несколько операций, проверяя их в разных браузерах. Для начала я убрал ненавистный нам всем <embed>, таким образом код стал соответствовать стандартам XHTML:

<object
classid="clsid:D27CDB6E-AE6D
-11cf-96B8-444553540000" codebase="http://download.macromedia.com /pub/shockwave/cabs
/flash/swflash.cab#version=6,0,0,0"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>

К сожалению, это не работает в не-IE браузерах, но мы ведь и не ожидали, что они сдадутся так быстро. Потратив некоторое время на поиск, я обнаружил, что атрибут classid является специфическим для ActiveX-конфигурации браузера. Кстати, это именно он уговаривал Netscape и Mozilla игнорировать объект. Между тем, роль этого атрибута крайне важна: он сообщает браузеру, каким плейером проигрывать объект. Так что нам не удастся так же легко, как в прошлый раз, помахать ручкой и попросить закрыть за собой дверь.

К счастью, флэш-плейер откликается также на содержание с MIME-типом application/x-shockwave-flash. Это великолепно хотя бы потому, что есть возможность указать тип объекта, используя параметр type.
Итак, мы все-таки прощаемся с

classid="clsid:D27CDB6E-AE6D
-11cf-96B8-444553540000"

и добавляем

type="application/x-shockwave-flash"

Codebase

Эффективная работа: Flash MX 2004

Поиск в Интернете и сервисы Яндекс
[Заказать]

Предыдущие махинации все равно не привели к тому, чтобы Netscape показывал флэш-ролики. Следующим препятствием на пути отображения стал атрибут codebase, который содержит путь к копии плагина Flash на сервере Macromedia. На самом деле, атрибут совсем не предполагался для такого использования, поскольку все пути в его значениях должны быть в том же домене по соображениям безопасности.

Во многих браузерах (и особенно в IE) этот атрибут выполняет другую функцию: в пути, который содержит его значение, записан необходимый для запуска ролика номер версии флэш-плейера. Выполнив простое сравнение, браузер может предложить пользователю скачать более свежую версию проигрывателя. Обратной стороной медали в данном случае является то, что этот атрибут останавливает проигрывание роликов в Netscape и Mozilla, если его использовать данным образом. Значит, придется пустить его в расход. Как восполнить потерю функциональности мы обсудим позже.

Итак, после того, как codebase мы признали не жильцом, html-код наконец-то стал выглядеть более или менее изящно:

<object
type="application/x-shockwave-flash"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>

Если попробовать открыть этот код, он все равно не отобразит ролик в Netscape. Дойдя до этой точки, я испугался, что во всей Вселенной не сыскать мне способа осуществления задуманного. Так что мне пришлось прибегнуть к обычному для таких ситуаций испытанию самых безумных идей.

Эврика!

Когда я воспользовался атрибутом data, у меня чуть не случился удар — ролики начали внезапно проигрываться в Netscape и Mozilla. Как выяснилось, IE тоже не отказывался их показывать.

<object type="application/x-shockwave-flash"
data="movie.swf"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>

После серии проверок с большими роликами я заметил недостаток: браузер IE под Windows не начинал проигрывание ролика, пока не скачивал его весь, от начала и до конца. Понятно, что такой недостаток приемлем для небольших роликов, но никак не может ужиться с огромными. Я пришел к выводу, что создание соответствующего стандартам кода возможно, но только после того, как Microsoft исправит свои ошибки.

Метод Satay

Несколько дней спустя я обсуждал эту проблему с Джефри Зельдманом (Jeffrey Zeldman), объясняя, насколько близок я был к решению проблемы. Он тоже заинтересовался, поскольку столкнулся с той же проблемой, разрабатывая последние проекты. Все это заставило меня задуматься, и, наконец, когда я брел к дому по пустынным ночным улицам, меня поразила догадка.

Как мы уже выяснили, проблема заключается в том, что Windows не хочет проигрывать ролик, пока не скачает его весь. А как насчет создания очень маленького ролика, который в первом же кадре будет подгружать в себя тот ролик, который мы действительно хотим показать?

Я проверил эту догадку, и она сработала. Возможно, это небольшое заигрывание со стандартами, но во вполне допустимых пределах. Самое хорошее в этом способе то, что можно создать универсальный контейнер и пользоваться им в дальнейшем для подгрузки роликов с такими же пропорциями, как и у ролика контейнера.

Образно говоря, не имеет значения, изготовлен ли ролик из ветчины, курятины или говядины, вам все равно придется сначала обмакнуть его в кетчуп, чтобы ощутить его настоящий вкус. Мы назвали это методом Satay.

Ролик-контейнер

Я создал новый ролик, в первом кадре которого разместил следующий ActionScript:

_root.loadMovie(_root.path,0);

Он указывает флэш-плейеру, чтобы тот загрузил ролик, имя которого хранится в переменной path на нулевом уровне. Осталось только динамически передавать эту переменную. Благодаря строковым параметрам и тому, что они обрабатываются Flash`ем, это даже не назовешь проблемой. Вот как решается этот вопрос: c.swf?path=movie.swf

Ролик-контейнер называется c.swf, и при таком вызове выражение, указывающее на загрузку нужного ролика, выглядит для Flash`а так: _root.loadMovie("movie.swf",0);

Можно изменять поведение контейнера, пересылать значение переменной, используя методы post и get, но следует всегда помнить, что размер ролика-контейнера должен быть очень маленьким.

Финальный код

Осталось только завершить начинание. Итак, мы отказались от многих атрибутов, добавили новые, перемешали и залили в судочки:

<object
type="application/x-shockwave-flash"
data="c.swf?path=movie.swf" width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
</object>

Это ли не тот код, о котором я говорил с самого начала? Но не следует забывать о том, что, отбросив codebase, мы лишили себя неплохой части функциональности. Что же делать?

Компенсация жертвам

Главная проблема при отстутствии атрибута codebase заключается в том, что браузер просто не будет предлагать пользователям обновить флэш-плейер. Как нам с вами известно, надеяться на то, что большинство пользователей обновит свои проигрыватели собственноручно, не приходится.

Решение этой проблемы на удивление несложно: просто принесите в жертву какой-то пустой ролик в самом начале страницы. Понятно, что при его объявлении следует указать атрибут codebase. Таким образом, жертвуя 1 КБ трафика, мы достигаем нужной функциональности. Пусть это не самый аккуратный, зато действенный способ, который не наживет вам врагов.

Альтернативное содержание

Помните, что я говорил о том, что тэг <object> может содержать вложенные дочерние тэги, которые браузер будет обрабатывать, если у него ничего не получится с открытием объекта? Это может нам очень пригодиться.

Если просмотреть исходный код главной страницы сайта Macromedia, можно заметить, что они подставляют картинку для тех, кто не может просматривать флэш-ролики. Код определяет, установлен ли флэш-плейер на компьютере, и выполняет Java-скрипт, который динамически вписывает нужный HTML-код. Жуть как неудобно. Вот как сделал бы это я:

<object type="application/x-shockwave-flash”
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>

Если браузер не знаком с MIME-типом application/x-shockwave-flash, он просто покажет посетителю картинку noflash.gif.

Продолжение следует

Я написал эту статью, зная, что это исследования всего одного человека, так что научно-исследовательская работа на эту тему продолжается. Отнеситесь к приведенной информации как к научной теории: она считается доказанной, пока не доказана обратная.

Статьи по теме:

Автор: Drew Mclellan
Перевод: Геннадий Осипенко

Источник: re:vision.ru по материалам сайта A List Apart

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
NunDesign
Горнолыжный-сноубордический порталSki.Ru
Горящие путевки, идеи путешествийMegaTIS.Ru
SuperGu.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100