разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Flash-документ (мультфильм, ролик, клип) может включать разнородное содержимое: текст, растровую и векторную статическую и анимационную графику, звук, видео и элементы пользовательского интерфейса. Вы можете создать отдельную страницу или даже целый сайт, используя технологию Flash. Flash-документы разрабатываются с помощью пакета Vacromedia Flash, выходные файлы которого имеют расширение swf. Просмотр sef-файлов производится с помощью специального Flash-проигрывателя. Чтобы просматривать swf-файл в окне браузера MS Internet Explorer, требуется элемент управления ActiveX, реализующий функции Flash-проигрывателя, ссылка на который вставляется в HTML-документ с помощью тегов <object> и <param>:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"

id = "myflash">

<param name = "movie" value = "URL-адрес swf-файла ">

</object>

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

Атрибут codebase содержит URL-адрес исходных файлов Flash-проигрывателя версии 9.0 на случай если он не установлен на компьютере пользователя.

Тег <param> служит для указания URL-адреса swf-файла, содержащего Flash-документ, который должен быть воспроизведен Flash-проигрывателем.

Атрибут id указан только для обеспечения возможности доступа к объекту с помощью сценария.

Чтобы Flash-проигрыватель был вставлен в веб-страницу браузерами, не воспринимающими теги <object> и <param> (например, Nestcape Navigator), внутри внутри контейнера <object> используется тег <embed>:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"

<param name = "movie" value = "URL-адрес swf-файла ">

<embed src = "URL-адрес swf-файла " name = "myflash"

type = application/x-shockwave-flash"

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

</object>

Здесь в теге <embed> атрибут name играет такую же роль, что и id в <object>, а атрибут pluginspage — что и codebase.

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

• прозрачность фона Flash-документа
  • 
    
  • в теге <object> используется тег:
    <param name = "wmode" value = "transparent">
  • в теге <embed> используется атрибут:
    wmode = "transparent"
    
    
• цвет фона Flash-документа:
  • 
    
  • в теге <object> используется тег:
    <param name = "bgcolor" value = "цвет">
  • в теге <embed> используется атрибут:
    bgcolor = "цвет"
    Здесь цвет задается именем или шеснадцатеричным кодом
    
    
• качество воспроизведения Flash-документа:
  • 
    
  • в теге <object> используется тег:
    <param name = "quality" value = "уровень_качества">
  • в теге <embed> используется атрибут:
    quality = "уровень_качества"
    

    Здесь уровень_качества принимает значения:

    • low — низкое;
    • medium — среднее;
    • high — высокое;
    • best — самое лучшее;
    • autolow — автонизкое;
    • autohigh — автовысокое.

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

Рассмотрим пример размещения Flash проигрывтеля на веб-странице.

В окне веб-браузера это будет выглядеть ТАК.

Вставка звука и видео

Современные веб-браузеры могут воспроизводить видео и звуковые файлы различных форматов. Для этого они используют встроенные проигрыватели (plug-in, элементы управления ActiveX) или внешние программы проигрыватели. Вставить звук или видео в HTML-документ можно с помощью различныз тегов:

• <bgsound src = адрес_файла > — для вставки фонового звука;
• <img dynsrc = адрес_файла > — для вставки видео в формате AVI;
• <a href = адрес_файла > — для вставки звуковых и видеофайлов;
• <embed = адрес_файла > — для вставки звуковых и видеофайлов.

При решении вставить звук и/или видео в HTML-документ следует учитывать, что соответствующие файлы имеют довольно большой объем. Наиболее популярными в веб сейчас являются файлы звуковых форматов MP3, WMA, AIFF, AU, RealAudio (c расширением ra и ram), MP4, MIDI и видеоформатов MPEG, MOV. Звуковой формат WAV и видеоформат AVI в Интернете используются довольно редко.

Для операционной системы Windows стандартными звуковыми файлами являются WMA и WAV, для Macintosh — AIFF. Общепринятым видеоформатом для Windows, Macintosh и UNIX является MPEG. Формат QuickTime (MOV) также широко распространен и может использоваться Windows и Macintosh. При выборе других форматов желательно предупреждать об этом пользователей.

Фоновый звук

Тег <bgsound> позволяет указать звуковой файл формата WMA, AU, MIDI или WAV, который проигрывается при загрузке страницы. При этом на экран не выводится панель управления воспроизведением.

Тег <bgsound> имеет следующие атрибуты:

• src — URL-адрес звукового файла;
• loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:
  • -1 или infinite —воспроизведение в течении всего времени показа документа;
  • число — количество воспроизведений
• balance — число, определяющее баланс для стереозвука;
• volume — число, определяющее громкость звучания.

Пример:

<bgsound src="ib_logfile0" loop="3">

Применение тега img и ссылок

Тег <img> применяется в основном для вставки графических изображений, адрес файла которых указывается атрибутом src. Этот тег имеет еще один атрибут dynsrc, с помощью которого можно узнать адрес видеофайла формата AVI. Если указаны оба атрибута, dynsrc и src, то действует dynsrc.

Атрибуты, определяющие воспроизведение видеофайлов, таковы:

• dynsrc — URL-адрес видеофайла формата AVI(расширение avi);
• loop — определяет, сколько раз звуковой файл должен быть воспроизведен; принимает значения:
  • -1 или infinite —воспроизведение в течении всего времени показа документа;
  • число — количество воспроизведений
• start = mouseover —выводится изображение первого кадра, а воспроизведение начинается только при наведении на него указателя мыши и продолжается далее заданное атрибутом loop количество раз.

Пример:

<img dynsrc = "myvideo.avi" loop = 2 start = mouseover>

Можно также использовать и другие атрибуты тега <img>, например, align, border, hspase и vspace.

Для воспроизведения звуковых и видео файлов можно использовать тег ссылки <a>, указав в качестве значения атрибута href URL-адрес файла. При этом файл будет воспроизводиться в окне приложения(проигрывателя), которое ассоциировано с данным типом файла и установлено на компьютере пользователя. Это может быть, например,Windows Media Player, панель Медиа (в Internet Explorer), Winamp, QuickTime Player или RealPlayer G2.

URL-адрес файла RealAudio имеет вид:

pnp://адрес_файла.

Технология RealAudio обеспечивает передачу звука и видео практически в режиме реального времени и позволяет устраивать аудио- и видеоконференции. Звуковые файла RealAudio имеют расширение ra. Кроме того, могут использоваться метафайлы с расширением ram. Это обычные текстовые файлы, содержащие полные URL-адреса файлов с расширением ra.

Пример:

В окне веб-браузера это будет выглядеть ТАК.

Применение тега embed

Тег <embed> позволяет встроить в веб-страницу документы различных типов для просмотра их соответствующим приложением. При встраивании звука и видео в окне браузера появляется панель того проигрывателя, который ассоциирован с данным типом файлов. Обратите внимание, что панель проигрывателя встраивается в документ, отображаемый в окне веб-браузера, а не появляется в виде автономного окна, как в случае использования ссылок.

Рассмотрим пример, где с помощью тега <embed> встраиваются три звуковых и один видеофайл. Размеры панелей воспроизведения можно задать с помощью атрибутов width и heiht.

В окне веб-браузера это будет выглядеть ТАК.

Тег <embed> имеет следующие атрибуты, связанные с воспроизведением звука и видео:

• src — URL-адрес файла;
• align — горизонтальное выравнивание панели, принимает следующие значения:
  • absbottom — выравнивание нижней границы панели по нижней границе текущей строки;
  • absmiddle — выравнивание середины панели по середине текущей строки;
  • baseline — выравнивание нижней границы панели по базовой линии текущей строки;
  • bottom — то же, что и baseline;
  • top — верхняя граница панели выравнивается по самому высокому элементу текущей строки;
  • texttop — верхняя граница панели выравнивается по самому высокому текстовому элементу текущей строки;
  • left — панель располагается у левого края окна, текст и другие элементы обтекают его справа;
  • right — панель располагается у правого края окна, текст и другие элементы обтекают его слева;
• alt — альтернативный текст;
• hight — высота в пикселах или процентах;
• width — ширина в пикселах или процентах;
• hspace — боковые отступы в пикселах;
• vspace — верхний и нижний отступы в пикселах;
• name — имя (идентификатор) встроенного элемента.

Кроме перечисленных, тег <embed> имеет еще атрибуты code и codebase, имеющие такой же смысл, что и для тега <object>.

Тег object

Тег <object> позволяет вставлять в HTML-документы графические изображения, HTML-документы, элементы ActiveX и апплеты.

Тег <object> является контейнерным и обладает множеством атрибутов:

