Уроки Adobe Animate

Хорошие_идеи

Уроки по adobe animate описывающие детальное создание анимации (содержащие исходные файлы) для облегчённого усвоения материала, размещённые на видео хостинге YouTube.

Для наглядности, используется материал нарисованный на графическом планшете XP-Pen Star G640, который можно приобрести в фирменном магазине, расположенном на площадке AliExpress.

Планшет для рисование

Научившись делать анимацию в adobe animate, вы сможете отлично заработать, используя компьютер дома (удалённо).

Урок №1 (анимация движения)


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

Adobe Animator урок №1 (Анимация движения)

Закрепление материала урока:

  • Классическая анимация движения применима к символам, которые создаются путём нажатия клавиши F8 на выделенном изображении;
  • Хранятся символы в библиотеке и могут быть использованы многократно;
  • Для создания анимации требуется выбрать нужное количество кадров на слое, затем кликнуть правой кнопкой мышки по объекту и в контекстном меня, выбрать пункт “классическая анимация движения”;
  • Анимация в adobe animate формируется автоматически между ключевыми кадрами, расположение которых задаётся пользователем в процессе творчества;
  • Создавать анимацию каждого объекта в адобе анимате рекомендуются в индивидуальном слое, для исключения путаницы и ошибки.

Урок №2 (анимация деформацией)


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

Второй видеоурок Adobe Animate

Закрепление материала урока:

  • Для создания анимации данного типа используется инструмент “деформация ресурса” который расположен на боковой панели в нижней части экрана;
  • Деформация ресурса применяется напрямую к нарисованному рисунку и не может воздействовать на символ;
  • Изменения объекта происходят относительно установленных точек, чем их больше, тем плавней анимация;
  • Проекция кадров работает на слое в классической анимации движения.

Урок №3 (направляющая классической анимации)


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

Третий видеоурок Adobe Animate

Закрепление материала урока:

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

Урок №4 (динамическая анимация)


В четвёртом уроке Adobe Animate показан метод воспроизведения динамической анимации, с помощью инструмента “замедление” в свойствах проекта. Позволяет воспроизводить ускорение и замедление мультипликации в выбранном диапазоне..

Четвёртый видеоурок Adobe Animate

Закрепление материала урока:

  • Динамика анимации в программе Adobe Animate реализуется инструментом “замедление”, находящимся в свойствах слоя;
  • Скорость анимации можно как уменьшать так и ускорять в отдельных участках фильма;
  • Управляется интенсивность движения, воздействием на график, отношения времени к производимым кадрам.

Урок №5 (анимация символа)


В пятом видео-уроке по Adobe Animate вы узнаете, как создать анимированный символ.

Анимация символа Adobe Animate

Закрепление материала урока:

  • Для создания анимированного символа используйте встроенный адобе анимейт графический редактор либо загрузите картинку с диска или внешнего устройства;
  • Анимация символа будет видна в режиме просмотра, после нажатия сочетаний клавиш Ctrl+Enter;
  • Анимированный символ можно подвергать свободному преобразованию (масштабировать, крутить и наклонять).

Урок №6 (добавление звука в анимацию)


Шестой видео урок анимации в Adobe Animate научит добавлять звук в мультипликацию. и даст несколько советов по внедрению аудио файлов в проект.

Как добавить звук в анимацию Adobe Animate

Закрепление материала урока:

  • Для добавления звука в анимацию перетащите .mp3 файл из библиотеки на экран слоя. Предварительно загрузив его в неё с жесткого диска или интернета.
  • Чтоб избежать ошибок при создании анимации, звук нужно размещать на отдельной (<выделенной) дорожке:
  • Локальный звук отдельных объектов (например стук мячика, капанье воды и т.д.) рекомендуется размещать в анимации этого мячика, крана и далее. Так вам не придётся создавать кучу слоёв со звуком и постоянно их редактировать;
  • Звук в символ добавляется таким же способом, как и на основной экран (главный монтажный кадр), как и анимация символа проигрываться будет только в симуляторе.

Урок №7 (прозрачность)


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

Урок Adobe Animate прозрачность

