Adobe animate как сделать анимацию

Руководство по движению

Документация для руководства по анимации движения во Flash Professional. Улучшайте создаваемую анимацию путем определения траектории движения анимируемых объектов.

Общие сведения

Направляющая анимации движения в Adobe Animate (ранее Adobe Flash Professional CC) облегчает создание анимации, указывая траекторию движения анимируемых объектов. Эта функция особенно удобна при анимации объектов, передвигающихся не по прямой линии. В процессе создания такой анимации необходимы два слоя:

слой, содержащий объект, перемещающийся в ходе анимации;
слой с заданной траекторией перемещения объекта в ходе анимации.

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

Подробная информация о направляющих движения приведена в разделе «Работа с классической анимацией движения»

Направляющая анимации движения с переменной шириной штриха

Есть возможность задавать анимацию объекта на основе траектории с переменной шириной штриха.

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

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

Задайте ширину линии одним из следующих способов.

Выберите инструмент «Ширина» (U) в наборе инструментов, щелкните в любой точке линии и перетащите маркеры для изменения ширины линии.

Выберите линию с помощью инструмента «Выделение» (V) из набора инструментов, затем в инспекторе свойств выберите нужный профиль ширины в поле «Ширина».

Подробная информация о функции переменной ширины приведена в разделе Обводки с переменной шириной.

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

Посмотрите пример анимации с использованием направляющей движения с переменной шириной штриха.

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

Направляющая движения с различным цветом штриха

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

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

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

Далее, выбрав инструмент «Выделение» (V) из набора инструментов, щелкните второй сегмент направляющей линии и выберите для него другой цвет. Повторите эти действия и для третьего сегмента траектории.

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

Посмотрите пример анимации с использованием направляющей движения с переменой цвета.

Редактирование анимации движения с помощью Редактора движения

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

Редактор движения

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

Зачем нужен редактор движения?

Редактор движения призван упростить создание анимации движения. Таким образом, редактор движения обеспечивает детализированное управление анимацией движения и ее свойства. Следующие преимущества можно получить только с помощью редактора движения:

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

Вызов панели «Редактор движения»

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

Для открытия редактора движения выполните указанные ниже действия.

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

Кривые свойств

Редактор движения представляет свойства анимации движения с использованием двухмерных графиков, которые называются кривыми свойств. Эти графики строятся по сетке в редакторе движения. Для каждого свойства строится отдельная кривая, причем время представлено горизонтальной осью (слева направо), а изменение значения свойства — вертикальной осью.

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

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

Узловые точки

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

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

Контрольные точки

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

Редактирование кривых свойств

Чтобы изменить свойства анимации движения, выполните следующие действия.

В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или просто дважды щелкните выбранный диапазон анимации движения).
Прокрутите вниз и выберите свойство, которое требуется изменить. Чтобы инвертировать выделение, щелкните его правой кнопкой мыши и выберите пункт «Инвертировать выделение».
Когда в области просмотра находится кривая выбранного свойства, можно выполнить одно из следующих действий.
1. Добавьте узловую точку, нажав кнопку и щелкнув на кривой свойства кадр, в котором нужно добавить узловую точку. Или дважды щелкните кривую, чтобы добавить узловую точку.
2. Выберите и переместите существующую узловую точку в нужный кадр на сетке (в любом направлении). Предел перемещения по вертикали определяется диапазоном значений свойства.
3. Удалите узловую точку, выделив ее и нажав клавиши Ctrl + Click (Cmd + щелчок на компьютере MAC).

Редактирование кривых свойств с помощью контрольных точек

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

В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или дважды щелкните выбранный диапазон анимации движения).
Прокрутите вниз и выберите свойство, которое требуется изменить. Чтобы инвертировать выделение, щелкните его правой кнопкой мыши и выберите пункт «Инвертировать выделение».
Когда в области просмотра находится кривая выбранного свойства, можно выполнить одно из следующих действий.
1. Добавьте узловую точку, нажав кнопку и щелкнув в сетке кадр, в котором нужно добавить узловую точку.Или дважды щелкните кривую, чтобы добавить узловую точку.
Копирование кривых свойств

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

