15. Color Part1. Работа с цветом. Теория

Цвет – это основа зрительного восприятия человека. Если мы видим какой то предмет впервые, то первое что мы запоминаем – это цвет. Заходя на сайт нам в глаза сразу бросается цветовая палитра сайта. В успехе дизайна любого продукта, далеко не на последнем месте стоит цветовая гамма и правильная композиция этих цветов. Поэтому очень важна научиться работать с цветами, и не важно в какой среде разработки вы пишете.

Обзор формата 0×000000

Цвет в коде ActionScript можно записать двумя способами: Десятичной форме(далее x10) и Шестнадцатиричной(далее x16). Например красный цвет можно записать следующим образом:

Десятичная форма для нас не предоставляет ни какого интереса. Рассмотрим формат x16. Цвет во флеше описывается с помощью схемы RGB(red, green, blue). Число 0xff0000 – это последовательность значений трех цветовых каналов, первые два числа после 0x это значение канала red(красный), следующие два – green(зеленый), и в конце – blue(синий). Цветовой канал в RGB может принимать значение от 0 до 255, где 0 – это минимальная яркость канала, а 255 – максимальная. Таким образом запись 0xFF0000 означает что данный цвет содержит 255(ff) пунктов красного канала, и 0 пунктов зеленого и синего, в итоге получаем чистый, ярко-красный цвет. Если вам не понятно почему ff это 255, советую почитать статьи на тему преобразования числа из Десятичной формы в произвольную.

Световая схема RGB часто дополняется еще одним каналом – канал непрозрачности. Если канал непрозрачности равен 0 – значит цвет не видим, если 255 – виден полностью. Например число 0x99ff457d содержит следующие значения каналов:

  • 99 – непрозрачность
  • ff – красный канал
  • 45 – зеленый канал
  • 7d – синий канал

Значение канала непрозрачности 99 означает что непрозрачность составляет 99 пунктов из ff, т.е. 153 пункта из 255, а это означает что непрозрачность равна 153/255*100% = 60%.

Конвертация из числового значения в RGBa и обратно

Если вам известно цифровое значение цвета (x10 или x16) что бы получить каналы воспользуйтесь формулами:

Имея каналы цветов, можно получить цвет в формате x10 и x16:

А как быть с каналом прозрачности? По идее добавить в color канал прозрачности можно таким же смещением на 24 бита:

, но здесь возникает проблема: цвет color получается отрицательным. Это происходит потому что операция смещения << может быть применена только к типу int, а операция 153<<24 приводит к переполнению типа int, т.е. число 153<<24=2566914048 больше чем int.MAX_VALUE=2147483647. Обойти эту проблему можно следующим способом:

Смысл этого метода в том что если надо использовать канал Alpha, то мы сперва определяем значение цвета в x10-формате без канала Alpha. Затем из x10 цвета получаем x16 строку, и добавляем в начало x16-строку канала alpha. Получив строку вида 99ff457d мы можем преобразовать эту строку в десятичное число методом parseInt(colorX16, 16).

P.S.
С теорией покончено, к следующей статье подготовлю библиотеку с методами конвертации цвета из int10 в RGBa и обратно, а также разберем на практике методы классов FPColorRGBa и другие…

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

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

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


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




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




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


  1. nubideus

    >(color >>> 24) & 0xff;
    (у меня отображаются эти мнемоники)

    var color:uint = 0x01FFAACC;
    trace((color >>> 24 & 0xFF).toString(16));//1
    trace((color >>> 16 & 0xFF).toString(16));//ff
    trace((color >>> 8 & 0xFF).toString(16));//ac
    trace((color >>> 0 & 0xFF).toString(16));//cc

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

      В вашем комментарии наверно опечатка?
      var color:uint = 0x01FFAACC;
      trace((color >>> 8 & 0xFF).toString(16));//ac
      Потому что значение выдается aa, а не ac

  2. Tema

    int.MAX_VALUE=2147483647. Обойти эту проблему можно следующим способом:
    trace(color); // 2583643517

    ошибка toString