Урок 1.5

Анимация

Введение

Этот урок является продолжением предыдущих трех и представляет типы анимации в Moho. Вы можете либо продолжить свои проекты, созданные в предыдущих уроках, либо открыть подготовленный к этому занятию файл под названием Tutorial1.4. Этот файл можно найти в папке "Tutorials/1 - Basics" поддиректории Tutorials программы Moho.

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

Откройте в Moho ваш предыдущий проект (или файл Tutorial4). Убедитесь, что все слои видимы, включив каждый слой на панели Layers. 

Включение всех слоев

Ваше окно должно выглядеть примерно так: 

Точка входа этого урока.

Анимация слоя

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

Активируйте щелчком слой с облаками на панели Layers. Затем установите маркер кадров на кадре 72. Это делается на панели временной шкалы. Для того, чтобы это сделать вам необходимо переместить (при необходимости) маркер кадров до отметки 72 в верхней части временной шкалы. Можно также просто щелкнуть на цифре 72 и маркер сам перескочит на эту отметку: 

Установка временного маркера на позиции 72 .

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

Перемещение сло

Выберите инструмент Translate Layer (Переместить слой) из панели инструментов и переместите слой с облакам немного вправо: 


Перемещение слоя с облаками

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

Новый ключевой кадр.

А сейчас просмотрите анимацию: нажмите кнопку Play на панели временной шкалы. Когда анимация достигает последнего кадра (в нашем случае - это 72), воспроизведение начинается снова. Когда надоест, нажмите кнопку Stop. 

Панель управления проигрыванием анмации

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

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

Управление костями

Активируйте слой Skeleton, щелкнув по нем на панели слоев. Установите временной маркер на значение 12, щелкнув по этому номеру на панели Слоев. Возможно вам придется прокрутить скроллинг временной шкалы немного вниз, прежде чем вы увдите номер 12. А сейчас выберите инструмент уравления костями (Manipulate Bones) . Перетащите кости Фреэнка так, чтобы они заняли позицию, подобной на рисунке.: 

Фрэнк двигает ногами

Заметьте, что инструмент управления костями (Manipulate Bones) работает на 12 кадре иначе, чем на нулевом, как это было в предыдущем уроке. На нулевом кадре этот инструмент спользовался для проверки системы костей, после чего все действия можно было отменить. А при анимации (на любом кадре, отличном от 0) положение костей отменить нельзя. 

Перемещение кости

Сейчас выберите инструмент перемещения костей (Translate Bone) и опустите позвоночник Фрэнка немного вниз 


Опускаем туловище Фрэнка

Потом установите временной маркер на 24-ом кадре и выберите команду меню Bone->Reset All Bones (Кость->Сброс параметров костей). Нажмите на кнопку Play на панели временной шкалы, чтобы просмотреть вашу анимацию, по окончани нажмите Stop.

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

Щелкните дважды по слою Skeleton на панели Layers. В появившемся диалоговом окне щелкните по закладке "Cycling" (Циклическое воспроизведение) и введите параметр "24" в качестве продолжительности цикла для каналов костей, так как показано внизу. 

 

Выделите ключевые кадры кости на 24-м кадре

Затем щелкните по правой кнопкой по одному из этих ключей. Из появившегося всплываеющего меню выберите пункт "Cycle..." (цикл). Этим действием вы указали Moho, что эти кадры должны проигрываться в непрерывном цикле. Появится диалог, в котором необходимо будет ввести номер кадра, к которому нужно вернуться по окончании проигрывания анимации - введите нижеуказанные данные, которые говорят Moho, что на этом ключевом кадре анимация должна возвращаться на нулевой кадр.

Настройки цикла

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

Схема цикличного проигрывания

Анимация узлов

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

Перемещение узлов

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

Переместите отдельные узлы облаков, чтобы немного изменить их форму. Это приведет к постепенному изменению формы облаков от начала анимации и до 72 кадра. 

Анимаця узлов.

Используйте для просмотра результата кнопки Play и Stop..

Импортирование анимации

Помните как мы импортировали слой с Фрэнком в наш проект в предыдущем уроке? Так вот, импортируемые слои тоже могут содержать анимацию. Выберите команду File->Insert Object... (Файл -> Вставить объект). В диалоговом окне выберите файл "TutorialExtras" (Дополнения к урокам) з папки уроков в корневом каталоге программы. В следующем диалоговом окне выберите слой Beach Ball (Пляжный мячик) и щелкните OK.

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

Перемещение слоя

Масштабирование слоя

Используя инструмент перемещения слоя (Translate Layer), переместите мячик в более подходящее место. Вы также можете использовать инструмент масштабрования слоя (Scale Layer), чтобы изменить размер мячика. (Потащите за угловой модификатор мячика для изменения одновременно его высоты и ширины). Нажмите кнопку Play для просмотра получившейся анимации.  

Сейчас вы имеете довольно хорошее представление как в Moho рисовать, работать с заливкой, устанавливать кости, а также анимировать созданные объекты. Не бойтесь прямо сейчась приступить к работе с Moho самостоятельно. Хотя, вы также можете углубить ваши знания, прочитав раздел "Работа с Moho" и узнать больше об инструментах программы.