В этом уроке вы узнаете, как изменить цвет любого визуального объекта при помощи класса ColorTransform. Используя этот класс, вы сможете применить один оттенок цвета к любому объекту в любое время.
В этом уроке рассмотрим следующие вопросы:
- Изменение цвета
- Практический пример
- Другие свойства класса ColorTransform
- Получение существующего свойства ColorTransform
В примере ниже используется класс ColorTransform для изменения цвета объекта при нажатии на соответствующую кнопку.
Изменение цвета
В отличие от большинства других простых свойств, таких как alpha, x, y, width и height, цвет объекта не может быть изменен напрямую у объекта. Вместо этого вы должны создать новый экземпляр класса ColorTransofm. Любое желаемое преобразование должно быть применено к данному экземпляру, а затем этот экземпляр должен быть использован для перезаписи фактического свойства ColorTransform, который привязан к объекту. Это свойство является подсвойством свойства Transform экранных объектов, таких как Shape, Sprite и MovieClip.
Этот процесс может быть выполнен через обобщенный код ниже, где myTargetObject — ссылка на объект, находящийся на сцене, у которого необходимо изменить цвет на «белый»(0xFFFFFF).
var myColorTransform = new ColorTransform();
myColorTransform.color = 0xFFFFFF;
myTargetObject.transform.colorTransform = myColorTransform;
Это довольно упрощенное использование объекта colorTransform, далее мы рассмотрим другой практический пример.
Практический пример
Давайте создадим небольшой пример, в котором нарисуем квадрат и изменим его цвет при помощи объекта ColorTransform.
Начнем создание нового объекта (формы) с ключевого слова new. Нажмите правой кнопкой мыши на кадр временной шкалы и выберите «Actions» , чтобы открыть панель редактирования кода. Весь проект будет описан при помощи кода и ни один объект не будет создан вручную.
Первый шаг в данном уроке — нарисовать прямоугольник, у которого в дальнейшем изменим цвет. Чтобы сделать это — воспользуемся свойством класса graphics. Назовем объект my_square, нарисуем его при помощи метода drawRect(), а затем сделаем его видимым на сцене, используя метод addChild().
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x00FF00,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
Вы можете узнать больше о том, как объекты добавляются на сцене и отображаются, прочитав следующую тему: ActionScript: Display List (Список отображения)
Можете протестировать flash-приложение, выбрав в главном меню Control->Test Movie или нажав комбинацию клавиш ctrl+Enter.
Чтобы изменить цвет объекта нужно создать экземпляр класса ColorTransform. Чтобы сделать это, нужно использовать ключевое слово var вместе с желаемым именем экземпляра:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = new ColorTransform();
Теперь можно изменить некоторые атрибуты данного экземпляра ColorTransform, самый простой способ изменить цвет объекта — это использовать свойство color, которое принимает значения цвета в формате RGB. Если необходимо покрасить прямоугольник в красный, то нужно использовать RGB-код 0xFF0000:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = new ColorTransform();
my_color.color = 0xFF0000;
Теперь, когда объект my_color настроен, необходимо его применить к объекту my_square, чтобы преобразовать цвет:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = new ColorTransform();
my_color.color = 0xFF0000;
my_square.transform.colorTransform = my_color;Не забывайте, что свойство ColorTransform является подсвойством свойства Transform.
Вот что должно получиться. Вы можете протестировать приложение и увидеть, что прямоугольник стал красного цвета.
Этот метод можно использовать для изменения цвета любого объекта. Все, что нужно сделать — это просто изменить RGB-код в свойстве color, а затем применить свойство ColorTransform к объекту.
Другие свойства класса ColorTransform
В дополнение к возможности установки цветов напрямую в качестве RGB-кода, также возможно настраивать следующие свойства:
-
alphaMultiplier— используется для настройки прозрачности объекта — может принимать десятичные значения между 0 и 1. -
alphaOffset— используется для воздействия на существующую прозрачность объекта — по умолчанию значение равно нулю, но может быть установлено до 255 или снижено до -255. -
blueMultiplier— используется для настройки значения синего составляющего цвета — может принимать значения между 0 и 1. -
blueOffset— используется для воздействия на существующее значение синего составляющего цвета — по умолчанию равно нулю, но может быть установлено от 255 до -255. -
greenMultiplier— используется для настройки значения зеленого составляющего цвета — может принимать значения между 0 и 1. -
greenOffset— используется для воздействия на существующее значение зеленого составляющего цвета — по умолчанию равно нулю, но может быть установлено от 255 до -255. -
redMultiplier— используется для настройки значения красного составляющего цвета — может принимать значения между 0 и 1. -
redOffset— используется для воздействия на существующее значение красного составляющего цвета — по умолчанию равно нулю, но может быть установлено от 255 до -255.
Можно использовать данные свойства вместе, чтобы применить определенный цвет, который нужен. Вот пример, как это можно использовать:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = new ColorTransform();
my_color.alphaMultiplier = 0.5;
my_color.blueOffset = 150;
my_color.greenOffset = 100;
my_color.redOffset = -50;
my_square.transform.colorTransform = my_color;Получение существующего свойства ColorTransform
Иногда необходимо получить существующее свойство ColorTransform объекта и затем обновить это свойство, вместо того, чтобы создавать новое. Чтобы сделать это, нужно просто создать новую переменную и сохранить ссылку на существующий экземпляр ColorTransform в ней:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = my_square.transform.colorTransform;Затем можно изменить некоторые значения или изменить определенную составляющую цвета без воздействия на остальное:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = my_square.transform.colorTransform;
my_color.redOffset += 100;Наконец, мы применяем свойство так же, как делали раньше:
var my_square:Shape = new Shape();
my_square.graphics.beginFill(0x000000,1);
my_square.graphics.drawRect(10,10,100,100);
addChild(my_square);
var my_color:ColorTransform = my_square.transform.colorTransform;
my_color.redOffset += 100;
my_square.transform.colorTransform = my_color;Тот же подход можно использовать для изменения других свойств.
На этом урок закончен, можете поэкспериментировать с другими свойствами класса ColorTransform, которые описаны в руководстве ActionScript 3.0 , чтобы лучше понять принцип его работы.
Если вам понравился урок и оказался полезным — поделитесь им в социальных сетях (значки внизу), это поможет развитию сайта.
Источник: http://www.republicofcode.com/tutorials/flash/as3colortransform/