Изменение цвета объектов средствами 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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Михаил
Дата добавления: 2014-05-22
Я по вопросу закрашивания только внутренней области мувика. Расскажу чуть подробней, что мне надо. Я пишу класс отображаемого объекта. Он (объект) достаточно сложный для динамического рисования, поэтому я сначала нарисовал его инструментами, а потом сделал класс наследником этого объекта. Хочу, чтоб в классе можно было изменять цвет внутренней области. Как?
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2014-04-28
Спасибо) Помогло
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-04-27
> А как можно сделать плавное изменение цвета?

Подобная фишка есть у greensock (http://www.greensock.com/v12/ - обратите внимание на генератор кода на этой странице).
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-04-27
Михаил, в данном примере заливаться одним цветом будет АБСОЛЮТНО ВЕСЬ мувик. Если вам нужен контур, то самый простой путь - сделать контур отдельным мувиком.
Комментатор
Комментарий добавил(а): Михаил
Дата добавления: 2014-04-27
А как сделать заливку ТОЛЬКО внутренней области мувика? У меня заливается вместе с контуром:(
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2014-04-26
А как можно сделать плавное изменение цвета?
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2014-04-08
Спасибо огромное за помощь!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-04-07
Тогда можно что-то подобное:


import flash.display.MovieClip;
import flash.events.MouseEvent;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;

var color:uint = 0x000000;

var partPicture:Object = {mc_1:{correctColor:0xff0000,actualColor:null},mc_2:{correctColor:0xffffff,actualColor:null}};

var part_mc:MovieClip;
for (var prop in partPicture)
{
part_mc = picture_mc.getChildByName(prop) as MovieClip;
part_mc.addEventListener(MouseEvent.CLICK, onClickFunc);
}

function onClickFunc(event:MouseEvent):void
{
var ct:ColorTransform = new ColorTransform();
ct.color = color;
partPicture[event.currentTarget.name].actualColor = color;
event.currentTarget.transform.colorTransform = ct;
}

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;
}

check_btn.addEventListener(MouseEvent.CLICK, checkColorFunc);

function checkColorFunc(event:MouseEvent):void
{
for (var prop in partPicture)
{
if(partPicture[prop].correctColor != partPicture[prop].actualColor)
{
trace("Сравни с образцом!");
break;
}
}
}


check_btn - это кнопка, которая проверяет "правильность" раскраски
Комментатор
Комментарий добавил(а): Инна
Дата добавления: 2014-04-07
Мысль понятна, но я наверно не совсем правильно выразилась.
Хотелось бы, чтобы надпись" сравни с образцом" появлялась после раскрашивания всей картинки целиком, а не отдельной её части.
Я использую пример по реализации раскраски, приведённый в посте от 30.09.2013. Пока у меня получается, что надпись появляется каждый раз при неправильном раскрашивании отдельной части картинки.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-04-07
Можно так:


import flash.display.MovieClip;
import flash.events.MouseEvent;
import fl.controls.ColorPicker;
import fl.events.ColorPickerEvent;

var color:uint = 0x000000;

var partPicture:Object = {mc_1:0xff0000,mc_2:0xffffff};

var part_mc:MovieClip;
for (var prop in partPicture)
{
part_mc = picture_mc.getChildByName(prop) as MovieClip;
part_mc.addEventListener(MouseEvent.CLICK, onClickFunc);
}

function onClickFunc(event:MouseEvent):void
{
var namePart:String = event.currentTarget.name;
if (partPicture[namePart] == color)
{
var ct:ColorTransform = new ColorTransform();
ct.color = color;
event.currentTarget.transform.colorTransform = ct;
}
else
{
trace("Сравни с образцом!");
}
}

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;
}


В этом примере все куски раскраски (mc_1, mc_2) лежат внутри мувика-контейнера picture_mc, а в массиве partPicture лежат пары мувиклип:цвет. Думаю, мысль понятна :-)
Добавить комментарий:







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

Идиот-тест

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

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