ActionScript 3.0: Изменение цвета при помощи ColorTransform

В этом уроке вы узнаете, как изменить цвет любого визуального объекта при помощи класса ColorTransform. Используя этот класс, вы сможете применить один оттенок цвета к любому объекту в любое время.

В этом уроке рассмотрим следующие вопросы:

  1. Изменение цвета
  2. Практический пример
  3. Другие свойства класса ColorTransform
  4. Получение существующего свойства 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

Чтобы изменить цвет объекта нужно создать экземпляр класса 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.

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

изменение цвета при помощи класса ColorTransform

Этот метод можно использовать для изменения цвета любого объекта. Все, что нужно сделать — это просто изменить 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/

Комментировать

Почта не публикуется.Обязательные поля отмечены *