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

Анимация формы

  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 затем интерполирует фигуры для промежуточных кадров, создавая анимацию одной фигуры, перетекающей в другую.

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

Также можно анимировать положение и цвет форм в рамках анимации формы.

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

Создание анимации формы

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

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

  3. В кадре 30 нарисуйте в рабочей области круг с помощью инструмента «Овал».

    Теперь у вас есть ключевой кадр с квадратом в кадре 1 и ключевой кадр с кругом в кадре 30.

  4. Выберите на временной шкале один из кадров между двумя ключевыми кадрами в том же слое, в котором содержатся обе формы.

  5. Выберите Вставка > Анимация формы.

    Animate интерполирует форм во всех кадрах между двумя ключевыми.

  6. Для просмотра анимации движения протащите точку воспроизведения через кадры во временной шкале или нажмите Enter.

  7. Чтобы вместе с формой анимировать и движение, переместите форму в кадре 30 в место, отличающееся от места этой формы в кадре 1.

    Просмотрите анимацию, нажав Enter.

  8. Чтобы анимировать цвет формы, измените цвет формы в кадре 1, так чтобы цвета форм в кадрах 1 и 30 отличались.
  9. Если нужно добавить замедление, выберите один из кадров и введите значение в поле Замедление инспектора свойств.

    Чтобы добавить замедление в начале анимации, введите отрицательное значение. Чтобы добавить замедление в конце анимации, введите положительное значение.

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

Наборы настроек замедления — это предварительно настроенные замедления, которые можно применять к объектам в рабочей области.

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

  1. Щелкните слой, содержащий анимацию формы, на временной шкале Animate.

  2. Чтобы открыть свойства анимации, выберите категорию Анимация на панели «Свойство».

    Свойства анимации
    Свойства анимации

  3. Выберите нужный набор настроек замедления из всплывающего диалогового окна «Тип замедления». Дважды щелкните тип набора настроек, чтобы применить его. 

    Если применяется классическое замедление, можно также увеличить или уменьшить интенсивность замедления, переместив ползунок. 

    Типы наборов замедления
    Типы наборов замедления

  4. Чтобы применить пользовательское замедление, щелкните значок «Изменить» рядом с элементом Замедление

    Диалоговое окно Пользовательское замедление выводит диаграмму, в которой дается графическое представление о скорости движения во времени. На горизонтальной оси показаны кадры, а на вертикальной — процент изменений. Первый ключевой кадр представлен как 0 %, а последний ключевой кадр — как 100 %.

    Наклон кривой диаграммы показывает скорость изменений объекта. Если кривая горизонтальна (без наклона), то скорость равна нулю; если кривая вертикальна, то изменение происходит мгновенно.

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

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

    Набор настроек замедления для нескольких диапазонов
    Применение набора настроек замедления для нескольких диапазонов

Управление изменениями формы с помощью хинтов кривых

Для управления более сложными или неожиданными изменениями формы можно использовать хинты кривых. Контрольные точки определяют точки, которые должны соответствовать в начальной и конечной фигурах. Например, при выполнении tween-анимации лица, выражение которого изменяется, контрольные точки можно использовать, чтобы отметить каждый глаз. Тогда во время изменения формы лицо не становится бесформенным и неясным, каждый глаз остается распознаваемым и изменяется отдельно во время перехода.

Хинты кривых в виде букв
Хинты кривых в виде букв

Контрольные точки содержат буквы (от a до z), которые определяют точки, соответствующие начальной и конечной формам. Можно использовать до 26 контрольных точек.

В начальном ключевом кадре контрольные точки желтые, в конечном ключевом кадре они зеленые, а вне кривой они красные.

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

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

  • Убедитесь в логичной расстановке контрольных точек. Например, если в треугольнике используется три хинта кривых, они должны быть расставлены в одинаковом порядке как для исходного треугольника, так и для промежуточного. В первом кадре a,b,c нельзя использовать в качестве порядка, если порядком во втором кадре является a,c,b.

  • Контрольные точки лучше всего размещать против часовой стрелки, начиная с левого верхнего угла фигуры.

Использование контрольных точек

  1. Выберите первый кадр в последовательности анимации движения формы.
  2. Выберите Модификация > Фигура > Добавить хинт кривых. Начальная контрольная точка выглядит как красная окружность с буквой a, расположенной на фигуре.

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

  5. Переместите хинт кривой в положение на конечной фигуре, соответствующее первой помеченной точке.

  6. Воспроизведите анимацию снова, чтобы просмотреть, как контрольные точки изменяют анимацию формы. Чтобы настроить анимацию движения, переместите контрольные точки.
  7. Чтобы добавить дополнительные контрольные точки, повторите этот процесс. Новые точки появляются со следующими буквами (b, c и т.д.).

Просмотр всех контрольных точек

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

Удаление хинта кривой

  1. Перетащите хинт кривой с рабочей области.

Удаление всех хинтов кривых

  1. Выберите Модификация > Фигура > Удалить все хинты кривых.

Добавление анимации фигуры в обводки с переменной шириной

Animate позволяет вам добавлять анимацию форм к обводкам с переменной шириной. Раньше в Animate можно было создавать анимацию формы только для сплошных единообразных обводок и фигур. Это не позволяло разработчикам создавать анимацию формы для неоднородных обводок, например для усовершенствованных с помощью инструмента «Переменная ширина». Анимация обводок с переменной шириной значительно расширяет возможности дизайна в Animate.

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

Инструмент «Переменная ширина»

Инструмент «Переменная ширина» позволяет обрабатывать единообразные сплошные обводки для создания изящных, фантазийных обводок.

Добавление анимации формы в обводки с переменной шириной

  1. В Animate CC нарисуйте линию с помощью инструмента Линия.

    Линейная обводка, когда параметр «Обводка» имеет значение 2 пикселя
    Линейная обводка, построенная с помощью инструмента «Линия», на рабочей области, параметр «Обводка» имеет значение 2 пикселя.

  2. Используйте инструмент Переменная ширина для добавления ширины в середине обводки (см. рис. ниже). Дополнительные сведения об использовании инструмента «Переменная ширина» см. в разделе Обработка обводок с помощью инструмента «Переменная ширина».

    Обводка с переменной шириной, параметр «Обводка» имеет значение 68,0 пикселей
    Обводка с переменной шириной, созданная с помощью инструмента «Переменная ширина», параметр «Обводка» имеет значение 68,0 пикселей.

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

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

  4. Правой кнопкой щелкните любой кадр от 1 до 30 и выберите команду Создать анимацию формы.

Добавление анимации формы в профили переменной ширины

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

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

  1. Нарисуйте в рабочей области Animate линию с помощью инструмента Линия.

    Линейная обводка, параметр «Обводка» имеет значение 2 пикселя
    Линейная обводка, построенная с помощью инструмента «Линия», на рабочей области, параметр «Обводка» имеет значение 2 пикселя.

  2. В инспекторе свойств выберите и примените профиль ширины из раскрывающегося списка Ширина.

    Обводка с переменной шириной, параметр «Обводка» имеет значение 68,0 пикселей
    Обводка с переменной шириной, созданная с помощью инструмента «Переменная ширина», параметр «Обводка» имеет значение 68,0 пикселей.

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

  4. Чтобы добавить анимацию формы в выбранные профили ширины, щелкните правой кнопкой мыши любой кадр между 1 и 30 и выберите Создать анимацию формы.

 Adobe

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

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