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

Flash-документ (мультфильм, ролик, клип) может включать разнородное содержимое: текст, растровую и векторную статическую и анимационную графику, звук, видео и элементы пользовательского интерфейса. Вы можете создать отдельную страницу или даже целый сайт, используя технологию Flash. Flash-документы разрабатываются с помощью пакета Macromedia 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 = адрес_файла></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.

  Пример:

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вставка звука</title>
</head>

<body>
Сергей Трофимов
<a href="S._Trofimov-Snegiri.mp3">Снегири</a>
</body>
</html>



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

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

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

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

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Звук и видео</title>
</head>

<body>
<p>Сергей Трофимов<br>
Снегири </p>
<p><embed src="Snegiri.mp3" ></embed>
<p>Beatles<br>
Girl</p>
<p><embed src="Girl.mp3" width="200" height="150"></embed></p>
<p>Shocking Blue<br>
Venys</p>
<p><embed src="Venys.mp3"</p>
<p>Видео</p>
<p><embed src="../images/avto1.swf" width="350" height="200" ></embed></p>
</body>
</html>


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

  Тег <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>. Значением атрибута является строка, содержащая букву или цифру. Если нажать указанную клавишу в сочетании с клавишей , то объект получит фокус;
  • 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>, еще какой-нибудь элемент, способный принять фокус (например, текст).

  Понравилась статья или раздел сайта - порекомендуйте их друзьям.

  • Обсудить на форуме

  Комментарии(0)

  Для добавления комментариев надо войти в систему и авторизоваться
  Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться