Создание анимации движения

В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем или создаем объект анимации: группу, текстовый блок или экземпляр символа.

На достаточном удалении по линейке кадров (простой подсчет: частота кадров, умноженная на секунды. Т е. если анимация будет идти 3 секунды, надо найти 36-й кадр) с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации.

Редактируя в этом ключевом кадре изменения расположения, размеров, пропорций или ориентации объекта анимации, получим конечную фазу анимации. Более "глубокие" виды редактирования, например с применением режима редактирования групп или с применением команды меню "Разделить" - не допускаются. Начальная и конечная фазы анимации должны быть получены из одного и того же объекта.

Перейдем к первому ключевому кадру, щелкнув в ячейке кадра. В панели свойств выберем из списка "Анимация - Движение". Такой выбор, как хорошо видно на рис. 7.3, немедленно определяет сиреневый цвет промежуточных кадров временной шкалы, и появляется стрелка, соединяющая начало и конец анимации. Если вместо стрелки появляется штриховая линия, значит, что-то сделано не так и анимации скорее всего не будет. Даже если анимация и получится, очевидно, сбой произойдет позднее. Вот некоторые причины ошибки: в кадре находится неподходящий объект (например, просто несгруппированный рисунок), в кадре сохранились "остатки" каких-то объектов, движение применяется, например, к двум группам сразу. Взгляните на панель свойств кадра: если там появилась желтая треугольная кнопка с предупреждающим знаком (!), то Flash пытается сообщить вам об ошибке.

Рис. 7.3.  Временная линейка с раскадровкой анимации движения

При выборе "Движение" в панели свойств открываются дополнительные параметры настройки "анимации движения" (рис. 6 4).

Рис. 7.4.  Панель свойств при выборе анимации движения

• Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок "Масштаб", иначе не будет возможности изменения пропорций.

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

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

Изменение положения центра вращения можно изменить инструментом "Свободное преобразование".

Заставим объект двигаться по кругу.

1. Начнем с того, что нарисуем в первом кадре квадрат (звезду, круг…). Удалим у фигуры контур (если он нарисован).

2. Сгруппируем рисунок. Зачем? У нас всего один объект? Но этот объект - не группа, не текстовый блок и не экземпляр символа. Поэтому - группируем.

3. Выделим группу инструментом преобразования и перенесем центр будущего вращения на некоторое расстояние, а сам объект-группу сдвинем от центра монтажного стола.

4. Оценим длительность анимации - если наша анимация будет длиться в течении 4-6 кадров, даже компьютер не сможет сделать ее плавной. Условимся, что в данном случае нам "хватит" 30 кадров.

5. Перейдем в тридцатый кадр. Вставим ключевой кадр - копию первого кадра - с помощью клавиши F6.

6. Вернемся в первый кадр.

7. В панели свойств кадра выберем анимацию движения. В дополнительном списке "Поворот" обязательно выберем принудительное вращение либо по часовой, либо против часовой стрелки. Количество принудительных оборотов - один.

Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого:

8. поставим считывающую головку в середину "сиреневой полоски" на временной шкале;

9. на монтажном столе видим некоторое промежуточное положение нашего объекта. В этом месте нет ключевого кадра, но его легко сделать, просто выполнив одним из способов вставку ключевого кадра;

10. во вновь созданном ключевом кадре изменим масштаб нашего объекта;

11. можно тестировать фильм.

Можно создать анимацию движения двумя способами:

• с помощью панели свойств кадра;

• с помощью команды "Создать анимацию движения" контекстного меню по правой кнопке мыши на кадре.

Для анимации движения с помощью команды контекстного меню выполняем следующие действия:

• Рисуем или вставляем любой объект в ключевой кадр.

• Щелкаем правой кнопкой мыши в ячейке первого кадра и в контекстном меню выбираем команду "Создать анимацию движения". При этом все изображение в кадре будет автоматически преобразовано в графический символ с именем "Построение анимации1" (появляется голубая выделяющая рамка и точка привязки в центре рамки).

