Создание палитры цветов на ActionScript 3.0

Данный пост фактически является продолжением поста «Цветовое колесо и цветовой бар на 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. Прошу проверить её в действии.

Загрузить Adobe Flash Player

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

Но я уже упоминал про полезные пользовательские классы 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 Player

Исходники к данному уроку вы можете скачать здесь (исходники под Adobe Flash CS5.5).

Автор: admin

Дата добавления: 2012-01-02

Просмотров: 3698

Рейтинг поста: +3-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-09-08
Инна, как я понимаю, вы работаете с чьи-то исходником. Тут два варианта: или исходник попал вам не полностью, или класс лежит не там, где его ищет программа.
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2013-09-07
А где взять этот пользовательский класс? Прошу прощения за вопрос, я ещё пока новичок!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-09-06
Надо полагать, требуется пользовательский класс Image. Такой класс есть? Вы его подключили (import)?
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2013-09-06
Почему может возникать такая ошибка в коде:
Монтажный кадр 1, слой "Слой 1", кадр 1, строка 10 1046: Тип не найден или не является константой времени компиляции: Image.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика