Руководство пользователя Отмена

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

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Работа с несколькими типами файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Работа с классической анимацией движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация формы
    22. Анимация с использованием инструмента «Кость» в Animate
    23. Работа с риггингом персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Рисование и создание объектов в Animate
    9. Изменение линий и фигур
    10. Обводки, заливки и градиенты в Animate CC
    11. Работа с Adobe Premiere Pro и After Effects
    12. Панели «Цвет» в Animate CC
    13. Открытие файлов Flash CS6 в Animate
    14. Работа с классическим текстом в Animate
    15. Размещение иллюстраций в Animate
    16. Импортированные растровые изображения в Animate
    17. Трехмерная графика
    18. Работа с символами в Animate
    19. Рисование линий и фигур в Adobe Animate
    20. Работа с библиотеками в Animate
    21. Экспорт звуков
    22. Выделение объектов в Animate CC
    23. Работа с AI-файлами Illustrator в Animate
    24. Применение режимов наложения
    25. Упорядочивание объектов
    26. Автоматизация задач с помощью меню «Команды»
    27. Многоязычный текст
    28. Использование камеры в Animate
    29. Графические фильтры
    30. Звук и ActionScript
    31. Настройки рисования
    32. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Специальные возможности в среде Animate
    12. Создание и использование сценариев
    13. Обеспечение поддержки специализированных платформ
    14. Общие сведения о поддержке специализированных платформ
    15. Работа с плагинами поддержки специализированных платформ
    16. Отладка сценариев ActionScript 3.0
    17. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Рекомендации: советы по созданию контента для мобильных устройств
    9. Рекомендации: правила работы с видео
    10. Рекомендации: руководство по созданию SWF-приложений
    11. Рекомендации: формирование структуры FLA-файлов
    12. Рекомендации: оптимизация FLA-файлов для Animate
    13. Параметры публикации ActionScript
    14. Задание параметров публикации для Animate
    15. Экспорт файлов-проекторов
    16. Экспорт изображений и анимированных файлов GIF
    17. Шаблоны публикации HTML
    18. Работа с Adobe Premiere Pro и After Effects
    19. Быстрая публикация анимаций
  9. Устранение неполадок
    1. Исправленные неполадки
    2. Известные проблемы

 

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

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

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

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

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

  • Простота доступа и редактирования всех свойств, примененных к анимации движения на одной панели.
  • Добавление разных стандартных настроек замедления или пользовательского замедления. Редактор движения позволяет добавлять различные наборы настроек, добавлять несколько наборов настроек или создавать пользовательское замедление. Добавление замедления в свойство анимации позволяет без усилий смоделировать реалистичное поведение объектов.
  • Результирующая кривая. Можно применять замедления к отдельным свойствам и просматривать эффекты, достигаемые посредством замедлений на отдельных графиках свойств с помощью результирующей кривой. Результирующая кривая является представлением фактической анимации движения.
  • Узловые и контрольные точки. Можно изолировать и редактировать основные секции анимации движения, используя узловые и контрольные точки.
  • Уточнение анимации. Редактор движения — это единственный способ создать некоторые виды анимации, например анимацию движения по криволинейному контуру на основе отдельного свойства путем настройки кривой свойства.
(A) Свойства, примененные к анимации движения (B) Кнопка «Добавить узловую точку» (C) Переключатель «Подгонка к виду» (D) Кнопка «Удалить свойство» (E) «Добавить замедление» (F) Переключатель «Изменить масштаб по вертикали»

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

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

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

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

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

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

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

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

(A) Кривые свойств, наложенные друг на друга. (B) Кривая в фокусе для выбранного в данный момент свойства.

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

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

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

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

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

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

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

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

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

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

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

      ИЛИ

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

Копирование кривых свойств

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

Чтобы копировать кривую свойства, выполните следующие действия.

  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. Создайте собственное замедление, выбрав вариант «Пользовательское замедление» на левой панели и изменив кривую замедления. Дополнительные сведения см. в разделе Создание и применение пользовательских кривых замедления.
  3. Щелкните за пределами панели «Замедление», чтобы закрыть ее. Обратите внимание, что на кнопке «Добавить замедление» указывается имя замедления, примененного к свойству.

Создание и применение пользовательских кривых замедления

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

  1. В редакторе движения выберите свойство, к которому требуется применить пользовательское замедление, и нажмите кнопку «Добавить замедление», чтобы вызвать панель «Замедление».
  2. На панели «Замедление» можно изменить пользовательскую кривую замедления по умолчанию, выполнив следующие действия.
    1. Щелкните кривую, удерживая клавишу Alt, чтобы добавить на нее узловые точки. Затем можно перемещать эти точки в любое место на сетке.
    2. Активируйте контрольные точки (щелкните узловую точку, удерживая клавишу Alt), чтобы сгладить сегменты по обеим сторонам от узловой точки.
  3. Щелкните за пределами панели «Замедление», чтобы закрыть ее. Обратите внимание, что на кнопке «Добавить замедление» указано «пользовательское». Это говорит о том, что к свойству применено пользовательское замедление.

Копирование кривых замедления

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

  1. На панели «Замедление» выберите кривую замедления, которую требуется копировать, и нажмите клавиши Ctrl + C (Cmd + C на компьютере MAC).
  2. Выберите свойство, в которое требуется вставить скопированную кривую замедления, затем нажмите клавиши Ctrl + V (Cmd + V на компьютере MAC).

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

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

Обратите внимание, что после применения замедления к группе свойств можно также редактировать подсвойства по отдельности. Это также означает, что можно применить к подсвойству замедление, отличное от примененного к группе.

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

  1. В редакторе движений выделите группу свойств и нажмите кнопку «Добавить замедление» для отображения панели «Замедление».
  2. На панели «Замедление» выберите набор настроек замедления или создайте пользовательское замедление. Щелкните любое место за пределами панели «Замедление», чтобы применить выбранное замедление к группе свойств.

Результирующая кривая

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

(A) Результирующая кривая для стандартного замедления «колебание-в», примененного к свойству «Расположение X».

Управление отображением редактора движения

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

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

Комбинации клавиш

Двойной щелчок кривой свойства для добавления узловой точки.

Alt+перетаскивание узловой точки для активации контрольных точек.

Alt+перетаскивание для изменения выбранной контрольной точки (одностороннее редактирование).

Alt-щелчок узловой точки для деактивации контрольных точек (угловых точек).

Shift+перетаскивание для линейного перемещения узловой точки.

Command/Control+щелчок для удаления узловой точки.

Клавиши со стрелками вверх и вниз для перемещения выбранной узловой точки по вертикали.

Command/Control+C/V для копирования и вставки выбранной кривой.

Command/Control+R для обращения выбранной кривой.

Command/Control+прокручивание для увеличения или уменьшения масштаба.

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?