"Обводки, заливки и градиенты в Animate CC"

  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. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  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. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

Создание и изменение градиентной заливки

Градиент — это многоцветная заливка, в которой один цвет постепенно переходит в другой. Animate CC (ранее Flash Professional CC) позволяет применить до 15 цветовых переходов к градиенту. Создание градиента — удобный способ добиться плавного перехода цвета в одном объекте или между несколькими объектами. Можно сохранить градиент как образец, чтобы упростить его применение к нескольким объектам. Animate может создавать два типа градиентов.

Линейные градиенты изменяют цвет вдоль одной оси (горизонтальной или вертикальной).

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

Animate CC предоставляет дополнительное управление линейным и радиальным градиентами для использования во Flash Player. Эти элементы, называемые режимами переполнения, позволяют указать, как применяются цвета за градиентом.

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

  2. Если панель «Цвет» не видна, выберите меню «Окно» > «Цвет».

  3. Чтобы выбрать режим отображения цветов, выберите «RGB» (параметр по умолчанию) или «HSB».

  4. Выберите тип градиента в меню «Тип».

    Линейный

    Создает градиент, который меняет оттенок от начальной точки до конечной точки по прямой.

    Радиальный

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

    Примечание. При выборе линейного или радиального градиента на панели «Цвет» появляются еще два параметра, если материал готовится для Flash Player версии 8 или более поздней. Во-первых, под меню «Тип» активируется меню «Переполнение». С помощью меню «Переполнение» можно управлять цветами, применяемыми за пределами градиента. Во-вторых, появляется панель определения градиента с двумя указателями под панелью, указывающими цвета для градиента.

  5. В меню «Переполнение» выберите режим переполнения для градиента: «Расширение» (по умолчанию), «Отражение» и «Повтор» (необязательно).

  6. Чтобы создать линейный или радиальный градиент, совместимый с масштабируемой векторной графикой (SVG), установите флажок «Линейный RGB» (необязательно). Благодаря этому градиент будет выглядеть ровнее при последующих изменениях масштаба.

  7. Чтобы изменить цвет в градиенте, выберите один из цветовых указателей под панелью определения градиента (треугольник над выделенным указателем станет черным). После этого щелкните на панели пространства цвета, которая появится над панелью градиента. Перетащите ползунок яркости, чтобы настроить яркость цвета.

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

    Можно добавить до 15 цветовых указателей, что позволяет создавать до 15 цветовых переходов.

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

  10. Чтобы сохранить градиент, щелкните треугольник в правом верхнем углу на панели «Цвет» и выберите в меню «Добавить образец».

    На панель «Образцы» в текущем документе будет добавлен градиент.

  11. Чтобы преобразовать градиент, например, сделать его вертикальным вместо горизонтального, используйте инструмент «Преобразование градиента». Дополнительные сведения см. в разделе Преобразование градиента и растровой заливки.

Настройте цвета обводки и заливки.

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

Разделы панели инструментов «Цвет обводки» и «Цвет заливки» содержат элементы управления для вызова окон «Цвет обводки» и «Цвет заливки», которые, в свою очередь, определяют, влияет ли выбор цвета на обводку или заливку выбранных объектов. Кроме того, в разделе «Цвета» есть элементы управления для быстрого сброса цветов до цветов по умолчанию, задания бесцветных обводки и заливки и смены местами цветов заливки и обводки.

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

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

См. также: Интерактивный просмотр цветов.

Настройка цвета обводки и заливки на панели «Инструменты»

Элементы «Цвет обводки» и «Цвет заливки» панели «Инструменты» устанавливают атрибуты раскраски новых объектов, создаваемых с помощью инструментов рисования и раскраски. Чтобы изменить атрибуты раскраски существующих объектов с помощью этих элементов, сначала выберите объекты в рабочей области.

  • Нажмите элемент «Цвет обводки» или «Цвет заливки» и выберите образец цвета.

  • Нажмите кнопку «Системная палитра цветов» во всплывающем окне и выберите цвет. Кроме того, можно наводить курсор на различные цвета, чтобы просмотреть, как они будут смотреться в фигуре.

  • Введите в поле шестнадцатеричное значение цвета.

  • Чтобы возвратить параметры цветов по умолчанию (белая заливка и черная обводка), нажмите кнопку «Черно-белый» на панели «Инструменты».

  • Чтобы удалить все обводки и заливки, нажмите кнопку «Нет цвета».

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

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

