Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

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

• Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
• Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

1. Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).
6. При изменении размера объекта следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.
9. Флажок Orient to Path
10. Флажок Synchronize
11. Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.
5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).
6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.
9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Делать flash-ролики с анимацией движения , но это движение было по прямой. Теперь пора разобраться, как делать движение по заданной траектории. Для задания траектории нам понадобится дополнительный слой.

Откройте программу Macromedia Flash Professional 8 , и создайте в ней новый документ. Слои создаются на временной ленте с помощью нажатия иконки Insert Layer (вставить слой). Для создания нового слоя можно также выбрать в меню Insert — Timeline — Layer . Так создается обычный слой. Возможно, Вы это уже делали, когда создавали без траектории.

Но теперь Вам понадобится направляющий слой. Он создается с помощью иконки Add Motion Guide (добавить направляющую движения), или с помощью меню Insert — Timeline — Add Motion Guide . Создайте его, он у Вас появится на временной ленте выше основного слоя. Если направляющий слой будет ниже — он не будет работать. В таком случае его нужно перетащить мышкой вверх.

Выделяете в основном слое первый кадр, с которого начнется анимация движения, и если он не ключевой, делаете его ключевым с помощью меню Insert - Timeline - Keyframe (или с помощью нажатия на него правой клавишей мыши и выбора Insert Keyframe ). Размещаете на этом кадре объект. Это может быть импортированная картинка, группа объектов, или текст. Если Вы импортируете картинку, сначала подготовьте ее в графическом редакторе, и затем в программе Macromedia Flash выберите в меню File — Import — Import to Stage . Если объект рисованный, то сгруппируйте его с помощью меню Modify — Convert into Symbol .

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

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

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

Чтобы в программе Macromedia Flash Professional 8 объект притянулся, в меню View — Snapping должны быть включены пункты Snap to Guides (захват по направляющим) и Snap to Objects (захват по объектам). Также проверьте, включен ли пункт Snap Align (захват по выравниванию). Хотя последний пункт на притяжение объекта к траектории не влияет, все же его лучше тоже включить.

Теперь перейдите программе Macromedia Flash на конечный кадр. Выделите его в направляющем слое, и выберите в меню Insert — Timeline — Frame . Добавится обыкновенный кадр, не ключевой (для добавления можете также нажать правой клавишей мыши на кадр, и выбрать Insert Frame ). Таким образом, у Вас будет на конечном кадре в основном слое ключевой кадр, а в направляющем слое простой кадр.

После этого в последнем кадре притяните объект к конечной точке траектории. Далее делаете в программе Macromedia Flash анимацию движения: выделяете какой-нибудь промежуточный кадр между начальным и конечным, и в панели Properties выбираете в списке Tween (заполнение кадров) пункт Motion (движение). Если Вы хотите, чтобы объект поворачивался по направлению траектории, а не просто перемещался, включаете в панели свойств пункт Orient to Path (если этого свойства Вы не видите, нажмите на белый треугольник в правом нижнем углу панели свойств).

Также в панели свойств в программе Macromedia Flash Professional 8 Вы можете добавить следующие свойства для Вашей анимации движения:

Scale (масштаб): при включенной опции, если размер или форма объекта в начальном или конечном ключевых кадрах будут изменены, то это изменение во время анимации движения будет происходить плавно.

Ease (замедление): используется, если нужно ускорить, или замедлить движение. Для применения опции передвиньте бегунок вверх или вниз, или впишите в окошко цифры от −100 до 100.

Rotate (вращение): объекты при движении вращаются по или против часовой стрелки, Количество оборотов объекта во время анимации движения прописывается в окошке.

Задание: сделать flash-ролик с анимацией движения по траектории. Вот, что получилось у меня:

В этом flash-ролике я использовал, кроме анимации движения (кораблик) также (слова) и (волны).

Видео о том, как сделать анимацию движения по траектории в программе Macromedia Flash Professional 8

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:

Урок 4. Создание анимации

Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:

Анимационные эффекты - программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;

Покадровая анимация - пользователь создает каждый кадр будущей анимации;

Автоматическая tweened-анимация, или анимация трансформации, - пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

Графические объекты, включая формы, сгруппированные объекты и графические символы;

Растровые изображения;

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

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode .

Рис. 1. Выделенный текстовый объект

В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.

Рис. 2. Панель Explode

Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode . После того как вы выберете необходимые параметры, нажмите кнопку ОК и получите примерно такую анимацию .

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur ролик .

Рис. 3. Растровое изображение, импортированное на сцену

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) - в результате появится панель Blur .

Рис. 4. Кнопка Edit находится внизу на панели Properties

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).

Рис. 5. Панель Blur позволяет поменять настройки эффекта

Покадровая анимация

Рассмотрим простейший пример - листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Рис. 6. Первый ключевой кадр анимации

Нарисуем кленовый листочек, например такой, как показано на рис. 6, - соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр - это кадр, в котором происходит помещение содержимого или его изменение.

Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe . В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).

Рис. 8. Последний кадр анимации

Обратите внимание на панель Properties (рис. 8) - в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie . В результате получим следующий фильм leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie . Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.

Рис. 9. Просмотр фильма в режиме Bandwidth Profiler

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

Автоматическая анимация

Рис. 10. Объект автоматически превращается в графический символ

Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert => Timeline => Create Motion Tween , в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа (рис. 11).

Рис. 11. Каждый новый символ становится частью библиотеки

Если выполнить команду Window => Library , то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe ). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform ), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween .

Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween

Выполнив команду Control => Test Movie , получим информацию, представленную на рис. 13.

Рис. 13. Просмотр фильма в режиме Bandwidth Profiler

Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше - всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм .

Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal ) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties . Положительные значения параметра Ease приводят к замедлению движения, а отрицательные - к ускорению. Выберем максимальное ускорение объекта.

Рис. 14. Выберем максимальное ускорение объекта Ease = –100

Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм . Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация - это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, - это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета.

Движение по заданной траектории

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide .

В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1 .

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).

Рис. 15. Пример задания траектории движения

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) - рис. 16.

Рис. 16. Параметр Snap задает режим привязки к траектории движения

После того как вы поставите флажок Snap , центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).

Рис. 17. Объект как бы прилипает к траектории движения своим центром

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal , - в результате получим фильм .

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

Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).

Рис. 18. Если поставить флажок Orient to Path , птица будет лететь головой вперед

Необходимо поставить флажок Orient to Path , и движение птицы изменится на вполне привычное (исходник к данному ролику - полет птицы.fla).

Рис. 19. Добавление одноцветного фона

Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.

Если мы хотим добавить фоновый рисунок, нам понадобится для этого отдельный слой. В принципе, программа Flash предлагает возможность создания системы слоев, сходной с теми, что используются в классической анимации, при которой фон и различные подвижные объекты рисуются каждый на своем слое прозрачной пленки.

Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).

Рис. 20. На новом слое создадим неподвижный фоновый объект

Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.

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

Рис. 21. Для анимации облака создадим отдельный слой

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

На что похож мультфильм, в котором нет действия? Во что превратится мультфильм, который не рассказывает историю? Наверняка вы видели, как художники в студии рисуют этюды с живой модели. Такие занятия очень полезны для понимания анатомии, и как себя ведут мышцы в движении. Однако специфика передачи такого движения не дает полной ясности! Она ограничена воспроизведением реальной жизни, не более. Движение и деятельность в мультипликации изображаются совершенно иначе. Поэтому знаний, как правильно прорисовать тело, недостаточно. Особенно важно освоить техники, которые позволят "оживить" форму. Именно об этом мы расскажем в этом курсе!

Что важно знать

Когда художник работает над персонажем, который оказался в определенной ситуации, ему/ей важно в первую очередь создать действие. Любая сцена, в которую вы помещаете свой персонаж, должна помочь зрителю увидеть намерение, побуждающее его к действию. Увидеть мотивы, чувства, навыки (или их отсутствие) и личность в целом. Этой цели необходимо достичь даже при полном отсутствии диалога. И здесь у рисунков есть преимущество: мы можем поиграть с языком тела и раздуть эмоции до предела. Вам не придется раскошеливаться на актеров, студию и прочие расходы. Достаточно бумаги и карандаша. Воображению нет предела!

Чтобы достичь этих результатов в анимации, нужно нацелиться на две вещи:

• Простота;
• Ритм.

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

1. Кривая движения

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

Кривая движения должна быть плавной и иметь направление, чтобы нам было очевидно, что намеревается сделать каждый персонаж.

Обратите внимание, как странно выглядит дизайн, основанный на сложных кривых движения.

Пример неправильного использования кривой движения - линия не вписывается в контекст нужным образом.

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

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

2. 12 базовых принципов анимации

В 1981 году два величайших аниматора киностудии Дисней (Франк Томас и Олли Джонсон) написали книгу "Иллюзия жизни". Они представили публике "12 базовых концепций анимации", которые применяются студией с 1930-х годов в попытке создавать максимально реалистичную анимацию. Хотя эти концепции были разработаны для использования в традиционной анимации, они остаются неизменными и сегодня - даже в цифровых проектах.

Базовые концепции состоят в следующем:

• Сжатие и растяжение (Squash and stretch)
• Подготовка или упреждение (Anticipation)
• Постановка (Staging)
• Сквозное действие и Поза к позе (Straight ahead action and pose to pose)
• Инерция и оверлэпинг (Follow through and overlapping action)
• Медленный вход и медленный выход (Slow in and slow out)
• Арка (Arcs)
• Второстепенное действие (Secondary aciton)
• Тайминг (Timing)
• Преувеличение (Exaggeration)
• Конечная прорисовка (Solid drawing)
• Влечение (Appeal)

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

Сжатие и растяжение

Это основная, если не самая главная, техника, которой мы должны пользоваться в создании динамики движения персонажей. Вся концепция сводится к сжатию и растяжению пропорций персонажа или объекта в соответствии с движением. Эта техника позволяет нам добавить весомости и плавности движению. Посмотрите, как она применена к объекту:

Обратите внимание на физические аспекты отскакивающего мяча: когда он летит вниз с ускорением, его форма растягивается. Когда мяч ударяется о землю, он вытягивается по горизонтали (что подчеркивает силу гравитационного притяжения).

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

Пример того, как эта техника применяется к выражениям лица: заметьте, что форма верха черепа не меняется, и только нижняя челюсть вытягивается книзу.


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

Потрясающе, правда? Эта техника подводит нас к следующей теме:

Преувеличение

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

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

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

Преувеличение: обратите внимание на траектории движения персонажа. Они помогают подчеркнуть точку приложения силы, с которой он пытается поднять груз. Так вы точно убедите зрителя, что мяч чрезвычайно тяжел!

Подготовка или упреждение

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

Классический пример подготовки: персонаж вот-вот побежит и покинет сцену!

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

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

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

Нацеливание и акцент

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

• Персонаж видит нечто удивительное;
• Возникает предвкушение (голова быстро опускается);
• Момент "акцента" имеет место, голова поднимается вверх.
• Персонаж возвращается в исходное состояние.

Давайте проследим, как работает этот алгоритм.

Шаг 1

Начинаем с рисунка персонажа с радостным или естественным выражением лица:

Шаг 2

Персонаж видит нечто удивительное и, в предвкушении момента, опускает голову вниз и зажмуривается. Это движение увеличивает впечатление того, что он видит нечто невероятное!

Шаг 3

Шаг 4

Персонаж успокаивается и возвращается в исходное состояние.

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

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

Чуть позже мы еще вернемся к "таймингу".

Медленный вход и медленный выход

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

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

Совет: если вы веб-дизайнер и работаете с переходами в создании анимации на страницах сайтов, вы наверняка сталкивались с концепцией "тайминга", для которой применяется функция Transition (Переход) в CSS3. В этой функции, помимо прочих параметров, используются "Плавный вход" и "Плавный выход", чтобы описать кривую скорости в анимации. Аналогично тому, если вы работаете в After Effects, вы наверняка заметили в меню Keyframe Assistant команды "Плавно плавно", "Плавный вход" и "Плавный выход". В том или ином случае, если вы пользовались этими опциями, - значит, что вы уже применяете знаменитый принцип анимации в своих проектах!

Влечение

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

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

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

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

Постановка

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

Я добавил машину в кадр, чтобы подчеркнуть смысл происходящего. Теперь у нас есть четкий контекст, и все становится понятным!

Сквозное действие и Поза к позе

"Сквозное действие" означает подробную раскадровку анимационной сцены с начала до конца. "Поза к позе" относится только к прорисовке ключевых кадров, промежутки между которыми позже дополнятся фазами. Интересно то, что первая техника используется только в анимации 2D. Но техника "Поза к позе" все еще применяется в раскадровке фильмов и анимации 3D.

Инерция и Оверлэпинг

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

Заметьте, как волосы и футболка движутся с разной скоростью, следуя за движением.

Арка

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

Фоновое действие

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

Тайминг

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

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

Конечная прорисовка

