Данный пост фактически является продолжением поста «Цветовое колесо и цветовой бар на ActionScript 3.0». Но сегодня мы добавим к нашей цветовой палитре самую важную функцию - функцию выбора цвета.
Но для начала рассмотрим ещё один способ создания цветовой палитры - создание цветовой палитры из растрового рисунка. В любом поисковике вы без труда найдёте десятки оригинальных изображений с цветовыми палитрами на любой вкус. Лично мне приглянулась следующая картинка:
А теперь давайте с помощью данного изображения создадим полноценную (!) цветовую палитру с возможностью выбирать понравившийся цвет.
Делать я это буду в Adobe Flash CS5.5. Первым делом, я импортирую в проект саму картинку с палитрой. Затем перейду в «Свойства» данной изображения. В «Свойствах» я поставлю галочку у пункта «Экспортировать для ActionScript», а в качестве имени класса укажу Image (обратите внимание, что класс Image будет расширять стандартный класс BitmapData). Затем перехожу к коду, который будет размещаться на главной временной шкале проекта.
ActionScript 3.0
/*
этот спрайт-образец будет отображать выбранный цвет
*/
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.x = 275;
sprite.y = 150;
/*
в этом спрайте будет находится наша палитра цветов
*/
var colorPicker:Sprite = new Sprite();
addChild(colorPicker);
colorPicker.x = 175;
colorPicker.y = 150;
/*
помещаем в спрайт картинку с палитрой цветов
*/
var image:Image = new Image();
var bitmap:Bitmap = new Bitmap(image);
colorPicker.addChild(bitmap);
/*
слушаем события и перекрашиваем наш спрайт-образец в соответствующий цвет из палитры цветов
*/
colorPicker.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
colorPicker.addEventListener(MouseEvent.ROLL_OUT, onMouseOut);
function onMouseOver(event:MouseEvent):void
{
colorPicker.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
}
function onMouseOut(event:MouseEvent):void
{
colorPicker.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
}
function onMouseMoves(event:MouseEvent):void
{
sprite.graphics.clear();
sprite.graphics.beginFill(image.getPixel(event.localX,event.localY));
sprite.graphics.drawRect(0,0,100,100);
sprite.graphics.endFill();
}
Что мы делаем в данном фрагменте кода? А делаем мы одну простую вещь - мы определяем цвет пиксела, находящегося в данный момент под курсором мышки с помощью стандартной функции getPixel() класса BitmapData.
Теперь у нас есть полнофункциональная палитра цветов на ActionScript 3.0. Прошу проверить её в действии.
Тут самое главное заключается в том, что мы научились захватывать нужный цвет. Думаю, вы без труда адаптируете данный код под ваши конкретные цели.
Но я уже упоминал про полезные пользовательские классы ColorWheel и ColorBar, которые позволяют одним только кодом сгенерировать цветовое колесо или цветовой бар. Давайте воспользуемся возможностями данных классов и модифицируем код из предыдущего примера.
ActionScript 3.0
/*
импортируем класс для генерации цветового бара
*/
import ColorBar;
/*
этот спрайт-образец будет отображать выбранный цвет
*/
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.x = 275;
sprite.y = 150;
/*
в этом спрайте будет находится наша палитра цветов
*/
var colorPicker:Sprite = new Sprite();
addChild(colorPicker);
colorPicker.x = 175;
colorPicker.y = 150;
/*
создаём цветовой бар, который потом растрируем и помещаем внутрь спрайта-контейнера
*/
var bitmapData:BitmapData = new BitmapData(100,100);
bitmapData.draw(new ColorBar(100,100));
var bitmap:Bitmap = new Bitmap(bitmapData);
colorPicker.addChild(bitmap);
/*
слушаем события и перекрашиваем наш спрайт-образец в соответствующий цвет из палитры цветов
*/
colorPicker.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
colorPicker.addEventListener(MouseEvent.ROLL_OUT, onMouseOut);
function onMouseOver(event:MouseEvent):void
{
colorPicker.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
}
function onMouseOut(event:MouseEvent):void
{
colorPicker.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoves);
}
function onMouseMoves(event:MouseEvent):void
{
sprite.graphics.clear();
sprite.graphics.beginFill(bitmapData.getPixel(event.localX,event.localY));
sprite.graphics.drawRect(0,0,100,100);
sprite.graphics.endFill();
}
Как видите, нам теперь даже не потребуется картинка - цветовая палитра будет сгенерирована исключительно кодом. В результате мы получим следующее:
Исходники к данному уроку вы можете скачать здесь (исходники под Adobe Flash CS5.5).