Animate CC позволяет просмотреть цвет мазка или заливки при изменении образца цвета. Более подробную информацию см. в разделе Интерактивный просмотр цветов.

Применение сплошной заливки цветом с помощью инспектора свойств

  1. Выберите в рабочей области замкнутый объект или объекты.
  2. Выберите меню «Окно» > «Свойства».
  3. Чтобы выбрать цвет, нажмите элемент управления «Цвет заливки» и выполните одно из следующих действий.

    • Выберите образец цвета из поля палитры.
    • Введите в поле шестнадцатеричное значение цвета.

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

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

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

    Выбор стиля обводки, отличной от «Сплошной», может увеличить размер файла.

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

    Не задано

    Обрезается по краю контура.

    Круглый

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

    Квадратный

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

  7. (Необязательно) Если линии рисуются с помощью инструментов «Карандаш» или «Кисть» и установлен режим рисования «Смягчение», то используйте ползунок «Смягчение», чтобы указать степень, до которой Animate смягчает рисуемые линии.

    По умолчанию значение «Смягчение» установлено в значение 50, но можно указать значение от 0 до 100. Чем больше значение сглаживания, тем более сглаживается в результате линия.

    Примечание.

    Если режим рисования установлен в значение «Выпрямление» или «Краска», то ползунок «Смягчение» отключен.

  8. Чтобы определить, как соединяются два сегмента, выберите параметр «Объединение». Чтобы изменить углы в открытом или замкнутом контуре, выберите контур и другое значение параметра объединения.
    Стыки «уголок», «круглый» и «фаска».

  9. Чтобы избежать скашивания стыка «уголок», введите предел заострения.

    Если длина линии превосходит это значение, то линии заканчиваются квадратными, а не точечными окончаниями. Например, предел среза 2 для 3-точечной обводки означает, что если длина точки в два раза превышает толщину обводки, то Animate удаляет граничную точку.

    Применение предела среза.

Корректировка обводок нескольких линий или фигур

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

С помощью инструмента «Обводка» проще изменить атрибуты обводки нескольких объектов одновременно, не выделяя отдельные линии.

  1. Выберите инструмент «Обводка» на панели «Инструменты».
  2. Выберите цвет обводки.
  3. Выберите стиль обводки и толщину обводки в инспекторе свойств.
  4. Щелкните объект в рабочей области, чтобы применить изменения обводки.

Копирование обводки и заливки

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

  1. Чтобы применить атрибуты обводки или области с заливкой к другой обводке или области с заливкой, выберите инструмент «Пипетка» и щелкните обводку или область с заливкой, атрибуты которой нужно применить.

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

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

Модификация закрашенных областей с помощью инструмента «Заливка»

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

  • Заполните пустую область и измените цвет уже заполненных областей.

  • Раскрашивайте сплошными цветами, градиентными и растровыми заливками.

  • Используйте инструмент «Ведро с краской», чтобы заполнить области, замкнутые не полностью.

  • Заставьте Animate закрыть зазоры в контурах фигуры при использовании инструмента «Ведро с краской».

  1. Выберите инструмент «Заливка» на панели «Инструменты».
  2. Выберите цвет и стиль заливки.
  3. Выделите модификатор «Размер промежутка» в нижней части панели «Инструменты» и выберите параметр размера зазора:
    • «Не закрывать интервалы», чтобы вручную закрыть интервалы перед заливкой фигуры. Для сложных рисунков закрытие интервалов вручную может быть более быстрым.
    • Параметр «Закрыть», который заставляет Animate выполнить заливку фигуры, имеющей зазоры.
    Примечание.

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

  4. Щелкните фигуру или замкнутую область для заливки.

