Создание анимации в Dreamweaver. Простейшая анимация.
Вот и пришла пора нашей любимой программы – Dreamweaver. Сейчас будет рассказано, как она поможет в создании анимированного элемента. А в качестве элемента, который мы будем "оживлять", возьмем заголовок страницы default2.htm, созданной в главе 11.
Но, прежде всего, условимся о терминологии, используемой в Dreamweaver. Знание ее поможет нам в дальнейшей работе. Итак:
- набор анимированных элементов, чье движение синхронизировано относительно одной и той же временной шкалы, назовем анимацией. Это нужно нам, потому что одна Web-страница может содержать несколько независимых анимаций, т. е. наборов анимированных элементов, синхронизированных относительно независимых временных шкал;
- полоска, проходящая из точки начала анимации одного из элементов в точку ее конца, пусть называется дорожкой анимации. Этот термин мы уже ввели и теперь его закрепим. Дорожка показывает, когда анимированный элемент начнет двигаться и когда он остановится;
- свободное пространство на временной шкале анимации, которое может быть занято дорожкой, будет называться каналом. Количество доступных каналов определяет максимальное количество дорожек в одной анимации, а значит, максимальное количество входящих в нее анимированных элементов.
Вот и все термины. Теперь откроем страницу default2.htm в окне документа и начнем…
Создание простейшей анимации
Для работы нам сразу же понадобится панель Timelines, в которой отображаются все анимации, созданные на Web-странице. Чтобы вывести эту панель на экран, включите пункт-выключатель Timelines в подменю Others меню Window или нажмите комбинацию клавиш ALT + F9. Сама панель Timelines показана на рис. 12.1.
Как видите, панель Timelines находится в еще одном доке, занимающем нижнюю часть главного окна Dreamweaver. Это значит, что мы можем скрыть панель Timelines (и любые другие панели, которые вы поместите в док), если она нам не нужна, щелкнув по кнопке скрытия дока, а потом вернуть ее на экран.
Большую часть этой панели занимает временная шкала, но проградуированная не в секундах, а в кадрах анимации – так удобнее. Значения времени (в кадрах) написаны на серой временной шкале, расположенной выше. Под этой шкалой отображаются все доступные каналы анимации, и занятые, и незанятые. В верхней же части панели находятся несколько элементов управления, предназначенных для задания некоторых параметров дорожек и самой анимации.
Рис. 12.1. Панель Timelines
"Но ведь Dreamweaver позволяет работать одновременно с несколькими временными шкалами, – скажете вы. – Где же остальные шкалы?" Чтобы увидеть их, нужно выбрать соответствующий пункт комбинированного списка анимаций, показанного на рис. 12.2.
Рис. 12.2. Комбинированный список анимаций
Работой с несколькими разными анимациями мы займемся потом. А сейчас давайте создадим одну из них, самую простую.
Чтобы анимировать какой-либо из доступных свободно позиционируемых элементов, нужно поместить его на шкалу времени, создав дорожку анимации. Для этого выделим требуемый свободный элемент, щелкнем по нему правой кнопкой мыши и выберем в контекстном меню пункт Add to Timeline. Вы также можете выбрать пункт Add Object контекстного меню временной линии или пункт Add Object to Timeline подменю Timeline меню Modify. И, наконец, вы можете просто нажать комбинацию клавиш CTRL + ALT + SHIFT + T.