Закрепление материала урока:

  • Изменение прозрачности слоя в адобе анимате происходит путём изменения альфа-канала, расположенного во вкладке “цветовой эффект”;
  • Видимость слоя регулируется ползунком от 0% до 100%;
  • Прозрачность слоя можно анимировать, задав разное значение альфа-канала в ключевых кадрах.

Урок №8 (наборы настроек движения)


В восьмом уроке по созданию анимации в Adobe Animate я расскажу о “наборах движения” с помощью которых можно накладывать уже готовую или созданную самостоятельно, анимацию на объект.

Наборы движения в Adobe Animate

Закрепляем материал урока:

  • Наборы настроек движения применяются к символам;
  • Adobe Animate предоставляет возможность создать пользовательские настройки движения либо применять готовые алгоритмы из базы программы;
  • Для создания пользовательских настроек движения нажмите правую кнопку мыши и в контекстном меню выберете “создать анимацию движения”. (слой должен стать темно желтым). Затем с помощью ключевых кадров создайте её. Зайдите в пользовательские настройки движения и нажмите “сохранить заданные настройки выделенной области”. Пропишите имя и кликните — “Ok”. Теперь их можно применять ко всем элементам. Данная технология будет полезна для дублирования движений на разных персонажах, во время таких сцен как танец, испуг, падение и многое другое.

Урок №9 (как зациклить анимацию)


В девятом уроке по Adobe Animate я научу вас зацикливать отдельные фрагменты анимации, с помощью скрипта gotoAndPlay (что переводится как перейти и играть).

Урок Adobe Animate как зациклить анимацию

Закрепляем материал урока:

  • Скрипт (gotoAndPlay) прописывается в ключевом кадре анимированного слоя, в нём указывается номер другого кадра, на который нужно сделать переход;
  • Для корректной работы скрипта (gotoAndPlay), анимацию слоя следует преобразовать в покадровую;
  • Для записи команды перехода на цыкал, нужно нажать клавишу F9 тем самым открыв окно действий и в нём прописать строчку (gotoAndPlay), а в скобках указать кадр, на который нужно сделать переход. Закрываем окно и жмём сочетание клавиш Alt+Enter, теперь анимация зациклена и будет непрерывно играть.
  • Чтоб ограничить длительность анимации, например пятью секундами, откройте -“Файл/Экспорт/Экспорт видео”, установите галочку напротив “Остановить экспорт по истечению” и укажите время в секундах, установив значение — 5.

Скачать урок urok_9.fla

Урок №10 (анимация формы)


В десятом уроке по Adobe Animate, поговорим про анимацию формы, с помощью которой создадим маленькую сцену за короткое время.

Adobe Animate урок №10 Анимацию формы

Закрепляем материал урока:

  • Анимация формы не работает с символами и растровыми изображениями;
  • Анимация формы создаётся путём непосредственного изменения картинки в ключевых кадрах, например инструментом “выделение”, между которыми затем рассчитывается анимация;
  • Многокомпонентные объекты, состоящие из большого числа элементов, например осьминог, человек и т.д. нужно рисовать на эквивалентном количестве слоёв, так чтоб каждый элемент изменялся отдельно, во избежание каши. После того как вы создадите слои и расположите в них элементы, вы сможете работать с ними, не переключаясь между друг другом, прям на холсте монтажного кадра. При внесении изменений в рисунок программа будет сама прописывать их в нужном ключевом кадре на соответствующем слое.

Скачать урок urok_10.fla

Урок №11 (кости)


В одиннадцатом уроке Adobe Animate рассмотрим работу обратной кинематики. Обратная кинематика – это метод анимации объектов на основе костей. Анимация с помощью костей позволяет создавать взаимозависимые движения, выглядящие более естественными.

Adobe Animate урок Кости

Закрепляем тему урока:

  • Инструмент “кости” связывает элементы анимации в единый каркас по средствам родитель – потомок;
  • Соединение костей происходит путём перетаскивания контактных линий зажатой кнопкой мышки, от основного объекта;
  • Движение, поворот и наклон костей можно ограничить в заданных пределах. Делается это в окне свойств инструмента “выделение”, применяя к соответствующей точке и отключая сочленение поворота. Там же расположена регулировка преобразования по осям X и Y.

