Читать книгу Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript - Гэри Розенцвейг - Страница 54

Исходные файлы: Colorchange.fla, Colortransform.fla, Gradualchange.fla, Spiral.fla

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

Задача проекта

Задача этого проекта – создать ролик, который будет изображать вращающуюся спираль с постепенно меняющимися цветами. При этом вы изучите, как функционируют объект Color и свойство клипа _rotation.

Подход

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

Объект Color

Объект Color предназначен для изменения цветов клипа. Его можно представить как набор функций, позволяющих узнавать и управлять цветами клипа.

Сначала надо создать объект Color, связанный с клипом, который вы собираетесь изменять. Это можно сделать следующим образом:

myColorObject = new Color(«myMovieClipName»);

Совет

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

Существует два способа определения и изменения цветового объекта. Первый – это непосредственно определить цвет при помощи двух строк кода. Сначала создайте новый flash-ролик и поместите на рабочее поле один клип. Назовите копию клипа «myMovieClip». Затем поместите следующий сценарий в главную временную шкалу:

myColorObject = new Color(«myMovieClip»);

trace(myColorObject.getRGB()).toString());

Внимание!

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

Во время тестирования ролика автоматически откроется окно Output, в котором будет содержаться значение "0". Это результат выполнения команды trace.

Примечание

Функция toString преобразует многие типы ActionScript, например числовые в строку текста. Она, например, удобна для преобразования цветов в числовые значения для вывода при помощи команды trace.

Более интересный результат можно получить, изменяя цвет ролика. Чтобы это сделать, выделите клип и на панели Properties выберите в выпадающем меню Color пункт Advanced, после чего нажмите кнопку Settings. В появившемся окне Advanced Effect введите значение 128 в поля R,G и B. Введите значение 128 в поля R, G и B (рис. 5.3) в правой колонке. В левой колонке выставьте значение 0.

Рисунок 5.3. Панель Advanced Effect предназначена для изменения цвета клипа

Теперь при тестировании ролика в итоговое окно будет помешено значение 8421504, что соответствует значениям 128 полей R, G и B. Немного изменив функцию toString, вы вместо десятичного значения получите шестнадцатеричное. Оно будет выглядеть как значение RGB, используемое дизайнерами для задания цветов.

myColorObject = new Color(«myMovieClip»);

trace((myColorObject.getRGB()).toString(16));

Примечание

Описание new позволяет создавать новые копии объектов наподобие объекта Color. Оно также используется для создания новых массивов и ваших собственных объектных конструкций. Если на данном этапе оно не понятно, не беспокойтесь. Для того чтобы использовать описание new, полное понимание не требуется.

Результатом в данном случае является значение 808080, шестнадцатеричное число, представляюшее собой средний серый цвет (красная, зеленая и синяя составляюшие, которые имеют значение 128, среднее между 0 и 255). Значение 16 в качестве параметра функции toString() задает преобразование числовых значений в шестнадцатеричные.

Теперь, когда вы умеете получать RGB-значение цвета клипа, следующим шагом будет его изменение. Это можно сделать при помоши функции setRGB. Она имеет только один параметр: шестнадцатеричное значение, которое вы хотите использовать. Приведем пример с тем же роликом, но с несколько измененным кодом:

myColorObject = new Color(«myMovieClip»);

myColorObject.setRGB(0xFF0000);

Сочетание 0x указывает, что за ним следует шестнадцатеричное число. Приведенное в коде число FF0000 соответствует красному цвету. При запуске цвет ролика изменится на красный независимо от исходного. Действие этих двух строк кода продемонстрировано в примере Colorchange.fla, который вы найдете на Web-сайте.

Трансформация цветов

Более универсальным способом изменения цвета является использование метода setTransform() объекта Color. Аргументом метода setTransform является объект, содержаший восемь параметров цвета. Параметры ra, ga и ba задают относительное смешение в процентах (от -100 % до 100 %) для красной, зеленой и синей составляюших цвета соответственно. Параметры rb, gb и bb задают абсолютное (от -255 до 255) значение цветов. Последние два параметра – aa и ab определяют значение свойства _alpha (прозрачность) клипа.

На рис. 5.3 изображены все шесть составляюших, плюс два значения, преобразуюших альфа-канал (прозрачность изображения).

Объект преобразования цвета может содержать различные значения каждой из восьми составляюших. Эти значения задаются путем создания новой переменной-объекта. Приведем пример:

myColourTransform = {rb:255, bb:0, gb:0};

Данный объект задает изменение цвета любого цветового объекта на красный. Он включает три параметра: абсолютные значения красного, зеленого и синего цветов. Кроме того, вы можете задавать относительное смешение при помоши параметров ra, ga и ba.

Имея объект преобразования цвета и цветовой объект, можно изменять цвет клипа. Следуюшие три строки изменят цвет клипа на красный:

myColor = new Color(«myMovieClip»);

myColorTransform = {rb:255, bb:0, gb:0};

myColor.setTransform(myColorTransform);

В данном примере выполняется то же действие, что и в предыдушем, но другим способом. Просмотреть ролик Colortransform.fla можно на Web-сайте поддержки книги.

Преимушество функции setTransform над функцией setRGB состоит в большем контроле над значениями цветов. Например, числа, задаюшие цвет, могут быть переменными ActionScript, а не жестко закодированными числовыми значениями. Кроме того, эти значения могут периодически изменяться, тем самым периодически изменяя цвет объекта.

Следуюший клип изменяет значение красного цвета клипа от 0 до 255. В результате клип начинается с изображения черного эллипса, который затем постепенно меняет свой цвет на красный. Для создания цветового объекта и объекта трансформации цвета используется событие load. Там же создается переменная n. Следуюшее за ним событие enterFrame используется для преобразования цвета, применения преобразования к клипу и увеличения значения переменной n.

onClipEvent(load) {

myColor = new Color(this);

myColorTransform = {rb:255, bb:0, gb:0};

n = 0;

}

onClipEvent(enterFrame) {

myColorTransform.rb = n;

myColor.setTransform(myColorTransform);

n++;

}

Примечание

Оператор ++ увеличивает значение переменной на единицу. Таким образом, если значение n равно 7, то строка n++ увеличивает его до 5. Для уменьшения значения используется оператор –.

В данном примере значение переменной n, описываюшей красный цвет, изменяется от 0 до 255. При достижении максимального значения 255 цвет больше не меняется. Применение сценария демонстрируется на Web-сайте в ролике Gradualtransform.fla.

Вся эта информация о цветах и преобразовании может использоваться для создания специальных эффектов. Давайте попробуем сделать что-нибудь более интересное.

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

В качестве исходного для красного, зеленого и синего цветов берется значение 255, которое изменяется следующим образом:

1. Значение красного цвета уменьшается до 0.

2. Значение синего цвета уменьшается до 0.

3. Значение красного цвета увеличивается до 255.

4. Значение зеленого цвета уменьшается до 0.

5. Значение синего цвета увеличивается до 255.

6. Значение зеленого цвета увеличивается до 255.

При этом цвета белый, циан (cyan), зеленый, желтый, красный, фуксин (magenta), белый будут плавно преврашаться из одного в другой в указанной последовательности. В ней участвуют все цвета, кроме чистого синего. Так мы создадим изменяюшую цвет спираль.

Подготовка ролика

В данном ролике будет использоваться один элемент – спиральная фигура. Поместите его в центр рабочего поля. Начальный цвет спирали должен быть белым, а фоновый – черным.

Смена цветов и вращение

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

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

Значение переменной n сначала равно 1, затем увеличивается до 6 и далее цикл повторяется. Ниже приведена часть кода c последовательностью if…then, которая использует значение переменной n и изменяет объект преобразования цвета.

if (n == 1) {

colorTransform.rb -= 5;

if (colorTransform.rb ==0) n = 2;

} else if (n == 2) {

colorTransform.bb -= 5;

if (colorTransform.bb ==0) n = 3;

} else if (n == 3) {

colorTransform.rb += 5;

if (colorTransform.rb == 255) n = 4;

} else if (n == 4) {

colorTransform.gb -= 5;

if (colorTransform.gb == 0) n = 5;

} else if (n == 5) {

colorTransform.bb += 5;

if (colorTransform.bb == 255) n = 6;

} else if (n == 6) {

colorTransform.gb += 5;

if (colorTransform.gb == 255) n = 1;

}

Примечание

Оператор += используется для прибавления к переменной определенного числа. Например, код n += 5 прибавляет 5 к значению n. Этот код аналогичен коду n = n + 5. Оператор =- используется для вычитания определенного числа из переменной.

Значение переменной n проверяется в каждой части выражения if.then. В случае совпадения одна из трех цветовых составляюших объекта colorTransform изменяется. После окончания изменений, сама переменная n меняет свое значение на следующие.

Полная программа представляет собой обычный клип ActionScript с функциями onClipEvent(load) и onClipEvent(enterFrame). Первая вводит объекты цвета и преобразования, вторая выполняет постепенное изменение цветов.

Кроме того, мы сделаем так, чтобы клип врашался. Врашение достигается постепенным увеличением значения параметра _rotation.

onClipEvent(load) {