Создание простейшей анимации

Для работы нам сразу же понадобится панель Timelines, в которой отображаются все анимации, созданные на Web-странице. Чтобы вывести эту панель на экран, включите пункт-выключатель Timelines в подменю Others меню Window или нажмите комбинацию клавиш <Alt>+<F9>. Сама панель Timelines показана на рисунке 1.

Как видно, панель Timelines находится в еще одном доке, занимающем нижнюю часть главного окна Dreamweaver. Это значит, что можно скрыть панель Timelines, если она нам не нужна, щелкнув по кнопке скрытия дока, а потом вернуть ее на экран.

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

Рисунок 1. Панель Timelines

"Но ведь Dreamweaver позволяет работать одновременно с несколькими временными шкалами. Где же остальные шкалы?" Чтобы увидеть их, нужно выбрать соответствующий пункт комбинированного списка анимаций, показанного на рисунке 2.

Рисунок 2. Комбинированный список анимаций

Чтобы анимировать какой-либо из доступных свободно позиционируемых элементов, нужно поместить его на шкалу времени, создав дорожку анимации. Для этого надо выделить требуемый свободный элемент, щелкнуть по нему правой кнопкой мыши и выбрать в контекстном меню пункт Add to Timeline. Вы также можете выбрать пункт Add Object контекстного меню временной линии или пункт Add Object to Timeline подменю Timeline меню Modify. И, наконец, вы можете просто нажать комбинацию клавиш <Ctrl>+<Alt>+<Shift>+<T>.

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

· горизонтальной и вертикальной координатами левого верхнего угла (атрибуты LEFT и ТОР);

· шириной и высотой (атрибуты WIDTH и HEIGHT), причем работать это будет только в Internet Explorer;

· порядком перекрытия, иначе говоря, z-индексом (атрибут Z-INDEX);

· видимостью (атрибут VISIBILITY).

Рисунок 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-индекс. Сохраняется полученная страница.