Adobe animate обводка текста
Обновлено: 06.07.2024
Градиент — это многоцветная заливка, в которой один цвет постепенно переходит в другой. Animate CC (ранее Flash Professional CC) позволяет применить до 15 цветовых переходов к градиенту. Создание градиента — удобный способ добиться плавного перехода цвета в одном объекте или между несколькими объектами. Можно сохранить градиент как образец, чтобы упростить его применение к нескольким объектам. Animate может создавать два типа градиентов.
Линейные градиенты изменяют цвет вдоль одной оси (горизонтальной или вертикальной).
Радиальные градиенты изменяют цвет во внешнем направлении, начиная с центральной фокальной точки. Можно настроить направление градиента, его цвета, положение фокальной точки и многие другие свойства.
Animate CC предоставляет дополнительное управление линейным и радиальным градиентами для использования во Flash Player. Эти элементы, называемые режимами переполнения, позволяют указать, как применяются цвета за градиентом.
Чтобы применить заливку градиентом к существующей иллюстрации, выберите в рабочей области объект или объекты.
Если панель «Цвет» не видна, выберите меню «Окно» > «Цвет».
Чтобы выбрать режим отображения цветов, выберите «RGB» (параметр по умолчанию) или «HSB».
Выберите тип градиента в меню «Тип».
Создает градиент, который меняет оттенок от начальной точки до конечной точки по прямой.
Создает градиент, который меняется от центральной фокальной точки в круговом контуре к краям.
Примечание. При выборе линейного или радиального градиента на панели «Цвет» появляются еще два параметра, если материал готовится для Flash Player версии 8 или более поздней. Во-первых, под меню «Тип» активируется меню «Переполнение». С помощью меню «Переполнение» можно управлять цветами, применяемыми за пределами градиента. Во-вторых, появляется панель определения градиента с двумя указателями под панелью, указывающими цвета для градиента.
В меню «Переполнение» выберите режим переполнения для градиента: «Расширение» (по умолчанию), «Отражение» и «Повтор» (необязательно).
Чтобы создать линейный или радиальный градиент, совместимый с масштабируемой векторной графикой (SVG), установите флажок «Линейный RGB» (необязательно). Благодаря этому градиент будет выглядеть ровнее при последующих изменениях масштаба.
Чтобы изменить цвет в градиенте, выберите один из цветовых указателей под панелью определения градиента (треугольник над выделенным указателем станет черным). После этого щелкните на панели пространства цвета, которая появится над панелью градиента. Перетащите ползунок яркости, чтобы настроить яркость цвета.
Чтобы добавить курсор к градиенту, щелкните панель определения градиента или ниже. Выберите цвет для нового указателя, как описано в предыдущем шаге.
Можно добавить до 15 цветовых указателей, что позволяет создавать до 15 цветовых переходов.
Чтобы изменить положение курсора на градиенте, перетащите курсор вдоль панели определения градиента. Перетащите указатель вниз и от панели определения градиента, чтобы удалить его.
Чтобы сохранить градиент, щелкните треугольник в правом верхнем углу на панели «Цвет» и выберите в меню «Добавить образец».
На панель «Образцы» в текущем документе будет добавлен градиент.
Чтобы преобразовать градиент, например, сделать его вертикальным вместо горизонтального, используйте инструмент «Преобразование градиента». Дополнительные сведения см. в разделе Преобразование градиента и растровой заливки.
Можно задать цвет обводки и заливки графического объекта или фигуры с помощью элементов управления обводки и заливки на панели инструментов или с помощью таких же элементов управления в инспекторе свойств.
Разделы панели инструментов «Цвет обводки» и «Цвет заливки» содержат элементы управления для вызова окон «Цвет обводки» и «Цвет заливки», которые, в свою очередь, определяют, влияет ли выбор цвета на обводку или заливку выбранных объектов. Кроме того, в разделе «Цвета» есть элементы управления для быстрого сброса цветов до цветов по умолчанию, задания бесцветных обводки и заливки и смены местами цветов заливки и обводки.
Кроме возможности выбирать цвет обводки и заливки для графического объекта или фигуры, инспектор свойств предлагает элементы управления для задания толщины и стиля обводки.
Чтобы изменить атрибуты раскраски существующих объектов с помощью этих элементов, сначала выберите объекты в рабочей области.
Настройка цвета обводки и заливки на панели «Инструменты»
Элементы «Цвет обводки» и «Цвет заливки» панели «Инструменты» устанавливают атрибуты раскраски новых объектов, создаваемых с помощью инструментов рисования и раскраски. Чтобы изменить атрибуты раскраски существующих объектов с помощью этих элементов, сначала выберите объекты в рабочей области.
Нажмите элемент «Цвет обводки» или «Цвет заливки» и выберите образец цвета.
Введите в поле шестнадцатеричное значение цвета.
Чтобы возвратить параметры цветов по умолчанию (белая заливка и черная обводка), нажмите кнопку «Черно-белый» на панели «Инструменты».
Чтобы удалить все обводки и заливки, нажмите кнопку «Нет цвета».
Примечание. Кнопка «Нет цвета» появляется только при создании овала или прямоугольника. Можно создать объект без обводки и заливки, но невозможно использовать кнопку «Нет цвета» для существующего объекта. Вместо этого выберите существующую обводку или заливку и удалите ее.
Чтобы поменять между собой цвета обводки и заливки, нажмите на панели инструментов кнопку «Поменять местами цвета».
Animate CC позволяет просмотреть цвет мазка или заливки при изменении образца цвета. Более подробную информацию см. в разделе Интерактивный просмотр цветов.
Классический текст — это название более старого механизма визуализации текста Animate. Классический механизм визуализации текста по-прежнему доступен во CS5 и более поздних версий. Классический текст может быть предпочтительнее для определенных типов содержимого, например для мобильных устройств, где размер SWF-файла должен быть минимальным. Однако в некоторых случаях, когда требуется точное управление компоновкой текста, рекомендуется использовать новый текст TLF. Сведения о тексте TLF см. в разделе «Работа с текстом TLF».
Можно указать, использует ли отдельный текстовый объект в рабочей области механизм визуализации классического текста или текста TLF. Для этого выделите текстовый объект, а затем выберите необходимый механизм визуализации текста в Инспекторе свойств текста.
Механизм визуализации текста, используемый текстовым объектом, можно изменить в любой момент. Сведения о превращении классического текста в текст TLF см. в разделе «Преобразование между классическим текстом и текстом TLF».
Классический текст можно включить в приложения Animate различными способами. Классический текст можно включить в приложения различными способами. Можно создать текстовые поля, содержащие статический текст, который вводится на стадии подготовки документа. Можно также создать динамические поля, содержащие обновляемый текст (например, биржевые сводки или заголовки новостей), и текстовые поля ввода, в которые пользователи вводят текст при заполнении форм и участии в опросах.
Animate реализует множество способов работы с текстом. Она позволяет ориентировать текст горизонтально или вертикально, задавать его атрибуты (шрифт, размер, стиль, цвет, межстрочный интервал и т.д.), проверять орфографию, выполнять преобразование текста (поворот, наклон и зеркальное отображение), анимировать, выделять, связывать с объектами, управлять подстановкой шрифтов и использовать шрифты из общих библиотек. В документах Animate могут использоваться шрифты PostScript® Type 1, TrueType® и растровые шрифты (только для Macintosh).
Текстовые поля позволяют сохранить форматирование текста при помощи атрибутов и тегов HTML. Если для содержимого динамического или текстового поля ввода применяется разметка HTML, то текст может обтекать изображение (SWF, JPEG, фрагмент ролика и т.д.). См. раздел «Текст в формате HTML» в руководстве Изучение ActionScript 2.0.
Как и экземпляры фрагментов роликов, экземпляры текстовых полей представляют собой объекты ActionScript ®, имеющие свойства и методы. После того, как текстовому полю задано имя экземпляра, оно становится доступным в сценариях ActionScript. Однако код ActionScript не может быть введен внутрь экземпляра текста, так как экземпляры текста не имеют временных шкал.
Сценарии ActionScript позволяют форматировать вводимый и динамический текст, а также создавать текстовые поля с прокруткой. События ActionScript для динамических и текстовых полей ввода можно перехватить и использовать для запуска сценариев. Сведения об использовании ActionScript для управления текстом см. в разделе «Работа с текстом и строками» в руководстве Изучение ActionScript 2.0.
Можно создать поля классического текста трех типов: статические, динамические и вводимые.
В статических текстовых полях отображается текст, содержимое которого динамически не изменяется.
В динамических текстовых полях отображается динамически обновляемый текст, например биржевые котировки, сводки погоды и т. п.
Текстовые поля ввода предназначены для того, чтобы пользователи вводили текст в формах или опросах.
Текст может быть горизонтальным (слева направо) или вертикальным статическим (справа налево или слева направо). Обратите внимание, что использование горизонтальных двунаправленных систем письма (иврит, арабская и т. д.) в полях классического текста не поддерживается.
При создании статического текста поле может быть размещено в одной строке, расширяющейся по мере ввода, либо являться полем фиксированной ширины (для горизонтального текста) или фиксированной высоты (для вертикального текста), которое автоматически расширяется с переносом текста на следующую строку. При создании динамического или вводимого поля текст может быть размещен как в одной строке, так и иметь фиксированную ширину и высоту.
Примечание. При работе со статическим вертикальным текстом поле «Ширина» неактивно в инспекторе свойств. Изменение высоты автоматически ведет за собой корректировку ширины. Аналогично при работе со статическим горизонтальным текстом в инспекторе свойств неактивно поле «Высота». Изменение ширины автоматически ведет за собой корректировку высоты.
Все поля классического текста поддерживают кодировку Юникод.
Animate отображает в углу каждого текстового поля маркер, определяющий тип текстового поля.
Для статического горизонтального текста с расширением в верхнем правом углу текстового поля отображается круглый маркер.
Для статического текста по горизонтали с фиксированной шириной в верхнем правом углу текстового поля отображается квадратный маркер.
Для статического текста по вертикали, который идет справа налево и расширяется, в нижнем левом углу текстового поля отображается круглый маркер.
Для статического текста по вертикали, который идет справа налево и имеет фиксированную высоту, в нижнем левом углу текстового поля отображается квадратный маркер.
Для статического текста по вертикали, который идет слева направо и расширяется, в нижнем правом углу текстового поля отображается круглый маркер.
Для статического текста по вертикали, который идет слева направо и имеет фиксированную высоту, в нижнем правом углу текстового поля отображается квадратный маркер.
Для динамических текстовых полей и полей ввода текста в нижнем правом углу текстового поля отображается круглый маркер.
Для динамического и вводимого текста с заданной высотой и шириной в нижнем правом углу текстового поля отображается квадратный маркер.
Для классических динамических текстовых полей с прокруткой круглый или квадратный маркер вместо пустого становится сплошным черным.
Удерживая нажатой клавишу «Shift», дважды щелкните маркер динамического или текстового поля ввода, чтобы создать текстовое поле, которое не расширяется при вводе текста в рабочей области. Это позволяет создать текстовое поле фиксированного размера и ввести в него больше текста, чем может быть отображено. Таким образом создается текст с прокруткой.
После создания текстового поля с помощью инструмента «Текст» инспектор свойств позволяет задать тип текстового поля и параметры, управляющие его видом и отображением в SWF-файле.
По умолчанию текст имеет горизонтальную ориентацию. Однако статический текст может выравниваться вертикально.
Для редактирования текста в Animate могут применяться любые наиболее распространенные методы обработки текстов. Команды «Вырезать», «Копировать» и «Вставить» позволяют перемещать текст внутри файла Animate или между Animate и другими приложениями.
И обводку, и заливку можно выделить и редактировать по-отдельности - определять их положение на сцене, размеры, форму, цвет и прочее. Кроме этого, обводку можно отделить от заливки и расположить отдельно на Сцене.
На анимации слева показано, как Вы можете отделить обводку и заливку и настроить отдельно свойства обводки и свойства заливки.
Можно вообще удалить обводку или заливку - выделить с инструментом выделения и нажать клавишу Delete .
Обводка графического объекта (например - прямоугольника) может иметь разный цвет сторон, можно изменить ее толщину, форму и прочее, как показано на рисунке слева.
Примечание: При работе в режиме рисования объектов обводка и заливка составляют единое целое, т.е. обводку нельзя отделить от заливки. Тем не менее и в этом режиме можно настраивать свойства обводки и заливки независимо друг от друга, используя Инспектор свойств .Настройки обводки и заливки с помощью Инспектора свойств
Выделите объект на сцене - используйте Панель инструментов - инструмент выделения и создайте вокруг объекта рамочку (в этом случае будут выделены одновременно и обводка, и заливка).
Также для выделения объекта можно использовать двойной щелчок мыши по заливке объекта.
В Инспекторе свойств (на панели "Свойства") будут фигурировать все свойства выделенного объекта, в том числе положение, размер, заливка и обводка.
Вы можете выбрать цвет для обводки, цвет для заливки, стиль и штрину линий обводки и другое.
1. Перед рисованием объекта на сцене вы должны предварительно определить его свойства, в том числе цвета обводки и заливки.
2. Выбор стиля обводки, отличного от Solid (заливка однородным цветом), может увеличить размер файла .
Также настраивается стиль оформления для конца пути и Закругление (круглое, квадратное).
Вы можете создать собственный стиль обводки.
(Необязательно) Если вы рисуете линии с помощью инструментов «Карандаш» или «Кисть» с режимом рисования «Гладкий», используйте
Выпрямление или Сглаживание линий.
Настройка обводки и заливки с помощью панели «Инструменты»
- Цвет обводки (Stroke Color)
- Задать цвет обводки - Выберите цвет из палитры (или введите шестнадцатеричное значение цвета в поле).
- Цвет заливки (Fill Color)
- Задать цвет заливки
- Поменять местами цвета (или: Черно-белый)
Настройка обводки и заливки с помощью панели "Цвет"
См. Панель "Цвет" .
1. В Animate CC 2018 г (октябрь) усовершенствован инструмент «Заливка» - теперь можно использовать заливку в непрерывном режиме. Инструмент выполняет динамическую заливку в областях и контурах при перетаскивании курсора по фигурам.
Подробнее.
2. См. также Модификация закрашенных областей с помощью инструмента «Заливка» .
Инструмент "Чернильница"
Инструмент "Чернильница" (Ink Bottle) позволяет настроить обводку (цвет, ширину и стиль) нескольких линий или графических форм одновременно.
Чернильница используется только для обводки и только для сплошных цветов (не может заполнять градиентом или растровым рисунком).
1. Выберите инструмент «Чернильница» (Bottle tool) на Панели инструментов.
2. Выберите цвет обводки.
3. Выберите стиль обводки и ширину обводки в Инспекторе свойств .
4. Чтобы применить изменения обводки, щелкните объект в рабочей области.
Изменение цвета обводки можно применить к объектам на одном слое или на нескольких слоях. Объект также может располагаться не только на Сцене , но и на Картон е .
Инструмент "Пипетка"
В общем случае инструмент "Пипетка" () применяется для отбора цвета. Область действия пипетки - Окно редактирования (Сцена + Картон).
Используйте инструмент «Пипетка» (Eyedropper tool), чтобы скопировать настройки заливки и обводки из одного объекта и немедленно применить их к другому объекту.
Инструмент «Пипетка» также позволяет выбрать образец растрового изображения для использования в качестве заливки.
1. Чтобы применить настройки обводки или заливки к другой обводке или заливке, выберите инструмент «Пипетка» на Панели инструментов и нажмите обводку или заполненную область, свойства которой вы хотите применить.
При щелчке по обводке инструмент автоматически переключается на инструмент Ink Bottle. Когда вы нажимаете на заполненную область, инструмент автоматически переключается на инструмент Paint Bucket с включенным модификатором Lock Fill.
2. Щелкните другую линию обводки или заполненную область, чтобы применить новые атрибуты.
Инструмент "Заливка"
Инструмент "Заливка" (или «Ведро с краской» - Paint Bucket tool) заполняет замкнутые области цветом. Этот инструмент позволяет вам сделать следующее:
• Рисовать сплошными цветами, градиентами и растровыми заливками.
• Возможность заполнить области, которые не полностью закрыты.
1. Выберите инструмент «Заливка» на Панели инструментов.
2. Выберите цвет и стиль заливки.
3. Щелкните модификатор «Размер зазора» , который отображается в нижней части Панели инструментов, и выберите параметр размера зазора:
• Не закрывать промежутки, чтобы закрыть пробелы вручную перед заполнением фигуры. Закрытие пробелов вручную может быть быстрее для сложных изображений.
• Параметр «Закрыть» (Close), чтобы Animate заполнял фигуру с пробелами.
Замечания: Если промежутки слишком велики, вам, возможно, придется закрыть их вручную.
4. Щелкните форму или закрытую область для заполнения.
Блокировка заливки
Чтобы использовать блокировку заливки:
1. Выберите растровое изображение для использования.
2. Выберите «Растровое изображение» (Bitmap) в меню «Тип» на панели « Цвет ».
3. Выберите инструмент « Кисть » или « Заливка ».
4. Щелкните по модификатору "Блокировка заливки" () внизу Панели инструментов.
5. Сначала нарисуйте области, в которые вы хотите поместить центр заливки, а затем перейдите к другим областям.
Хотите узнать, как создавать контурную анимацию в Adobe Animate? В текущей статье я бы хотела поделиться с вами опытом по анимации векторного персонажа. Вы узнаете, как сделать реалистичный поворот головы и развивающиеся волосы. Уверена, мой опыт будет полезен вам.
Подготовка материалов
1 шаг:
Сначала я подобрала 2 изображения с примерно похожими девушками в разных состояниях.
2 шаг:
С помощью инструмента Перо обрисовала первое изображение. Все линии оставила в одном слое. Получилось следующее:
Далее нужно было определить какие части мы будем анимировать. Я решила, что это будет анимация развивающихся волос и анимация глаз.
Анимация волос
3 шаг:
Начнем с анимации волос. Нам нужно создать иллюзию развивающихся волос. Для этого нужно воспользоваться анимацией формы.
Каждую линию, которую мы хотим анимировать распределим на отдельный слой и создадим анимацию формы, используя несколько ключевых кадров.
Чтобы анимация была зацикленная, нужно первое и последнее состояние линии сделать одним и тем же. После данных манипуляций, шкала времени у меня выглядела таким образом:
Нужно помнить, что Анимация формы (Shape tween) достаточно коварная функция. Если вы неправильно передвинете точки, то вся линии перекрутится, но не даст нужного изгиба.
Поэтому нужно стараться передвигать именно те ключевые точки, которые вы создавали при прорисовке линии, и изгибать эти линии не сразу под большим углом а постепенно, через несколько ключевых кадров. Тоже касается и перемещения точек. В результате получилось следующее:
Анимация глаз
4 шаг.
Теперь разберемся с анимацией глаз. Я разбила все линии на вот такие слои:
Опустим их, а затем поднимем через некоторую паузу.
Отличие ключевого кадра от не ключевого в том, что содержимое и его изменения, если таковое произойдет, будет повторяться во всех последующих не ключевых кадрах до тех пор пока не появится новый ключевой кадр. В результате вот, что получилось:
Анимация поворота головы
5 шаг.
Для начала мы должны в том же самом файле, где находится обрисованная девушка отступить несколько кадров, необходимых для поворота и вставить в качестве шаблона конечного состояния фото со вторым изображением девушки.
Я постаралась изобразить некоторые из таких преобразований в следующей иллюстрации.
Слева и справа одним цветом обозначены линии, которые будут трансформировать друг из друга:
Здесь обозначены не все линии.
Глаза же будем преобразовывать Анимацией движения. Для этого каждый глаз нужно сделать отдельным символом (так как анимация движения действует только для символов) и подстроить каждый глаз под новое состояние с помощью стандартных функций преобразования.
Временная шкала в результате этих преобразований у меня выглядит следующим образом:
Читайте также: