встраивание компонентов в HTML-страницы

снова обращаюсь к книжке по ActionScript2.0 Дмитрия Гурского "Программирование во Flash MX 2004". часть информации несколько устарела или скоро устареет, но я нашла для себя много полезного. плюс легкий и доступный неспециалистам вроде меня язык.

главу помещаю без изменений и сокращений, хотя, возможно, и стоило сделать выжимку... но мне кажется правильным оставить немного истории - для пущего понимания :)

темы поста:

• помещение компонентов в HTML-страницы
• передачи внешних данных во Flash-ролик 
• два способа передачи параметров

16.5.1. Теги <EMBED> и <OBJECT> 

Мы можем публиковать SWF-фильмы как компоненты HTML-страниц благодаря тому, что браузеры могут включать внешние исполнимые модули.  Во времена  «войны браузеров»  середины 1990-х годов компании Microsoft и Netscape пошли разными путями в реализации этой возможности. Microsoft разработала знаменитую технологию ActiveX, позволяющую при соблюдении ряда условий динамически включить в браузер исполнимое приложение. Netscape избрала более стандартный, но и более безопасный путь, просто введя поддержку плагинов. Не вдаваясь в подробности, отметим, что для пользователя в случае Flash разница между этими технологиями заключается в том, как происходит установка плейера. Если Internet Explorer обнаруживает, что страница содержит SWF-фильм, для которого в системе нет проигрывателя, то он выводит панель с предложением импортировать Flash-плейер с сайта компании Macromedia. Если пользователь соглашается, то установка приложения осуществляется прямо в процессе просмотра страницы и не требует

перезапуска браузера.  В случае же Netscape Navigator  все происходит по-иному.  Пользователь должен самостоятельно скачать и установить плейер. После этого браузер должен быть перезапущен. 

Для встраивания компонентов, использующих технологию ActiveX, Microsoft  добавила в HTML тег <OBJECT>.  Соответственно,  для своей технологии плагинов Netscape  придумала тег<EMBED>. 

К концу 1990-х годов HTML был полностью стандартизирован. Единообразия ради тег <EMBED>  был исключен из стандарта. Встраивание внешних компонентов было полностью возложено на тег <OBJECT>. На данном этапе его поддерживают все современные браузеры. Тег же <EMBED> нее больше уходит в историю. 

Тег <OBJECT> впервые начал поддерживаться еще Microsoft Internet Explorer 3.0. тег <EMBED> появился во времена Netscape Navigator 2.0. Где-то до 1999 года они существовали параллельно, после чего <EMBED> начал сдавать позиции. В принципе, сейчас можно довольно смело публиковать SWF-фильм, используя только тег <OBJECT>. Однако если вы хотите, чтобы содержимое вашего сайта было доступно абсолютно всем посетителям,  теги <OBJECT>  и <EMBED>  нужно использовать совместно. Тег <EMBED> вкладывается в <OBJECT>. Если браузер не сможет распознать тег <OBJECT>,  он просмотрит его содержимое и,  обнаружив тег <EMBED>,  выполнит прописанные в нем инструкции. Если же браузер достаточно современный, чтобы поддерживать

тег <OBJECT>, то <EMBED> будет попросту проигнорирован.

Типичный HTML-код,  используемый для публикации SWF-фильмов,  может быть сгенерирован Flash автоматически. Для этого нужно поставить флажок HTML на закладке Formats окна Publish Settings и нажать кнопку Publish. В результате будет создан приблизительно следующий код (приведем лишь ту его часть, которая непосредственно отвечает за публикацию фильма): 

<object 

Classid="clsid:d27cdb6e-ae6d-llcf-96b8-444553540000" 

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash. 

cab#version=7,0,0,0" 

width="550" height="400" id="mov.swf" align="middle"> 

<param name="allowScriptAccess" value="sameDomain"/> 

<param name="movie" value="mov.swf"/> 

<param narae="quality" value="high"/> 

<param name="bgcolor" value="#ffffff"/> 

<embed  src="mov.swf"   quality="high"   bgcolor="#ffffff"   width="550" 

heights"400"   name="mov"  align="middle"  allowScriptAccess="sameDomain" 

type="application/x-shockwave-flash" 

pluginspage="http://www.macromedia.com/go/getflashplayer"/> 

</object> 

Проанализировав приведенный HTML-код, обнаружим, что теги <OBJECT> и <EMBED> имеютпрактически одинаковый набор параметров и атрибутов.  Назначение большинства из них легко понять из их названия. Например, очевидно, что атрибут width должен отвечать за ширину области отображения фильма, атрибут align — за выравнивание фильма на странице, а параметр quality — за качество визуализации фильма. Большинство атрибутов и параметров чаще всего имеют одно и то же значение для большинства публикуемых фильмов. К примеру, если фильмы размещаются на одной и той же странице, то HTML-код для одного из них можно создать, просто скопировав теги <OBJECT>  и <EMBED>  другого.  Затем придется заменить значения всего четырех элементов: 

