Введение в анимацию. Знакомство с программой Synfig Studio

1. Понятие анимации

Представление об анимации имеет подавляющее большинство людей. Наверное, многие сразу представят какой-нибудь мультипликационных фильм (что-нибудь вроде «Шрека» или «Винни-Пуха»). Если попытаться навскидку дать определение, то можно сказать, что анимация — это движение рисованных изображений. Однако, как создаются эти движения?

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

Если множество похожих изображений (рис. 1) быстро сменять друг за другом, то при определенной скорости смены человек будет воспринимать происходящее как плавное движение (или изменение) объекта на рисунке.

Рис. 1. Ряд изображений, при быстрой смене которых может возникнуть эффект анимации

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

Вопрос. Сколько рисунков потребуется сделать художнику для анимации падения стула за 3 секунды?

2. Компьютерная анимация

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

Компьютерная анимация создается с помощью специальных программ. Их достаточно много. Условно можно выделить два или три вида ПО для создания анимации:

1. Программы, позволяющие создавать анимацию из готовых изображений (различные gif-аниматоры, например, Microsoft GIF Animator).
2. Программные среды, позволяющие создавать 2D анимацию (например, Adobe Flash CS4, Synfig).
3. Программные среды, позволяющие создавать 3D анимацию (например, Autodesk 3ds Max, Blender).

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

Представим временную шкалу (киноленту) как дорожку, состоящую из отдельных кадров. Допустим, что в кадре №1 объект должен находиться слева, а в кадре №100 — справа. Эти два кадра отмечаются как ключевые для данного объекта. В них он располагается в начале и конце движения (рис. 2). Все остальные кадры — промежуточные — не требуют фиксации объекта — изображение в них создаст компьютерная программа. Она сама вычислит, где и в какой момент должен находиться объект. Понятно, что если мы ходим сделать передвижение объекта по кривой, то и ключевых кадров придется сделать больше (или использовать специальные средства, предоставляемые программой, для создания траектории).

Рис. 2. Положение объекта в 1-ом кадре киноленты (слева) и в 100-ом (справа).

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

3. Интерфейс Synfig Studio

В качестве программы для создания анимации рассмотрим Synfig Studio — графическую «оболочку» к программе Synfig, позволяющей создавать векторную 2D-анимацию (рис. 3). После запуска открываются четыре плавающих окна (если установки были «по-умолчанию»).

Рис. 3. Интерфейс Synfig Studio «по-умолчанию», состоящий из четырех «плавающих» окон
(1 — панель инструментов, 2 — рабочее окно, 3 — панели свойств, временной шкалы и др., 4 — панели навигации, слоев и др.)

В первом окне расположены стандартная панель, инструменты для рисования, настройки цвета и толщины контура.

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

Нижнее и правое окна объединяют в себе целый ряд панелей. Панели можно вытаскивать за пределы плавающего окна, закрывать. Если потребуется вернуть все в первоначальный вид, то следует выбрать в меню первого окна File ? Panels ? Reset Windows to Original Layout (перезагрузить окна в первоначальное расположение).

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

4. Рисование, изменение и перемещение геометрических примитивов

Для того, чтобы приступить к созданию анимации неплохо бы научиться создавать какое-нибудь изображение в Synfig. Мы не будем изучать все инструменты, т.к. это не цель нашего урока; ограничимся лишь прямоугольником (Rectangle), кругом (Circle) и многоугольником (Polygon). Создание таких фигур не сильно отличается от рисования их в большинстве графических редакторов, а вот перемещение и изменение объектов в Synfig происходит иначе.

После того, как фигуры изображены на холсте и выделены (с помощью инструмента Normal Tools), у них появляются метки, позволяющие изменять их размер и перемещать (рис. 4).

Рис. 4. Выделенные изображения прямоугольника, круга и многоугольника

Так, прямоугольник имеет две зеленые метки: в верхнем левом углу и нижнем правом. За эти метки можно менять размер прямоугольника. Для перемещения следует выделить обе метки. После этого можно перемещать объект, потянув за любую из меток. Для выделения двух и более меток существует два способа. Первый заключается в поочередном их выделении при зажатой клавиши Ctrl. Второй способ — это выделение области, включающей необходимые метки, с помощью Normal Tool, т.е сначала выделяется прямоугольник (щелчком левой кнопкой мыши), а затем метки (с помощью рамки выделения).

Работать с эллипсом намного проще, чем с прямоугольником. Центральная метка служит для перемещения, а расположенная на окружности — для изменения размера.

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

5. Установка цвета фигур

Чтобы задать цвет будущей фигуры необходимо щелкнуть по верхнему прямоугольнику цвета на панели инструментов (рис. 5а). После этого откроется диалоговое окно Colors, где можно настроить цвет заливки. Доступны цветовые модели RGB и YUV. Здесь же можно настроить прозрачность объекта (Alpha).

Рис. 5. Установка цвета заливки
(1 — установки цвета на панели инструментов, 2 — диалоговое окно Colors;
а — цвет заливки, б — установка прозрачности объекта)

Изменить цвет уже нарисованной фигуры можно двумя способами. Первый способ: выделить объект и на панели Params (параметры), расположенной в нижнем окне, изменить свойство Color (рис. 6). Второй способ: изменить цвет на панели инструментов (рис. 5а), а затем, выбрав заливку (Fill Tool), щелкнуть по объекту.

Рис. 6. Изменение цвета объекта (а — панель Params, б — значение свойства Color)

Задание. Создайте на холсте изображения красного круга, желтого прямоугольника и синего многоугольника. Попробуйте перемещать объекты и менять их размер или форму.

У объекта, нарисованного последним, немного уменьшите значение Alpha, а затем переместите на любой другой объект (другими словами, добейтесь пересечения объектов). Объясните увиденное.

6. Выводы

• Эффект анимации достигается с помощью быстрой смены похожих изображений.
• В настоящее время широкое распространение получила компьютерная анимация. Она убыстряет и удешевляет создание анимационных фильмов; кроме того, используется в web-дизайне.
• Одним из преимуществ использования специализированного программного обеспечения для создания анимации является возможность создавать только ключевые изображения, минуя промежуточные.
• Существует большое количество программ для создания компьютерной анимации. Они могут существенно различаться между собой по функциональным возможностям.
• Созданию анимации предшествует подготовка изображений. Создание рисунков в профессиональных средах анимации может иметь свои специфические особенности.

Создание простейшей анимации в Synfig Studio

1. Режим анимации

На прошлом уроке мы лишь говорили об анимации, пробовали рисовать в программе Synfig Studio; сегодня приступим непосредственно к созданию анимации.

В Synfig Studio изначально включен «режим рисования», в котором создаются и изменяются изображения. Однако эти изменения не будут «превращены» в анимацию. Можно сказать, что в данном режиме объекты подготавливаются. Для того, чтобы любые изменения объектов были обработаны как анимация, необходимо переключиться в соответствующий режим. Для этого в программе Synfig Studio предназначена зеленая кнопка в нижнем правом углу Рабочего окна (рис. 1). После этого вокруг холста появляется красная рамка, а на кнопке переключения будет изображен уже не зеленый шар, а красный. Для выхода из режима анимации достаточно еще раз нажать на эту же кнопку.

Рис. 1. Режимы рисования и анимации
(1 — Рабочее окно в режиме рисования, 2 — Рабочее окно в режиме анимации;
а – кнопка переключения режимов, б – красная рамка, сигнализирующая о том, что включен режим анимации)

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

2. Шкала времени

Итак, на первом уроке мы уже выяснили, что эффект анимации является результатом быстрой смены похожих изображений. Любые изменения протекают во времени, поэтому в Synfig предусмотрена панель Timetrack (назовем ее «шкалой времени»). Похожая панель есть в большинстве программ для анимации, однако может называться по-разному. Данная шкала в Synfig есть не только на панели Timetrack, но и в нижней части Рабочего окна. (рис. 2). Шкалу времени можно сравнить с кинолентой или фотопленкой, где в каждом кадре может быть запечатлено какое-нибудь изображение.

Рис. 2. Шкала времени
(1 — Рабочее окно, 2 — панель Timetrack;
а – текущий кадр, б – шкала с делениями на секунды и кадры)

На шкале присутствуют деления, более крупные из которых помечены как 0f, 2s, 4s. F – это сокращение от frame (кадр), а s – от second (секунда). В каждой секунде 24 кадра (задано «по-умолчанию», но может быть иное значение кадров в секунду). Если щелкнуть в любом месте шкалы, то вы увидите линию, указывающую текущий кадр, также он будет указан в нижнем левом углу Рабочего окна (рис. 2а). Например, надпись 2s 13f в этом поле означает, что выделен 61 кадр (24+24+13). Следует отметить, что менять текущий кадр можно как в Рабочем окне, так и на панели Timetrack, а также вписать значение кадра в поле текущего кадра.

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

