Май 2010

будет «поглощен» страницей, непродуманный саундтрек в состоянии отпугнуть по —

34 8 Глава 7. Анимация, звук и видео





сетителей. Например, музыка, постоянно играющая на фоне Web-страницы, отвлека —

ет внимание, если только она не имеет прямого отношения к содержимому — как,

скажем, последний компакт-диск Бритни Спирс на посвященном ей Web-сайте.



ПРИМЕЧАНИЕ Используя на своем Web-сайте музыку, позаботьтесь о получении разре — шения артиста или звукозаписывающей компании, которые являются авторами музыки. Так

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



Хотя сегодня звук стал в Internet делом привычным, Всемирная Паутина долго оставалась безмолвной средой. В 1996 году, когда коммерческие браузеры, такие как Netscape Navigator, стали доступнее широкой публике, появился спрос на про- фессиональных Web-дизайнеров, обладающих высокой квалификацией в области разработки медиа-содержимого.

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

Web-сайта ожидают получить результат в течение нескольких секунд. К 1

В конце 1996 года компания RealNetworks создала первую версию RealAudio. В

RealAudio была применена «потоковая» технология, позволяющая Web-браузерам загружать и проигрывать звуковые файлы прямо на компьютере посетителя. Техно — логия потокового воспроизведения позволяет воспроизводить музыку или речь в то время, пока браузер продолжает загружать файл. В обычной ситуации Web-браузер загружает начало аудиофайла и начинает воспроизведение уже загруженной части файла, в то же время продолжая извлечение остальной его части. Таким образом, по- сетители могут прослушивать длинные аудиофрагменты, не дожидаясь (в течение дол — гого времени), пока большой аудиофайл будет загружен полностью.

С RealAudio конкурирует QuickTime компании Apple, который функционирует подобно RealAudio. На многих Web-сайтах используются оба формата — и

RealAudio, и QuickTime — и большинство пользователей уже выгрузили соответ —

ствующие подключаемые модули. Ниже приводится несколько реком*ендаций по использованию звука в Internet:

• Используйте звук для передачи идей посредством диалогов и дикторской речи.

• Используйте звук для улучшения навигации по Web-сайту. Например, ис —

пользуйте звук щелчка в сочетании с кнопкой с эффектом «переката» (то есть кнопкой, меняющей свой вид при наведении на нее курсора мыши (rollover button)).

• Используйте фоновую музыку (когда это уместно), чтобы задать настрой Web-страницы. Например, чтобы задать настрой для Web-сайта, посвящен — ного жизни в океане, можно проигрывать шум прибоя, мягко накатывающе — гося на берег.

• Используйте звук, чтобы увеличить объем онлайновых продаж аудиозапи — сей. Например, предоставьте посетителям возможность прослушать фраг — мент новой песни перед тем, как ее купить.

Глава 7. Анимация, звук и видео 34 9





Использование звука внесло изменения в дизайн и конструкцию Web-сай — тов. Например, сейчас на некоторых сайтах ведется радиовещание (называется это webcast — созвучно broadcast (вещать, передавать теле- или радиосигналы)). Webcast используются для всего чего угодно — от музыки до прямых трансляций президентских речей и игр бейсбольной высшей лиги. Время идет, технологии развиваются, и Web-дизайнеры все больше и больше понимают, сколь велика роль

звука вместе с остальным содержимым в создании настроя и удержании внимания Web-посетителя. Тысячи сайтов в Web вещают в прямом эфире. В качестве приме — ров можно назвать National Public Radio (http://www. npr. com) и MSNBC

(http://www. msnbc. com).



ПРИМЕЧАНИЕ Приняв решение включить в свой Web-сайт музыку или звуки, снабдите сайт кнопкой, которая позволит пользователю быстро выключить музыку или звук. Многих

пользователей раздражает, когда сотрудник за соседним столом не может сразу же упра — виться с громкостью на своем компьютере.



Точно так же, как графические файлы сохраняются с применением специфи —

ческих форматов, подобных JPEG и GIF, аудиофайлы имеют свои собственные

форматы. Общепринятые форматы звуковых файлов, которые хорошо работают на

платформе Macintosh, включают в себя AIF, AIFF, SND, AU, МРЗ и MIDI (только

для музыки). На платформе Windows воспроизводятся форматы WAV, AU, SND, МРЗ и MIDI (только для музыки). Как видите, некоторые из форматов (AU, SND, МРЗ и MIDI) могут использоваться как в Macintosh, так и в Windows. Помимо

следующие атрибуты (hidden, loop, autostart) :











embed src=»music. au» hidden=»true» loop=»true» autostart=»true»X/embed>



Для чего-нибудь, помимо простого проигрывания звукового файла, посетите — лям вашего сайта понадобится решение на основе подключаемого модуля, напри — мер, Flash, QuickTime или RealAudio, как говорилось выше.

В спецификации HTML сказано, что предпочтительным способом внедрения зву —

ка в Web-страницу является применение дескриптора. Однако до тех пор,

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

Встраивание видео на Web-страницу

Создание видео для воспроизведения на Web-страницах — одна из наиболее

быстрорастущих областей Web-дизайна. Более того, с появлением новых техноло —

гий практически каждый может создать свою настольную видеостудию. Если вы планируете создавать свое собственное видео, приведенные ниже заметки помогут вам получить качественный результат:

• Планируйте. Всегда планируйте видеосъемку заранее. Один из способов это сделать — набросать основные разделы видеосъемки с помощью раскадров — ки. Раскадровка содержит небольшие описания кадров: где происходит съемка, кто снимается в ролике, что необходимо (реквизит, оборудование) и какие идеи должен этот фрагмент видеоролика передать зрителю.

Глава 7. Анимация, звук и видео 35 1

.—_—,—. • »



• Уменьшите движение камеры. Снимая видеоролик, сводите движения камеры

к минимуму. Агрессивное движение и «наезды» камеры выглядят не очень хорошо, к тому же они плохо транслируются, будучи сжатыми в формат, пригодный для Web. Многие программы сжатия видеоданных сокращают размер файла путем повторения информации, содержащейся в одном кадре,

в следующем. Если вы постоянно двигаете камерой, программе сжатия нече —

го копировать; следовательно, избыточное движение не только сбивает с

толку зрителя, но и является причиной большего размера файла готового ролика.

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

сировать яркий фон, делая объекты на переднем плане излишне темными. ‘

• Не усложняйте фон. При загроможденном заднем плане изображения на пе- реднем плане могут сливаться с задним планом. Кроме того, простой зад —

ний план (вроде однотонных задников) помогает программе сжатия умень — шить размер файла готового ролика.

• Используйте хорошее освещение. Хотя многие видеокамеры позволяют сни —

мать при низком освещении, сделанная при низком освещении запись выг —

лядит тусклой, а готовый ролик не очень хорошо транслируется в Internet. Пользуйтесь хорошим освещением, чтобы элементы видео были четко раз — личимы.

• Не забывайте о фокусировке. Следите за тем, чтобы видео было хорошо сфо — кусировано. При сжатии готового клипа некоторая часть исходного качества ролика будет принесена в жертву для создания файла меньшего размера. Если исходное изображение было слегка не в фокусе, сжатый Internet-ролик

от этого только ухудшится.



Выполнение этих несложных действий при создании видеоролика обеспечит вам максимальное качество его готовой Internet-версии.



Монтаж видеоролика

После съемки видео вам понадобится программа для видеомонтажа, чтобы со —

брать отдельные видеофрагменты в готовый ролик. Video Wave от MGI Software — недорогое ($99) приложение, позволяющее брать видеофрагменты из нескольких файлов и комбинировать их. Вы даже сможете добавлять специальные эффекты,

такие как субтитры, звуковые эффекты и голос за кадром. Если же брать повыше,

то такие программы, как Adobe Premiere и iMovie, смогут предоставить вам больше возможностей; они включают в себя даже модуль для аудиомонтажа, что можно видеть на рис. 7.4.

Хотя применение видео в Internet постоянно растет, способность Internet быст —

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

352 Глава 7. Анимация, звук и видео



На данный момент, если, конечно же, ваши посетители не согласны мириться

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

• Используйте видео для рекламы телевизионных шоу и фильмов: в этих от — раслях традиционно использовались анонсы (короткие отрывки передач или фильмов).

• Используйте видео, чтобы дать посетителям впечатление о себе. Например, короткий видеоролик усилит впечатление от резюме, размещенного в Internet. Так потенциальные работодатели получат шанс увидеть то, что они

покупают. Н |

• Демонстрационные ролики (product demos) и «обзорные» ролики (walk — around video) полезнее стационарных фотографий и помогают потенциаль — ным покупателям действительно увидеть товар. Маркетинговые сайты, та —

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

виртуальной реальности компании Apple (www. appie. com).

Конечно же, использование какой-либо из этих идей для создания видеороли —

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

Глава 7. Анимация, звук и видео 35 3





MTV

ESPN

АМС Theatres

Warner Brothers

http://www. mtv. com/

http://www. espn. com

http://www. amctheatres. com

http://www. warnerbros. com

Вопросы совместимости видео в Web

свой Web-сайт видеоролик, имейте в виду, что

не каждый посетитель сможет просмотреть ваш шедевр. Для просмотра видеоро- ликов необходим Web-браузер с подключаемым модулем, дающим возможность просмотра видео. И у RealAudio, и у QuickTime есть модули, позволяющие Web- браузерам воспроизводить видеоролики. Однако загрузка и установка модуля тре — бует времени и определенного терпения со стороны посетителя. Большинство оп — росов свидетельствуют, что если посетителям придется перед тем, как просмотреть видеоролик, остановиться и выгрузить подключаемый модуль, большинство из них попросту покинут сайт.

Вместо того чтобы вынуждать посетителей выгружать программное обеспече —

ние, лучше предоставить им возможность предварительного просмотра видеороли —

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

ради возможности просмотреть ваш видеоролик (см. рис. 7.5).





354 Глава 7. Анимация, звук и видео



Видео: потоковое воспроизведение или выгрузка?

Вставляя в Web-страницу видеоролик, вы можете выбрать один из двух вариан —

тов воспроизведения ролика: потоковое воспроизведение или воспроизведение после полной выгрузки. Потоковое видео воспроизводится при помощи подклю — чаемого модуля браузера, такого как RealAudio или QuickTime; воспроизведение начинается до того, как видеофайл будет полностью выгружен. Обычно воспроиз — ведение потокового видео начинается тогда, когда выгружена часть файла, доста — точная для того, чтобы продолжать воспроизведение в процессе загрузки осталь — ной части файла. Одна из проблем, связанных с потоковыми видео, заключается в том, что видеофайл должен быть сжат До небольших размеров, чтобы он мог выг — ружаться, пока он воспроизводится. Поскольку некоторые виды сжатия видеодан —

ных применяют технологию сжатия с потерями (сжатие посредством удаления ин- формации), видеоизображение ухудшается, что приводит к низкому качеству воспроизведения. Кроме того, в то время как браузер (точнее, модуль воспроизве — дения видеоданных в браузере) загружает потоковое видео, задержки, связанные с

трафиком в Internet или низкой скоростью соединения, могут задержать «прибы —

тие» видеоролика, что нарушает воспроизведение, вызывая эффект «мозаичности»

экрана либо нарушение синхронности звука и изображения.



ПРИМЕЧАНИЕ Потоковое аудио или видео может потребовать от сервера обработки су — щественного объема. Если ваш сайт поддерживает потоковые операции, вам необходимо от —

слеживать его производительность, как описывается в главе 12.



Один из вариантов — предоставить посетителю возможность выгрузить не — сколько большую (и более качественную) версию видеофайла. В процессе выгрузки видеофайла посетитель не сможет просмотреть видео до тех пор, пока его компью — тер не получит весь файл. Например, выгрузка одноминутного видеоролика может занять пять минут. Однако, просмотрев менее качественную потоковую версию, многие посетители могут согласиться подождать в течение времени, требуемого для выгрузки версии с лучшим качеством. В данном случае, как и во многих ситуа — циях, имеющих место при Web-дизайне, дополнительные усилия, затраченные на то, чтобы предоставить посетителям возможность выбора, помогают создать луч — ший и более дружественный к пользователю Web-сайт.

Один из способов включить видеофайл в Web-страницу — с помощью дескриптора

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



lH^KHMTe на видеофрагменте, чтобы посмотреть ролик



Использование виртуальных экскурсий

Многие Web-сайты предлагают виртуальные экскурсии, позволяющие пользователям пройтись по домам, выставленным на продажу, проверить види — мость с того или иного места на стадионе, покупая билеты на спортивные со —

стязания (http://kcchiefs. com/fanfair/v_arrowhead. asp), Прогуляться ПО

улицам города, например, Ванкувера (http://www. virtuaiiyvancouver. com/),

Глава 7. Анимация, звук и видео 35 5





осмотреть достопримечательности, например, Пирамиды (www. pbs. org/wgbh/

nova/pyramid/explore/khufuall. html), И еще МНОГО чего. Чтобы ОТПравиТЬСЯ

в виртуальную экскурсию, вам обычно понадобится подключаемый модуль

QuickTime VR для браузера, обзавестись которым можно по адресу http:/ /

www. appie. com/quicktime. На рис. 7.6, например, показана виртуальная экс — курсия по Нью-Йорку, которая позволит вам сравнить различные районы горо — да, как они выглядели в 1907 году с тем, как они изменились к 1999 году

(http://www. pbs. org/wnet/newyork/hidden/contents. html).







Чтобы создать виртуальную экскурсию в панораме 360 градусов, разработчики с

помощью такого инструмента, как Apple QuickTime VR Authoring Studio, «сшивают» изображения вместе в форме сферы. В общем случае для создания 360-градусной панорамы вам понадобится как минимум шесть фотографий (вид спереди, сзади, слева, справа, сверху и снизу). QuickTime VR Authoring Studio включает в себя

Panorama Stitcher — инструмент, сшивающий изображения в форме сферы. Вели — колепные виртуальные экскурсии предлагают следующие Web-сайты:

The Louvre Museum (Лувр)

http://www. louver. or. jp/louver/QTVR/anglais/index. htm

Submarines (Подводные лодки)

http://www. pbs. org/wgbh/nova/subsecrets/

Virtual Earth (Виртуальная Земля)http://www. virtuaiearth. com

Apple’s Cubic VR Gallery (Кубическая VR-галерея Apple)

http://www. apple. com/quicktime/products/gallery/

356 Глава 7. Анимация, звук и видео





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

В заключение хотелось бы сказать, что содержимое было и всегда будет цент — ром внимания посетителя Web-сайта, будь то содержимое текстом, неподвижной

графикой, анимацией, аудио, видео или комбинацией всего перечисленного. Со — держимое является причиной, по которой посетитель вошел в Internet, и содержи — мое — всегда первое, что ищет на Web-странице посетитель. Качественное содер — жимое — наиболее важный аспект Web-дизайна. Не найдя качественного содержимого, посетители отправятся на другие сайты в поисках того, что им нуж- но. Следовательно, анимация, видео и аудио должны поддерживать содержимое

Web-сайта, а не просто доказывать, что вы «это умеете».

Помните, что у Web-пользователей есть цель, и что особым терпением они не

обладают. Всегда разрабатывайте свои Web-страницы так, чтобы они быстро дава —

ли ответы, которые ищут посетители. Если вам не удастся сделать именно это — предоставить качественное содержимое — все видео, анимация и аудио в мире не смогут удержать посетителей на вашем Web-сайте.



Создание GIF-анимации с чистого листа

GIF-анимация — наиболее распространенный в Internet вид анимации. GIF — анимация состоит из отдельных кадров, или ячеек, каждая из которых представля —

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

или текст. /

Например, для создания анимированного шагающего персонажа обычно требу —

ется 8—10 отдельных ячеек (четыре-пять ячеек на шаг). Каждая из ячеек представ —

ляет собой часть движения персонажа, как показано на рис. 7.7.









Поскольку для того, чтобы идти, нужно ставить одну ногу впереди другой (как ваши родители с таким трудом учили вас в детстве), для создания анимации иду- щего человека вам потребуется создать только один цикл ходьбы. Дойдя до после- дней ячейки, анимация автоматически вернется к первой ячейке, и анимация по — вторится заново. Повторение серии ячеек называется циклом (cycling).

Глава 7. Анимация, звук и видео 35 7





ПРАКТИКУМ

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