Чтобы копировать кривую свойства, выполните следующие действия.
1. В Animate выберите диапазон анимации движения, щелкните его правой кнопкой мыши > выберите Уточнить анимацию , чтобы вызвать редактор движения (или дважды щелкните выбранный диапазон анимации движения).
2. Выберите свойство, кривую которого требуется копировать, затем щелкните его правой кнопкой > выберите Копировать ИЛИ нажмите клавиши Ctrl + C (Cmd + C на компьютере MAC).
3. Чтобы поместить кривую в нужный диапазон с абсолютными значениями, выберите свойство, в которое требуется вставить скопированную кривую, затем щелкните его правой кнопкой мыши > выберите Вставить или нажмите клавиши Ctrl + V (Cmd + V на компьютере Mac).
4. Чтобы поместить кривую в диапазон целевой кривой, выберите свойство, в которое требуется вставить скопированную кривую, затем щелкните его правой кнопкой мыши > выберите «Вставить с учетом текущего диапазона» .
Обращение кривой свойства

Чтобы обратить кривую свойства, выполните следующие действия.
1. В редакторе движения выберите свойство.
2. Щелкните его правой кнопкой мыши > выберите В обратном направлении , чтобы обратить кривую свойств.
Применение набора настроек и пользовательского замедления

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

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

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

Пользовательские настройки замедления

В редакторе движения можно создавать собственное замедление с помощью кривой «Пользовательское замедление». Затем такое замедление можно применить к любому свойству в выбранной анимации движения.

График пользовательского замедления представляет величину движения на протяжении времени. Кадры представлены на горизонтальной оси, а процент изменения анимации движения представлен на вертикальной оси. Первое значение анимации находится на уровне 0 %, а для последнего кадра можно задать значение от 0 до 100 %. Скорость изменения экземпляра анимации движения выражается наклоном кривой. Если на графике создается горизонтальная линия (без наклона), то скорость равна нулю. Если на графике создается вертикальная линия, то скорость изменения мгновенна.

Применение кривой замедления к кривой свойства

