1. Работа с градиентами

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

В Macromedia Flash градиенты могут содержать до восьми цветов и быть:

Линейный градиент

Радиальный градиент

Цвета в градиентах могут быть непрозрачными, частично прозрачными и прозрачными.

После создания контуров любым из способов, их можно залить градиентом, используя палитру Fill (Заливка), инструмент заливки Paint Bucket (Заливка, Ведро) и его модификаторы.

2. Линейный градиент. Пример создания

1. Выберите инструмент Rectangle (Прямоугольник) и в рабочем поле (или в сцене) нарисуйте прямоугольник или квадрат (Если хотите нарисовать квадрат, нажмите клавишу Shift, рисуя прямоугольник).

2. Для того, чтобы прямоугольник залить линейным градиентом, выберите инструмент заливки Paint Bucket (Заливка, Ведро) и, кликнув в окне модификатора Fill Colors (Цвет заливки), выберите затем какой-нибудь линейный градиент, например, бело-черный.
3. Кликните левой клавишей мыши внутри прямоугольника на рабочем поле. Прямоугольник будет залит линейным черно-белым градиентом.

4. В строке состояния нажмите кнопку show Info (Показать информационную панель) и в появившейся панели выберите закладку Fill (Заливка). На экране появится панель Fill (Заливка).

В открывающемся списке Fill Style (Стиль заливки) будет указан Linear Gradient (Линейный градиент), а в горизонтальной полосе Edit gradient range (Редактирование диапазона градиента), на которой расставляются пороги градиента, будет виден черно-белый градиент, расположенный между двумя порогами.

Порог - это точка расположения сплошного цвета. Каждый порог отмечается маркером такого же цвета, как и порог. Промежутки между порогами заполняются цветовыми переходами. Цвета и положение порогов определяют цветовой переход градиента.
По умолчанию после выбора стиля градиента программа создает черно-белый линейный градиент, у которого черный порог располагается у правого края полосы Edit gradient range (Редактирование диапазона градиента), а белый - у левого. Образец такого градиента можно видеть в поле Gradient preview (Предварительный просмотр градиента) панели Fill (Заливка) и на рабочем поле.

 

3. Создание нового градиента. Добавление новых цветов в градиент

1. Добавим новые пороги:

В панели Fill (Заливка) щелкните мышью несколько раз (столько раз, сколько новых цветов нужно добавить) под горизонтальной полосой Edit gradient range (Редактирование диапазона градиента). В тех местах, где вы кликнули левой клавишей мыши, появятся маркеры нового порога: серый цвет которого будет такой же, как и в той точке полосы, в которой установлен порог.

 

2. Определим цвета каждого порога

Для определения цвета каждого порога, воспользуемся панелью Mixer (Смеситель).

Для того чтобы вызвать эту панель, нажмите в строке состояния кнопку Show Mixer (Показать панель Смеситель). Или выберите последовательность команд главного меню Window - Panels - Mixer (Окно - Панели - Смеситель). На экране появится панель Mixer (Смеситель).

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

  • Щелкните мышью на маркере белого порога под левым краем полосы Edit gradient range (Редактирование диапазона градиента) в палитре Fill (Заливка), чтобы выделить его.

 

Когда на панели Fill (Заливка) выделен маркер порога градиента (у маркера появляется черная крышечка), в левой части панели Mixer (Смеситель) вместо кнопок отображается текущий цвет этого порога.

Новый цвет можно выбрать из цветовой полосы панели Mixer (Смеситель), щелкнув в нужном месте.

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

  • Для второго слева порога установим светло-зеленый цвет.

  • Для третьего слева порога установим розовый цвет .

  • Для второго слева порога установим светло-желтый цвет

 

3. Установим для каждого порога степень прозрачности.

Установим для цветов второго и четвертого слева порогов прозрачность 50%. Для этого нужно выделить в панели Fill (Заливка) соответствующий порог и либо:

  • переместить ползунковый регулятор Alpha (Прозрачность) так, чтобы в поле ввода слева от него отобразилось значение 50%,

  • либо установить в поле ввода Alpha (Прозрачность) 50 и нажать клавишу Enter.

На всех образцах всех панелей частично прозрачный цвет будет отмечен сеткой.

 

4. Добавление созданного градиента в палитру

Нажмите кнопку Save в правом нижнем углу пане ли Fill (Заливка).

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

 

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

Чтобы снова перейти в панель Mixer (Смеситель), щелкните мышью на ярлыке Mixer (Смеситель).

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

 

5. Работа с радиальными градиентами

1. Выберите инструмент Oval (Овал) и в рабочем поле (или в сцене) нарисуйте окружность.