Скачать урок urok_11.fla

Урок №12 (вопросы и ответы)


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

Ответы на вопросы по adobe animate

Закрепление материала урока:

  • Для использования инструмента “заливка” нужно рисовать в режиме рисования объекта (выкл.);
  • Заливать область можно сплошным цветом, градиентом и растровым изображением;
  • Настраивать градиент можно инструментом “Преобразование градиента”;
  • Свободное преобразование позволяет изменять форму рисунка, создавая из простых фигур, сложные формы;
  • Инструментом чернильница можно менять цвет и форму линий;
  • Горячей клавишей можно вызвать отсутствующий на панели инструмент.
  • Для создания анимированного (на основе классической анимации движения) символа нужно преобразовать рисунок внутри символа в ещё один символ;
  • Повысить производительность adobe animate, можно преобразовав часть слоёв в покадровую анимацию.

Скачать урок urok_12.fla

Горячие клавиши Adobe Animate


  • Выделение (V)
  • Спец выделение (A)
  • Свободное преобразование (Q)
  • Преобразование градиента (F)
  • Поворот 3D-объекта (Shift+W)
  • Перемещение 3D-объекта (G)
  • Лассо, многоугольник, волшебная палочка (L)
  • Перо (P)
  • Добавить узловую точку (=)
  • Удалить узловую точку (-)
  • Текст (T)
  • Линия (N)
  • Прямоугольник, прямоугольный приметив (R)
  • Овал, овальный приметив (O)
  • Карандаш (Shift+Y)
  • Малярная кисть (Y)
  • Кисть (B)
  • Кость, связь (М)
  • Заливка (K)
  • Чернильница (S)
  • Пипетка (I)
  • Ластик (E)
  • Ширина (U)
  • Деформация ресурса (W)
  • Камера (C)
  • Рука (H)
  • Масштаб (Z)

Урок №13 (работа с камерой)


В тринадцатом уроке по созданию анимации с помощью программы Adobe Animate вы познакомитесь с работой камеры, научитесь масштабировать фрагменты мультика, делать проекции и панорамы.

Adobe Animate урок работа с камерой

Закрепляем материал урока:

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

Скачать урок urok_13.fla

Урок №14 (Маскирующий слой/маска)


Четырнадцатый видео-урок научит вас работать в Adobe Animate с маскирующим слоем (маской). С помощью которой создаются разнообразные спецэффекты. Например, анимированный показ участка летней панорамы на зимнем полотне.

Анимация маскирующего слоя

Закрепляем материал урока:

  • Незаполненное пространство маскирующего слоя скрывает нижележащие слои делая в них прокол, тем самым делая видимым всё что под ними;
  • Нарисованный элемент на маске отображает в своей форме содержимое нижележащего слоя;
  • Символы на маскировочном слое не отображаются, а являются окнами и могут быть анимированы;
  • Чтоб понять принцип работы маскирующего слоя в адобе анимайт представите плащ невидимку который скрывает то на что он наброшен, а дырки в нем делают видимым участки скрывающего объекта. Тот же принцип работы и у слоя-маски.

Урок №15 (Лучи света)


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

Урок анимации по созданию лучей света

Закрепление материала урока:

  • Освещение участка анимации производится путём сокрытия затемняющего элемента. Например, с помощью маски (это может быть как полноценный слой, так и отдельный символ);
  • Интенсивность освещения или солнечных лучей можно регулировать альфа-каналом который находится в свойства/цветовой эффект/стиль.

Скачать урок urok_15.fla 12.5 MB (модифицированный)

Урок №16 Синхронизация губ (Auto lip sync animation)


Функция автоматической синхронизации губ в Adobe Animate (Auto lip sync) позволяет синхронизировать анимацию губ персонажа с установленным звуковым файлом.

Урок по автоматической синхронизации губ в Adobe Animate (Auto lip sync)

