Как разблокировать заливку в adobe animate

Как разблокировать заливку в adobe animate

И обводку, и заливку можно выделить и редактировать по-отдельности — определять их положение на сцене, размеры, форму, цвет и прочее. Кроме этого, обводку можно отделить от заливки и расположить отдельно на Сцене.

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

Можно вообще удалить обводку или заливку — выделить с инструментом выделения и нажать клавишу Delete .

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

Настройки обводки и заливки с помощью Инспектора свойств

Выделите объект на сцене — используйте Панель инструментов — инструмент выделения и создайте вокруг объекта рамочку (в этом случае будут выделены одновременно и обводка, и заливка).
Также для выделения объекта можно использовать двойной щелчок мыши по заливке объекта.
В Инспекторе свойств (на панели «Свойства») будут фигурировать все свойства выделенного объекта, в том числе положение, размер, заливка и обводка.
Вы можете выбрать цвет для обводки, цвет для заливки, стиль и штрину линий обводки и другое.

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

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

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

1. Цвет обводки (Stroke Color)
2. Задать цвет обводки — Выберите цвет из палитры (или введите шестнадцатеричное значение цвета в поле).
3. Цвет заливки (Fill Color)
4. Задать цвет заливки
5. Поменять местами цвета (или: Черно-белый)

Настройка обводки и заливки с помощью панели «Цвет»
См. Панель «Цвет» .

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

Инструмент «Пипетка»
В общем случае инструмент «Пипетка» () применяется для отбора цвета. Область действия пипетки — Окно редактирования (Сцена + Картон).
Используйте инструмент «Пипетка» (Eyedropper tool), чтобы скопировать настройки заливки и обводки из одного объекта и немедленно применить их к другому объекту.
Инструмент «Пипетка» также позволяет выбрать образец растрового изображения для использования в качестве заливки.
1. Чтобы применить настройки обводки или заливки к другой обводке или заливке, выберите инструмент «Пипетка» на Панели инструментов и нажмите обводку или заполненную область, свойства которой вы хотите применить.
При щелчке по обводке инструмент автоматически переключается на инструмент Ink Bottle. Когда вы нажимаете на заполненную область, инструмент автоматически переключается на инструмент Paint Bucket с включенным модификатором Lock Fill.
2. Щелкните другую линию обводки или заполненную область, чтобы применить новые атрибуты.

Инструмент «Заливка»
Инструмент «Заливка» (или «Ведро с краской» — Paint Bucket tool) заполняет замкнутые области цветом. Этот инструмент позволяет вам сделать следующее:

1. Выберите инструмент «Заливка» на Панели инструментов.
2. Выберите цвет и стиль заливки.
3. Щелкните модификатор «Размер зазора» , который отображается в нижней части Панели инструментов, и выберите параметр размера зазора:

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

Блокировка заливки
Чтобы использовать блокировку заливки:
1. Выберите растровое изображение для использования.
2. Выберите «Растровое изображение» (Bitmap) в меню «Тип» на панели « Цвет ».
3. Выберите инструмент « Кисть » или « Заливка ».
4. Щелкните по модификатору «Блокировка заливки» () внизу Панели инструментов.
5. Сначала нарисуйте области, в которые вы хотите поместить центр заливки, а затем перейдите к другим областям.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Несколько методов редактирования векторной графики в Adobe Animate CC

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

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

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

Создание базовых форм с помощью инструмента Прямоугольник

Попробуем разработать простую форму прямоугольником. Для начала нажмите на горячую клавишу R, при помощи которой можно быстро его вызвать. Если нажать на эту кнопку дважды, запустится инструмент Прямоугольный примитив. Так вы можете всего одной кнопкой поочередно вызывать эти два инструмента. О том, чем они отличаются, я расскажу в дальнейших уроках.

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

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

• если зажата клавиша Shift, вы спроектируете стандартный квадрат – по сути, прямоугольник с равными сторонами.

• если при работе будет зажата клавиша Alt, прямоугольник произвольного типа построится прямо из центра – места, в которое вы кликнули курсором мышки в самом начале построения.
• Если одновременно зажаты Shift + Alt, то из центра будет построен квадрат.

Чтобы стереть объекты на сцене, их можно выбрать инструментом выделение и кликнуть на кнопку Delete.

Поочередность редактирования векторной графики

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

