23. Color Part3. Градиент – радуга разработки

Градиент – очень интересный инструмент, с его помощью можно реализовать различные эффекты. Например плавный переход от одной картинки к другой (подвигайте мышкой по картинке):

Здесь должна быть флешка. Установите Flash Player


Код этой флешки раз берем чуть ниже.

Для рисования градиента существует метод beginGradientFill у объекта sprite.graphics.

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

Здесь должна быть флешка. Установите Flash Player

Разберем подробнее параметры передаваемые методу beginGradientFill:

  1. GradientType.LINEAR : тип градиента, в нашем случае линейный(т.е. прямой). Можно еще указать GradientType.RADIAL, тогда градиент будет круговой
  2. [0xff0000, 0xffff00] : Массив цветов перехода. Если вам нужен градиент из трех и более цветов – просто добавьте эти цвета в массив
  3. [1, 1] : массив прозрачностей цветов указанных в предыдущем параметру. В данном случае оба цвета будут 100% не прозрачные. Длина этого массива должна совпадать с длиной массива цветов
  4. [0, 255] : массив ratios – это массив распределения ваших цветов по всему полю градиента. Подробнее чуть ниже
  5. matrix : матрица градиента, как создавать можно посмотреть в выше указанном примере.

Что такое ratios?
В методе beginGradientFill четвертым параметром передается массив-ratios. Давайте разберем что он означает. Представьте что у вас есть поле для отрисовки градиента (поле задается в методе matrix.createGradientBox(200, 80); в примере выше). Так вот что бы FlashPlayer знал с какого места необходимо рисовать переходы точек служит массив ratios. Например в выше указанном примере этот массив имеет значение [0, 255]. Это означает что первая точка будет нарисована в начале(значение 0) поля градиента, а вторая точка будет в конце(значение 255) поля градиента, а между этими точками будет плавный переход. Разберем небольшой пример: если вы создадите поле градиента с размерами 200×80, тип градиента линейный, с двумя цветами(красный и желтый)=[0xff0000, 0xffff00] и массивом ratios=[50, 100], то у вас получится градиент в котором переход начинается в точке с координатой по x 39px и заканчивается в точке с координатой по x 78px. Область от 0px до 39px будет чисто красной, а область от 78px до 200 – чистой желтой. Как мы определили первую границу 39px? да очень просто, взгляните внимательнее на массив ratios=[50, 100]. Т.к. максимальное значение в массиве ratios это 255, то можно определить значения первой границы в процентах: 50/255 = 0.196. Т.е. первая точка находится в координате 0.196 от общего размера поля градиента. Т.к. поле градиента у нас имеет длину 200px, то получаем первую точку: 0.196*200=39px. Аналогичным способом вычисляется и вторая точка. Для закрепления выше: массив ratios=[0, 127, 255] означает что в градиенте будут три точки, одна в начале, вторая по середине и третья в конце.

Если вам необходимо повернуть градиент на определенный угол, это можно сделать с помощью параметра matrix. В примере ниже показано как можно повернуть линейный градиент на 45 градусов:

Здесь должна быть флешка. Установите Flash Player

Код от флешки с эффектом перехода в начале страницы:

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 1289 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. Xumar

    Хотелось бы увидить коментарий к последнему примеру коду многое не понятно , то есть я могу конешно тупо скопирвоать и у себя попробывать ну это уже как то не так получиться ( хочеться понимать код .

    1. Serious Sam Автор записи

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

    1. Serious Sam Автор записи

      Статья исправлена. Добавлены комментарии. Так же добавил подробное описание параметра ratios. Если что не понятно – жду вопросы в комментариях :)