• Создаем последний ключевой кадр в анимации движения и перемещаем, трансформируем объект.

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

Но существует еще один способ - задать траекторию движения. Для этого используется специальный слой, управляющий движением: путеводитель, на котором рисуется линия - направляющая или траектория движения.

Чтобы заставить объект двигаться по определенной траектории, необходимо выполнить следующие действия.

1. Создать ключевые кадры с начальным и конечным положениями объекта, задать между ними анимацию движения.

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

3. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым.

4. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным.

5. В ключевом кадре этого слоя любым инструментом рисования контуров нарисовать траекторию движения объекта. Эта линия не должна содержать пересекающиеся участки, разрывы и не должна быть замкнутой.

6. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать:

7. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии;

8. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).

1. Протестировать фильм.

Рис. 7.5.  Создание траекторий движения

Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы.

Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого:

1. В первом ключевом кадре нарисуем карандаш или импортируем его изображение из клип-арта в векторном формате.

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

3. В данном случае очень важно расположение точки регистрации нашего объекта - поставим ее на кончик грифеля карандаша.

4. Через 30-40 кадров создадим последний ключевой кадр анимации.

5. В нем перенесем изображение карандаша в другое место монтажного стола, Можно чуть-чуть повернуть его.

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

7. Добавим слой, управляющий движением, - путеводитель.

8. В ключевом кадре этого слоя нарисуем траекторию движения. Проверим, что полоска промежуточных кадров совпадает с длиной нашей анимации; ключевого кадра в конце не нужно.

9. Протестируем фильм.

10. Возможно, вы все сделали аккуратно и карандашик начал движение по нарисованному пути, но наш карандаш вертится вокруг кривой как ненормальный. Отключим галочку около параметра "Ориентировать по пути" - движение карандаша стало реалистичней.

Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место").

Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами.

Анимация на основе изменения формы (Shape tweening)

Допустим, нужно, чтобы квадрат плавно превратился в круг, или изображение кошки плавно превратилось в изображение собаки. В таких случаях используется shape tweening (изменение формы, трансформация). При этом вы задаете два ключевых кадра на некотором расстоянии друг от друга. В рассматриваемом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов). После того как вы создали два ключевых кадра, сделайте активным первый из них (просто перейдите на него щелчком кнопкой мыши) и выберите в палитре Frame (вызываемой командой Windows>Panels>Frame или нажатием клавиш <Ctrl> + <F>) в списке Tweening строку Shape (Форма), как показано на рисунке.

Рис. 567. Указываем вариант анимации Shape tweening

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

Рис. 568. Круг плавно переходит в полумесяц.

Здесь первый ключевой кадр содержит круг, а последний, 10-й кадр, — полумесяц. На рисунке показаны все кадры мультфильма Рассмотрим параметры преобразования shape tweening. При выборе этого варианта в палитре Frame появились параметры Easing и Blend и поле ввода метки кадра Label.

• Параметр Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от -100 до +100. Это означает, что если вы зададите отрицательную величину в поле Easing, то движение будет происходить с положительным ускорением (скорость будет увеличиваться). И наоборот, если значение Easing положительное, анимация замедляется.

Рис. 569. Анимация с ускорением (Easing < 0)

Рис. 570. Анимация с замедлением (fusing > 0)

• Параметр Blend (Переход) определяет алгоритм перехода: Distributive (Размытый) и Angular (Угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов и отрезки прямых линий. Рекомендуется поэкспериментировать с этим параметром, чтобы понять, в каких случаях какое значение параметра лучше использовать.

Последний инструмент в анимации типа shape tweening — контрольные точки (shape hints), с помощью которых вы помогаете Flash правильно осуществить переход. Без них не обойтись при работе со сложными формами. Пользоваться контрольными точками очень легко. В первом ключевом кадре (с которого начинается анимация) вы добавляете контрольную точку (команда Modify>lransform>Add shape hint или клавиши <Ctrl>+<Shift>+<H>). На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита. Вы прикрепляете ее к той части изображения, которая двигается не так, как вы хотели.

Затем вы переходите на второй ключевой кадр и прикрепляете эту же точку к части, в которую должна перейти помеченная часть в начальном кадре. Эта точка будет уже зеленого цвета, а на начальном кадре она станет желтой. Таким образом, вы можете отличать начальные и конечные контрольные точки (на одном кадре могут присутствовать и те, и другие). Удалить все точки можно с помощью команды ModifyTransform>Remove All Hints. Удалить же единственную точку можно, щелкнув на ней правой кнопкой мыши и в появившемся контекстном меню выбрав команду Remove Hint. Поскольку контрольные точки обозначаются буквами латинского алфавита, их может быть не больше 27.

На следующих двух рисунках вы можете заметить разницу между кадрами, созданными без использования контрольных точек, и кадрами, созданными с использованием таковых.

Рис. 571. Shape tweening без использования контрольных точек

Рис. 572. Shape tweening с использованием контрольных точек

Контрольные точки

Контрольные точки (shape hints, дословно - подсказки для форм) - инструмент в анимации-трансформации shape tweening. Контрольные точки - это точки, с помощью которых вы помогаете Flash правильно осуществить переход. Вы должны указать Flash, какая точка контура одного объекта должна перейти в указанную вами точку контура другого объекта. Без контрольных точек не обойтись в случае сложных форм.

Пользоваться ими очень легко:

1. Выделите первй ключевой кадр в шкале времени.

2. Добавьте контрольную точку - Modify - Shape - Add shape hint (Модифицировать - Фигура - Добавить контрольную точку) или Ctrl-Shift-H.

На сцене появится маленькая красная точка, обозначенная буквой латинского алфавита.

Вы прикрепляете ее к той части изображения, которая трансформируется не так, как вы хотели.

3. Перейдите на второй ключевой кадр (выделив в шкале времени), и в рабочей области прикрепляете эту же контрольную точку к части объекта, в которую должна перейти часть объекта из начального кадра.

4. Воспользуйтесь кнопками Onion Skin Outlines (Смежные кадры в виде контуров) и Edit Multiple Frames(Редактирование нескольких кадров), чтобы видеть этапы трансформации одного объекта в другой.

5. Проиграйте трансформацию (Ctrl-Enter) - вы увидите, что она осуществляется по-другому:  

Вы можете, при нажатых кнопках Onion Skin Outlines (Смежные кадры в виде контуров) и Edit Multiple Frames(Редактирование нескольких кадров), перемещать контрольную точку во втором ключевом кадре и смотреть, как будет меняться трансформация.

Можно сделать не одну контрольную точку.

Для каждой новой контрольной точки вы должны повторить технологию с 1 по 3 пункт.

без контрольных точек

с контрольными точками

 

Удаление контрольных точек

• Удалить все точки можно с помощью Modify - Shape - Remove All Hints (Модифицировать - Форма - Удалить все контрольные точки).

• Удалить единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint  (Удалить контрольную точку).

Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27.

При использовании анимации на основе изменения формы (shape tweening) могут модифицироваться следующие параметры фигуры:

• Форма  • Расположение  • Размер (любые пропорции)  • Цвет  • Угол поворота

 

Если вам нужно отключить shape tweening, то в палитре Frame выберите в списке Tweening значение None. Анимация на основе изменения символов (Motion tweening) Как уже отмечалось выше, наиболее часто используется вариант анимации motion tweening (анимация движения). В этом случае анимация строится на основе модификации символов, т. е. объектом анимации является символ. Как и в анимации shape tweening, для каждого объекта в каждый момент времени требуется один слой. В этом слое должен находиться один символ, с которым и будут происходить все изменения.

Вот какие параметры символа могут модифицироваться при использовании motion tweening:

• размер (как пропорционально, так и непропорционально — отдельно высота и ширина)  • наклон  • расположение  • угол поворота  • цветовые эффекты

Включить motion tweening можно несколькими способами, а отключить — только одним. Для того чтобы включить motion tweening, нужно сделать активным начальный кадр перехода, а затем, нажав правую кнопку мыши, в контекстном меню выбрать команду Create motion tween, либо выбрать команду Insert>Create motion tween). Универсальный способ включения/выключения motion tweening— в палитре Frame выбрать значение в списке Tweening.

