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

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

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

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

Сначала надо выполнить несколько подготовительных действий. Прежде всего, выделяем последнюю ключевую точку (конец) траектории и запоминаем или записываем конечные координаты заголовка. Это нужно для того, чтобы впоследствии, когда создастся новая анимация, точно его позиционировать. После этого удалим дорожку анимации заголовка, но оставим дорожку анимации его тени. Для этого выделим необходимую дорожку и выберем пункт Remove Object в контекстном меню. Теперь осталось только поставить заголовок в начало его предполагаемой траектории — и можно приниматься за дело.

Выделим заголовок и щелкнем по нему правой кнопкой мыши. В появившемся контекстном меню выберем пункт Record Path. Также можно выбрать пункт Record Path of Layer контекстного меню панели Timelines; этот пункт становится доступным, если в окне документа выделен какой-нибудь свободный элемент. Кроме того, в подменю Timeline меню Modify также доступен пункт Record Path of Layer. Как видно, Dreamweaver предоставляет несколько возможностей сделать свой выбор.

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

Рисунок 10. Сложная траектория

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

Полученный результат можно увидеть на рисунке 10. Надо сохранить страницу default2.php, открыть ее в Web-обозревателе и посмотреть на результат трудов.

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

12. Управление анимациями

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

Сейчас рассмотрим средства управления этими независимыми анимациями.

В панели Timelines в данный момент отображается только одна анимация. Чтобы переключиться на другую, надо выбрать соответствующий пункт уже знакомого комбинированного списка анимаций, показанного на рисунке 2.

Чтобы создать новую анимацию, надо выбрать пункт Add Timeline контекстного меню панели Timelines. Также можно выбрать одноименный пункт подменю Timeline меню Modify. Если теперь открыть комбинированный список анимаций, видно, что в нем появился новый пункт.

По умолчанию Dreamweaver присваивает вновь создаваемым анимациям имена вида Тimelinе<номер>. Если же хочется дать какой-либо анимации более вразумительное имя, вводим его прямо в комбинированный список анимаций. Другой способ — выбераем пункт Rename Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. После этого на экране появится диалоговое окно Rename Timeline (рисунок 11). Вводим новое имя анимации в единственное поле ввода этого диалогового окна и нажимаем кнопку ОК.

Рисунок 11. Диалоговое окно Rename Timeline

Чтобы удалить ненужную анимацию, переключаемся на нее, использовав список анимаций, и выбираем пункт Remove Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. Имейте, однако, в виду, что самую первую анимацию, создаваемую Dreamweaver при первом открытии панели Timelines, удалить нельзя — вместо удаления Dreamweaver ее просто очистит.

В верхней части панели Timelines находятся несколько еще не знакомых элементов управления. Рассмотрим некоторые из них.

Поле ввода Fps служит для задания частоты кадров анимации, определяющей скорость ее проигрывания. Эта величина измеряется в кадрах в секунду (по-английски — frames per second, или fps). Значение по умолчанию — 15.

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

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

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

Рисунок 12. Набор элементов управления, служащий для перемещения между кадрами анимации

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

Кнопку со стрелкой вправо можно использовать для предварительного просмотра созданной анимации прямо в окне, документа, не открывая страницу в Web-обозревателе. Для этого надо поставить на нее курсор мыши, нажать левую кнопку и не отпускать. При этом перемещение будет с кадра на кадр вперед по траектории; в панели Timelines по дорожке будет перемещаться маркер, а в окне документа — анимированный элемент. Надо отпустить кнопку, когда "прокрутица" анимацию до конца. К сожалению, более удобного способа предварительного просмотра анимации Dreamweaver не предлагает.

Кнопка, на которой нарисована стрелка влево, упирающаяся в препятствие, служит для быстрого перемещения на самый первый кадр.

Если нужно переместиться прямо на какой-то кадр анимации, известный по номеру, можно просто ввести этот номер в поле ввода, расположенное между кнопками-стрелками, и нажать клавишу <Enter>. Нужный кадр будет тотчас найден и выделен.

Посмотрим, какие Dreamweaver предоставляет возможности для управления отдельными дорожками и кадрами.

Можно вырезать и копировать дорожки в буфер обмена Windows, а также вставлять их в другие каналы текущей анимации или вообще в другую анимацию на любой Web-странице. Чтобы вырезать выделенную дорожку, надо выбрать пункт Cut контекстного меню или меню Edit либо нажать комбинацию клавиш <Ctrl>+<X>. Чтобы скопировать выделенную дорожку, надо выбрать пункт Сору в этих же меню либо нажать комбинацию клавиш <Ctrl>+<C>. Ну, а чтобы вставить находящуюся в буфере обмена дорожку в один из уже занятых каналов, добавив к уже существующей дорожке, надо выбрать пункт Paste или нажать комбинацию клавиш <Ctrl>+<V>. К сожалению, вставить дорожку в свободный канал нет возможности вставить.

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