• ширина и высота фильма обычно индивидуальны, поэтому изменяем значение атрибутов width и height; 

• адрес и имя публикуемого SWF-фильма будут, естественно, другими. Поэтому заменяем величину параметра movie  и атрибута id  тега <OBJECT>,  а также значение атрибута src  тега <EMBED>. 

То, что HTML-код, отвечающий за встраивание SWF-фильмов, обычно столь мало различается у разных фильмов, заставляет задуматься, зачем вообще задавать параметры и атрибуты,  которые практически всегда имеют одно и тоже значение. Также можно долго спорить и о том, стоит ли вообще прописывать тег <EMBED>, если браузер, не поддерживающий <OBJECT>, — это архаизм, который не так уж и просто найти. Вывод же можно сделать один: HTML-код, генерируемый Flash, избыточный. Более того, ввиду наличия в нем тега <HMBED> он даже не соответствует современным стандартам.  Если использовать установки по умолчанию,  то SWF-фильм можно встроить более коротким кодом: 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550"  

height="400"> 

<param name="movie" value="mov.swf"/> 

</object> 

Приведенный код будет хорошо работать только в браузерах от Microsoft. Если же необходимо учесть к тому же браузеры Netscape  и Opera (доля которых,  надо признать,  довольно мала),  то вместо атрибута classid следует использовать атрибут type (в нем указывается МIМЕ-тип встраиваемого файла): 

<object type="application/x-shockwave-flash" width="550" height="400"> 

<param name="movie" value="mov.swf"/> 

</object> 

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

Если у пользователя не окажется плейера нужной версии или использование технологии ActiveX браузером запрещено, то SWF-фильм, естественно, не отобразится. Чтобы учесть подобные ситуации, вы должны разработать альтернативное содержимое, которое будет визуализировано на месте фильма. Описывающий его HTML-код должен быть помешен в тег <OBJECT>. Обычно альтернативное содержимое 1редставляет собой информационное сообщение (вроде «скачав Flash-плейер, вы видите замечательную заставку»)  или ссылку, заменяющую баннер или кнопку.  В случае тега <EMBED> для задания альтернативного содержимого используется атрибут alt. 

Общее количество атрибутов и параметров тегов <OBJECT>  и <EMBED>  весьма значительное. Другой вопрос, что все вместе они никогда не прописываются. Всего лишь несколько атрибутов являются обязательными. Остальные задаются лишь в том случае, если их величина должна быть отлична от значения по умолчанию. 

Вообще все параметры и атрибуты можно разделить на две группы. 

• В первую входят те из них, которые хранят информацию,  использующуюся браузером.  Это,  например,  расположение SWF-файла, ширина и высота области, которую нужно отвести под фильм, идентификационный номерFlash-плейера и т. д.
• Вторую группу образуют параметры и атрибуты, хранящие данные, которые передаются плейеру. К примеру, так плейер «узнает», должен ли быть фон прозрачным, следует ли использовать системные шрифты, должен ли фильм проигрываться в цикле. Атрибутов первой группы около 20. Но в случае Flash-фильмов используются не все из них. Информацию о наиболее часто применяемых атрибутах вы можете получить из табл. 16.2. 

Ко второй группе относится несколько больше атрибутов и параметров, чем к первой. По сути они представляют собой внешние переменные, которые передаются плейеру перед началом проигрывания фильма. Будет ли такая переменная иметь форму атрибута или параметра, зависит от тега. Вслучае тега <EMBED> переменные с настройками задаются в форме атрибутов (то есть они поме-шаются непосредственно в тег). Если же прописывается тег <OBJECT>, то переменные с даннымидля плейера должны быть заданы как параметры. Для этого служит специальный тег <PARAM>. Уэтого тега имеется два атрибута: name — имя параметра и value — его значение.

Например, чтобысделать задний фон прозрачным, следует набрать

<param name="wmode" value="Transparent"/> 

Большинство атрибутов и параметров второй группы мы подробно рассмотрели,  когда изучали настройки, за которые они отвечают. Поэтому сейчас ограничимся лишь краткой их характеристикой (табл. 16.3).

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

16.5.2. Передача данных из HTML-окружения при загрузке фильма

Существует много способов передачи внешних данных во Flash-фильм. Выбор подхода должен определяться типом этих данных, их расположением, а также тем, когда они должны поступить в фильм. В простейшем случае данные являются текстом, хранящимся на той же НТМL-странице, импортировать который необходимо перед началом воспроизведения фильма. Оптимальный способ передачи данных такого рода связан с применением специального параметра flashvars  тега <OBJECT> (или атрибута тега <EMBED>). 

Значением тега flashvars должна быть строка, содержащая передаваемые данные в виде нужного количества пар имя-значение, разделенных амперсантом (&).

Например, если вам необходимо переслать в фильм имя посетителя, его возраст и страну проживания, то следует набрать

<param name="flashvars" value="name=Bob&age=25&location=USA"/> (тег <OBJECT>) 

flashvars="name=Bob&age=25&location=USA"     (тег <EMBED>) 

