Анимации на веб страницах (стр. 7 из 8)

После того как вставили новую дорожку из буфера обмена, можно захотеть присвоить ее другому свободному элементу. Dreamweaver предоставляет и такую возможность. Выбераем пункт Change Object в контекстном меню или подменю Timeline меню Modify. После этого на экране появится диалоговое окно Change Object, показанное на рисунке 13. Выбераем нужный элемент в раскрывающемся списке Object to Animate и нажимаем кнопку ОК.

Рисунок 13. Диалоговое окно Change Object

Иногда бывает необходимо растянуть какой-либо участок дорожки на несколько кадров или, наоборот, сузить. Для этого служат пункты Add Frame и Remove Frame, находящиеся в контекстном меню и подменю Timeline меню Modify. Первый пункт вставляет кадр в то место на дорожке, где находится маркер выделенного кадра, а второй — удаляет оттуда кадр.

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

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

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

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

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

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

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

Рисунок 14. Предупреждение, выводимое Dreamweaver после добавления графического изображения в анимацию

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

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

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

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

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

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

Самый главный недостаток анимаций, основанных на Web-сценариях, -это... нет, отнюдь не несовместимость со старыми программами 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 не позволит. Хотя, конечно, можно отказаться от анимации или "открепить" страницу от шаблона, а потом уже делать с ней все, что заблагорассудится.