Градиентом называется плавный переход одного цвета в другой. Сложные градиенты могут содержать несколько таких переходов.
В Macromedia Flash градиенты могут содержать до восьми цветов и быть:
Линейный градиент |
Радиальный градиент |
---|---|
|
|
Цвета в градиентах могут быть непрозрачными, частично прозрачными и прозрачными.
После создания контуров любым из способов, их
можно залить градиентом, используя палитру Fill
(Заливка), инструмент заливки
Paint Bucket (Заливка, Ведро) и его модификаторы.
1.
Выберите инструмент |
|
2. Для того,
чтобы прямоугольник залить линейным градиентом, выберите
инструмент заливки ![]() |
![]() |
3. Кликните левой клавишей мыши внутри прямоугольника
на рабочем поле. Прямоугольник будет залит линейным черно-белым
градиентом.
4. В строке состояния нажмите
кнопку В открывающемся списке Fill Style (Стиль заливки) будет указан Linear Gradient (Линейный градиент), а в горизонтальной полосе Edit gradient range (Редактирование диапазона градиента), на которой расставляются пороги градиента, будет виден черно-белый градиент, расположенный между двумя порогами.
Порог - это точка
расположения сплошного цвета. Каждый порог отмечается
маркером такого же цвета, как и порог. Промежутки между
порогами заполняются цветовыми переходами. Цвета и положение
порогов определяют цветовой переход градиента. |
![]() |
1. Добавим новые пороги: В панели Fill (Заливка) щелкните мышью несколько раз (столько раз, сколько новых цветов нужно добавить) под горизонтальной полосой Edit gradient range (Редактирование диапазона градиента). В тех местах, где вы кликнули левой клавишей мыши, появятся маркеры нового порога: серый цвет которого будет такой же, как и в той точке полосы, в которой установлен порог.
|
![]() |
2. Определим цвета каждого порога Для определения цвета каждого порога, воспользуемся панелью Mixer (Смеситель).
Для того чтобы вызвать эту панель, нажмите в строке состояния
кнопку Для того, чтобы все изменения градиента отражались в заливке фигуры, выделите ее.
|
![]() |
Когда на панели Fill (Заливка) выделен маркер порога градиента (у маркера появляется черная крышечка), в левой части панели Mixer (Смеситель) вместо кнопок отображается текущий цвет этого порога. Новый цвет можно выбрать из цветовой полосы панели Mixer (Смеситель), щелкнув в нужном месте. Указанный синий цвет вы увидите на образце цвета порога на панели Mixer (Смеситель), а также на панели Fill (Заливка) и панели инструментов. Если выделена фигура, залитая градиентом, то и изменится цвет градиента в самой фигуре.
|
![]() |
3. Установим для каждого порога степень прозрачности. Установим для цветов второго и четвертого слева порогов прозрачность 50%. Для этого нужно выделить в панели Fill (Заливка) соответствующий порог и либо:
На всех образцах всех панелей частично прозрачный цвет будет отмечен сеткой.
|
![]() |
Нажмите кнопку
Градиент будет добавлен в текущую палитру. Это будет видно в
окне заливки в панели инструментов
|
![]() |
То же самое видно и в панели Swatches (Каталог). Чтобы убедиться в этом, щелкните мышью на ярлыке Swatches (Каталог) в окне панели Mixer (Смеситель). Появится панель Swatches (Каталог). Как видите, созданный пятицветный линейный градиент помещен в нижней части панели, где собраны все градиенты. Чтобы снова перейти в панель Mixer (Смеситель), щелкните мышью на ярлыке Mixer (Смеситель). Чтобы снять выделение и увидеть новую заливку фигуры, щелкните левой клавишей мыши на рабочем поле вне заливки:
|
![]() |
5. Работа с радиальными градиентами
1. Выберите инструмент
2. Выберите
инструмент заливки
3. Кликните левой клавишей мыши внутри овала на рабочем поле. Овал будет залит радиальным черно-белым градиентом. |
|
4. В строке состояния нажмите кнопку
![]() 5. Измените цвет и прозрачность каждого порога цвета с помощью панели Mixer (Смеситель). 6. Отредактируйте градиент, перемещая маркеры цвета. 7. Для добавления нового радиального градиента в палитру фильма нажмите на кнопку стрелка вправо в правом верхнем углу панели Fill (Заливка) и нажмите команду Add Gradient (Добавить градиент). |
![]() |
Создайте новый файл: Ctrl-N. Выберите инструмент Выберите инструмент Отожмите, если нажата кнопка блокировки заливки Lock Fill.
Залейте радиальным градиентом овал. Можно сначала выбрать градиентную заливку, а потом рисовать овал. В панели Fill (Заливка) добавьте, как в линейном градиенте, цветов, измените их, некоторые по необходимости сделайте прозрачными (Alpha =0%) или частично прозрачными (Alpha<100%). Цвет - плотный, непрозрачный, если Alpha =100%. Сохраните новый градиент: нажмите на кнопку стрелка вправо в правом верхнем углу панели Fill (Заливка) и нажмите команду Add Gradient (Добавить градиент).
|
![]() |
7. Модификация радиального градиента
Выберите инструмент Нажмите кнопку Установите указатель мыши, который примет форму стрелки на овале, закрашенном радиальным градиентом. Появится окружность, ограничивающая градиент с двумя круглыми и одним квадратным маркерами. В центре окружности будет еще один круглый маркер.
|
![]() |
Маркер в центре определяет положение центра радиального градиента. Переместите центральный маркер - переместится центр радиальной заливки. | ![]() |
С помощью квадратного маркера можно изменить ширину градиента:
|
![]() |
8. Градиентные эффекты:
|
Создайте новый файл: Ctrl-N.
Выберите инструмент
Выберите инструмент Отожмите, если нажата кнопка блокировки заливки Lock Fill. Залейте круг радиальным градиентом. (В панели Fill (Заливка) добавьте, как в линейном градиенте, цветов, измените их, некоторые по необходимости сделайте прозрачными (Alpha =0%) или частично прозрачными (Alpha<100%). Цвет - плотный, непрозрачный, если Alpha =100%.) Градиент должен состоять из последовательности сначала только светлых и потом последовательности темных цветов. Так в данном примере слева направо расположены белый, светло-голубой и черный цвета. |
![]() |
В главном меню выберите последовательно Modify (Модифицировать) - Movie(Фильм). В появившемся окне Movie Properties (Свойства фильма) кликните левой клавишей мыши в окошке Background Color (Цвет подложки):
|
![]() |
и в появившейся цветовой палитре выберите самый темный цвет вашего градиента, в данном случае - черный. Нажмите кнопку OK. | ![]() |
1. Создайте новый файл: Ctrl-N.
2. Выберите инструмент
3. Выберите инструмент Отожмите, если нажата кнопка блокировки заливки Lock Fill (Блокировка заливки). |
|
4. В панели Fill (Заливка) создайте градиент. Градиент должен состоять из чередования светлых и темных цветов. Так в данном примере слева направо расположены черный, светло-зеленый и черный цвета. Залейте круг: |
![]() |
5. В главном меню выберите последовательно Modify(Модифицировать) - Movie(Фильм). В появившемся окне Movie Properties (Свойства фильма) кликните левой клавишей мыши в окошке Background Color (Цвет подложки):
и в появившейся цветовой палитре выберите темный цвет вашего градиента, соответствующий правому цветовому порогу градиента в панели Fill (Заливка), в данном случае - черный. Нажмите кнопку OK.
|
![]() ![]() |
6.
С помощью модификатора ![]() ![]() ![]() |
|
7. Если в палитре Fill(Заливка) изменить градиент, добавить еще два цвета и слева направо порогам задать следующие цвета: черный - голубой - черный - зеленый - черный,
и с помощью
инструмента
Причем более правый светлый цвет можно сделать полупрозрачным, как показано на рисунке. |
![]() |
8. Можно таким же образом добавить еще одно кольцо, но не больше, так как число порогов в настраиваемых градиентах не превышает 8. |
11. Имитация металлических поверхностей
Используя прозрачные и полупрозрачные градиенты с различным чередование темных и светлых тонов, можно имитировать поверхности с различными свойствами. В рассматриваемом примере светлый порог плотного цвета градиента будет соответствовать блику на поверхности, а совсем прозрачные пороги по краям градиента - удаляющимся частям поверхности:
Попробуйте воспроизвести похожие поверхности. Поэкспериментируйте с градиентами. Посмотрите, как будет меняться заливка и получаемый эффект в зависимости от структуры градиента (чередования и положения светлых и темных тонов). Попробуйте создать какой-нибудь этюд из различных по структуре градиентов. |
![]() |
Для того, чтобы иметь возможность редактировать объекты независимо друг от друга, лучше всего размещать их в разных слоях.
Кроме того, прозрачность и полупрозрачность градиентов видна в том случае, если объекты, залитые такими градиентами расположены в различных слоях.
Создание сложных фильмов также невозможно без использования слоев.
Рассмотрим работу с ними.
Предварительно создайте какой-нибудь полупрозрачный градиент и нарисуйте, например, овал, залив его этим полупрозрачным градиентом.
Для того чтобы создать новый слой со своим наполнением:
1. В шкале времени выделите слой, над которым вы хотите создать новый (при выделении слой становится темным). 2. Выберите в главном меню последовательность Insert - Layer (Вставить - Слой) (в шкале времени над слоем (Layer 1) появится новый слой (в данном случае это Layer 2).
То же самое получится, если в шкале времени вы нажмете на кнопку
|
![]() |
3. Для того чтобы создать фон, выберите инструмент
Нарисуйте прямоугольник в Layer 2 - он закроет предыдущее изображение, находящееся в Layer 1. |
![]() |
4. Перетащите слой Layer 2 в шкале времени, содержащий фон, с помощью левой клавиши мыши под Layer 1. Фоновое изображение окажется позади овала. Для того, чтобы перетащить слой, нужно в шкале времени нажать на его имени левой клавишей мыши и, не отпуская клавишу мыши перетащить его в нужное место среди слоев, в данном случае - вниз. Слой при выделении будет выделен и в рабочей области. Чтобы снять выделение и посмотреть на результат, кликните левой клавишей мыши вне выделения на рабочей области: |
![]() |
Когда фильм состоит из большого количества слоев всегда лучше знать, что в каждом слое находится. Для этого слоям нужно давать конкретные названия.
1. В шкале времени кликните правой клавишей мыши по имени слоя, которое хотите изменить:
|
2. В выпавшем меню выберите команду (кликнув левой клавишей мыши) Properties (Свойства). 3. В окне Layer Properties (Свойства слоя) в поле Name (Имя) задайте имя, например, Подложка, и нажмите кнопку OK.
В шкале времени имя слоя будет изменено:
|
15. Удаление слоев
1. Кликните в шкале времени правой клавишей мыши на имени того
слоя, который нужно удалить.
2. В выпавшем меню выберите команду Delete Layer
(Удалить слой). Это же самое можно сделать, если, выделив в шкале времени
нужный слой, нажать на кнопку
|
![]() |
16. Этюд в градиентной технике (использован этюд Н.К.Трубочкиной).
Используя технологии, описанные в этом уроке, можно создавать
многослойные этюды, которые в свою очередь могут послужить основой
для ваших Flash-представлений, например:
Технология создания этого этюда очень проста:
Здесь были использованы всего два созданных градиента. |
![]() |
1.
Используя инструменты
Line
(Линия),
Pencil
(Карандаш),
Oval
(Овал),
Rectangle (Прямоугольник),
Brush
(Кисть),
Text (Текст) и
Paint Bucket (Заливка, Ведро) в нескольких слоях создайте
этюд на любую тему, выполненный в градиентной технике.
2. Сохраните свой этюд (File - Save As) под именем Family.fla.
3. Сделайте публикацию во Flash (.swf) и HTML (.htm).