Главная   Разработки   Галерея   Портфолио   Обо мне    

  Методические разработки

Flash технологии (Macromedia Flash 8)
Основной курс по ИКТ
 

 

I МОДУЛЬ


II МОДУЛЬ

III МОДУЛЬ

 

 

 

  Красноярский край  
     
  Карта Красноярского края  
 
Flash-технологии - 1 модуль
I МОДУЛЬ II МОДУЛЬ III МОДУЛЬ

Главная
Интерфейс Flash
Панель инструментов Tools
Инструменты Tools
Публикация и экспорт
Основные панели
Градиентная техника
Особенности рисования
Имитация объёмных фигур
Фильтры
 

Рисование во Flash - Градиентная техника

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

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

  • линейными (Linear). В линейном градиенте полосы разных цветов параллельны друг другу.
  • радиальными (Radial), или круговыми. В круговом или радиальном - располагаются вокруг центра заливки в виде концентрических окружностей или овалов.

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

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

Линейный градиент. Пример создания
Рассмотрим пример создания многоцветного линейного градиента.

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

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

Панель Color Mixer (Смеситель)

В панели Color Mixer можно отображать, задавать и редактировать цвета в режимах RGB, HSB. Здесь же можно задавать цвет и прозрачность в цифровом коде, что очень важно при создании единого цветового решения в различных файлах, менять цветовое оформление градиентной заливки.

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

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

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

Создание нового градиента. Добавление новых цветов в градиент
Чтобы создать новый многоцветный градиент, нужно в указанный в поле Gradient preview (Предварительный просмотр градиента) панели Color Mixer (горизонтальная цветовая полоса) градиент

    • добавить новые цвета, добавив новые пороги,
    • после чего переопределить цвета порогов.

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

Для каждого цветового порога градиента можно указать также степень прозрачности. Установим для цветов второго и четвертого порогов слева прозрачность 50%.

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

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

Поперемещайте все маркеры под полосой Edit gradient range (Редактирование диапазона градиента) влево и вправо. Чем больше расстояние между маркерами, тем больше ширина полосы цвета в градиенте. Маркеры можно перемещать, пересекая другие маркеры, в этом случае будет меняться последовательность цветов в градиенте.

Задание: Попробуйте самостоятельно сделать вот такую заливку.

Модификация линейной градиентной заливки

После того как заливка градиентным цветом выполнена, ее можно модифицировать. Допускается изменять положение центра градиента, ширину его полос и угол поворота. Изменение или трансформация градиента осуществляется с помощью инструмента Gradient Transform (Преобразование заливки) .

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

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

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

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

Переместив круглый маркер центра вправо, отпустите клавишу мыши:

Теперь повернем градиент.

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

Нажмите и удерживайте левую кнопку мыши. Не отпуская левую кнопку мыши, переместите указатель мыши против часовой стрелки на 90 градусов:

Отпустите левую кнопку мыши. Градиент повернется на такой же угол.

Изменим ширину градиента.

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

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

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

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

Рассмотрим пример создания многоцветного радиального градиента.

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

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

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

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

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

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

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

Круглый маркер рядом с квадратным изменяет радиус градиента:

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

Второй круглый маркер на окружности, трансформирующей градиент, поворачивает его:

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

Технологии создания различных эффектов с помощью градиентов

Рассмотрим технологии создания вспышек, свечений и эффекта, связанного с имитацией металлических поверхностей.

Вспышка
Создайте новый файл: Ctrl-N.

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

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

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

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

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

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

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

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

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

С помощью инструмента Free Transform можно трансформировать "вспышку":

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

Свечение

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

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

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

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

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

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

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

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

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

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

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

Задание: попробуйте создать вот такую заливку

И подобный пейзаж на любую тему

Дополнительные примеры


Это была 10 угольная звезда

 

 


обратите внимание, заливка отсутствует, есть только контур.

 

Дополнительные возможности © Шишканов Денис Владимирович (DeN)

Примеры использования градиента

"Закат"



"Рассвет в океане"




"Шар на плоскости"




"Прожектор и шар"




"Кристалл"


"Лазер"





"Красная звезда"




"Белая звезда"






"Хром"



"Золото"



 
Назад Далее

 

 




   Главная   Разработки   Галерея   Портфолио   Обо мне    

Красноярский краевой Дворец пионеров и Школьников ©2005-2008