Конечная прорисовка отностися к точности рисунков на бумаге. Рисунки должны иметь вес и объем, чтобы их правильно видели и трактовали. При этом здесь не идет речь о детальной прорисовке, чтобы сделать рисунок реалистичным. Мы говорим о том, как вы представите публике свое теоретическое знание рисунка. Художник, освоивший основы дизайна, может создать иллюзию объема в своих рисунках даже на эскизе 2D. В этом состоит искуство иллюзии правдоподобности.

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

На платформе Tuts+ есть несколько статей и курсов, написанных разными авторами, которые помогут вам углубиться в основы рисунка. Там вы сможете пройти разные стили рисования и станете полноценным художником.

3. Последовательные движения и циклы ходьбы

Со слов Кена Харриса, аниматора студии "Уорнер Бразерс" "Ходьба - самое первое, что нужно изучить". Научиться заставить мультяшного персонажа ходить именно так, как это нужно вам - самая сложная задача в анимации. Есть несколько способов, и они отличаются в зависимости от объема, сложности, контекста и насыщенности сцены.

Любопытно, но ходьба - это не что иное, как попытка поддержать себя в вертикальном положении. Иными словами, мы стараемся избежать падения на землю! Представьте младенца, который пытается стоять вертикально... наклоняясь вперед, он может сделать рефлекторный шаг.

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

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

Проанализируем упрощенный процесс на рисунке внизу:

Пример простого цикла ходьбы: тело слегка поднимается вверх в стадии переноса .

Обратите внимание, что руки движутся противоположно ногам; а, когда тело поднимается вверх в стадии переноса, одна нога прямая.

Теперь заполняем промежутки дополнительными фазами и завершаем основной цикл ходьбы в анимации:

Разные виды ходьбы и бега

Как я упоминал, в анимации (и в жизни) есть разные походки, и ими можно пользоваться для того, чтобы передавать нужные чувства и желания персонажей. Разные шаблоны передают это:

Знаменитые шаблоны анимации: они были созданы на основе книги Престона Блэйра "Мультипликационная анимация". Уверен, вам знакомы эти картинки по разным мультфильмам.

Пример прогулочного шага : тело все время движется вверх-вниз.

Отличия в ходьбе четвероногих животных

Движение четвероногих животных - более сложная тема, потому что вам необходимо следить за перемещением передних и задних лап. Плавность движений усложнит вашу работу, но ее имеет смысл изучать на примерах движений в реальной жизни.

Походка мультяшного животного - упрощенная трактовка того, что происходит в реальном животном мире. Мышцы и суставы занимают разное положение в зависимости от фазы движения тела:

Посмотрите вверху, как ведут себя передние и задние лапы в стадии переноса тела: голова слегка опускается вниз, когда задняя нога переносится вперед. Обратное происходит во время переноса передней лапы.

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

Упражнение. Попытайтесь найти траектории движения в рисунках вверху. Также обратите внимание, что галоп - блестящий пример использования сжатия и растяжения.

Пример анимированного галопа. Передние лапы инициируют движение и задают необходимый импульс.

Реалистичная передача цикла ходьбы или бега зависит от нескольких факторов, таких как вес, рост, намерение... Самое важное здесь - наблюдать за этими движениями, основываясь на реальных примерах из жизни.

Рисование ходьбы и бега - довольно сложная тема, которая заслуживает отдельного курса, посвященного только ей. Анатомия некоторых животных, таких как лошади, имеет свои отличия, из-за которых их ноги движутся по-другому. Ознакомьтесь с разделом "Копытные животные" в моем , там будет больше подробностей. Если вы хотите глубже изучить движения лошади, посмотрите , написанный Моникой Загробельной.

Соединяем все вместе

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

Конец!

Роль традиционной анимации в искустве 21 века сегодня активно дискутируется. Современные анимационные студии типа Пиксар или Дримворкс по прежнему пользуются как минимум 90% техник, описываемых выше. Способность оживить рисунок - неважно, с помощью ли пинапа, комиксов или мультипликации - прекрасная вещь. Если мы можем заставить ребенка поверить, что животное может разговаривать и действовать как человек, это потрясающе. Когда у зрителя пробуждаются эмоции, никакими словами не выразить чувства, которые испытывает в тот момент художник.

Carlos Gomes Cabral

I"m a product from the madness of the 80"s, living in the city of Rio de Janeiro (Brazil). I"ve been fond of arts, comics and music since I was a child, I dedicate myself to several projects at the same time and I hate sitting still. With a Bachelor"s degree in IT, I"m currently working for a technology mobility company. I"m also in love with motion graphics, HTML5, web design and UX trends. You can find me on Twitter (@cgcabral).