• Число кадров в секунду (кадр/с). В Internet частота смены кадров варьируется

между 1 и 30 кадрами в секунду. Чтобы анимация не казалась «дерганой»,

для создания плавного движения анимированного GIF-изображения следует задавать как минимум 10 кадр/с. Однако в случае неоновой вывески вам, по- жалуй, стоит уменьшить число кадров в секунду, чтобы создать эффект «мер- цания», свойственный неоновой рекламе.

• Число циклов. Это число определяет, сколько раз Web-браузер проходит че — рез ячейки анимации. В качестве числа циклов может выступать «вечно» (не прекращать повторение анимации) или любое число от 1 до 30 000.

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

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





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

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





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

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

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

с параметрами, заданными во время сохранения файла.

Когда Web-браузер открывает, например, файл neon. gif, вывеска загорается на одну секунду и гаснет на полсекунды. Повторив эту последовательность включе- ний/выключений пять раз, браузер останавливает анимацию на последнем кадре последовательности. Обратите внимание, что последний кадр в последовательнос —

ти — это горящая, или «включенная» неоновая вывеска. Следовательно, когда ани- мация остановится, она остановится на «включенной» вывеске.



Создание баннера с помощью GIF-анимации

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

ми. На коммерческих Web-сайтах баннеры обычно располагаются в верхней части

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

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

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





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

В данном примере, когда посетитель вашего Web-сайта выполняет щелчок на

баннере, атрибут href дескриптора дает Web-браузеру указание перейти на

Web-СаЙТ http://www. buyit. com И Загрузить Web-СТраНИЦу index. html.

Поскольку гиперссылки идентифицируются подчеркиванием (текста) или гра —

ницей вокруг графического элемента (дизайнеры называют этой чертой {stroke)), мы добавили атрибут border с нулевым значением, чтобы браузер не обводил бан — нер чертой (по умолчанию черта вокруг графического файла имеет голубой цвет).

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

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





здает иллюзию слайд-шоу. На рис. 7.13 показан пример использования движуще —

гося текста, где СЛОВа Follow me to the grea t bargains (За мной — к вы- годным сделкам!) движутся слева направо по баннеру. Поскольку движущийся текст трудно читается на экране, используйте крупный шрифт, чтобы посетителю было проще разобрать слова.







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

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

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

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

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

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





ПРАКТИКУМ

Чтобы неоновая вывеска пульсировала (вместо того, чтобы загораться и гаснуть),

применяетсятехнологияанимации, называемаяпостроениемпромежуточныхизоб —

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

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

1. Откройте оба изображения в программе редактирования Web-графики, на — пример, Adobe ImageReady. В данном примере предположим, что кадр с го —

рящей неоновой вывеской — это кадр 1, а кадр 2 содержит слой с погасшей вывеской.



2. Щелкните на пиктограмме Tween (Построить промежуточные изображения).

ImageReady откроет диалоговое окно Tween, показанное на рис. 7.14.»





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

• All Layers (Все слои). Отметьте All Layers, чтобы построение промежуточ —

ных изображений выполнялось с использованием всех слоев изображе — ния.



• Selected Layer (Выбранный слой). Отметьте Selected Layer, чтобы исполь — зовать в анимации выбранные слои. Поскольку анимация неоновой вы — вески содержит два слоя, вместо этого параметра должен быть отмечен параметр All Layers.

• Position (Положение). Отметьте этот параметр, чтобы варьировать анима- цию от первой до последней ячейки. Поскольку вы хотите создать иллю —

зию пульсации, этот параметр должен быть отмечен.

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



• Opacity (Непрозрачность). Если параметр Opacity отмечен, анимация мед- ленно доходит до нулевой непрозрачности.

• Effects (Эффекты). Отметьте этот параметр, чтобы изменять слои эффек —

тов, примененных к изображению. Поскольку вы не использовали ника — ких слоев эффектов, этот параметр отмечать не нужно.

• Tween With (Промежуточные изображения между данным кадром и…).

Щелкните на параметре Tween With и выберите Next Frame (Следующий кадр), чтобы создать анимацию.

• Frames to Add (Добавить кадров). Щелкните на поле ввода Frames to Add и введите число кадров, которые должны быть построены между первым и последним кадром. В данном примере введите число 8.

Щелкните на кнопке ОК, чтобы применить к изображению команду Twe? n. ImageReady сгенерирует восемь новых кадров — общее число кадров анима- ции теперь составляет 10 — как показано на рис. 7.15.







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



Включение в Web-сайт готовой Flash-заставки

Сегодня многие Web-дизайнеры используют Flash для создания анимирован —

ных заставок (splash screens), используемых в качестве коротких «вступлений» для сайтов. Заставку можно рассматривать как десяти — или пятнадцатисекундный рек — ламный ролик о том, кто вы, что вы можете предложить, и почему посетителям стоит посетить ваш сайт.

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

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

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





зера в данный момент, или же можно задать размер, например, 600×800 пикселей.

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

мерами окна браузера — без ущерба качеству воспроизводимого’фильма.

Документ Flash состоит из нескольких элементов: временной шкалы (Timeline),

в которой содержатся текст, изображения, аппликации и видео, сцены (Stage), на

которой отображается Flash-фильм, и рабочей области (Work Area), продолжаю — щейся за пределами сцены и содержащей в себе элементы, которые остаются вне

видимого кадра фильма (см. рис. 7.16). . ^ И : |

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

Эффективный самоучитель по креативному Web-дизайну.



HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX.

Текст, графика, звук и анимация





Введение



В настоящее время, в соответствии с оценками аналитиков, в Internet исполь —

зуется более 100 миллионов доменных имен (статистику по Internet можно найти по адресу http://www. nua. com/surveys). При всеобщей доступности быстрых подключений через цифровые абонентские линии и физические модемы и недо- рогом Web-хостинге, предлагаемом многими компаниями, десятки миллионов пользователей создают свои персональные Web-сайты. К тому же сейчас, когда число онлайновых пользователей оценивается более чем в 500 миллионов чело — век (причем это число растет со скоростью приблизительно 7% в месяц), Web — разработчикам приходится искать пути использования новых технологий, кото — рые могли бы оказать содействие в привлечении и удержании внимания

пользователей, путешествующих по безбрежным просторам Web.

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

рассмотрите скрытые настройки и технологии, с помощью которых появится возможность раскрыть весь потенциал Web-сайта.

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

Для кого предназначена эта книга

Миллионы пользователей и профессиональных Web-разработчиков во Всемир- ной Паутине каждый день имеют дело с Web-страницами. Чтобы упростить свою работу, многие Web-разработчики полагаются на помощь многочисленных про — граммных средств Web-разработки. К сожалению, для того, чтобы использовать новые Web-технологии в полном объеме и поддерживать на должном уровне про — изводительность Web-сайта, на определенном этапе разработчикам приходится закатывать рукава и углубляться в HTML-дескрипторы, атрибуты, правила кас — кадных таблиц стилей, язык JavaScript, активные серверные страницы, РНР и многое другое.