Поочередность выполняемых действий должна быть во всех случаях именно такой:

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

Методы выделения контура и заливки

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

Выделяем заливку

Чтобы выделить заливку, нужно по ней кликнуть всего раз ЛКМ. В итоге она станет несколько тусклее.

Увеличивая заливку, можно заметить на ней небольшие голубые крапинки.

Теперь вы можете переворачивать заливку по своему усмотрению или же менять ее размер.

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

Выделяем контур

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

Для выделения нужного кусочка контура, нажмите на него один раз.

Выделение целого объекта

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

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

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

3 варианта редактирования векторной графики в Adobe Animate CC

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

Пользователи-новички весьма часто забывают о таком правиле.

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

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

Способ первый

Изменяем расположение угла. Если курсор мышки подвести к углу формы, рядом с черной стрелкой отобразится маленький прямой угол. Это означает, что пользователь может поменять размещение такого угла.

Кликая ЛКМ и потянув ее, не отпуская, можно переместить угол сразу за курсором. Так пользователь сможет поменять положение любого угла формы.

Способ второй

Разрабатываем новый угол у формы. Если курсор мышки перетащить не к углу, а к границе формы, нажать на кнопку Alt или Ctrl, а потом потащить, эта часть границы будет распределена на две части в точке, где курсор соприкасается с границей. Это и создаст новый угол фигуры.

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

Способ третий

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

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

Самостоятельная практика

Попробуйте нарисовать все девять фигур, представленные на рисунке выше. При этом соблюдайте такие правила:

Работа с градиентом в Adobe Flash (Adobe Animate)

В данной небольшой статье я хочу рассказать, что такое градиент и как работать с градиентной заливкой в Adobe Flash и Adobe Animate. Для кого-то эта статья покажется пустяковой, но для меня в свое время данная тема представляла большую трудность, поэтому я хочу поделиться со своими читателями информацией о том, как правильно работать с градиентом в Adobe Flash (Animate).

Что такое градиент

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

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

На их атаке появился зеленый цвет.

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

Выделяют пять типов градиента:

• Линейный
• Радиальный
• Угловой
• Зеркальный
• Ромбовидный

Содержимое следует из названия.

В Adobe Animate CC используется линейный и радиальный градиенты.

Недостатки использования градиента в компьютерной графике

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

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

Вот почему web разработчики и дизайнеры стали отказываться от него в пользу более новых и «легких» flat технологий.

Кстати говоря, в векторной графике заливка градиентом используется не так часто, она все-таки считается прерогативой растровой графики.

ЧИТАЙТЕ ТАКЖЕ

Анимация движения на камеру в Adobe Animate (Flash) Изучите новый прием использования анимации движения.

Заливка градиентом в Adobe Flash (Adobe Animate)

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

Итак. Создайте новый документ ActionScript 3.0. Нарисуйте произвольный прямоугольник.

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

Щелкните по значку « Задать цвет заливки » и из выпадающего списка выберите « Линейный градиент ». По умолчанию он станет черно-белым.

Теперь можно настраивать цвета. Сами цвета могут быть выбраны из палитры цветов — 1, либо вы можете задать шестнадцатеричный код цвета – 2. Или цвет по системе RGB (Красный, Зеленый, Синий) – 3. Или по системе HSB (Тон, Насыщенность, Яркость) — 4. Так же можно задать значение прозрачности цвета (Alpha) – 5.

С помощью ползунков цвета можно регулировать их количество и порядок. Если вы щелкните по конкретному ползунку два раза левой клавишей мыши, то сможете задавать параметры цвета именно этого участка. Чтобы добавить еще один цвет, нужно навести указатель мыши на нижнюю границу панели, появится знак + рядом с указателем. Щелкните левой клавишей мыши. Чтобы удалить ползунок, а вместе с ним и цвет, зажмите на нем указатель и потяните вниз стрелку мыши. Чтобы передвигать цвета – двигайте ползунки влево вправо.

Попробуйте настроить градиент следующим образом. Прозрачность всех цветов – 100%

Вот видите, нет ничего сложного в работе с градиентом.

А теперь давайте посмотрим, как можно менять наклон градиента. Для этого существует инструмент «Преобразование градиента (F)» в группе «Свободное преобразование». Дополнительная группа инструментов появляется при щелчке левой клавишей мыши по черной треугольной сноске в правом нижнем углу инструмента.

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

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