2. Выберите инструмент заливки Paint Bucket (Заливка, Ведро) и, кликнув в окне модификатора Fill Colors (Цвет заливки), выберите затем какой-нибудь радиальный градиент, например, бело-черный.

3. Кликните левой клавишей мыши внутри овала на рабочем поле. Овал будет залит радиальным черно-белым градиентом.

4. В строке состояния нажмите кнопку Show Info (Показать информационную панель) и в появившейся панели выберите закладку Fill (Заливка). На экране появится панель Fill (Заливка). Эту же панель можно вызвать из главного меню: для этого выберите последовательность команд главного меню Window - Panels - Fill (Окно - Панели - Заливка).

5. Измените цвет и прозрачность каждого порога цвета с помощью панели Mixer (Смеситель).

6. Отредактируйте градиент, перемещая маркеры цвета.

7. Для добавления нового радиального градиента в палитру фильма нажмите на кнопку стрелка вправо в правом верхнем углу панели Fill (Заливка) и нажмите команду Add Gradient (Добавить градиент).

6. Создание радиального градиента

Создайте новый файл: Ctrl-N.

Выберите инструмент Oval (Овал) и нарисуйте овал (Если хотите нарисовать круг, нажмите клавишу Shift, рисуя овал).

Выберите инструмент Paint Bucket (Заливка, Ведро).

Отожмите, если нажата кнопка блокировки заливки Lock Fill.

 

Залейте радиальным градиентом овал.

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

В панели Fill (Заливка) добавьте, как в линейном градиенте, цветов, измените их, некоторые по необходимости сделайте прозрачными (Alpha =0%) или частично прозрачными (Alpha<100%). Цвет - плотный, непрозрачный, если Alpha =100%.

Сохраните новый градиент: нажмите на кнопку стрелка вправо в правом верхнем углу панели Fill (Заливка) и нажмите команду Add Gradient (Добавить градиент).

 

 

7. Модификация радиального градиента

Выберите инструмент Paint Bucket (Заливка, Ведро).

Нажмите кнопку Transform Fill (Преобразование заливки) в секции Options (Параметры) панели инструментов.

Установите указатель мыши, который примет форму стрелки на овале, закрашенном радиальным градиентом.

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

 

Маркер в центре определяет положение центра радиального градиента. Переместите центральный маркер - переместится центр радиальной заливки.

С помощью квадратного маркера можно изменить ширину градиента:

  • Установите указатель мыши, который примет форму двунаправленной стрелки на квадратный маркер.

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

 

 

8. Градиентные эффекты:

Вспышка
Свечение
Имитация металлических поверхностей

9. Вспышка

Создайте новый файл: Ctrl-N.

Выберите инструмент Oval (Овал) и нарисуйте круг (рисуя овал, нажмите клавишу Shift).

Выберите инструмент Paint Bucket (Заливка, Ведро).

Отожмите, если нажата кнопка блокировки заливки Lock Fill.

Залейте круг радиальным градиентом. (В панели Fill (Заливка) добавьте, как в линейном градиенте, цветов, измените их, некоторые по необходимости сделайте прозрачными (Alpha =0%) или частично прозрачными (Alpha<100%). Цвет - плотный, непрозрачный, если Alpha =100%.)

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

Так в данном примере слева направо расположены белый, светло-голубой и черный цвета.

В главном меню выберите последовательно Modify (Модифицировать) - Movie(Фильм).

В появившемся окне Movie Properties (Свойства фильма) кликните левой клавишей мыши в окошке Background Color (Цвет подложки):

 

и в появившейся цветовой палитре выберите самый темный цвет вашего градиента, в данном случае - черный. Нажмите кнопку OK.

 

10. Свечение

1. Создайте новый файл: Ctrl-N.

2. Выберите инструмент Oval (Овал) и нарисуйте круг (рисуя овал, нажмите клавишу Shift).

3. Выберите инструмент Paint Bucket (Заливка, Ведро).

Отожмите, если нажата кнопка блокировки заливки Lock Fill (Блокировка заливки).

4. В панели Fill (Заливка) создайте градиент. Градиент должен состоять из чередования светлых и темных цветов.

Так в данном примере слева направо расположены черный, светло-зеленый и черный цвета. Залейте круг:

5. В главном меню выберите последовательно Modify(Модифицировать) - Movie(Фильм).

В появившемся окне Movie Properties (Свойства фильма) кликните левой клавишей мыши в окошке Background Color (Цвет подложки):

 

 

и в появившейся цветовой палитре выберите темный цвет вашего градиента, соответствующий правому цветовому порогу градиента в панели Fill (Заливка), в данном случае - черный. Нажмите кнопку OK.

 

6. С помощью модификатора Transform Fill (Преобразование заливки) инструмента Paint Bucket (Заливка, Ведро) можно трансформировать "свечение" внутри первоначального овала. Если вы выберите инструмент Arrow (Стрелка) и его модификаторы: Rotate (Поворот) и Scale (Масштаб), то можно еще поворачивать и масштабировать полученный вариант "свечения", по отношению к первоначально нарисованному овалу.

7. Если в палитре Fill(Заливка) изменить градиент, добавить еще два цвета и слева

направо порогам задать следующие цвета:

черный - голубой - черный - зеленый - черный,

и с помощью инструмента Paint Bucket (Заливка, Ведро) залить предыдущий овал, получим свечение с двумя расходящимися кольцами, которые формируют светлые цвета в пятицветном градиенте:

 

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

8. Можно таким же образом добавить еще одно кольцо, но не больше, так как число порогов в настраиваемых градиентах не превышает 8.

11. Имитация металлических поверхностей

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

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

 

 

Попробуйте воспроизвести похожие поверхности.

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

 

12. Использование слоев. Работа со слоями

Для того, чтобы иметь возможность редактировать объекты независимо друг от друга, лучше всего размещать их в разных слоях.

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

Создание сложных фильмов также невозможно без использования слоев.

Рассмотрим работу с ними.

13. Создание нового слоя

Предварительно создайте какой-нибудь полупрозрачный градиент и нарисуйте, например, овал, залив его этим полупрозрачным градиентом.

Для того чтобы создать новый слой со своим наполнением:

1. В шкале времени выделите слой, над которым вы хотите создать новый (при выделении слой становится темным).

2. Выберите в главном меню последовательность Insert - Layer (Вставить - Слой) (в шкале времени над слоем (Layer 1) появится новый слой (в данном случае это Layer 2).

То же самое получится, если в шкале времени вы нажмете на кнопку Insert Layer (Добавить слой).

 

3. Для того чтобы создать фон, выберите инструмент Rectangle (Прямоугольник).

Нарисуйте прямоугольник в Layer 2 - он закроет предыдущее изображение, находящееся в Layer 1.

4. Перетащите слой Layer 2 в шкале времени, содержащий фон, с помощью левой клавиши мыши под Layer 1. Фоновое изображение окажется позади овала. 

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

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

14. Переименование слоёв

Когда фильм состоит из большого количества слоев всегда лучше знать, что в каждом слое находится. Для этого слоям нужно давать конкретные названия.

1. В шкале времени кликните правой клавишей мыши по имени  слоя,  которое хотите изменить:

2. В выпавшем меню выберите команду (кликнув левой клавишей мыши) Properties (Свойства).

3. В окне Layer Properties (Свойства слоя) в поле Name (Имя) задайте имя, например, Подложка, и нажмите кнопку OK.

В шкале времени имя слоя будет изменено:

15. Удаление слоев

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

 

2. В выпавшем меню выберите команду Delete Layer (Удалить слой). Это же самое можно сделать, если, выделив в шкале времени нужный слой, нажать на кнопку Delete Layer (Удалить слой) в нижней части шкалы времени.

16. Этюд в градиентной технике (использован этюд Н.К.Трубочкиной).

Используя технологии, описанные в этом уроке, можно создавать многослойные этюды, которые в свою очередь могут послужить основой для ваших Flash-представлений, например:

Технология создания этого этюда очень проста:

  1. С помощью  инструмента Rectangle (Прямоугольник) рисуются прямоугольники с различной полупрозрачной заливкой (сначала с радиальной, трансформированной, а затем с линейной трансформированной) - создается небо и море. (2 слоя). Прямоугольники рисуются на всю рабочую область.
  2. Карандашом   Pencil (Карандаш) рисуются (в разных слоях) пригорки (замкнутые контуры), стрекозы и росток, и заливаются теми же полупрозрачными градиентами. Для детальной прорисовки воспользуйтесь увеличением объектов.
  3. С помощью инструмента Oval (Овал) рисуется солнце.
  4. С помощью инструмента   Text (Текст) делается надпись, масштабируется, превращается в графику (Modify (Модифицировать) - Break Apart (Разбить на части)). Далее масштабируется каждая буква и как графическая фигура заливается полупрозрачным градиентом.

Здесь были использованы всего два созданных градиента.

 

17. Задание. Этюд в градиентной технике

1. Используя инструменты Line (Линия), Pencil (Карандаш), Oval (Овал), Rectangle (Прямоугольник), Brush (Кисть),   Text (Текст) и Paint Bucket (Заливка, Ведро) в нескольких слоях создайте этюд на любую тему, выполненный в градиентной технике.

2. Сохраните свой этюд (File - Save As) под именем Family.fla.

3. Сделайте публикацию во Flash (.swf) и HTML (.htm).