Чтобы добавить замедление в свойство анимации, выполните следующие действия.
1. В редакторе движения выберите свойство, к которому требуется применить замедление, и нажмите кнопку Добавить замедление , чтобы вызвать панель «Замедление».
2. На панели «Замедление» можно выполнить следующие действия:
  1. Примените стандартное замедление, выбрав набор настроек на левой панели. Укажите интенсивность замедления, задав значение в поле «Замедление».
  2. Создайте собственное замедление, выбрав вариант «Пользовательское замедление» на левой панели и изменив кривую замедления. Дополнительные сведения см. в разделе Создание и применение пользовательских кривых замедления.
  Создание и применение пользовательских кривых замедления
  
  Чтобы создать и применить пользовательское замедление к свойству анимации движения, выполните следующие действия.
  1. В редакторе движения выберите свойство, к которому требуется применить пользовательское замедление, и нажмите кнопку «Добавить замедление», чтобы вызвать панель «Замедление».
  2. На панели «Замедление» можно изменить пользовательскую кривую замедления по умолчанию, выполнив следующие действия.
    1. Щелкните кривую, удерживая клавишу Alt, чтобы добавить на нее узловые точки. Затем можно перемещать эти точки в любое место на сетке.
    2. Активируйте контрольные точки (щелкните узловую точку, удерживая клавишу Alt), чтобы сгладить сегменты по обеим сторонам от узловой точки.
    Копирование кривых замедления
    
    Чтобы копировать кривую замедления, выполните следующие действия.
    1. На панели «Замедление» выберите кривую замедления, которую требуется копировать, и нажмите клавиши Ctrl + C (Cmd + C на компьютере MAC).
    2. Выберите свойство, в которое требуется вставить скопированную кривую замедления, затем нажмите клавиши Ctrl + V (Cmd + V на компьютере MAC).
    Применение замедления к нескольким свойствам
    
    Теперь можно применять предварительно установленное или пользовательское замедление к группам свойств. Редактор движения упорядочивает свойства иерархически по группам свойств и подсвойствам. Можно применить замедление на любом уровне, то есть к отдельным свойствам или группам свойств в рамках этой иерархии.
    
    Обратите внимание, что после применения замедления к группе свойств можно также редактировать подсвойства по отдельности. Это также означает, что можно применить к подсвойству замедление, отличное от примененного к группе.
    
    Чтобы применить замедление к нескольким свойствам, выполните следующие действия.
    1. В редакторе движений выделите группу свойств и нажмите кнопку «Добавить замедление» для отображения панели «Замедление».
    2. На панели «Замедление» выберите набор настроек замедления или создайте пользовательское замедление. Щелкните любое место за пределами панели «Замедление», чтобы применить выбранное замедление к группе свойств.
    Результирующая кривая
    
    Когда к кривой свойства применяется кривая замедления, отображается визуальное наложение, которое называется результирующей кривой. Результирующая кривая является точным представлением эффекта замедления, примененного к кривой свойства. Она позволяет судить о конечном виде анимации движения объекта. Результирующая кривая помогает понять, как будет выглядеть эффект в рабочей области при тестировании анимации.
    
    Управление отображением редактора движения
    
    В редакторе движений можно управлять тем, какие кривые свойств отображаются для редактирования, а также размером экрана, выделяемым для каждого такой кривой. Кривые свойств, отображающиеся с большим размером, проще редактировать.
    - В новом редакторе движения отображаются только те свойства, которые применены к анимации движения.
    - Можно использовать переключатель «Подгонка к виду» (), чтобы подогнать область редактора движения по ширине временной шкалы.
    - Можно настроить размер области редактора движения и выбрать меньше () или больше () отображаемых кадров с помощью элементов управления для изменения масштаба временной шкалы. Также можно использовать ползунок для настройки вида редактора движения.
    - В редакторе движения также предусмотрен переключатель для изменения масштаба по вертикали. Функцию изменения масштаба по вертикали также можно использовать для отображения подходящего диапазона значений свойств в редакторе движения. Увеличение масштаба также позволяет вносить более точные и целенаправленные изменения в кривую свойства.
    - По умолчанию свойства отображаются в развернутом виде на левой панели редактора движения. Однако детализированный список можно свернуть, щелкнув имя свойства.
    Комбинации клавиш
    
    Двойной щелчок кривой свойства для добавления узловой точки.
    
    Alt+перетаскивание узловой точки для активации контрольных точек.
    
    Alt+перетаскивание для изменения выбранной контрольной точки (одностороннее редактирование).
    
    Alt-щелчок узловой точки для деактивации контрольных точек (угловых точек).
    
    Shift+перетаскивание для линейного перемещения узловой точки.
    
    Command/Control+щелчок для удаления узловой точки.
    
    Клавиши со стрелками вверх и вниз для перемещения выбранной узловой точки по вертикали.
    
    Command/Control+C/V для копирования и вставки выбранной кривой.
    
    Command/Control+R для обращения выбранной кривой.
    
    Command/Control+прокручивание для увеличения или уменьшения масштаба.
    
    Adobe Animate: как сделать анимацию
    
    Adobe Animate — это профессиональный инструмент для создания анимации и интерактивных приложений. С помощью Animate вы можете создавать анимационные персонажи, рекламные баннеры, интерактивные веб-сайты и многое другое. В этой статье мы расскажем о базовых принципах создания анимации в Adobe Animate.
    
    Шаг 1: Создание нового проекта
    
    Откройте Adobe Animate и создайте новый проект. Выберите тип проекта, который вам нужен: анимация, интерактивный проект или игра. Выберите размер холста, фреймрейт и другие параметры, затем создайте новый проект.
    
    Шаг 2: Создание персонажа
    
    Создайте персонажа, который будет анимироваться. Вы можете нарисовать персонажа в Adobe Animate, импортировать изображение или использовать готовый шаблон персонажа. Добавьте элементы анимации, такие как руки, ноги, глаза и рот, чтобы персонаж мог двигаться и говорить.
    
    Шаг 3: Создание ключевых кадров
    
    Создайте ключевые кадры для каждой анимации. Ключевые кадры — это кадры, в которых происходят изменения в анимации. Создайте первый ключевой кадр и установите позицию персонажа и другие параметры. Затем создайте следующий ключевой кадр и измените позицию персонажа. Продолжайте создавать ключевые кадры для каждого изменения в анимации.
    
    Шаг 4: Создание анимации
    
    Создайте анимацию, используя ключевые кадры. Вы можете использовать готовые эффекты анимации или создать свои. Используйте функцию таймлайна, чтобы изменять позицию персонажа, его размер, цвет и другие параметры в каждом ключевом кадре.
    
    Шаг 5: Экспорт анимации
    
    Экспортируйте анимацию в нужный формат, чтобы использовать ее в своих проектах. Adobe Animate поддерживает экспорт в различные форматы, такие как GIF, MP4, AVI и другие.
    
    Вот и все! Теперь вы знаете, как создать анимацию в Adobe Animate. С помощью этой программы вы можете создавать высококачественные анимации для различных целей, будь то реклама, обучение или развлечение.
    
    Работа с классической анимацией движения в Animate
    
    Классическая анимация — это старый способ создания анимации в Animate. Эти анимации похожи на новые анимации движения, однако иногда их сложнее создавать и они менее гибкие. Однако классическая анимация предоставляет некоторые возможности управления, недоступные для анимации движения. Большинство пользователей предпочтет работу с новой анимацией движения, но некоторые пользователи по-прежнему будут использовать классическую анимацию. Дополнительные сведения о различиях см. в разделе «Различия между анимацией движения и классической анимацией».
    
    Приступая к работе:
    
    Перед началом работы с классической анимацией движения следует учитывать следующее.
    - Классическая анимация — это старый способ создания анимации движения в Animate. Новый более простой способ заключается в использовании анимации движения. См. «Анимация движения».
    - С помощью классической анимации нельзя анимировать 3D-свойства.
    Примеры классической анимации см. на веб-странице «Примеры Animate» по адресу www.adobe.com/go/learn_fl_samples_ru. Доступны следующие примеры.
    - Анимированное отбрасывание тени. Чтобы получить доступ к примеру, загрузите и распакуйте файл Samples.zip и перейдите в папку Graphics\AnimatedDropShadow.
    - Анимация и градиенты. Чтобы получить доступ к примеру, загрузите и распакуйте файл Samples.zip и перейдите в папку Graphics\AnimationAndGradients.
    Как и для большинства операций в Animate, для анимации не требуется ActionScript. Однако, если необходимо, можно создать анимации с помощью ActionScript.
    
    Создание и редактирование ключевых кадров для классической анимации движения
    
    Изменения в классической анимации описаны в ключевом кадре. В анимации движения ключевые кадры задаются в основных моментах анимации, а Animate создает содержимое кадров между ключевыми кадрами. Промежуточные кадры анимации движения выделяются светло-синим цветом со стрелкой, нарисованной между кадрами. Поскольку в документах Animate фигуры сохраняются в каждом ключевом кадре, ключевые кадры следует создавать только в тех точках анимации, в которых что-то изменяется.
    
    Ключевые кадры обозначаются на временной шкале следующим образом: сплошной круг представляет собой ключевой кадр с содержимым, пустой круг перед кадром представляет собой пустой ключевой кадр. Последующие кадры, добавленные в один слой, имеют то же содержимое, что и ключевой кадр.
    
    В классической анимации можно редактировать только ключевые кадры. Tween-кадры можно просмотреть, но их невозможно редактировать напрямую. Чтобы отредактировать tween-кадры, измените один из определяющих ключевых кадров или добавьте новый ключевой кадр между начальным и завершающим кадром. Чтобы добавить элементы в текущий ключевой кадр, перетащите элементы из панели «Библиотека» в рабочую область.
    
    Отображение и редактирование одновременно более одного кадра см. в разделе «Использование режима калькирования».
    
    Эта функция предназначена для создания ключевых кадров для старой классической анимации. Дополнительные сведения по ключевым кадрам свойств для новой анимации движения см. в разделе «Создание анимации движения».
    Похожие публикации: