Движение объекта
Теперь, когда вы знаете, как взаимодействуют слои и кадры при создании анимации, попробуем соединить в ролик два последних кадра из клипа Counterforce (см. рис. 14.2). Наш ролик будет изображать оптический прицел винтовки, наведенный на слово COUNTERFORCE, причем все это будет сходиться в фокусе в последнем кадре.
В этом разделе мы преследуем цель познакомить вас с некоторыми полезными инструментами, чтобы вы приобрели творческие навыки. Анимация, которую мы создадим, будет несколько необычной, не такой, с которой вы встречаетесь прежде. Нам понадобится рабочая область размером 300x300 пикселей, и мы воспользуемся приемом, который называется blur и представляет собой расфокусированное изображение предмета. Этот ролик предъявляет серьезные требования к броузеру и компьютеру, но зато вы научитесь пользоваться многими приемами и инструментами, что и является целью настоящего раздела.
Подготовка объекта к движению
Прицел винтовки и текст должны находиться в разных слоях. Кроме того, слово COUNTERFORCE заставит вас повозиться, чтобы оно было похоже на свой образец на рис. 14.2.
Для того чтобы создать прицел и текст, сделайте следующее.
1. Откройте документ Fireworks MX и создайте холст размером 300x300 пикселей. Цвет его сделайте черным.
2. Для создания прицела выберите инструмент Rectangle в панели инструментов Vector и нарисуйте прямоугольник. В окне свойств задайте для него такие свойства:
W - 100;
Н - 75;
Fill-None;
Stroke Color - 009933;
Stroke Thickness — 2.
3. Выберите инструмент Line и проведите линию из левого верхнего угла прямоугольника в правый нижний, а потом из правого верхнего в левый нижний.. Таким образом, вы нашли центр прямоугольника.
4. Проведите горизонтальную линию через центр прямоугольника, а потом — вертикальную, тоже через центр. Выделите диагональные линии и удалите их. Затем выделите вертикальную и горизонтальную линии и установите их свойства такими же, как у сторон прямоугольника.
5. Уменьшите число слоев. Для этого выделите все объекты и сгруппируйте их, нажав <Ctrl+G>. Откроется панель Layers. Дважды щелкните на слое и назовите его Sight (Прицел).
6. Выберите инструмент Text. Щелкните на холсте и введите слово COUNTERFORCE. Щелкните между буквами R и F. Удерживая нажатой клавишу <Shift>, нажмите <Enter>. Вторая половина слова перейдет на следующую строку.
7. Выделите оба слова и установите шрифт Arial Black, размер 36. Если у вас нет шрифта Arial Black, используйте обычный Arial полужирного начертания. Цвет установите 009933. Выделите слово COUNTER и установите значение кернинга, равное 18.
8. Щелкните перед словом FORCE и установите значение кернинга, равное 14. Выделите буквы О, R, С и Е и установите для них значение кернинга, равное -4. Начало слова FORCE должно совпасть с краем буквы N, а конец — с концом слова COUNTER.
9. Выберите инструмент Subselection и выделите горизонтальную линию. Перетащите правый маркер этой линии к концу слова COUNTER (рис. 14.6).
Создание анимации
Теперь, когда основные элементы для анимации подготовлены, можно приступить к созданию ролика из 11 кадров. На протяжении этих кадров изображение должно фокусироваться, а буквы заполняться белым цветом.
Чтобы создать ролик, выполните следующее.
1. Выделите слова и выберите в меню Text=>Convert to Paths. После преобразования букв в кривые их можно залить белым цветом, но сохранить цвет обрамления. После такого преобразования буквы превратятся в рисунок, утратив свойства текста.
Рис. 14.6. Элементы для анимации подготовлены
2. Откройте панель Frames и выберите 1-й кадр. Выберите в меню Duplicate Frame. Откроется диалоговое окно. Число кадров задайте равным 10 и выберите в списке Insert New Frames параметр After Current Frame. Теперь у вас есть 11 кадров. Последний из них — это тот самый, который будет в фокусе.
3. Выберите 1-й кадр и выделите все объекты на холсте. Откройте панель Effects в окне свойств и выберите Blur=>Gaussian Blur. Установите значение Blur (Размытость), равное 10. Щелкните на кнопке ОК. Повторите все то же самое для кадров 2-5, каждый раз устанавливая значение размытости на 1 меньше, т.е. 9,8,7 и 6.
4. Выберите 6-й кадр. Выделите слова и выберите в меню Modify=>Ungroup. Буквы станут векторными объектами, причем каждая попадет в свой собственный слой. Когда буквы выделены, установите для них белый цвет заливки, а для контура — зеленый (009933) толщиной в 4 пикселя. Восстановите группировку букв, нажав клавиши <Ctrl+G>.
5. Как мы не раз говорили в предыдущих главах, одно из основных правил при работе с графикой — поручать программе делать все, что можно, вместо того, чтобы делать это вручную. Можно было бы повторить последнее действие для всех оставшихся кадров, но лучше пусть поработает Fireworks MX. Выберите 7-й кадр, выделите слова и удалите их. Повторите это для кадров 8-11. Выберите 6-й кадр и выделите слова. Выберите в меню Copy to Frames. В диалоговом окне Copy to Frames укажите диапазон кадров с 7-го по 11-й. Теперь в каждом кадре содержатся залитые буквы.
6. Выделите прицел и слова в 6-м кадре и создайте размытость Gaussian Blur интенсивностью в 5 пикселей. Повторите это для кадров 7-10, каждый раз уменьшая интенсивность размытости на 1; таким образом, в 10-м кадре она станет равной 1.
7. Выберите 1-й кадр и переместите прицел куда-нибудь со слов. Повторите это для всех оставшихся кадров, кроме 10-го и 11-го. Ваш ролик готов (рис. 14.7).
Совет
Есть способ сделать статические объекты общими для нескольких кадров. Создайте новый слой и скопируйте объекты в этот слой с помощью обычной операции копирования и вставки. Дважды щелкните на папке возле имени слоя и выберите в меню параметр Share Across Frames.
Наша версия этого ролика представлена на официальном Web-узеле этой книги в разделе главы 14.
Прокрутив этот ролик несколько раз, вы можете заметить, что он воспроизводится слишком быстро. Оставьте файл открытым, в следующей главе мы рассмотрим дополнительные элементы управления анимацией.
Рис. 14.7. Так выглядит законченная анимация