Форум Flasher.ru - Как реализовать "раскраску" рисунка?

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- Общие вопросы о Flash (не затрагивающие ActionScript) (http://www.flasher.ru/forum/forumdisplay.php?f=60)

- - Как реализовать "раскраску" рисунка? (http://www.flasher.ru/forum/showthread.php?t=82816)

beng	21.07.2006 17:55

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

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

DimZ	21.07.2006 17:57

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

beng	21.07.2006 18:01

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

beng	21.07.2006 22:26

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

beng	22.07.2006 00:40

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

Такой код не работает (перемещается только один из объектов):

Код:

Mouse.hide();

startDrag("cursor", true);         // кружок-маска

startDrag("cursor2", true); // кисточка

__i	24.07.2006 14:17

Код:

cursor.onMouseMove = cursor2.onMouseMove = function(){

this._x = _root._xmouse;

this._y = _root._ymouse;

}

iNils

24.07.2006 16:10

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

beng	24.07.2006 17:35

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

__i	24.07.2006 19:35

Код:

_root.region1.onMouseOver = function (){

this.gotoAndStop('fill');

}

wvxvw

24.07.2006 20:28

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

beng	24.07.2006 22:58

Цитата:

Сообщение от __i

Код:

_root.region1.onMouseOver = function (){

this.gotoAndStop('fill');

}

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

beng	24.07.2006 23:21

Цитата:

Сообщение от wvxvw

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

А можно пример аттача?

wvxvw

25.07.2006 07:17

Вложение 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

25.07.2006 07:33

Цитата:

Сообщение от __i

Код:

_root.region1.onMouseOver = function (){

this.gotoAndStop('fill');

}

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

beng	25.07.2006 08:28

Заменил градиент на картинку "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

25.07.2006 15:45

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

beng	25.07.2006 15:59

Вложений: 1

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

wvxvw

25.07.2006 17:49

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

beng	25.07.2006 21:09

Почему, все правильно. Т. к. маска наложена на картинку, она не будет вначале видна, но при движении мышки над ней она будет как бы вырисовываться. Если еще вниз положить картинку с карандашным рисунком - как раз и получается эффект раскрашивания.
Ошибка была в другом, в строке

Код:

_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	28.07.2006 16:36

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

Часовой пояс GMT +4, время: 20:11.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.