• accesskey —определяет клавишу быстрого доступа к объекту, встроенному с помощью тега <object>. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишей <Alt>, то объект получит фокус;
• align — выравнивание; возможны следующие значения:
  • absbottom — выравниванивает нижнюю границу объекта по подстрочной линии символов окружающего текста;
  • absmiddle — выравнивает середину объекта по центральной линии между top и absbottom окружающего текста;
  • baseline — выравнивает нижнюю границу объекта по базовой линии окружающего текста;
  • bottom — то же, что и baseline (только в Internet Explorer);
  • left —выравнивает объект по левому краю элемента-контейнера;
  • middle — выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии объекта;
  • right —выравнивает объект по правому краю элемента-контейнера;
  • texttop —выравнивает верхнюю границу объекта по верхней границе окружающего текста;
  • top — выравнивает верхнюю границу объекта по верхней границе окружающего текста.
• classid — уникальный регистрационный идентификатор встраиваемого компонента;
• code — имя файла Java(класс апплета), если он является источником.
• codebase — базовый URL-адрес, по которому веб-браузер может взять файл (обычно упакованный) компонента, чтобы установить его при отсутствии на компьютере пользователя. Вслед за URL-адресом указывается версия компонента в виде строки: #Version = M1, M2, m1, m2. Где M1, M2 — максимальные, а m1, m2 — минимальные мажорный и минорный номера версии, доступные на сервере. Встречая в HTML-документе ссылку на компонент, веб-браузер проверяет его наличие на компьютере пользователя. Если компонента нет, то производится его загрузка и установка, с разрешения пользователя или без него в зависимости от настроек безопастности веб-браузера. Если на компьютере пользователя установлена более новая версия чем указана атрибутом codebase, то загрузка компонента не производится.
• codetype — MIME-тип файлов, указанных атрибутом codebase. Например, для элементов управления ActiveX значением этого атрибута (если он указан) является application/x-oleobject;
• data — URL-адрес файла данных (для объектов, работающих с данными);
• datafld — имя столбца табличных данных;
• datasrc — "#идентификатор_источника_данных";
• disabled — если указан то объект не доступен;
• hight — высота в пикселах визуального образа компонента (если такой имеется);
• width — ширина в пикселах визуального образа компонента (если такой имеется);
• hspace — расстояние по горизонтали между объектом и соседними элементами;
• vspace — расстояние по вертикали между объектом и соседними элементами;
• id — идентификатор объекта как элемента HTML-документа, с помощью которого обеспечивается доступ к свойствам объекта из сценария;
• name — идентификатор объекта элемента формы; используется в случае, когда объект находится в контейнере <form>, а его данные требуется передать на сервер щелчком кнопки мыши типа submit;
• type — MIME-тип файлов, указанных атрибутом data;
• tabindex — целое число, определяющее порядок перехода к элементу с помощью клавиши <Tab>;
• lang —определяет тип языка для событий контейнера, например script/javascript;
• language —определяет имя языка для событий контейнера. Возможные значения: javascript, jscript, vbscript, vbs.

Кроме перечисленных выше, тег <object> имеет атрибуты class и style (для задания параметров каскадной таблицы стилей), title (для задания текста всплывающей подсказки) и атрибуты-события (для связи с их обработчиками).

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

• name — имя параметра;
• value — значение параметра;
• datafld — имя столбца табличных данных;
• dataformatas — формат данных;
• datasrc —"#идентификатор _источника_данных"

Кроме элементов ActiveX и апплетов, с помощью тега <object> можно вставлять в веб-страницы графические изображения из файлов формата GIF и JPEG, звуковые файлы, а также HTML-документы. Для этого необходимо использовать атрибуты data и type. Значением атрибута data является URL-адрес вставляемого графического или html-файла. Значением атрибута type является тип данных в этом файле: image/jpeg или image/gif для графического и text/html — для html-файла.

Вставляемые объекты указанных выше типов отображаются в отдельных окнах, подобных плавающим фреймам и снабженных при необходимости полосами прокрутки. Размеры этих окон устанавливаются с помощью атрибутов width и height. В отличие от тега <img>, специальнопредназначенного для вставки графики, эти атрибуты не влияют на размеры графического изображения (не маштабируют его). Они задают размеры только окна отображения графики.

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

Похожие материалы по теме: Публикация графики Flash на веб-странице