Учебник Macromedia Dreamweaver (стр. 90 из 135)
Что ж, Dreamweaver достойно выдержит испытание извилистостью. И давайте в этом убедимся. Но сначала слегка удлиним траекторию, скажем, до 50 кадров. "Захватим" мышью вторую ключевую точку дорожки заголовка и переместим ее до соответствующего деления временной шкалы. И не забудем сделать то же самое с дорожкой элемента-тени!
Вот теперь можно и попетлять.
Как вы помните, ключевые точки, собственно, и задают траекторию движения анимированного элемента. Добавим также, что траектория его движения должна задаваться минимальным количеством ключевых точек. Для прямой, как мы уже убедились, вполне хватает двух точек, для изломанной линии — трех, а для окружности их понадобится, как минимум, десятка два, чтобы движение анимированного элемента выглядело более-менее плавным. В общем, Dreamweaver, приняв от вас набор ключевых точек, должен построить такую траекторию движения анимированного элемента, которая вам необходима. И количество таких точек, как указывалось, должно быть минимальным.
Исходя из этого правила, построим новую траекторию движения нашего анимированного заголовка. Если вы хотите, чтобы он двигался по криволинейной траектории, проставьте на дорожке анимации достаточно большое количество ключевых точек. Проще всего сначала нарисовать нужную траекторию на бумаге, расставить ключевые точки, а уже потом реализовывать это в Dreamweaver.
Но, предположим, что все это мы уже сделали. Теперь нам необходимо реализовать траекторию, что называется, в коде, поместив несколько ключевых точек на дорожку анимации. Как это сделать?
Прежде всего установите маркер выделенного кадра (см. рис. 12.5) на то деление временной шкалы, где будет находиться первая из вновь создаваемых ключевых точек. Для этого щелкните мышью по дорожке напротив нужного деления. Далее щелкните на этом месте правой кнопкой мыши и выберите в появившемся контекстном меню пункт Add Keyframe. Вы также можете выбрать одноименный пункт в подменю Timeline меню Modify или просто нажать клавишу <F6>. На дорожке в этом месте появится новая ключевая точка (рис. 12.8).
Рис. 12.8. Ключевая точка, помещенная на дорожке анимации (в данный момент выделена)
Теперь проверим, выделена ли наша новая ключевая точка, и, если нет, выделим ее. После этого активизируем окно документа и переместим заголовок в то место на траектории, где он должен находиться в настоящий момент. Тонкая серая линия, обозначающая траекторию движения заголовка, тотчас изогнется, следуя за заголовком (рис. 12.9).
Остальные ключевые точки траектории помещаются на дорожку анимации точно таким же образом. Поместите их и задайте для них новое положение анимированного заголовка. Изобретите траекторию посложнее, чтобы заставить Dreamweaver работать по-настоящему. Если вы поставили ключевую точку не в том месте, в котором хотели, выделите ее и выберите пункт Remove Keyframe контекстного меню. (Также вы можете выбрать одноименный пункт в подменю Timeline меню Modify.) После этого протестируйте страницу с новой анимацией в Web-обозревателе. Вы увидите, что заголовок следует точь-в-точь по траектории, которую вы для него задали.
Рис. 12.9. Положение анимированного заголовка в новой ключевой точке
Здесь есть один интересный момент. Вы можете удивиться, что мы зачем-то создавали на дорожке анимации новые ключевые точки вместо того, чтобы поставить маркер на нужный кадр и просто переместить на необходимое место анимированный заголовок. Однако в этом случае мы переместили бы на другое место всю траекторию движения нашего заголовка, вместе с начальной, конечной и всеми промежуточными ключевыми точками. Попробуйте так сделать — и вы сами все поймете.
Создание траектории вручную, путем расстановки на дорожке анимации ключевых точек и задания новых параметров анимированного элемента в этих ключевых точках годится только для относительно простых случаев. В самом деле, создайте-ка таким образом что-либо более сложное, чем простая дуга! К тому же, даже опытный Web-дизайнер далеко не с первого раза сделает именно ту траекторию, какая ему нужна. Как раз для таких случаев Dreamweaver предоставляет замечательную возможность просто нарисовать нужную траекторию в окне документа. При этом он сам сформирует дорожку анимации и расставит на ней требуемое количество ключевых точек.
Давайте испытаем эту возможность. Только сначала выполним несколько подготовительных действий. Прежде всего, выделим последнюю ключевую точку (конец) траектории и запомним или запишем конечные координаты заголовка. Это нужно для того, чтобы впоследствии, когда мы создадим новую анимацию, точно его позиционировать. После этого удалим дорожку анимации заголовка, но оставим дорожку анимации его тени. Для этого выделим необходимую дорожку и выберем пункт Remove Object в контекстном меню. Теперь осталось только поставить заголовок в начало его предполагаемой траектории — и можно приниматься за дело.
Выделим заголовок и щелкнем по нему правой кнопкой мыши. В появившемся контекстном меню выберем пункт Record Path. Вы также можете выбрать пункт Record Path of Layer контекстного меню панели Timelines; этот пункт становится доступным, если в окне документа выделен какой-нибудь свободный элемент. Кроме того, в подменю Timeline меню Modify также доступен пункт Record Path of Layer. Как видите, Dreamweaver предоставляет вам несколько возможностей сделать свой выбор.
Что произойдет после этого? Ничего. Кроме того, что при перемещении заголовка за ним будет тянуться тонкая серая линия — Dreamweaver начнет отслеживать и записывать его траекторию. А как только вы отпустите кнопку мыши, устанавливая заголовок в конец его траектории, он создаст новую дорожку анимации. После этого вам останется только выставить координаты заголовка в его конечной точке, воспользовавшись значениями, записанными (запомненными) ранее, и "растянуть" либо "сузить" дорожку
Рис. 12.10. Сложная траектория
анимации тени, чтобы она была равна дорожке своего "хозяина", иначе тень будет появляться раньше или позже, чем заголовок закончит свой извилистый путь.
Полученный результат вы можете увидеть на рис. 12.10. Сохраните страницу default2.htm, откройте ее в Web-обозревателе и посмотрите на результат ваших трудов.
Ну, вот и все. Мы познакомились с основными возможностями, предлагаемыми Dreamweaver для создания анимации. Более сложные анимации, включающие в себя множество элементов, согласованно движущихся по разным траекториям, создаются аналогичным образом. Только тогда вам предстоит несколько больше работы по заданию траекторий, выставлению параметров в ключевых точках анимации и согласованию движения аними-рованных элементов.
А сейчас мы познакомимся еще с некоторыми возможностями, предоставляемыми Dreamweaver Web-аниматорам. Они помогут вам сделать свою работу быстрее и проще.
Управление анимациями
Вы уже знаете, что Dreamweaver позволяет создавать несколько одновременно работающих и независимых друг от друга анимаций. Они могут работать как синхронно, так и асинхронно, создавая на Web-странице настоящие хороводы анимированных элементов. Конечно, если анимированных элементов на странице немного, вполне можно обойтись и одной анимацией. Но если их количество превышает десяток, значительно удобнее работать с несколькими независимыми анимациями, каждая из которых охватывает небольшую группу элементов, чем пытаться "запихать" их в одну анимацию. Впрочем, это дело вкуса...
Сейчас давайте рассмотрим средства управления этими независимыми анимациями.
Вы уже знаете, что в панели Timelines в данный момент отображается только одна анимация. Чтобы переключиться на другую, выберите соответствующий пункт уже знакомого вам комбинированного списка анимаций, показанного на рис. 12.2.
Чтобы создать новую анимацию, выберите пункт Add Timeline контекстного меню панели Timelines. Также вы можете выбрать одноименный пункт подменю Timeline меню Modify. Если вы теперь откроете комбинированный список анимаций, вы увидите, что в нем появился новый пункт.
По умолчанию Dreamweaver присваивает вновь создаваемым анимациям имена вида Тimelinе<номер>. Если же вы хотите дать какой-либо анимации более вразумительное имя, введите его прямо в комбинированный список анимаций. Другой способ — выберите пункт Rename Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. После этого на экране появится диалоговое окно Rename Timeline (рис. 12.11). Введите новое имя анимации в единственное поле ввода этого диалогового окна и нажмите кнопку ОК.
Рис. 12.11. Диалоговое окно Rename Timeline
Чтобы удалить ненужную анимацию, переключитесь на нее, использовав список анимаций, и выберите пункт Remove Timeline, находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify. Имейте, однако, в виду, что самую первую анимацию, создаваемую Dreamweaver при первом открытии панели Timelines, удалить нельзя — вместо удаления Dreamweaver ее просто очистит.
В верхней части панели Timelines находятся несколько еще не знакомых нам элементов управления. Рассмотрим некоторые из них.
Поле ввода Fps служит для задания частоты кадров анимации, определяющей скорость ее проигрывания. Эта величина измеряется в кадрах в секунду (по-английски — frames per second, или fps). Значение по умолчанию — 15.
Флажок Autoplay вам уже знаком. Он сигнализирует Dreamweaver, что в код страницы нужно добавить сценарий, запускающий анимацию сразу же после того, как страница будет загружена в окне Web-обозревателя. По умолчанию этот флажок отключен, и включить его начинающие пользователи Dreamweaver часто забывают. Поэтому, если ваша анимация почему-то не работает, прежде всего, проверьте, включили ли вы этот флажок.