3. Ключевые кадры

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

Для создания ключевых кадров в Synfig Studio предусмотрена панель Keyframes (рис. 3). На ней с помощью кнопки со знаком «+» можно добавлять ключевые кадры. В этих кадрах и будет зафиксировано изменение фигуры. В остальных кадрах оно будет вычислено.

Рис. 3. Панель Keyframes
(а – кнопка, добавляющая ключевой кадр, б — список созданных ключевых кадров, в — момент времени, в котором создан ключевой кадр, г — промежуток времени до следующего ключевого кадра, д — переход в кадр, е — описание)

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

Прежде чем приступить к анимации нашего «героя»-прямоугольника следует определиться со сценарием будущего мультфильма. Допустим с фигурой будут происходить следующие изменения, на каждое из которых будет уходить по 1 секунде (рис. 4):

Рис. 4. Изменения прямоугольника в ключевых кадрах

1. Фигура двигается от левой границы холста в центр.
2. Изменяет свой размер.
3. Изменяет цвет.
4. Перемещается к правой границе холста.

Эти изменения и будут определять ключевые кадры.

Вспомним, что для перемещения прямоугольника без изменения его размеров необходимо выделить обе его метки (например, с помощью рамки выделения) и только потом перемещать за любую из них.

Задание.

1. Создайте ключевой кадр в начале временной шкалы (0f).
2. Затем перейдите в 24 кадр (1s) и создайте еще один ключевой кадр. Переместите прямоугольник на центр холста.
3. Перейдите в 48 кадр (2s), добавьте ключевой кадр и измените размер прямоугольника.
4. Далее создайте ключевой кадр на 3-й секунде и измените цвет фигуры.
5. На 4-й секунде создайте ключевой кадр и переместите объект к правой границе холста.

5. Просмотр анимации

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

Задание. Попробуйте просмотреть анимацию таким способом.

Однако, так трудно увидеть все нюансы. Поэтому предварительный просмотр лучше выполнить другим способом: в Рабочем окне вызвать меню (треугольник в верхнем левом углу) и выбрать File ? Preview (рис. 5). Откроется диалоговое окно с настройками, их можно оставить «по-умолчанию». Далее нажать Preview. Откроется окно предварительного просмотра. Управляющие кнопки находятся внизу. Нажать Play.

Рис. 5. Предварительный просмотр анимации
(1 — вызов окна: File ? Preview, 2 – окно настроек, 3 — окно предварительного просмотра)

Задание. Посмотрите анимацию прямоугольника в окне просмотра.

6. Рендеринг

Все, что было сделано до этого, не сохранено на диске компьютера. Для того, чтобы сохранить файл достаточно выполнить стандартную операцию сохранения. При этом будет сохранен файл в формате программы Synfig; другими словами, будут сохранены данные, описывающие определенным способом объекты и их изменения. Чтобы получить изображение необходима специальная программа (ее включают многие графические процессоры, в том числе и Synfig Studio), осуществляющая преобразование, в данном случае векторного изображения (т.к. Synfig – векторная программа) в растровое. Этот процесс получения изображения называется рендерингом (от англ. rendering). «По-русски» можно сказать, что происходит визуализация изображения.

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

Для того, чтобы вызвать окно рендеринга в Synfig Studio необходимо в меню Рабочего окна (треугольник в верхнем левом углу) выбрать команду File ? Render. Откроется соответствующее диалоговое окно (рис. 6).

Рис. 6. Окно настроек рендеринга
(а — адрес и имя файла, б – формат файла, в — вкладка «Time», г — количество кадров в секунде, д — время начала анимации, е — время окончания анимации)

Поле Filename указывается адрес и имя файла (с расширением), кнопка Choose... вызывает диалоговое окно выбора папки. Осторожно: в Windows в адресе файла не должно быть русских букв, иначе сохранить не удастся (по-крайней мере, это справедливо для версии 0.61.09.).

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

На вкладке Time можно настроить количество кадров в секунду, начало и окончание анимации. Например, если у нас анимация прямоугольника длится всего четыре секунды, то следует исправить значение «по-умолчанию» 5s на 4s.

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

Рис. 7. Сообщение в Рабочем окне
(а — процесс рендеринга анимации, б — завершение рендеринга)

Задание. Сохраните файл в формате программы Synfig и создайте анимированное изображение в формате GIF.

7. Выводы

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

8. Самостоятельная работа

1. Создайте анимацию окружности по плану, приведенному на уроке для прямоугольника.
2. Создайте анимацию многоугольника, в которой он постепенно изменяет свою форму.
3. Создайте анимацию постепенного исчезновения объекта, используя параметр Alpha (прозрачность).

Роль слоев в компьютерной анимации

1. Понятие слоя

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

Рис. 1. Слои в графике

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

2. Работа со слоями в Synfig

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

Панель слоев «по-умолчанию» располагается в нижней части правого «плавающего» окна. Если нарисовать на холсте несколько фигур, то на данной панели будет отображен список слоев (рис. 2).

Рис. 2. Панель Layers
(а – обозначение панели, б — список слоев,
в — кнопки управления слоями, г — имена слоев)

Имя слоя можно изменить. Для этого необходимо выделить слой, затем щелкнуть по названию, вписать новое имя и нажать Enter. Снятие флажка (слева) делает слой невидимым. Часто это бывает удобно при редактировании изображения. Кнопки в нижней части панели предназначены для управления слоями. Например, первые две (со стрелками) позволяют перемещать слои относительно друг друга.

Рассмотрим практическое применение слоев: допустим нам необходимо создать изображение, как на рисунке 3

.

Рис. 3. Изображение, созданное с помощью инструментов Circle, Rectangle и Polygon

Дом состоит из восьми прямоугольников, машина — из многоугольника и двух кругов, также на рисунке имеется изображение солнца в виде простого круга. После того, как данные изображения будут созданы, на панели Layers окажется двенадцать слоев (рис. 4.1). В таком виде понять, какой примитив, какому объекту принадлежит весьма затруднительно, а уж анимировать все это количество будет невероятно сложно. Поэтому объединим слои, формирующие дом в одну «капсулу», а машину — в другую. Для этого следует выделить слои всех «частей дома» (с помощью зажатой клавиши Shift или Ctrl) и выполнить команду Encapsulate (кнопка внизу панели Layers или через контекстное меню). Тоже самое необходимо сделать и по отношению к машине. Теперь картина слоев будет выглядеть немного лучше (рис. 4.2). Кроме того, неплохо бы переименовать слои (рис. 4.3). Следует иметь ввиду, что если щелкнуть по треугольнику слева от названия, то раскроется список слоев, входящих в объединение. Другими словами, фигуры все-равно сохраняют автономность, поэтому каждый элемент можно редактировать отдельно по-прежнему.

Рис. 4. Слои составного изображения
(1 — множество слоев, 2 — объединенные слои, 3 — переименованные слои)

Задание. Нарисуйте в Synfig Studio изображения солнца, дома и машины. Объедините и переименуйте слои.

Вопрос. В чем будет заключаться разница в анимации, если слой «Дом» будет находиться над слоем «Машина»?

3. Перемещение объектов, состоящих из нескольких слоев

В Synfig Studio существует одна особенность при перемещении составного изображения.

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

Рис. 5. Вид объекта на холсте при выделении составного слоя «Машина»
(а — точка для перемещения слоя)

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

Рис. 6. Этапы перемещения «точки центра» изображения

Задание. Переместите центральные точки машины и дома в центр самих изображений.

4. Анимация нескольких объектов

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

Этапы создания анимации:

1. Включить режим анимации.
2. Создать ключевые кадры в начале 1-й и 5-й секунд.
3. Перейти в последний кадр.
4. Переместить изображение солнца в центр холста, а машины — на правую границу холста.
5. Создать ключевой кадр в начале 4-й секунды.
6. Переместить машину немного назад (в центр холста).

Задание. Создайте анимацию по плану описанному выше. Посмотрите ее с помощью команды File ? Preview.

5. Выводы

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

6. Самостоятельная работа

1. Создайте мультфильм «Теннис» (рис. 7), в котором должны двигаться как ракетки, так и мяч.
   
   
   Рис. 7. Изображение трех прямоугольников и круга
2. Создайте мультфильм «Светофор», где по сценарию должен сначала гореть красный свет 1,5 секунды, затем желтый — полсекунды и, наконец, зеленый — 1 секунду.
3. Самостоятельно придумайте сценарий какого-нибудь мультфильма и реализуйте его в Synfig Studio.