Статья включает в себя комплекс видеоуроков по созданию анимации в программе adobe animate, размещённых на хостинге YouTube. Для наглядности, используется материал нарисованный на графическом планшете XP-Pen Star G640, который можно приобрести в фирменном магазине, расположенном на площадке AliExpressпо этой ссылке>>>
Научившись делать анимацию в программе, вы сможете неплохо заработать на компьютере даже проживая в деревне…
Урок №1 (анимация движения)
Первый урок анимации в adobe animate познакомит вас с интерфейсом программы и покажет основы мультипликации на примере создания короткометражного мультфильма при помощи классической анимации движения.
Закрепление материала:
Классическая анимация движения применима к символам, которые создаются путём нажатия клавиши F8 на выделенном изображении;
Хранятся символы в библиотеке и могут быть использованы многократно;
Для создания анимации требуется выбрать желаемое количество кадров на слое, а затем кликнув правой кнопкой мышки по объекту, в контекстном меня выбрать пункт “классическая анимация движения”;
Анимация в adobe animate формируется автоматически между ключевыми кадрами, расположение которых задаётся пользователем в процессе творчества;
Создавать анимацию каждого объекта в адобе анимейт рекомендуются в индивидуальном слое, для исключения путаниц.
Урок №2 (анимация деформацией)
Второй урок adobe animate посвящен анимации, методом деформации формы, позволяющий изменять рисунок непосредственным воздействием на участки вокруг заданных точек.
Закрепление материала:
Для создания анимации данного типа используется инструмент “деформация ресурса” который расположен на боковой панели в нижней части экрана;
Деформация ресурса применяется напрямую к нарисованному рисунку и не может воздействовать на символ;
Изменения объекта происходят относительно установленных точек, чем их больше, тем плавней анимация;
Проекция кадров работает на слое в классической анимации движения.
Урок №3 (направляющая классической анимации)
В третьем уроке по адобе анимейт вы познакомитесь с “направляющей классической анимации” – это надстройка к основному слою, позволяющая задать направление движения объекта, расположенного в основном слое. Благодаря чему вы сможете создавать анимацию анимированного объекта.
Закрепление материала:
Направляющая классической анимации подключается к слою, на котором нужно сделать сложное движение, путем выбора соответствующего пункта в всплывающем меню:
Рисовать направляющею линию можно карандашом или кистью.
Урок №4 (динамическая анимация)
В четвёртом уроке Adobe Animate показан метод воспроизведения динамической анимации, с помощью инструмента “замедление” в свойствах проекта. Позволяющего воспроизводить ускорение и замедление мультипликации.
Закрепление материала:
Динамика анимации в программе Adobe Animate реализуется инструментом “замедление”, находящимся в свойствах слоя;
Управляется интенсивность движения, воздействием на график, отношения времени к производимым кадрам.
Урок №5 (анимация символа)
В пятом видеоуроке по адобе анимейт вы узнаете, как создать анимированный символ. Размещение которого на слое происходит вместе с созданной в нём анимацией.
Урок №6 (добавление звука в анимацию)
В шестом видеоуроке по созданию анимации в адобе анимате я научу вас добавлять звук в ролик и дам несколько полезных советов по внедрению аудио файлов в проект.
Содержание видеоурока по добавлению звука в Adobe Animate
Прежде чем включить звук в анимацию нужно добавить его в библиотеку. Для этого перетащите желаемые mp3 файлы из папки с жесткого диска компьютера в библиотеку программы. Затем создайте новый слой и назовите его “звук”. Рекомендую создавать новый слой для каждого звукового файла, не лепя всё в одну дорожку, например звук ветра, звук леса, звук воды и т.д. После чего задайте нужное количество кадров для слоя, клавишей “f5” и перетащите аудио файл из библиотеки на экран слоя, так чтоб на дорожке ключевых кадров появилась звуковая осциллограмма. Теперь звук будет проигрываться вместе с анимацией. Локальный звук отдельных объектов (например стук мячика) советую размещать в анимации символа этого мячика. Так вам не придётся создавать кучу слоёв со звуком и постоянно их редактировать параллельно с объектом. Звук в символ добавляется таким же способом, как и на основной экран, только, как и анимация символа проигрываться будет только в симуляторе вызываемым клавишей alt+enter.
Урок №7 (прозрачность)
В седьмом уроке по созданию анимации в адобе анимейт я покажу как изменять прозрачность слоя, тем самым управляя видимостью всех объектов расположенных на нём .
Содержание видеоурока по созданию прозрачности в Adobe Animate
Начнём с создания двух слоёв, первый сделаем фоном для красоты и заблокируем его, а во втором нарисуем рисунок, который будет исчезать и появляться по ходу анимации. Преобразуем его в символ и создадим классическую анимацию движения. Затем в нужном ключевом кадре перейдем в свойство слоя, откроем вкладку – “цветовой эффект” и выберем стиль: альфа-канал. Появится ползунок, которым можно изменять прозрачность слоя. Передвиньте его в нужное место и слой станет прозрачным. Кроме видимости слоя здесь можно настроить его тон и фон.
Урок №8 (наборы настроек движения)
В восьмом уроке по созданию анимации в адобе анимейт я расскажу о “наборах движения” с помощью которых можно накладывать уже готовую или созданную самостоятельно, анимацию на объект.
Содержание видеоурока по наборам настроек движения в Adobe Animate
Для примера создадим анимированный символ на подобии пак-мана, в панели инструментов нажмем значок “набор настроек движения”, откроем вкладку “наборы настроек по умолчанию” и выберем “волны”, а затем нажмем кнопку “применить” (обратите внимание что объект, на который применяется анимация? должен быть выделенным). Так мы запишем анимацию волн в слой, на котором расположен символ пак-мана. Жмём сочетание клавиш alt+enter и смотрим что получилось
Поэкспериментируйте с другими предметами накладывая на них движения, а мы перейдем к созданию пользовательских настроек для чего создадим простой фон и персонажа. Пусть это будет символ танцующей девочки.
После чего нажимаем правую кнопку мыши и в контекстном меню выбираем “создать анимацию движения”. (слой должен стать темно желтым). Затем с помощью ключевых кадров её создадим. Зайдём в пользовательские настройки движения и нажмём “сохранить заданные настройки выделенной области”. Прописываем имя и кликаем – “Ok”. Теперь их можно применять ко всем персонажам, например ещё к двум чудикам, танцующим рядом с девчонкой. Данная технология будет полезна для дублирования движений на разных персонажах, во время таких сцен как танец, испуг, падение и многое другое.
Урок №9 (как зациклить анимацию)
В этом уроке я покажу как зацикливать отдельные фрагменты анимации в адебе анимейт, с помощью скрипта gotoAndPlay (что переводится как перейти и играть).
Содержание видеоурока по зацикливанию анимации с помощью скрипта gotoAndPlay в Adobe Animate
Данный скрипт прописывается в ключевом кадре анимированного слоя, указывая номер другого кадра, на который нужно сделать переход.
Для наглядности примера создадим анимированный символ и применим его к слою с анимацией движения. Где герой перемещается в определённом направлении, а затем начинает прыгать на одном месте. И сделаем это с помощью вышеупомянутой команды, зациклив последнюю часть.
Меня давеча попросили не сжимать в видео создание сцен и объектов, чтоб новички или те, кто пропустил предыдущие части урока, могли видеть наглядно процесс рисования, поэтому я их оставлю, а тем, кому это не нужно перейдите на 2:30 этого ролика. Так-как скрипт нужно прописывать в ключевом кадре, преобразуем нашу анимацию движения в покадровую анимацию, выделим последний кадр и нажмём клавишу F9, у нас откроется окно действий, где прописываем строчку gotoAndPlay и в скобках указываем кадр на который нужно сделать переход, в нашем случае это 20. Закрываем окно и жмём сочетание клавиш alt+enter, теперь наша анимация зациклена и будет непрерывно проигрываться с двадцатого кадра.
В этом уроке мы поговорим про анимацию формы с помощью которой создадим небольшую сцену за короткое время.
Содержание видеоурока по анимации формы в Adobe Animate
И так нарисуем волнистую линию и зададим число кадров эквивалентное двум секундам времени, затем кликнем правой кнопкой мыши на слое и выберем “создать анимацию формы” слой окрасится в оранжевый цвет. Теперь создаём ключевые кадры, выбираем инструмент “выделение” и мышкой (зажав левую кнопку) изменяем в них форму рисунка. После чего нажимаем сочетание клавиш Alt + Enter чтобы увидеть свой результат.
После чего создадим новый слой и нарисуем на нём фон чтобы было приятней работать
Затем создаём еще один слой и рисуем в нём солнышко, лучи которого анимируем с помощью анимации формы, как это делали раньше. Обратите внимание что я всегда создаю ключевые кадры в конце слоя, чтоб анимируемый объект приходил в исходное состояние к окончанию ролика, и анимация была мягкой при повторении цикла.
Следующий этап – это создание анимации танцующего человечка. Для удобства сделаем её в символе под названием “чудик”. Это позволит нам использовать данный ресурс много раз в различных вариациях и поможет избежать перегруженности основного окна со слоями.
Следует отметить, что сложные объекты, состоящие из большого числа элементов, например осьминог, человек и т.д. нужно рисовать на эквивалентном количестве слоёв, так чтоб каждый элемент изменялся отдельно, во избежание каши.
Никакой сложности в этом нет, не волнуйтесь. После того как вы создадите слои и расположите в них элементы, вы сможете работать с ними, не переключаясь между слоями, прям на экране. При внесении изменения в рисунок программа будет сама прописывать их в нужном ключевом кадре. Которые нужно, естественно, сделать. Я их обычно прописываю параллельно во всех слоях и не парюсь.
Ну и наконец нарисуем травку, таким же способом через символ, а затем разместим её на экране.
В этом уроке мы рассмотрим работу обратной кинематики. Обратная кинематика – это метод анимации объектов на основе костей. Анимация с помощью костей позволяет создавать взаимозависимые движения более естественными.
Содержание видеоурока по костям в Adobe Animate
Для примера создадим символ, пусть это будет рисунок кости, хотя в вашем случае это может быть всё что угодно, и соберём из него скелет человека. Затем выберем инструмент “кость” и зажав левую кнопку мышки соединим все элементы как показано в видео. Теперь все части скелета будут зависимы друг от друга, вращаясь вокруг установленной точки. Обратите внимание что в некоторых случаях (как например в данном примере “вокруг центральной точки”) такое вращение следует ограничить или полностью запретить? чтоб сохранить форму каркаса. Сделать это можно в окне свойств инструмента “выделение”, применив его к соответствующей точке и отключив сочленение поворота, там же можно отключить его для преобразования по оcям X и Y. Так кости будут двигаться только в нужных местах.
В этом уроке по adobe animate я отвечу на вопросы, задаваемые пользователями канала. Если вы не нашли то-что искали, или вас что-то интересует, пишите в комментариях под этим видео на YouTube, я постараюсь всё объяснить в новом ролике, как только наберется достаточно контента.
