Современный контент - добавление видео, звука и flash-приложений

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

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

Движущийся текст

Движущийся текст добавить легче всего. Это делается тегами <marquee> и </marquee>.

<marquee> и </marquee> - создает область с движущимся текстом..

У тега <marquee> очень много атрибутов, без применения которых использовать тег практически невозможно. Атрибуты:

width: Ширина в пикселях выделенной области, в которой прокручивается текст.
height: Высота в пикселях выделенной области, в которой прокручивается текст.
hspace и vspace: Горизонтальные(hspace) и вертикальные (vspace) поля вокруг выделенной области.
loop: Количество движений текста. Значение атрибута -1 или infinite пустит текст гулять по выделенной области до бесконечности
bgcolor: Фоновый цвет выделенной области
direction: Направление движения текста. Может принимать значения down (движение сверху вниз), left(движение справа налево), right (движение в правую сторону), up (движение вверх).
scrollamount: Анимация содержимого элемента <MARQUEE> происходит за счет периодического стирания информации и отображения ее на новом месте. Параметр scrollamount устанавливает расстояние в пикселях между старым и новым положениями(один цикл), которые влияют на скорость движения и плавность хода. Чем выше значение, тем быстрее перемещается содержимое <MARQUEE>. Если значение равно нулю, то движения не происходит. По умолчанию 6.
scrolldelay: Изменяет скорость смены цикла, в миллисекундах. По умолчанию 85.
behavior: Тип движения текста. Принимает значения scroll(текст движется в заданном направлении, полностью скрывается и начинает движение сначала), alternate(только для direction="right|left", текст движется вправо-влево, от одного края к другому) и slide(текст движется в направлении, заданным атрибутом direction, доходит до края области и останавливается).

Вы: "Ужас!"

Мы: "Сами в шоке!"

Вот пример применения тега <marquee>:

Анимированные gif

Прямо над этим заголовком бегает всамделишное анимированное gif изображение.

Эти изображения добавляются также, как и обычные изображения. Никаких отличий.

Создать такие изображения самому несложно, но это требует специальных программ, которые практически всегда платные. Гораздо легче подыскать подходящую анимацию в Интернете. Например, здесь.

Громкий Web

Осторожно! Наблюдается нашествие звуков.

В Web уже давно можно использовать звуковые дорожки, и это не секрет. Другое дело в том, как их использовать.

Первое, что нужно сделать - определить расширение звуковой дорожки.

AU (.au): Аудиоформат для Интернета. Поддерживается всеми браузерами
MIDI (.mid): Популярный в Интернете аудиоформат электронной музыки. Этот формат сжимает музыку на основе синтезатора, т.е. превращает ее в набор нот. Неприемлим для песен.
WMA(.wma): Формат с приемлимым качеством, но большим размером.
Real Audio: Формат, начинающий проигрывать музыку параллельно с загрузкой, а не после полной загрузки.

MP3

Популярный формат музыки, воспроизводится средствами проигрывателя пользователя, как правило Windows Media Player.

Вставка аудио:

Способ первый: ссылка

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

Способ второй: фоновый звук

Возможно два варианта - тег <bgsound />, только для IE, и тег <embed />.

В первом случае вы ставите тег <bgsound /> в головную область сайта (между тегами <head>). Тег <bgsound /> имеет параметры: src (путь к файлу) и loop (количество раз(infinite - бесконечно)). Только для звука, проигрывающегося автоматически при открытии страницы. Только форматы AU, WAV, MIDI.

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

У тега <embed /> для проигрывания звука есть атрибуты:

src: путь к файлу
autostart: запускать ли аудио автоматически(true|false)
loop: сколько раз запускать аудио автоматически (autostart="true")
hidden: скрывать ли средство управления звуковой дорожкой(true|false). Внимание! Если вы скроете средство управления (hidden="true") и не станете использовать автоматическое проигрывание (autostart="false"), то пользователь не сможет извлечь из звукового файла никакой пользы

Если Вы хотите проигрывать звук автоматически, лучше использовать оба тега (<bgsound />) и <embed />.

Видео

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

Пример здесь.

Приведенный пример не лучший, т.к. отсутствует полоса управления. Все дело в том, что для уменьшения размера файла, видео было переконвертировано в формат swf - Flash формат для видео и приложений.

Поддерживаются форматы: FLV, MP4, AVI, SWF.

Видео добавляется тегом <embed>. Дополнительные параметры и информацию поищите в Интернете.

Flash приложения

Flash приложения, добавленные на ваш сайт, поднимают его на новый уровень. Несмотря на большой размер и необходимость Adobe Player, установленного как на Вашем компьютере, так и на компьютере пользователя. Если у Вас есть Flash приложение (swf или flv(видео)), имеет смысл сделать ссылку на сайт Adobe, где пользователи смогут скачать Flash Player. Он бесплатен.

Flash приложения можно скачать в Интернете или сделать самому, если у Вас есть программа Macromedia Flash. Однако для ее изучения нужно много времени, это гораздо сложнее, чем курс XHTML. Если у Вас есть такое желание, Вы можете скачать портативную версию Flash CS4 на DepositFiles. Счастливые обладатели Windows 7 будут не так счастливы, ибо с Win7 это чудо не работает.

Вставлять видео и flash приложения сложнее, чем звук. Присутствует множество параметров. Автоматически их подобрать может только Macromedia Flash.

Игра "Вертолетик" - swf приложение

Чтобы начать игру, щелкните по ней. Удерживая левую кнопку мыши, Вы поднимаете вертолетик, а отпуская мышь, отпускаете его. Вертолетик летит автоматически, победы в игре нет, но учитывается максимальное количество очков. Вертолетик не должен врезаться в стенки или касаться пола и потолка.

Сейчас у нас будет небольшой урок, посвященный формам, после чего мы приступим к изучению БОЛЬШОЙ темы - таблицы стилей. Вперед!

uroki.webservis.ru