Изменение цвета объектов средствами ActionScript

Порой, при работе над flash-приложением, возникает необходимость перекрасить какой-либо объект (MovieClip, Sprite) на сцене флеш-ролика в новый цвет. И язык ActionScript предоставляет нам такую возможность. Так, в ActionScript 2.0 для этого используется класс Color.

Допустим, у нас в флеш-ролике имеется MovieClip с именем "mc". Этот мувик мы хотим перекрасить в красный (0xff0000) цвет.

Код ActionScript 2.0:

var color:Color = new Color(mc); color.setRGB(0xff0000);

Как видите, с помощью метода setRGB() класса Color наша задача решается быстро и легко.

В ActionScript 3.0 для изменение цвета у объектов списка отображения используются возможности класса ColorTransform. В самом простом случае это выглядит следующим образом.

Код ActionScript 3.0:

var ct:ColorTransform = new ColorTransform(); ct.color = 0xff0000; mc.transform.colorTransform = ct;

Как можно применить рассмотренные выше возможности класса Color языка ActionScript 2.0 и класса ColorTransform языка ActionScript 3.0 на практике? Ну, например, мы можем создать простое приложение-«раскраску».

Делать пример я буду в Adobe Flash CS 5.5 и на ActionScript 3.0. Для нашей будущей раскраски нужна заготовка: давайте нарисуем человечка и все составляющие части этого человечка (голову, туловище, руки, ноги ... ) сделаем мувиклипами. Этим мувиклипам дадим имена "mc_1", "mc_2", "mc_3" и так далее. Кроме этого, нам понадобится стандартный компонент ColorPicker (можно, кстати, воспользоваться палитрой цветов из урока «Создание палитры цветов на ActionScript 3.0»). Просто перетащите данный компонент из окна «Компоненты» на рабочий стол программы, а потом удалите его с рабочего стола (при этом компонент останется в библиотеке вашего проекта).

Осталось написать код. Пишем...

Код ActionScript 3.0:

/* импорт классов */ import flash.display.MovieClip; import flash.events.MouseEvent; import fl.controls.ColorPicker; import fl.events.ColorPickerEvent; /* переменная, в которой хранится выбранный пользователем цвет */ var color:uint = 0x000000; /* мувиклипы, из которых состоит раскраска при клике по любому из мувиков будет вызываться функция onClick */ mc_1.addEventListener(MouseEvent.CLICK, onClick); mc_2.addEventListener(MouseEvent.CLICK, onClick); mc_3.addEventListener(MouseEvent.CLICK, onClick); mc_4.addEventListener(MouseEvent.CLICK, onClick); mc_5.addEventListener(MouseEvent.CLICK, onClick); mc_6.addEventListener(MouseEvent.CLICK, onClick); mc_7.addEventListener(MouseEvent.CLICK, onClick); mc_8.addEventListener(MouseEvent.CLICK, onClick); mc_9.addEventListener(MouseEvent.CLICK, onClick); mc_10.addEventListener(MouseEvent.CLICK, onClick); mc_11.addEventListener(MouseEvent.CLICK, onClick); mc_12.addEventListener(MouseEvent.CLICK, onClick); mc_13.addEventListener(MouseEvent.CLICK, onClick); mc_14.addEventListener(MouseEvent.CLICK, onClick); mc_15.addEventListener(MouseEvent.CLICK, onClick); mc_16.addEventListener(MouseEvent.CLICK, onClick); mc_17.addEventListener(MouseEvent.CLICK, onClick); mc_18.addEventListener(MouseEvent.CLICK, onClick); mc_19.addEventListener(MouseEvent.CLICK, onClick); mc_20.addEventListener(MouseEvent.CLICK, onClick); mc_21.addEventListener(MouseEvent.CLICK, onClick); mc_22.addEventListener(MouseEvent.CLICK, onClick); mc_23.addEventListener(MouseEvent.CLICK, onClick); mc_24.addEventListener(MouseEvent.CLICK, onClick); mc_25.addEventListener(MouseEvent.CLICK, onClick); /* функция, которая срабатывает при клике по мувику именно эта функция и меняет цвет мувиклипов */ function onClick(event:MouseEvent):void { var ct:ColorTransform = new ColorTransform(); ct.color = color; event.target.transform.colorTransform = ct; } /* добавляем ColorPicker, чтобы пользователь мог бы выбрать нужный ему цвет */ var colorPicker:ColorPicker = new ColorPicker(); colorPicker.move(50, 50); colorPicker.addEventListener(ColorPickerEvent.CHANGE, changeColorPicker); addChild(colorPicker); function changeColorPicker(event:ColorPickerEvent):void { color = event.target.selectedColor; }

У меня получилось следующее:

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

Скачать исходник к данному уроку можно здесь (на ActionScript 3.0 и под Adobe Flash 5.5).

Автор: admin

Дата добавления: 2012-03-29

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2014-04-07
Пожалуйста подскажите, возможно ли сделать в раскраске проверку цветов. Например если рисунок раскрашен неправильно(не так как в образце), то выводится текстовое поле "Сравни с образцом".
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-02-09
Способ, описанный в посте, вам не очень подходит. Если кнопки создаются вручную, то, возможно, стоит сделать их в виде мувиклипа с двумя кадрами: первый кадр с видом кнопки до нажатия, а второй кадр - после нажатия. Код:


btn_mc.addEventListener(MouseEvent.CLICK, onClickBtnMcFunc);
var mcSelected:Boolean = false;

function onClickBtnMcFunc(event:MouseEvent):void
{
if(mcSelected)
{
mcSelected = false;
btn_mc.gotoAndStop(1);
}
else
{
mcSelected = true;
btn_mc.gotoAndStop(2);
}
}


Если кнопка создаётся кодом, то перерисовывается по примерно такому же принципу, но с использованием методов динамического рисования.
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2014-02-09
Здравствуйте. Подскажите пожалуйста, как изменить цвет кнопки после нажатия.
У меня есть несколько кнопок и нужно, чтобы после нажатия они меняли цвет и было видно, что эти кнопки уже нажимали.
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2013-10-02
Спасибо огромное! Всё получилось!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-09-30
Раскраски можно реализовать по-разному. Можно немного изменить приведённый выше пример. Код, правда, не совсем красивый, но, думаю, будет понятен даже новичку:


/*
переменная, в которой хранится выбранный пользователем цвет
*/
var color:uint = 0x000000;
/*
мувиклипы-краски
*/
paint_1.addEventListener(MouseEvent.CLICK, onChoosePaint_1);
function onChoosePaint_1(event:MouseEvent):void
{
color = 0x000000;
}
paint_2.addEventListener(MouseEvent.CLICK, onChoosePaint_2);
function onChoosePaint_2(event:MouseEvent):void
{
color = 0xff0000;
}
/*
мувиклипы, которые пользователь будет окрашивать в выбранный цвет
*/
mc_1.addEventListener(MouseEvent.CLICK, onRepaint);
mc_2.addEventListener(MouseEvent.CLICK, onRepaint);
function onRepaint(event:MouseEvent):void
{
var ct:ColorTransform = new ColorTransform();
ct.color = color;
event.target.transform.colorTransform = ct;
}
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2013-09-28
Подскажите пожалуйста, как сделать раскраску с фиксированным количеством цветов, чтобы можно было выбирать не из целой палитры, а из 3-4 конкретных цветов?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-05-08
Очень забавно слышать совет "учи матчасть" от человека, который говорит о миллионе мувиклипов... А что до использования циклов, то они не используются в данном примере сознательно: урок должен быть максимально простой, а работа с циклами для многих новичков затруднительна.
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2013-05-08
Очень не правильный подход... а если mc_ было миллион, ты бы потратил год своей жизни на это? учи матчасть, потом других учи
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-09-09
Очень рад :-)
Комментатор
Комментарий добавил(а): Сергей
Дата добавления: 2012-09-09
Спасибо, нашел, что искал :)
Добавить комментарий:







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

Идиот-тест

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

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