Параметры инструмента «Заливка»

С помощью этого инструмента можно щелкнуть и перетащить указатель между контурами объекта, чтобы заполнить его нужным цветом. Щелкните и перетащите инструмент в любом направлении между контурами. Инструмент «Заливка» заполнит объект цветом при выборе любых точек между контурами.

Свойства инструмента «Заливка»
Свойства инструмента «Заливка»

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

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

Когда флажок «Залить все области» не установлен (по умолчанию)

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

Когда установлен флажок «Залить все области»

Все области заливаются выбранным цветом. В приведенном выше примере это красный цвет.

Преобразование градиента и растровых заливок

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

  1. Выберите инструмент «Преобразование градиента»  на панели «Инструменты». Если на панели «Инструменты» нет средства «Преобразование градиента», нажмите и удерживайте кнопку мыши на инструменте «Свободное преобразование», затем в открывшемся меню выберите «Преобразование градиента».
  2. Щелкните мышью область, заполненную градиентной или растровой заливкой. Появится ограничительная рамка с маркерами редактирования. Когда курсор находится над каким-либо из этих маркеров, он изменяется, показывая функцию маркера.

    Центральная точка

    Значок прокрутки для маркера центральной точки — это четырехконечная стрелка.

    Фокальная точка

    Маркер фокальной точки появляется только при выборе радиального градиента. Значок прокрутки для маркера фокальной точки — это инвертированный треугольник.

    Размер

    Значок прокрутки для маркера размера (значок среднего маркера на краю ограничительной рамки) — это круг со стрелкой внутри.

    Поворот

    Настраивает поворот градиента. Значок прокрутки для маркера поворота (значок нижнего маркера на краю ограничительной рамки) — это четыре стрелки в фигуре круга.

    Ширина

    Настраивает ширину градиента. Значок прокрутки для маркера ширины (прямоугольный маркер) — это двусторонняя стрелка.

    Нажмите клавишу «Shift», чтобы ограничить направление линейной градиентной заливки значениями, кратными 45°.

    Элементы управления радиального градиента

    A. Центральная точка B. Ширина C. Поворот D. Размер E. Фокальная точка. 

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

    • Чтобы изменить ширину градиентной или растровой заливки, перетащите прямоугольный маркер на стороне ограничительной рамки. (Этот параметр изменяет только ширину заливки, а не объекта, содержащего заливку.)

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

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

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

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

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

    • Чтобы замостить фигуру растровым изображением, выполните масштабирование заливки.

    Примечание.

    Чтобы просмотреть все маркеры при работе с большими заливками или заливками, близкими к границе рабочей области, выберите пункт «Просмотр» > «Область вставки».

Блокировка градиента или растровой заливки рабочей области

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

Если при использовании инструментов «Кисть» или «Заливка» выбрать модификатор «Блокировка заливки», то градиентная или растровая заливка будет распространяться на все объекты, которые отрисовываются в рабочей области.

Использование модификатора «Блокировка заливки» создает внешний вид единой градиентной или растровой заливки, применяемой к отдельным объектам в рабочей области.

Использование блокированной градиентной заливки

  1. Выберите инструмент «Кисть» или «Заливка» и выберите в качестве заливки градиент или растровое изображение.
  2. На панели «Цвет» в меню «Тип» выберите «Линейный» или «Радиальный».
  3. Нажмите модификатор «Блокировка заливки»  .
  4. Сначала раскрасьте области, в которые нужно поместить центр заливки, а потом перейдите к другим областям.

Использование блокированной растровой заливки

  1. Выберите используемое растровое изображение.
  2. На панели «Цвет» в меню «Тип» выберите «Растровое изображение».
  3. Выберите инструмент «Кисть» или «Ведро с краской».
  4. Нажмите модификатор «Блокировка заливки»  .
  5. Сначала раскрасьте области, в которые нужно поместить центр заливки, а потом перейдите к другим областям.
Логотип Adobe

Вход в учетную запись