ЦВЕТ И РАБОТА С НИМ
Это еще один урок по просьбе читателя. Не стесняйтесь, спрашивайте, буду писать..
Начнем с простейшего примера. Новый файл, делаем кнопку в руте и пишем:
on (release) {new Color(this).setRGB(random(255*255*255));}
тестим, кликаем. Кнопка меняет цвет.
Рисуем квадратик где-нибудь в руте, опять тестим, кликаем по кнопке.
new Color(this) - создаем новый безымянный объект Color и помещаем его в this, чем в данном случае является _root
random(255*255*255) - получаем случайное число, которое будет определять цвет.
setRGB - присваиваем безымянному объекту Color новое значение цвета.
Вообще-то команда setRGB использует шестнадцатиричное число вида 0x000000, но и обычное число подходит.
Прежде чем продолжить, настоятельно рекомендую изучить прекрасную статью управление цветом импотрированного битмапа. Хотя эта статья не ставит себе целью программное управление цветом, но для понимания соответствия программного и ручного управления будет очень полезна.
Практически все возможности редактирования экземпляров мувиклипов во flash через панели свойств также доступны и программно (исключение - skew, но я это исправил :)) Возможность управления цветом экземпляра мувиклипа - не исключение, им можно управлять программно.
Откройте панель Effect и выберите в раскрывающемся списке advanced. Все остальные пункты раскрывающегося списка - лишь частный случай, который можно создать в advanced.
Итак, видим две колонки:
в левой - процентное поканальное значение цвета.
в правой - плюс абсолютное поканальное значение.
Один важный момент для понимания: red, green, blue, alpha каналы имеют абсолютную шкалу 256 градаций (включая ноль). Т.е. 100% красный это 255 красного цвета. Впрочем вы к этому привыкли, устанавливая цвета в миксере цветов.
Если мувиклипу установить alpha 50% и +128 абсолютной величины, то это будет то-же самое что 100% alpha. Т.е. сначала задавая 50% убираем 128 (256*0,5=128) а затем прибавляем 128, в результате получаем 256. То-же самое относится и к цветам.
Соответствие панели Effect advanced скрипту легко увидеть в объекте colorTransformObject команды Color.setTransform() - наступило время посетить хелп.
потыкайтесь мышкой:
в именах параметров объекта есть логика, как это ни странно :)). r, g, b, a - первая часть имени, соответствует red, green, blue, alpha. Вторая часть имени: a - процентное, b - абсолютное. Вот и встало всё по местам.
Теперь пора поприменять полученные знания на примере. скачать исходник
| кликаем на мувик внизу, затем кликаем мышкой нужный цвет. |
Открыли исходничек и смотрим:
в первом кадре в руте две функции:
fnchitTest()
fncDropper (mc)
других функций в мувике не используем, да и fnchitTest() только для облегчения написания скрипта - частный случай стандартной функции hitTest(.....). Вначале рассмотрим взаимодействие объектов. Объекты общаются только через переменную _root.targetColorMC, это наш интерфейс общения между объектами. _root.targetColorMC принимает значения ссылок на мувиклипы при клике на них, а при клике на цветовой панели удаляется.
Итак, в мувиках у нас:
onClipEvent (load) {
this.fnchitTest = _root.fnchitTest; // помещаем ссылку на функцию в мувиклип
}
onClipEvent (mouseUp) { // на клик
if (this.fnchitTest()) { // если мышка при этом на мувике
_root.targetColorMC = this; // передаем в интерфейс ссылку на кликнутый мувик
}
}
А в цветовой панели:
onClipEvent (load) {
this.fncDropper = _root.fncDropper;
this.fnchitTest = _root.fnchitTest; // помещаем ссылки на функции в мувиклип
}
onClipEvent (mouseMove) { // когда двигаем мышку
if (_root.targetColorMC) { // если выбран мувик
fncDropper(_root.targetColorMC); // исполнЯем рассчет и присвоение цвета
}
}
onClipEvent (mouseUp) { // если кникнули
if (this.fnchitTest()) { // на цветовой панели
delete _root.targetColorMC; // удалЯем ссылку на мувик и теперь при проверке будем получать null
}
}
Пришла пора разобрать по косточкам функцию рассчета и присвоения цвета:
Цветовую панель можно условно разделить на 6 частей по горизонтали и на 2 части по вертикали. Обратите внимание на то, где находится центр мувиклипа, а точнее, где находится картинка относительно центра мувиклипа :). Внизу я нарисовал график изменения составляющих цвета цветовой панели без учета осветления и затемнения. По этому графику видно, что при горизонтальном перемещении мыши в каждый момент изменяется всегда только одна составляющая, в то время, как две остальные составляющие цвета остаются константами. Есть 3 основных цвета - 0(6), 2, 4, и еще три цвета 1, 3, 5 получаются смешением двух из трех основных цветов.
Всего есть 6 зон изменения цвета.
В зонах 0-1, 2-3, 4-5 происходит увеличение значения изменяемой компоненты. В зонах 1-2, 3-4, 5-6 происходит уменьшение изменяемой компоненты.
Цвета мувиков в исходнике выставлены в панели в точности, как если бы были заданы программно.
function fncDropper (mc) { //на входе функции ссылка на мувиклип (mc), который будет менЯть цвет
if (this.fnchitTest()) { // если мышь на цветовой панели
var clr = new Object(); // создаем локальный (действующий в пределах функции) объект
var x = this._xmouse/this._width*6; // рассчитываем долю х позиции мыши относительно ширины цветовой панели ( долЯ варьируетсЯ от 0 до 1), затем умножаем на 6 - это довольно тонкий момент. Нужно это длЯ длЯ упрощениЯ дальнейшего вычислениЯ в каком сегменте находитсЯ мышь и длЯ приведениЯ к пределам от 0 до 1 дробной составлЯющей позиции мыши в сегменте.
var x_up = x-Math.floor(x); // вычислЯем приведенную к сегменту дробную составлЯющую позиции мыши в сегменте длЯ прЯмо пропорционального изменениЯ составлЯющей цвета
var x_dw = 1-x_up; // то же самое длЯ обратно пропорционального изменениЯ составлЯющей цвета
if (x<1) { // если мышь в сегменте 0-1
// ( сверЯемсЯ с графиком, что у нас там)
clr.rb = 255; // красный =255
clr.gb = 255*x_up; // зеленый увеличиваетсЯ с увеличением значениЯ x позиции мыши
clr.bb = 0; // синий =0
} else if (x<2) { // если мышь в сегменте 1-2
clr.rb = 255*x_dw; // красный уменьшаетсЯ с увеличением значениЯ х позиции мыши
clr.gb = 255; // зеленый =255
clr.bb = 0; // синий = 0
//дальше длЯ остальных сегментов то-же самое - сверЯемсЯ с графиком и задаем нужную комбинацию
} else if (x<3) {
clr.rb = 0; clr.gb = 255; clr.bb = 255*x_up;
} else if (x<4) {
clr.rb = 0; clr.gb = 255*x_dw; clr.bb = 255;
} else if (x<5) {
clr.rb = 255*x_up; clr.gb = 0; clr.bb = 255;
} else if (x<6) {
clr.rb = 255; clr.gb = 0; clr.bb = 255*x_dw;
}
// а теперь рассчитываем изменениЯ в зависимости от y позиции мыши - затемнение/ осветление
var y = -this._ymouse/this._height*2; // поскольку система координат во флеше перевернута относительно оси х, то вертим ее обратно менЯЯ знак, и рассчитываем y составлЯющую, также как и в 6ти сегментной системе, только имеЯ 2 сегмента умножаем на 2 длЯ приведениЯ к 2х сегментной системе.
if (y>0) { // и если мышь находитсЯ выше середины пропорционально осветлЯем (поскольку y находитсЯ в пределах от 0 до 1, то умножаЯ например на 0.5 (при соответствующем положении мыши) мы уменьшаем значениЯ цветовых составлЯющих)
clr.rb += (255-clr.rb)*y; clr.gb += (255-clr.gb)*y; clr.bb += (255-clr.bb)*y;
} else if (y<0) { // иначе пропорционально затемнЯем
clr.rb += clr.rb*y; clr.gb += clr.gb*y; clr.bb += clr.bb*y;
}
new Color(mc).setTransform(clr); // создаем новый безымЯнный объект Color, прикрепленный к мувиклипу mc и тут же применЯем к нему трансформацию цвета используЯ вычисленный объект clr
}
}
Да, наверняка вопросов будет много по уроку, пишите, отвечу..
И еще: когда будете тестить исходник, загляните в листинг переменных. Там кроме двух функций и ссылок на них ничего нет. Это так случайно у меня получилось :)), но это пример правильной организации объектов, функций, и использования переменных.
Стремитесь к тому, чтобы без нужды не захламлять скрипт массой переменных. Ведь в дальнейшем, при написании прототипных функций (мы к этому как-нибудь доберемся) этот вопрос станет критичным.