Управление анимациями
Вы уже знаете, что Dreamweaver позволяет создавать несколько одновременно работающих и независимых друг от друга анимаций. Они могут работать как синхронно, так и асинхронно, создавая на Web -странице настоящие хороводы анимированных элементов. Конечно, если анимированных элементов на странице немного, вполне можно обойтись и одной анимацией. Но если их количество превышает десяток, значительно удобнее работать с несколькими независимыми анимациями, каждая из которых охватывает небольшую группу элементов, чем пытаться "запихать" их в одну анимацию. Впрочем, это дело вкуса...
Сейчас давайте рассмотрим средства управления этими независимыми анимациями.
Вы уже знаете, что в панели Timelines в данный момент отображается только одна анимация. Чтобы переключиться на другую, выберите соответствующий пункт уже знакомого вам комбинированного списка анимаций.
Чтобы создать новую анимацию, выберите пункт Add Timeline контекстного меню панели Timelines . Также вы можете выбрать одноименный пункт подменю Timeline меню Modify . Если вы теперь откроете комбинированный список анимаций, вы увидите, что в нем появился новый пункт.
По умолчанию Dreamweaver присваивает вновь создаваемым анимациям имена вида timeline <номер>. Если же вы хотите дать какойлибо анимации более вразумительное имя, введите его прямо в комбинированный список анимаций. Другой способ — выберите пункт Rename Timeline , находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify . После этого на экране появится диалоговое окно Rename Timeline . Введите новое имя анимации в единственное поле ввода этого диалогового окна и нажмите кнопку ОК.
Чтобы удалить ненужную анимацию, переключитесь на нее, использовав список анимаций, и выберите пункт Remove Timeline , находящийся в контекстном меню панели Timelines и в подменю Timeline меню Modify . Имейте, однако, в виду, что самую первую анимацию, создаваемую Dreamweaver при первом открытии панели Timelines , удалить нельзя — вместо удаления Dreamweaver ее просто очистит.
В верхней части панели Timelines находятся несколько еще не знакомых нам элементов управления. Рассмотрим некоторые из них.
Поле ввода Fps служит для задания частоты кадров анимации, определяющей скорость ее проигрывания. Эта величина измеряется в кадрах в секунду (по-английски — frames per second , или fps ). Значение по умолчанию — 15.
Флажок Autoplay вам уже знаком. Он сигнализирует Dreamweaver , что в код страницы нужно добавить сценарий, запускающий анимацию сразу же поcле того, как страница будет загружена в окне Web -обозревателя. По умолчанию этот флажок отключен, и включить его начинающие пользователи Dreamweaver часто забывают. Поэтому, если ваша анимация почемуто не работает, прежде всего, проверьте, включили ли вы этот флажок.
Флажок Loop зацикливает анимацию. Если он включен, анимация будет проигрываться бесконечное число раз. Если его включить, Dreamweaver выведет еще одно из несметного множества своих сообщений; пока что просто закройте его. По умолчанию этот флажок выключен.
И, наконец, группа из трех кнопок и поля ввода, расположенная правее комбинированного списка анимаций, служит для перемещения между отдельными кадрами. Давайте рассмотрим его подробнее.
Кнопки, на которых изображены направленные в разные стороны стрелки, позволят вам перемещаться по отдельным кадрам анимации. Предположим, вы выделили первую ключевую точку анимации (начало траектории), находящуюся на первом кадре. Если вы щелкнете кнопку со стрелкой вправо, то переместитесь на второй кадр. При этом на втором кадре анимации в панели Timelines будет установлен маркер выделенного кадра, а анимированный заголовок в окне документов переместится на один "скачок". Щелкая дальше на кнопке со стрелкой вправо, вы будете перемещаться все дальше к концу траектории. Если же вы щелкнете на кнопке со стрелкой влево, то переместитесь на предыдущий кадр.
Кнопку со стрелкой вправо вы можете использовать для предварительного просмотра созданной анимации прямо в окне документа, не открывая страницу в Web -обозревателе. Для этого поставьте на нее курсор мыши, нажмите левую кнопку и не отпускайте. При этом вы будете перемещаться с кадра на кадр вперед по траектории; в панели Timelines по дорожке будет перемещаться маркер, а в окне документа — анимированный элемент. Отпустите кнопку, когда "прокрутите" анимацию до конца. К сожалению, более удобного способа предварительного просмотра анимации Dreamweaver не предлагает. Кнопка, на которой нарисована стрелка влево, упирающаяся в препятствие, служит для быстрого перемещения на самый первый кадр.
Если вам нужно переместиться прямо на какой-то кадр анимации, известный по номеру, вы можете просто ввести этот номер в поле ввода, расположенное между кнопками-стрелками, и нажать клавишу < Enter >. Нужный кадр будет тотчас найден и выделен.
С анимациями мы разобрались. Теперь давайте посмотрим, какие Dreamweaver предоставляет возможности для управления отдельными дорожками и кадрами.
Вы можете вырезать и копировать дорожки в буфер обмена Windows , а также вставлять их в другие каналы текущей анимации или вообще в другую анимацию на любой Web -странице. Чтобы вырезать выделенную дорожку, выберите пункт Cut контекстного меню или меню Edit либо нажмите комбинацию клавиш < Ctrl >+< X >. Чтобы скопировать выделенную дорожку, выберите пункт Сору в этих же меню либо нажмите комбинацию клавиш < Ctrl >+< C >. Ну, а чтобы вставить находящуюся в буфере обмена дорожку в один из уже занятых каналов, добавив к уже существующей дорожке, выберите пункт Paste или нажмите комбинацию клавиш < Ctrl >+< V >. К сожалению, вставить дорожку в свободный канал вы не сможете.
Внимание!
Dreamweaver помещает в буфер обмена не только дорожку анимации , но и свободно позиционируемый элемент , для которого она была создана , со всеми его параметрами и содержимым . И если вы вставляете эту дорожку в другую страницу , которая уже содержит свободно позиционируемый элемент с таким же именем , Dreamweaver присваивает эту дорожку ему . Если же такого элемента на странице нет , он будет создан по образу и подобию скопированного .
После того как вы вставили новую дорожку из буфера обмена, вы можете захотеть присвоить ее другому свободному элементу. Dreamweaver предоставляет вам и такую возможность. Выберите пункт Change Object в контекстном меню или подменю Timeline меню Modify . После этого на экране появится диалоговое окно Change Object . Выберите нужный элемент в раскрывающемся списке Object to Animate и нажмите кнопку ОК.
Иногда бывает необходимо растянуть какой-либо участок дорожки на несколько кадров или, наоборот, сузить. Для этого служат пункты Add Frame и Remove Frame , находящиеся в контекстном меню и подменю Timeline меню Modify . Первый пункт вставляет кадр в то место на дорожке, где находится маркер выделенного кадра, а второй — удаляет оттуда кадр.
Вот и все об анимации свободно позиционируемых элементов.
Анимация графических изображений
Выше мы с вами рассмотрели анимацию свободно позиционируемых элементов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать невидимыми. С обычными, фиксированными элементами такого не сделать.
Правда, у этого правила есть одно исключение. Можно анимировать графические изображения, и Dreamweaver предоставляет такую возможность. Но изменяться в процессе анимации может только имя отображаемого файла (атрибут src тега < img >).
Однако даже этого часто бывает достаточно. В самом деле, изменяя имя графического файла, можно создавать анимации с быстро сменяющимися кадрами. (Фактически, таким образом можно проигрывать на Web -странице настоящий фильм, не прибегая к созданию видеофайла, даже в формате "анимированный GIF ".) Нужно будет только запастись необходимым количеством графических файлов, содержащих разные фазы анимации, но это уже проблема Web -художника.
Как же анимировать графическое изображение? Очень просто. Давайте создадим новую страничку и назовем ее 12.1.htm . Она не будет иметь отношения к сайту Sample site 1, но позаимствует из него графические файлы.
Поместите на эту страницу графическое изображение. В качестве отображаемого файла задайте Email . gif , находящийся в папке Pics , вложенной в папку Sample 1 (в ней расположены файлы сайта Sample site 1). Это совсем просто, поэтому нет смысла пускаться в длительные объяснения.
Теперь создадим новую дорожку анимации для вновь созданного изображения. Выделим его и выберем пункт Add Object в контекстном меню панели Timelines (в контекстном меню графического изображения такого пункта нет). После этого Dreamweaver выведет очередное сообщение, предупреждающее, что он может управлять только параметром имени отображаемого файла. Закройте его, нажав кнопку ОК.
Внешне созданная для графического изображения дорожка анимации не отличается от таковой для свободно позиционируемого элемента. Поэтому автор советует задавать для каждого анимируемого элемента страницы уникальное имя. Имя графического изображения можно задать в поле ввода Image редактора свойств.
Установим продолжительность анимации в пять секунд или 75 кадров (5 секунд умножить на 15 кадров в секунду). Для этого перетащим влево правую границу (вторую ключевую точку) дорожки до отметки "75" на шкале времени. И зададим новый графический файл, который отобразится во время достижения второй ключевой точки. Для этого проверим, выделена ли вторая точка, и изменим содержимое поля ввода Src редактора свойств так, чтобы оно указывало на файл Email 2. gif , также находящийся в папке Pics , вложенной в папку Sample 1. Данный файл будет отображен при достижении конца... нет, не траектории, а дорожки (ведь изображение не движется).
Осталось включить флажок Autoplay и загрузить страницу 12.1.htm в Web -обозревателе. Через пять секунд после окончания загрузки страницы изображение, отображаемое в ней, изменится, — наша анимация работает. Если вам нужно последовательно сменить несколько изображений (фаз анимации), создайте соответствующее количество ключевых точек на дорожке. В каждой из этих ключевых точек установите нужное значение поля ввода Src .
