Градиентная заливка в macromedia flash 8

Обновлено: 03.07.2024

  1. Нарисуйте круг, затем в правой части окна выберите палитру Цвет. В списке Типоткрытой панели выберите Радиальный.
  2. Для выбора цветов градиента дважды щелкните сначала на левом маркере (квадратике ) и выберите цвет, а затем точно также выберите цвет для правого маркера.
  3. На панели инструментов выберите Ведро с краской (PaintBucket) и щелкните курсором внутри круга. Создать градиентную заливку можно и выбрав вместо параметра Радиальный пункт Линейный. Поэкспериментируйте, выбирая другие цвета.
  1. Запустите Flash и нарисуйте любую фигуру.
  2. На палитре цвет раскройте список Тип заливки и выберите Растровое изображение.
  3. В открывшемся окне Импортировать в библиотеку выберите нужный файл (на ваш вкус).
  4. Файл помещается в палитру Библиотека (окно → Библиотека). В ней при необходимости можно создать папку для импортированных изображений.
  5. Для того чтобы выбрать новый файл, необходимо воспользоваться кнопкой Импорт панели Цвет.


Задание 3. Создание градиента
(Заливка →палитра Цвет → тип → Линейный или Радиальный)
  1. Создайте новый документ Flash.
  2. Создайте линейный градиент, содержащий четыре порога (создание порога: щелчок левой кнопкой по шкале градиента).
  3. Создайте радиальный градиент, содержащий семь порогов в соответствии с цветами радуги.
  4. Сохраните полученные градиенты в палитру Образцы (на палитре → Добавить образец).
  5. Нарисуйте три квадрата (инструмент Прямоугольник).
  6. Примените к одному из них радиальную, к другому – линейную заливку, третий квадрат залейте растровым изображением.
  7. Сохраните ролик с именем «Заливка.fla».

Задание 4. Импорт изображений. Векторизация растрового изображения

  1. Создайте новый документ Flash.
  2. Импортируйте 2-3 изображения в рабочую область (менюФайл → Импорт → В рабочую область).
  3. Проведите векторизацию растрового изображения (меню Изменить → Растровое изображение → Векторизация…)
  4. Сохраните ролик, назвав его Картинки.fla.

Краткие сведения: Трансформация заливки

  1. Для изменения заливки используется Инструмент преобразования градиента (находится в свитке с инструментом Свободное преобразование).
  2. Изменение градиентной заливки:
  • Щелчок по фигуре, залитой градиентной заливкой.
  • Появятся маркеры изменения градиента:
  • центральный маркер – смещение центра заливки;
  • угловой маркер – вращение заливки;
  • маркер со стрелкой – пропорционально масштабирует заливку, тем самым меняя расстояние между порогами градиента.
  1. Трансформация растровой заливки:
  • Щелчок по фигуре, залитой растровой заливкой.
  • Фрагмент изображения (плашка) будет окружен в рамку с различными типами маркеров:
    • центральный маркер – смещение центра заливки;
    • левый угловой маркер пропорционально масштабирует заливку по горизонтали и вертикали;
    • левый боковой маркер масштабирует заливку по горизонтали;
    • нижний маркер масштабирует заливку по вертикали;
    • правый угловой маркер поворачивает заливку;
    • правый боковой маркер сдвигает заливку по вертикали;
    • верхний маркер сдвигает заливку по горизонтали.
    1. Все изменения происходят относительно центра заливки.
    1. Создайте новый документ
    2. Откройте ролик Заливка.fla.
    3. Проведите трансформацию заливки прямоугольников ( инструмент Преобразование градиента).
    4. Сравните действие маркеров трансформации в разных типах заливок.
    5. Сохраните ролик.

    Вопросы для самоконтроля: Контрольные вопросы:

    Градиентом называется плавный переход одного цвета в другой. Сложные градиенты могут содержать несколько таких переходов. В 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 (Преобразование заливки) .

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

    Свечение

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

    Градиентная заливка представляет собой плавный переход от одного цвета к другому и может быть использована также и для обводки. Она может быть линейной или радиальной. Стандартную заливку можно выбрать и в палитре цветов, но чтобы задать в ней другой цвет или создать переход между несколькими цветами, надо воспользоваться панелью Fill (Заливка). Выберите в раскрывающемся списке этой панели тип заливки: Linear Gradient (Линейный градиент) или Radial Gradient (Радиальный градиент):


    Внизу панели находятся стандартный цвета заливки. При выборе любого из них справа на экране появляется панель настройки градиентной заливки. Цвета ползунков определяют цвета перехода, а их положение – его ширину. Для управления цветом обоих ползунков служит индикатор цвета сверху от шкалы. Снизу от шкалы находится окно предварительного просмотра. В нем отражаются все действия над градиентом, чтобы вы могли представить, как будет выглядеть заливка при данной настройке.
    Работать с градиентными заливками достаточно просто, так что выполним редактирование градиентной заливки на практическом примере.
    Выберите инструмент Paint Bucket (Ведро с краской) и в качестве цвета заливки укажите градиентную заливку. Теперь щёлкните на инструмент Oval (Овал) и нарисуйте круг, для чего удерживайте нажатой клавишу Shift. Вы видите, что он автоматически закрасился градиентом. Сделаем градиентный переход более резким. Для этого выберите инструмент Selection (Выделение) и щёлкните один раз по заливке. Теперь переместите один или оба ползунка к центру. Усложним градиентный переход, добавив к нему еще два цвета. Верните ползунки на крайние позиции и добавьте к ним еще два ползунка, щелкнув прямо под шкалой градиентов. Задайте цвета для этих ползунков. Получившийся контур должен выглядеть примерно так, как на рисунке:


    Линейный градиент создаётся аналогично радиальному, только для этого необходимо в панели настройки градиента в поле Type (Тип) выбрать значение Linear (Линейный).

    Управление цветом в Macromedia Flash MX 2004 осуществляется с помощью «Селектора цвета», который может быть в двух состояниях (рис. 11, а и б).

    Рис. 11. Селектор цвета в Macromedia Flash MX 2004

    С помощью селектора цвета можно управлять как цветом контура, так и цветом и типом заливки.

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

    Прозрачностью можно управлять, изменяя значение коэффициента альфа (Alpha), который может меняться в диапазоне от 0% (полная прозрачность), до 100% (отсутствие прозрачности).

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

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

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

    Градиентные заливки

    В Macromedia Flash MX 2004 градиентные заливки бывают двух типов: линейные и радиальные (рис. 12). Управление градиентными заливками также осуществляется в «Селекторе цвета».

    Рис. 12. Градиентные заливки в Macromedia Flash MX 2004

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

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

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

    Градиентные заливки можно трансформировать, для этого необходимо выделить трансформируемую заливку и выбрать на панели инструментов «Трансформатор заливки» (Fill Transform Tool). После чего произвести требуемые изменения, используя маркеры трансформации для линейных (рис. 13, а) и радиальных (рис. 13, б) заливок.

    Рис. 13. Трансформация градиентных заливок в Macromedia Flash MX 2004

    Растровые заливки

    Помимо градиентных, в Macromedia Flash MX 2004 могут использоваться растровые заливки, в которых поле заливки заполняется многократно повторяемым рисунком.

    Для того, чтобы создать растровую заливку, необходимо Импортировать в библиотеку требуемый файл, содержащий рисунок, который будет использован в данной заливке. Для этого необходимо меню «File» выбрать пункт «Import», а в нем подпункт «Import to Library», после чего выбрать требуемый файл. Содержащиеся в библиотеке файлы можно посмотреть в окне управления библиотекой образцов, о которой речь пойдет в следующих главах. Для вызова данного окна необходимо нажать комбинацию <Ctrl> + <L>.

    После того как один или несколько файлов будут находиться в библиотеке образцов, требуется в «Селекторе цвета» выбрать тип заливки «Bitmap», а далее указать образец, который будет использован в заливке.

    Как и градиентные, растровые заливки также можно трансформировать (рис. 14).

    Читайте также: