Как реализовать "раскраску" рисунка?

[beng]

Есть флешка - http://expert-office.ru/, хочу реализовать раскраску карандашного рисунка в цветной (фото цветного также есть), водя по рисунку кисточкой.
Выглядеть должно примерно так: при наведении кисточкой на участок рисунка он становится цветным, остальное остается карандашным.
У кого какие есть предложения?

[DimZ]

вобще можно сделать с помощью маски

[beng]

А можете дать ссылку, как реализовать что-то подобное?

[beng]

Получилось реализовать: при наведении курсора на изображение, участок под ним становится цветным, но как сделать так, чтобы все участки, над которыми прошлись, остались цветными и после того, как над ними убрали курсор?

[beng]

И к этой же теме еще один вопрос.
Курсор я заменяю кружком, который находится в слое-маске и делает цветными участки при наведении. Но как сделать, чтобы вместе с этим кружком с вместо курсора перемещалось еще и изображение кисточки?

Такой код не работает (перемещается только один из объектов):
Mouse.hide();
startDrag("cursor", true); // кружок-маска
startDrag("cursor2", true); // кисточка

[__i]

cursor.onMouseMove = cursor2.onMouseMove = function(){
this._x = _root._xmouse;
this._y = _root._ymouse;
}

[iNils]

__i, прочти пункт 3 http://www.flasher.ru/forum/showthread.php?t=79864 и больше так не делай.

[beng]

Спасибо, а кто может помочь с вопросом из четвертого поста?

[__i]

_root.region1.onMouseOver = function (){
this.gotoAndStop('fill');
}

[wvxvw]

Есть 2 варианта - простой и сложный =)
Простой - добавляй во время движения мыши в клип-маску исходный клип-кисть (не важно, как именно, дублируя, аттача или рисуя програмно). Т.е. маска будет состоять из одного клипа, в который будут по мере движения добавлятся клипы имитирующие кисть.
Сложный - програмно создать маску и обновлять ее при движении мыши... Но это не для тех, кто не дружит с математикой %)

[beng]

_root.region1.onMouseOver = function (){
this.gotoAndStop('fill');
}

А по-подробней можно, в частности про вторую строку

[beng]

Простой - добавляй во время движения мыши в клип-маску исходный клип-кисть (не важно, как именно, дублируя, аттача или рисуя програмно).
А можно пример аттача?

[wvxvw]

14829

import flash.geom.*

var _l1:MovieClip = _root.createEmptyMovieClip("canvas_mc", 0);
var _l2:MovieClip = _root.createEmptyMovieClip("mask_mc", 10);
var _l3:MovieClip = _root.createEmptyMovieClip("gradient_mc", 5);
with (gradient_mc)
{
colors = [0xFF0000, 0x0000FF];
fillType = "radial"
alphas = [100, 100];
ratios = [0, 0xFF];
spreadMethod = "reflect";
interpolationMethod = "linearRGB";
focalPointRatio = 0.9;
matrix = {a:200, b:0, c:0, d:0, e:200, f:0, g:200, h:200, i:1};
beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod,
interpolationMethod, focalPointRatio);
moveTo(0, 0);
lineTo(500, 0);
lineTo(500, 500);
lineTo(0, 500);
lineTo(0, 0);
endFill();
}

_l1.beginFill(0x112233, 50);
_l1.moveTo(0, 0);
_l1.lineTo(0, 500);
_l1.lineTo(500, 500);
_l1.lineTo(500, 0);
_l1.lineTo(0, 0);
_l1.endFill();

_l2.attachMovie("brush", "brush_mc", _l2.getNextHighestDepth(), {_x:-20, _y:-20});
_l3.onMouseMove = function(){
var _l4:Number = 0;
_l2.attachMovie("brush", "brush"+_l4+"_mc", _l2.getNextHighestDepth()+_l4, {_x:this._xmouse, _y:this._ymouse});
_l4++;
}
_l3.setMask(_l2);

*в библиотеке нужно создать клип-кисточку и присвоить ему идентификатор экспорта 'brush'
* вместо клипа с градиентом - ваша картинка.
* увы, такой мувик после долгого проигрывания подвесит плеер... есть конечно варианты решения... но муторно, да и не особо-то нужно, с пивом и так покатит =)

[wvxvw]

_root.region1.onMouseOver = function (){
this.gotoAndStop('fill');
}

Да, вобщем, тоже вариант =) и не плодит кучу клипов, но менее реалистичный =)

[beng]

Заменил градиент на картинку "back", но почему-то все очень медленно рисуется:

var _l2:MovieClip = _root.createEmptyMovieClip("mask_mc", 10);

_l2.attachMovie("brush", "brush_mc", _l2.getNextHighestDepth(), {_x:-20, _y:-20});
_root.back.onMouseMove = function(){
var _l4:Number = 0;
_l2.attachMovie("brush", "brush"+_l4+"_mc", _l2.getNextHighestDepth()+_l4, {_x:this._xmouse, _y:this._ymouse});
_l4++;
}
_root.back.setMask(_l2);

[wvxvw]

эээ... ну не знаю, сколько онмаузмув вызывается - столько и должен рисовать

[beng]

Я к тому, что я просто видимо что-то не правильно сделал.

[wvxvw]

хех, а как ты собираешся вызывать онмаузмув над клипом, который ты не видишь? =) (ты ж накладываешь маску на клип с картинкой, после чего он практически исчезает =) положи поверху картинки еще один клип (тот, который с карандашным рисунком), вот у него и нужно слушать онмаузмув =)

[beng]

Почему, все правильно. Т. к. маска наложена на картинку, она не будет вначале видна, но при движении мышки над ней она будет как бы вырисовываться. Если еще вниз положить картинку с карандашным рисунком - как раз и получается эффект раскрашивания.
Ошибка была в другом, в строке
_l2.attachMovie("brush", "brush"+_l4+"_mc", _l2.getNextHighestDepth()+_l4, {_x:this._xmouse, _y:this._ymouse});
_l4++;
надо было заменить this._xmouse и this._ymouse на _root.xmouse и _root.ymouse соответственно.

Всем спасибо, итоговый получившийся код:

var myMask:MovieClip = _root.createEmptyMovieClip("mask_mc", _root.getNextHighestDepth());

myMask.attachMovie("brush", "brush_mc", myMask.getNextHighestDepth(), {_x: -100, _y: -100});

_root.back.onMouseMove = function() {
myMask.attachMovie("brush", "brush_mc", myMask.getNextHighestDepth(), {_x: _root._xmouse, _y: _root._ymouse});
}

_root.back.setMask(myMask);

Mouse.hide();

_root.brush2.onMouseMove = function() {
this._x = _root._xmouse;
this._y = _root._ymouse;
}

[beng]

Не все так просто оказалось =)
1) Некоторые браузеры не показывают телефон вверхну флешки (http://expert-office.ru/), в частности Explorer. Телефон - это Dynamic Text с фильтром Blur
2) Не получается убрать кисточку с рисунка, после того как мышка покинула пределы флешки