12. Анимация Web-страниц

Анимация графических изображений

Выше мы с вами рассмотрели анимацию свободно позиционируемых элементов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать невидимыми. С обычными, фиксированными элементами такого не сделать.

Правда, у этого правила есть одно исключение. Можно анимировать графические изображения, и Dreamweaver предоставляет такую возможность. Но изменяться в процессе анимации может только имя отображаемого файла (атрибут SRC тега <IMG>).

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

Как же анимировать графическое изображение? Очень просто. Давайте создадим новую страничку и назовем ее 12.1.htm. Она не будет иметь отношения к сайту Sample site 1, но позаимствует из него графические файлы.

Поместите на эту страницу графическое изображение. В качестве отображаемого файла задайте Email.gif, находящийся в папке Pics, вложенной в папку Samplel (в ней расположены файлы сайта Sample site 1). Это совсем просто, поэтому нет смысла пускаться в длительные объяснения.

Теперь создадим новую дорожку анимации для вновь созданного изображения. Выделим его и выберем пункт Add Object в контекстном меню панели Timelines (в контекстном меню графического изображения такого пункта нет). После этого Dreamweaver выведет очередное сообщение, предупреждающее, что он может управлять только параметром имени отображаемого файла (рис. 12.14). Закройте его, нажав кнопку ОК.

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

Установим продолжительность анимации в пять секунд или 75 кадров (5 секунд умножить на 15 кадров в секунду). Для этого перетащим влево правую границу (вторую ключевую точку) дорожки до отметки "75" на шкале времени. И зададим новый графический файл, который отобразится во время достижения второй ключевой точки. Для этого проверим, выделена ли вторая точка, и изменим содержимое поля ввода Src редактора свойств так, чтобы оно указывало на файл Email2.gif, также находящийся в папке Pics, вложенной в папку Samplel. Данный файл будет отображен при достижении конца... нет, не траектории, а дорожки (ведь изображение не движется).

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

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

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

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

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

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

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

Есть и другой путь. Если ваша анимация представляет собой набор последовательно сменяющихся картинок или элемент, движущийся по небольшой площади страницы, попробуйте реализовать ее в виде видеофильма. Практически все браузеры, за исключением совсем уже старых, поддерживают формат "анимированный GIF-файл". Этот формат используется в Web-графике так долго, что даже подмял под себя некоторые стандарты, например стандарт на рекламные баннеры. Существует огромное количество программ для создания анимации в формате GIF. А для помещения такой анимации на Web-страницу вам нужен только хорошо знакомый тег <IMG> — и никаких сценариев!

Точно так же можно обойти проблему несовместимости со старыми программами.

Но есть еще одна проблема, решение которой весьма затруднительно. Это проблема авторских прав на программный код. Точнее, проблема охраны этих самых авторских прав.

Давайте рассмотрим обычные программы, которыми вы пользуетесь. Это могут быть популярнейший текстовый редактор Microsoft Word, проигрыватель мультимедийных файлов Nullsoft WinAmp, игра Quake 3 или сама операционная система Windows. Все эти программы были созданы с использованием компилируемых языков программирования, т. е. программа, написанная на каком-либо языке программирования (C++, Pascal или Assembler), была откомпилирована в набор инструкций центрального процессора и сохранена в файле с расширением ехе. Впоследствии, если пользователь запустит этот файл, он будет исполняться непосредственно центральным процессором, без участия каких-либо программ-интерпретаторов.

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

Программы Web-сценариев пишутся на интерпретируемых языках программирования. Это значит, что в Web-странице такие программы находятся прямо в виде исходного кода. Любой JavaScript-программист может без труда получить доступ к этому коду и выяснить, как работает программа. А это значит, что никаких секретов в JavaScript-коде не утаишь.

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

Есть, вообще-то, еще один недостаток, но он свойствен не самой анимации, основанной на Web-сценариях, а подходу, предлагаемому Dreamweaver. Дело в том, что необходимый для создания анимации набор Web-сценариев помещается в секцию HTML-заголовка страницы (тег <HEAD>). Из этого следует, что если вы используете для создания страниц шаблоны, вы можете создать анимированные (и вообще любые свободно позиционируемые) элементы только в самом шаблоне, но никак не в созданных на его основе страницах. Dreamweaver просто не даст вам этого сделать. В самом деле, секция заголовка — это неизменяемая область, а поместить какой-либо код в неизменяемую область Dreamweaver вам не позволит. Имейте это в виду. Хотя, конечно, вы можете отказаться от анимации или "открепить" страницу от шаблона, а потом уже делать с ней все, что вам заблагорассудится.

Что дальше?

Кино закончилось. Да здравствует кино!

Как видите, создание анимации на Web-странице — задача довольно простая, если, конечно, вы работаете в среде Dreamweaver. Вы только задаете траекторию движения нужного элемента, a Dreamweaver делает всю остальную работу по "вдыханию" в него "жизни". Если хотите посмотреть, что же он делает с вашей страницей в этом случае, посмотрите исходный HTML-код в режиме отображения кода. Вы будете удивлены, сколько всего сделал Dreamweaver только для того, чтобы заголовок вашей страницы сдвинулся с места, какие огромные Web-сценарии он для этого создал.

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