Анимации на веб страницах

Рисунок 3. Предупреждение, выводимое Dreamweaver после добавления свободного элемента в анимацию

Это значит, что можно управлять местоположением, размерами и видимостью свободного элемента.

Теперь  надо закрыть данное предупреждение нажатием кнопки ОК. Если нет желания больше его видеть, перед закрытием надо включить флажок Don't show me this message again.

Наконец, после всех треволнений, видно в списке панели Timelines новую дорожку (рисунок 4). Она отображается в виде светло-синей полосы, на которой написано имя свободного элемента, которому она принадлежит. По обеим сторонам данной полосы можно заметить светлые кружки. Это ключевые точки; их пока всего две: начало и конец траектории. Первая ключевая точка — начало — находится на первом кадре; это значит, что анимация для данного элемента начнется с первого кадра. Вторая ключевая точка — конец траектории — находится на пятнадцатом кадре; там наш анимированный элемент перестанет двигаться.

Рисунок 4. Новая дорожка анимации

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

Рисунок 5. Маркер выделенного кадра

Можно легко изменить местоположение дорожки анимации, если оно не устраивает.

Для этого "ухватить" мышью дорожку (не ключевые точки!) и перетащить ее вдоль шкалы, пока она не займет нужную позицию. Например, вы можно заставить анимацию начинаться с десятого кадра, а заканчиваться — двадцать пятым. Также вы можете изменять длину дорожки, а значит, продолжительность анимации, перетаскивая на необходимую позицию теперь уже ключевые точки. И, разумеется, вы можете удалить ненужную дорожку, выделив ее и нажав клавишу <Del> или выбрав пункт Remove Object контекстного меню или подменю Timeline меню Modify.

Ну что  ж, проверим свежесозданную анимацию. Надо нажать клавишу <F12>, чтобы загрузить страницу defaiilt2.php в Web-обозревателе, и... наблюдаем совершенно неподвижное изображение. В чем же дело?

А дело в том, что начало и конец траектории движения нашего анимиро-ванного заголовка совпадают, то есть никакой траектории нет, заголовок все время стоит в одной точке! Мы забыли задать траекторию!!!

Ну, ничего. Это не страшно. Сейчас мы все исправим.

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

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

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

На рисунке 6 показано то, что получится после всех этих манипуляций. Хорошо видна тонкая серая линия траектории, отображаемая в окне документа, если в окне документа выделен анимированный элемент Header. Причем анимированный элемент будет находиться в том месте траектории, которое надо выделить на дорожке анимации. Так, если выделить вторую ключевую точку, он перескочит на свое законное место в верхней части страницы. А если выделить какую-либо промежуточную точку между первой и второй ключевыми точками, он займет соответствующее этой точке место.

Рисунок 6. Готовая траектория анимированного элемента (выделена первая ключевая точка)

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

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

Сделать их очень просто. Надо вернуться в панель Timelines и включим флажок Autoplay, расположенный в верхней части этой панели. Dreamweaver, по своему обыкновению, выдаст очередное предупреждение, что сейчас в код страницы будет добавлен соответствующий сценарий. Избавиться от этого предупреждения можно, нажав кнопку ОК; если нет желания больше его видеть, можете включить перед этим флажок Don't show me this message again. Вот теперь все на самом деле готово. Надо загрузить страницу в Web-обозреватель и убедиться в этом.

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

11. Более сложная анимация

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

Надо  выбрать свободный элемент Headershadow и добавьте его в анимацию. Получившийся результат можно увидеть на рисунке 7.

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

Рисунок 7. Две дорожки анимации

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

Итак, в  начале траектории движения заголовка (первая ключевая точка) тень должна быть невидимой. Поэтому выделяем первую ключевую точку второй дорожки и задаём в редакторе свойств значение hidden для параметра Vis. Теперь тень останется невидимой до тех пор, пока не изменим значение параметра видимости во второй ключевой точке (конец траектории движения заголовка). Так как по умолчанию параметр Vis имеет значение inherit ("наследование" видимости у родителя), а родитель (сама Web-страница) у нас видимый, специально задавать это значение во второй ключевой точке не нужно. На всякий случай проверяем, что на конце временной линии тень видима (параметр Vis должен иметь значение inherit или visible).

Сохраняем результат работы и открываем его в Web-обозревателе. Теперь тень будет скромно "прятаться", пока не "подъедет" ее "хозяин".

Все! Надоели  прямолинейные, как трамвайные рельсы, траектории движения элементов. Хочется чего-нибудь извилистого и зигзагообразного, как пресловутый путь к истине. Пусть заголовок в своем пути "наверх" обходит всю Web-страницу. Это будет выглядеть эффектнее, да и заодно проверяем, так ли хорош этот Dreamweaver, как его расхваливают.

Что ж, Dreamweaver достойно выдержит испытание извилистостью. И сейчас в этом убедимся. Но сначала слегка удлиняем траекторию, скажем, до 50 кадров. "Захватываем" мышью вторую ключевую точку дорожки заголовка и переместим ее до соответствующего деления временной шкалы. И не забудем сделать то же самое с дорожкой элемента-тени!

Вот теперь можно и попетлять.

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

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

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

Прежде  всего устанавливаем маркер выделенного кадра (см. рисунок 5) на то деление временной шкалы, где будет находиться первая из вновь создаваемых ключевых точек. Для этого надо щелкнуть мышью по дорожке напротив нужного деления. Далее щелкаем на этом месте правой кнопкой мыши и выбераем в появившемся контекстном меню пункт Add Keyframe. Также можно выбрать одноименный пункт в подменю Timeline меню Modify или просто нажать клавишу <F6>. На дорожке в этом месте появится новая ключевая точка (рисунок 8).

Рисунок 8. Ключевая точка, помещенная на дорожке анимации (в данный момент выделена)

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

Остальные ключевые точки траектории помещаются на дорожку анимации точно таким же образом. Поместить их и задать для них новое положение анимированного заголовка. Изобретём траекторию посложнее, чтобы заставить Dreamweaver работать по-настоящему. Если поставили ключевую точку не в том месте, в котором хотели, выделяем ее и выбераем пункт Remove Keyframe контекстного меню. (Также можно выбрать одноименный пункт в подменю Timeline меню Modify.) После этого протестируем страницу с новой анимацией в Web-обозревателе. Увидем, что заголовок следует точь-в-точь по траектории, которую для него задали.

Рисунок 9. Положение анимированного заголовка в новой ключевой точке

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