Анимация — подход Dreamweaver

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

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

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

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

{х, у, z} = f([p1, t1, p2, t2..., t])

Насчет времени все понятно, но что такое массив ключевых точек? Ничего сложного: это набор точек, с помощью которого задается траектория движения нашего анимированного элемента. Поясним это более подробно.

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

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

Этот подход и используется Dreamweaver.

Для примера приведена анимация, включающая один единственный анимированный элемент. Но Dreamweaver позволяет помещать на временную шкалу сразу нужное количество элементов, создавая несколько анимационных дорожек, что может быть использовано для создания очень сложных анимаций, в которых все элементы движутся согласованно. Более того, Dreamweaver позволяет создавать на одной странице несколько работающих независимо друг от друга анимаций, каждая из которых может включать в себя любое количество анимированных элементов. Так что даже самый привередливый аниматор будет доволен.

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

Конечно, Dreamweaver не исключение. Он тоже предоставляет пользователям такую возможность. И также делает всю черновую работу сам.

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

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

· оживить страницы;

· привлечь к чему-либо внимание;

· показать что-либо в учебных целях.

· поэтому можно выделить три цели применения анимации:

· развлечение;

· реклама;

· образование.

Все остальные цели, можно свести к трем вышеприведенным.

Развлечения в Интернете — достаточно молодая отрасль Web-строительства. Изначально Интернет был создан как сеть для ученых, которым нужно было обмениваться текстовыми документами (сначала даже без графики) и связывать их в некое подобие структуры. Потом в сеть пришел обыватель, и Web-дизайнеры ринулись угождать его вкусам. (Не будем спорить, насколько они возвышенны или низменны. Личное мнение автора: обыватель слишком разнолик, чтобы свести его к одному-единственному ярлыку.) В Интернете появились аудио и видео, на Web-страницы пришли сложная графика и анимация. Сейчас все эти "навороты" используются так часто, что ими уже мало кого можно удивить.

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

Теперь реклама. Она появилась в Сети вместе с развлечениями, а значит, вместе с обывателем. Она уже здорово надоела, эта интернет-реклама, едва ли не больше, чем реклама телевизионная. Но отдадим должное рекламе (и интернетовской, и телевизионной) -- благодаря ей получили возможность существовать очень многие популярные некоммерческие проекты. Если реклама вдруг исчезнет, эти проекты пропадут сразу же вслед за ней.

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

Анимация, основанная на свободно позиционируемых элементах и Web-сценариях, значительно компактнее любых видеофайлов, будь то анимированный GIF, видеофайлы форматов AVI или Apple QuickTime. Однако анимированные GIF-файлы поддерживаются абсолютно всеми Web-обозревателями, даже самыми старыми, поэтому и применяются так широко. Web-сценарии же будут работать только на достаточно новых Web-обозревателях (которыми, надо сказать, сейчас пользуется подавляющее большинство интернетчиков).

Так или иначе, но попробовать Web-сценарии в рекламе стоит.

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

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

Вот три случая, когда анимация будет очень полезна.