Закрепление урока:

  • Синхронизация анимации губ с голосом создаётся в свойствах символа, состоящего из покадровой анимации;
  • Максимальное число вариаций — 12;
  • Тип символа должен быть — графика;

Урок №17 (Как сделать тень)


Чтоб сделать тень в Adobe Animate нужно выделить слой с нарисованным символом, открыть вкладку “свойства” и в разделе “фильтры”, кликнуть на иконку с изображением плюсика, а во всплывшем контекстном меню выбрать пункт — тень.

Подробную инструкцию, как сделать тень в Adobe Animate смотрите в этом видео-уроке:

Тень в Adobe Animate

Закрепление материала урока:

  • Тень в адобеа анимате можно добавить через интерфейс свойств слоя или кадра, выбрав соответствующий пункт во вкладке “фильтры”;
  • Тень в адобе анимейт имеет следующие настройки – размытие, интенсивность, качество, угол, рассеивание и цвет;
  • Для работы с тенью в Adobe Animate лучше использовать дублирующий слой. Это позволит сделать анимацию тени более реалистичной.
  • Для создания идеально-ровного угла падения тени, рекомендуется использовать инструмент “выравнивание”, выставляя угол наклона (в градусах) вручную.

Урок №18 (Как сделать анимацию воды)


Чтоб сделать анимацию воды в Adobe Animate вам понадобится символы волн, ряби и отражения. Которые нужно будет отредактировать с помощью фильтра «размытие».

Подробно, как сделать анимацию воды смотрите видео-уроке:

Как сделать анимацию воды

Закрепление материала урока:

  • Анимацию волн для воды рисуется в отдельном символе с помощью расползающегося эллипса затем инструментом «дублирование» расчленяется на множество частей;
  • В качестве отражения в воде используется копия перевернутого слоя заднего плана, с заданным процентом прозрачности в альфа-канале;
  • Для создания ряби в анимированной воде можно использовать рисунок с горизонтальными линиями, прорисовываемый сквозь маску с аналогичной формой.

Урок №19 (Наложение анимации на видео)


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

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

Наложение анимации на видео

Закрепление материала урока:

  • Рекомендуемый формат для экспорта видео в Adobe Animate — это MP4;
  • Экспорт видео в Adobe Animate возможен только по стандарту H.264! В противном случае возникнет ошибка, сообщающая о том что файл не поддерживается Adobe Flash Player;
  • Накладывать анимацию на видео можно ротоскопированием (перекладкой или покадровой прорисовкой), при помощи деформации или обратной кинематикой;

Урок №20 (Анимация без рисования, глубина слоя)


Как создать мультфильм человеку не умеющему рисовать? Ответ на этот вопрос вы найдете в данном уроке.

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

Анимация без рисования

Закрепление материала урока:

  • Бесплатные изображения, графику и ролики можно скачать на стоке по ссылке — https://pixabay.com/ru;
  • Загруженные картинки можно делить на фрагменты для создания анимированных сцен;
  • Опция глубины в Adobe Animate вызывается кликом по соответствующей иконке в верхнем/правом углу, окна со слоями;
  • Изменяя параметр глубины можно достичь эффекта объёмности и визуализируя сцену с разных сторон.

Скачать файл урока: urok_20.fla (адаптированный, исключительно механика)

Урок №21 (Родительское представление в слоях)


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

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

Родительское представление в слоях

Закрепление материала урока:

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

Скачать файл урока: urok_21.fla

Урок №22 (Как сделать гифку)


Изучение процесса экспорта созданного (Adobe Animate) ролика, в качественную (оптимизированную) gif-картинку. В уроке показано как сделать так, чтоб анимация символа воспроизводилась в гифке, а количество используемых цветов было минимальным.

Как сделать гифку в Adobe Animate

Закрепление материала урока:

  • Чтоб внутренняя анимация символа работала в gif, её тип нужно установить в положение — «графика»;
  • В гифках используется не более 256 цветов, поэтому мягкие переходы рисовать нежелательно;
  • Чем меньше оттенков в гиф-картинках, тем меньше они занимают места и быстрее работают;

Скачать файл урока: urok_22.fla

Всего хорошего, удачи…

Хорошие_идеи