Создание Flash-игр



Вращающаяся и изменяющая цвета спираль

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

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

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

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

Подход

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

Объект Color

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

myColorObject = new Color("myMovieClipName");

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

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

myColorObject = new Color("myMovieClip");
trace(myColorObject.getRGB()).toString());

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

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

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

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

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

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

myColorObject = new Color("myMovieClip");
trace((myColorObject.getRGB()).toString(16));

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

Результатом в данном случае является значение 808080, шестнадцатеричное число, представляющее собой средний серый цвет (красная,'зеленая и синяя составляющие, которые имеют значение 128, среднее между 0 и 255). Значение 16 в качестве параметра функции toString () задает преобразование числовых значений в шестнссшатеричные. Теперь, когда вы умеете получать RGB-значение цвета клипа, следующим шагом будет его изменение. Это можно сделать при помощи функции set RGB. Она имеет только один параметр: шестнадцатеричное значение, которое вы хотите использовать. Приведем пример с тем же роликом, но с несколько измененным кодом:

myColorObject = new Color("myMovieClip");
myColorObject.setRGB(OxFFOOOO);

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

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

Более универсальным способом изменения цвета является использование метода setTransform() объекта Color. Аргументом метода set-Transform является объект, содержащий восемь параметров цвета. Параметры rb, gb и bb задают относительное смещение в процентах (от -100% до 100%) для красной, зеленой и синей составляющих цвета соответственно. Параметры rb, gb и bb задают абсолютное (от -255 до 255) значение цветов. Последние два параметра - аа и ab определяют значение свойства _alpha (прозрачность) клипа. На рис. 5.3 изображены все шесть составляющих, плюс два значения преобразующих альфа-канал (прозрачность изображения). Объект преобразования цвета может содержать различные значения каждой из восьми составляющих. Эти значения задаются путем создания новой переменной-объекта. Приведем пример:

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

Данный объект задает изменение цвета любого цветового объекта на красный. Он включает три параметра: абсолютные значения красного, зеленого и синего цветов. Кроме того, вы можете задавать относительное смешение при помоши параметров rа, gа и bа. Имея объект преобразования цвета и цветовой объект, можно изменять цвет клипа. Следующие три строки изменят цвет клипа на красный:

myColor'= new Color("myMovieClip");
myColorTransform = (rb:255, bb:0, gb:0);
myColor.setTransform(myColorTransform);

В данном примере выполняется то же действие, что и в предыдущем, но другим способом. Преимущество функции 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++ увеличивает его до 8. Для уменьшения значения используется оператор --.

В данном примере значение переменной n, описывающей красный цвет, изменяется от 0 до 255. При достижении максимального значения 255 цвет больше не меняется. Применение сценария демонстрируется в ролике Gradualtransform.fla. Вся эта информация о цветах и преобразовании может использоваться для создания специальных эффектов. Давайте попробуем сделать что-нибудь более интересное. Возьмем основной пример данного раздела и сделаем так, чтобы клип по очереди изменял свой цвет на один из цветов радуги. Для этого необходимо изменить красную, зеленую и синюю составляющие. Здесь будет использоваться та же самая функция setTransform, однако алгоритм изменения значений по сравнению с предыдущим примером будет более сложным. В качестве исходного для красного, зеленого и синего цветов берется значение 255, которое изменяется следующим образом:
1. Значение красного цвета уменьшается до 0.
2. Значение синего цвета уменьшается до 0.
3. Значение красного цвета увеличивается до 255.
4. Значение зеленого цвета уменьшается до 0.
5. Значение синего цвета увеличивается до 255.
6. Значение зеленого цвета увеличивается до 255.
При этом цвета белый, циан (cyan), зеленый, желтый, красный, фуксин (magenta), белый будут плавно превращаться из одного в другой в указанной последовательности. В ней участвуют все цвета, кроме чистогo синего. Так мы создадим изменяющую цвет спираль.

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

В данном ролике будет использоваться один элемент - спиральная фигура. Поместите его в центр рабочего поля. Начальный цвет спирали должен быть белым, а фоновый - черным. Ролик будет состоять из одного сценария, назначенного клипу с изобрел жением спирали. Переменная п, участвующая в сценарии, содержит способ изменения цвета. Значение цвета будет соответствовать числу из предыдущего списка. Так, например, если n будет равно 3, значение красной составляющей увеличится. Значение переменной п сначала равно 1, затем увеличивается до 6 и далее цикл повторяется. Ниже приведена часть кода с последовательностью 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 изменяется. После окончания изменений, сама переменная п меняет свое значение на следующие. Полная профамма представляет собой обычный клип ActionScript с функциями onClipEvent (load) и onClipEvent (enterFrame). Первая вводит объекты цвета и преобразования, вторая выполняет постепенное изменение цветов. Кроме того, мы сделаем так, чтобы клип вращался. Вращение достигается постепенным увеличением значения параметра _rotation.

onCIipEvent(1oad) {
// Создаем объект цвета и цветовой трансформации.
spiralColor = new Color(this);
colorTransform = {rb:255,bb:255, gb:255};
// Вначале п равно единице, n = 1;
onClipEvent(enterFrame) {
// Определяем, какую составляющую необходимо изменить,
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; // Задаем новый цвет.
spiralColor.setTransform(colorTransform);
// Вращаем спираль.
this._rotation += 5;
}

Объект this обозначает обращение клипа к самому себе. Так как сценарий назначен клипу, использование this будет обозначать, что команда, следующая после this, относится к самому клипу, а не к другому клипу или ролику.
Параметр клипа _rotation используется для поворота клипа на определенное количество градусов. Он может иметь как положительные, так и отрицательные значения. Если вы укажете значение больше 360 градусов, Flash автоматически преобразует его. К примеру, при вводе значения 370 градусов клип будет повернут на 10 градусов.

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

К сведению

Частота смены кадров ролика определяет скорость вращения спирали и смены цветов. Максимальная частота во Flash MX -120 кадр/с. Однако следует иметь в виду, что частота смены кадров напрямую зависит от быстродействия компьютера.

Рисунок 5.4 Спираль изменяет цвет и вращается

Другие возможности

Изменив оператор += на -= в последней строке кода, вы заставите спираль вращаться в обратном направлении. Вы можете также изменить способ смены цветов, изменив значения красной, зеленой и синей составляющих.

Назад Начало Вперед