align=»center»>HTML & Web Design Tips & Techniques

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

DHTML-событие Mouseover.



Щелкните на любой из ссылок, чтобы посетить сайт, посвященный

DHTML.

onmo\iseover=»this. style. colors’red1 »

onmouseout=»this. style. color=’blue’»>DHTML Shock —

http://www. dhtmlshock. com/



onmouseover=»this. style. color=’green’fT

onmouseout=»this. style. color=’blue’»>DHTML Examples —

http://www. w3schools. com/dhtml/dhtml_examples. asp



onmouseover=»this. style. color=’magenta’»

onmouseout=»this. style. color=’blue *»>Dynamic Drive —

http://www. dynamicdrive. com/

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

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

вы сможете двигать серию графических элементов друг вокруг друга. Большинство

Web-браузеров поддерживают анимационные эффекты DHTML, не требуя для это —

го выгрузки дополнительных компонентов. (То, что посетителям не приходится останавливаться и выгружать подключаемые модули для воспроизведения анима — ционного эффекта на странице — несомненный плюс.) Однако создание DHTML —

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





содержимого, работающего одинаково во всех браузерах, — достаточно сложная за —

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

вание анимации — дело довольно трудоемкое и утомительное. К счастью, прило — жения с дружественным интерфейсом, подобные Macromedia Dreamweaver, помо — гут вам с созданием кода сценариев DHTML.

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

ет DHTML, посетите следующие сайты:



• http://www. hfe. org/resource/demo2/



• http://www. dhtmlcentral. com/



• http://www. webcoder. com/



Работа с GIF-анимацией

Анимация с использованием формата графического обмена (GIF — Graphic

Interchange Format) — наиболее популярная на сегодняшний день форма анимации

в Internet. Такая популярность вызвана несколькими причинами:

• GIF-анимацию легко создавать. GIF-анимацию можно создать с помощью ряда приложений для создания изображений и Web-дизайна, таких как Adobe ImageReady и Macromedia Fireworks. Кроме того, из сайтов условно-бесплатных программ (shareware), в числе которых http:/ /

www. shareware. com И http://www. tucows. com, ВЫ МОЖете ВЫГруЗИТЬ уСЛОВ —

но-бесплатные программы, позволяющие создавать GIF-анимацию на осно —

ве существующих изображений. Среди популярных условно-бесплатных программ можно назвать GIF Builder и (Macintosh) GIF Construction Set (Windows).

• GIF-анимация не требует специального программного обеспечения для браузеров.

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

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

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

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





Анимированные GIF-изображения работают так, как традиционная, рисован — ная покадровая анимация, которую создает компания Уолта Диснея и ей подоб —

ные. Каждый GIF-файл содержит определенное число ячеек, где каждая ячейка

представляет собой часть анимации. При сохранении GIF-файла программа «скла —

дывает» изображения (то есть ячейки) одно поверх другого и сохраняет их все в од —

ном файле^Когда Web-браузер открывает файл, он отображает отдельные изобра — жения по одному за раз, создавая зрительный образ движения, как показано на рис. 7.1.





Как мы подробно рассмотрим чуть позже в этой главе, в практикуме «Управле — ние GIF-анимацией с помощью внутренних параметров», при сохранении GIF — анимации вы задаете те или иные из ряда параметров, которые позволяют регули — ровать скорость и продолжительность анимации. Программа, с помощью которой вы создаете GIF-анимацию, сохраняет отмеченные опции в GIF-файле, а Web-бра- узер интерпретирует выбранные параметры, открывая файл с целью воспроизведе — ния анимации.

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

Еще одна причина широкого распространения GIF-анимации состоит в про —

стоте ее вставки в HTML-документ. GIF-анимация встраивается в Web-страницы с

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

и иллюстраций, как показано ниже:



img src=»neon. gif» width=»50M height=»50″ />



Атрибут src в данном примере дает Web-браузеру указание загрузить GIF-файл neon. gif. Информация, поясняющая браузеру, как построить анимацию GIF-фай —

ла (скорость, количество циклов), внедрена в сам файл, а не записана в HTML — коде.

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

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





Animation Factory http : //www. animfactory. net/

All Free Original Clipait htt p : //www. free-graphics. com/

Animation City htt p : //www. animationcity. net/

imageif. net http : //www. imagif. net/



Далее в этой главе, в практикуме «Создание GIF-анимации с чистого листа», вы создадите свою собственную GIF-анимацию.



Работа с Macromedia Flash

Приложение Flash — это средство разработки мультимедиа, созданное корпора — цией Macromedia, которое позволяет создавать полноэкранную анимацию со

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

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

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

в файле должны будут быть сохранены все пиксели, из которых состоит линия, а также все те пиксели, которые составляют фон изображения. Если же вы сохраня —

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





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





Поскольку файлы, сохраненные в виде векторов, малы, изображения загружа- ются быстрее, нежели традиционные JPEG — или GIF-изображения. Векторные изображения, сохраненные для использования в Flash-анимации, определяются как файлы SVG-изображений, или масштабируемой векторной графики (Scalable Vector Graphics). Размеры SVG-изображений можно изменять (делать их больше или меньше) во время воспроизведения анимации без потери качества изображе — ния. Это значит, что вы можете создавать файлы сложной Flash-анимации, кото — рые быстро загружаются и воспроизводятся на компьютере посетителя.

Использование Flash вместо традиционной GIF-анимации приводит к ряду преимуществ:

•Flashоперируетнебольшимиразмерамифайловизображений. Меньшиеразме — ры файлов векторных изображений означают более быструю загрузку анима — ции.

• Flash пользуется поддержкой браузеров на различных платформах. Не имеет значения, пользуетесь ли вы браузером Internet Explorer или Netscape Navigator, операционной системой Macintosh или Windows. Подключаемые модули, воспроизводящие Flash-анимацию, разработаны для большинства

Web-браузеров и распространяются совершенно бесплатно.

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

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

• Flash обладает интерактивностью. Flash позволяет создавать интерактивные меню и навигационные панели, не требуя от вас опыта работы с языками программирования.

• Flash инкапсулируется с JavaScript. Flash полностью совместим с JavaScript.

Поскольку все браузеры «понимают» язык JavaScript, вы можете создавать еще более сложное взаимодействие между страницей и ее посетителями.

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

Для разработки Flash-анимации используется приложение Flash компании Macromedia (рис. 7.3). На Web-сайте Macromedia доступна для выгрузки пробная версия Flash, с помощью которой в течение 30 дней можно создавать свою соб — ственную Flash-анимацию.

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









Хотя Flash и является популярным средством создания анимации, конкуренты все же у него есть. В 1999 году компания Adobe выпустила на рынок продукт под

названием LiveMotion. Приложение Adobe LiveMotion позволяет создавать полно — экранную анимацию с помощью векторной графики, подобной той, которая ис — пользуется в Macromedia Flash.

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

Extreme Flash htt p : //www. extremef las h. com/ Flash Kit http://www. flashkit. com

freelayOUtS. com htt p : //www. f reelayout s. com/

Macromedia http : //www. macromedia. com



В практикуме «Создание Flash-анимации с чистого листа» далее в этой главе вы создадите свою собственную Flash-анимацию.



Использование Shockwave

Flash — не единственный Web-продукт, выпускаемый компанией Macromedia. В

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

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





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

В 1996 году Macromedia расширила возможности Director, представив Shockwave. Shockwave позволяет Web-дизайнерам преобразовывать фильмы Director в интерактивные документы, которые отображаются в Internet. Shockwave — это по —

пулярный метод создания анимации для Internet (файлы Shockwave называются фильмами). Однако файлам Shockwave недостает компактного размера Flash-ани — маций; кроме того, создание Shockwave-фильмов требует обширных познаний в области языка программирования, называемого Lingo.

Чтобы создать фильм Shockwave, вы должны сначала разработать фильм в Director с помощью языка программирования Lingo, а затем преобразовать фильм Director в фильм Shockwave. При стоимости Director около $1000 и крутизне кри — вой обучения, свойственной языку Lingo, Shockwave как средство создания Web — анимации не входит в арсенал большинства Web-дизайнеров, в особенности при наличии Macromedia Flash и Adobe LiveMotion, которые предоставляют вам прак — тически ту же гибкость и интерактивность, но за гораздо более низкую цену, не требуя при этом изучения языка программирования.

Поместить Shockwave-анимацию на Web-страницу можно с помощью дескрип — тора либо . Приведенный ниже HTML-код, например, служит иллюстрацией использования дескриптора для включения фильма Shockwave в HTML-файл:



embed src=»shock. dcr» height=»400″ width=»400″ name=»shocking» />



В данном примере дескриптора атрибут sr c определяет имя Shockwave —

фильма (shock. dcr), который Web-браузер должен воспроизвести, а атрибуты

width и height задают размеры «экрана» Shockwave-фильма внутри окна браузера. Атрибут name обеспечивает возможность передачи данных между формами и дру —

гими объектами HTML и фильмом (подробнее об этом рассказывается ниже).

Существует несколько Web-сайтов, предлагающих Shockwave-приложения, кото — рые вы можете выгрузить, дабы опробовать Shockwave. Кроме того, с Web-сайта Macromedia, http://www. macromedia. com/downloads, МОЖНО выгрузить 30-ДНев —

ную пробную версию Director Shockwave Studio. Есть также несколько сайтов,

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

Sh0Ckwave. C0m http: //www. Shockwave. com/sw/home

Shockwave-SOUnd. COm http : //www. Shockwave-sound, com

Macromedia http: //www. macromedia. com



Когда использовать и когда не использовать анимацию

Как уже упоминалось, анимация привлекает внимание, развлекает и информи- рует. Однако сколь бы чудесной ни была анимация, при использовании анимации

на Web-страницах следует соблюдать и определенную осторожность:

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





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

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

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

• Не используйте анимацию там, где она отвлекает внимание. Избегайте ис —

пользования анимации, на Web-страницах, содержащих большие объемы текста. Анимация оказывает влияние на концентрацию внимания пользова —

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

• Не используйте анимацию ради анимации. Поскольку файлы анимации име —

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

Помните: использование анимации — это «палка о двух концах». С одной сто —

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



Работа со звуком в Internet

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

музыки, предупреждающей вас (зрителя) о грядущей опасности?

Точно так же, как звук, сопровождающий телепередачу, помогает «задать на — строй» аудитории, вы можете усилить впечатления посетителей вашего сайта, до —

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

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

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





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

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

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



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

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



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

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

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

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

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