Пары имя-значение принято называть переменными. При поступлении строки с такими переменными в фильм, на их основании будут созданы настоящие переменные ActionScript и помещены на основную временную диаграмму.

Например,  проанализировав приведенный выше HTML-код, 

плейер создаст три переменные: name, age и location, которые будут хранить строки «Bob», «25» и «USA». Естественно, что переменные, получаемые от HTML-окружения, должны иметь уникальные идентификаторы.  Иначе они будут утеряны или перезаписаны при выполнении кода ActionScript. 

Используя параметр (атрибут) flashvars, в фильм можно передать до 64 Кб данных. 

В строке, присваиваемой параметру (атрибуту) flashvars, нельзя использовать пробел, некоторые знаки пунктуации (являющиеся в НТМL зарезервированными), например «<» или <« %», служебные и непечатаемые символы. Более того, если страница закодирована не в Unicode, нельзя применять символы кириллицы или любого другого национального языка. Строка может содержать только буквы из кодировки US-ASCII (первые 128 символов Unicode и большинства восьмибитовых кодировок). Для обозначения остальных символов используется запись вида %ХХ, где XX — код символа в шестнадцатеричном представлении. Например, чтобы задать пробел, нужно ввести %20, а для наклонной черты — %2F. Если используется кодировка Unicode, то символы, код которых больше 255, задаются записью %ХХ %YY. К примеру, кирилличная «а» запишется как %D0 %B0.  Одиночный пробел можно задать символом «+».  Подобные правила были выработаны нараннем этапе развития Интернета для однозначности трактовки URL на разных машинах. Поэтому о строке, записанной исходя из них, говорят, что она подверглась URL-кодированию. 

Вы должны строго следовать правилам URL-кодирования, задавая значение параметра (атрибута)  flashvars, иначе плейер не сможет верно интерпретировать строку с парами имя-значение. Также нужно помнить, что Flash-плейер по умолчанию использует Unicode. Это означает, что все символы, не входящие в US-ASCII, должны быть закодированы в формате Unicode (HTML-страницы до сих пор чаще всего кодируются в одной из восьмибитовых кодировок). 

Например, посмотрим, как плейер трактует следующую строку с данными: 

<раram name="flashvars" value="text=Bceм привет!"/> 

Попробуем трассировать значение переменной text,  которая должна быть создана на основной временной диаграмме фильма: 

trace(text); // Выводит: 6ЯЕЛ ОПХБЕР! 

Увидев подобную строку в браузере, вы, вероятно, попытались бы изменить кодировку. Но в нашем случае такая операция бессмысленна. Чтобы текст отобразился верно, его нужно подвергнуть URL-кодированию; 

<param name="flashvars" value= "text=%D0%92%Dl%81%D0%B5%D0%BC%20%D0%BF%D1%80%DO%B8%DO%B2%DO%B5%D1%82%21"/> 

Проверяем значение переменной: 

trace(text); // Выводит: Всем привет! 

На практике URL-кодирование редко проводится «вручную», В любой среде разработки, хотя бы чуть более совершенной,  чем  «Блокнот»,  для этого имеются специальные инструменты.  В ActionScript и JavaScript провести URL-кодирование позволяет функция escape(): 

trace(escape("Привет")); // Выводит: %DO%9F%D1%30%DO%B8%DO%32%DO%B5%D1%82 

При необходимости строку можно и декодировать, для чего предназначена функция unescape(): 

trace(unescaper("%D0%9F*D1%80%D0%B8%D0%B2%D0%B5%D1%82"); // Выводит: Привет

Еще один способ передать фильму данные из HTML-окружения заключается в использовании метода GET. При таком подходе переменные передаются в виде части URL, исходя из которого происходит импортирование фильма. Строка с переменными отделяется от основного URL символом «?». 

Как вы помните, в случае тега <OBJECT> указатель на SWF-файл хранит параметр movie, Следовательно, чтобы передать данные при помощи метода GET, нужно набрать приблизительно следующий код: 

<param name="movie" value="mov.swf?name=Bob&age=25&location=USA"/> 

В теге <EMBED> за расположение SWF-файла отвечает атрибут src: 

src="mov.swf?name=Bob&age=25&location=USA" 

Строка с парами имя-значение,  полученная плейером при помощи метода GET,  обрабатывается точно так же, как и в случае использования для ее передачи параметра (атрибута) flashvars. Однако метод GET  в силу своей природы имеет существенно больше ограничений для импортирования данных, чем flashvars:

•  Во-первых, метод GET не позволяет переслать более 256 байтов информации (предел flashvars —64 Кб текста).
• Во-вторых, что более существенно, при присоединении к URL новых параметров браузер будет считать,  что это ссылка на новый ресурс. Поэтому методGET  снижает эффективность применения кэшированных файлов,  что в случае  «тяжеловесных» Flash-сайтов крайне плохо. 

Кстати,  метод GET  можно использовать для передачи параметров,  если фильм импортируется функцией load.Movie() или loadMovieNum(). Это может быть полезно, если инициализация должна зависеть от контекста.