Рис. 573. 

 Параметры анимации: 

• Easing — задает обратное экспоненциальное ускорение; работает так же, как и в shape tweening; 

• Rotate — позволяет управлять вращением:

o Auto — заставляет Flash автоматически пытаться определить количество витков;  o CW — задает вращение по часовой стрелке;  o CCW — задает вращение против часовой стрелки; при этом в ставшем доступном поле справа можно ввести количество оборотов (можно использовать только целые значения или отключить вращение, выбрав в списке Rotate значение None).

• Options — дополнительные параметры:

o Orient to path — поворачивает символ в соответствии с направляющей линией; o Snap — привязывает символ к направляющей линии;  o В случаях, когда количество кадров основной сцены не кратно количеству кадров символа, флажок Synchronize (Синхронизировать) позволяет синхронизировать эти две анимации.

Направляющие слои

Движение объекта можно организовать с помощью направляющего слоя. В направляющем слое рисуется траектория, по которой должен дв'игаться объект, затем к ней привязывается сам объект, а направляющий слой вместе с траекторией делается невидимым. В общем случае в качестве объекта может выступать символ типа Movie clip, т. е. некоторый мультфильм, или даже группа объектов различных типов. Рассмотрим простой пример, в котором по произвольной кривой перемещается изображение стрелки.

В слое, который назовем Стрелка, нарисуем объект в виде стрелки и преобразуем его в символ типа Graphic. В более общем случае в качестве объекта может выступать символ типа Movie Clip, т. е. некоторый мультфильм или даже группа объектов различных типов.

Рис. 574. Объект в виде стрелки, который должен двигаться

Далее, щелкнем правой кнопкой мыши на имени слоя Стрелка и в контекстном меню выберем команду Add Motion Guide (Добавить направляющую движения). В результате в списке слоев появится новый слой Guide: Стрелка с характерным значком слева от его имени. Это и есть направляющий слой (guide layer).

Слой, находящийся в списке непосредственно под ним, является направляемым (guided). В направляющем слое нарисуем траекторию движения. Для этого можно использовать любой инструмент рисования линий, например, «Карандаш» (Pencil). Главное, чтобы траектория была линией (контуром), а не областью заливки. Выделим наш объект в виде стрелки и переместим его на начало траектории. При перемещении в центре изображения объекта появится кружок, который должен попасть на линию траектории и как бы зацепиться за нее. Этим мы привязываем объект к траектории.

На временной шкале выберем кадр, соответствующий окончанию движения по траектории (в нашем примере это 30-й кадр). Сделаем его ключевым. Это нужно сделать сначала в направляющем слое, а затем — в направляемом.

Убедимся, что активным является направляемый слой (в нашем примере это слой Стрелка). Перетащим объект на конец траектории, а затем вернемся к первому кадру в этом же слое. Создадим анимацию (команда Insert Motion Tween). В общих чертах организация движения по направляющей траектории завершена.

Рис. 575. В направляющем слое рисуется траектория движения

Рис. 576. Задание параметров движения по траектории

Рис. 577. Движение объекта с его ориентацией вдоль траектории

Чтобы траектория движения была невидимой, достаточно сделать невидимым направляющий слой. Если вы хотите, чтобы объект ориентировался вдоль траектории, установите для первого кадра слоя с объектом свойство Orient to Path. Ускорение или замедление движения по траектории определяется параметром Easing.

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