Эффект рисования сложного контура через AS 3.0

[BGI_HANNA]

Подскажите, как реализовать эффект динамического рисования сложного контура (например, рукописные буквы) через AS3.0 (как будто кто-то пишет рукописным шрифтом и этот процесс видит пользователь). В сети куча уроков по этому эффекту, но они все построены на покадровой анимации. Нашла также возможность через прогаммирование, но на AS 2.0. (http://forum.darkdragons.ru/showthread.php?t=1017 2 пост).

Мне необходимо реализовать данный эффект в ActionScript 3.0.

Логика моя была такая:
есть картинка-контур (или шрифт), который мы якобы рисуем, на него должна быть наложена динамическая маска. В качестве маски используется мувик (кружочек-точка-кончик карандаша или ручки, оторая пишет), этот мувик анимированно движется по пути, который совпадает с контуром нашей картинки. Но таким образом наша маска не увеличивается по площади, открывая весь контур, а просто перемещается по нему. Поэтому вводим AS 3, с помощью которого мы добавляем сначала общий контейнер-мувик и делаем его маской для нашего рисунка. А потом динамически (через enter frame) наполняем этот мувик экземплярами нашего кружочка-отпечатка, но каждому последующему кружочку задаем коорданаты расположения на сцене, совпадающие с координатами (для данного кадра) нашего мувика, движущегося по пути. Т.о. наши добавляемые экземпляры постепенно рисуют собой этот путь, а т.к. лежат в муве-маске, то т.о. нам пастопенно открывается наша картинка-контур.

визуально эффект типа такого http://demiart.ru/forum/index.php?showtopic=29969

только в моем случае это будет не покадровая анимация, а AS3, и не рука а рукописная надпись, которую типа кто-то пишет

Возможно, этот эффект можно получить с помощью другого алгоритма.
Буду рада любому предложенному решению.

P.s. В AS 3.0 я еще новичок, но учусь быстро))

[Wolsh]

Парадокс в том, что если Вы сможете описать путь, то и маска как бы совершенно не нужна)))
Весь вопрос как раз в том, как описать путь, последовательность координат.
Если надпись известна заранее (текст и шрифт), то можно забить координаты в Vector или массив.
Снять последовательность координат можно, написав свой маленький "редактор", взяв простой алгоритм "рисовалки", изменить его так чтобы координаты точек, по которым рисуется линия, записывались в массив (или просто трейсились), и аккуратно обвести надпись, подложив готовую картинку. Вы наверное видели такие рисовалки на флэше, которые сохраняют последовательность рисования и потом могут воспроизвести ее, как мультик. Я думаю надо копать в эту сторону.

[BGI_HANNA]

Ваша идея понятна, но маска все же нужна, т.к. рисунок-контур под ней переменной толщины (шрифт имитирует разный нажим пера), он преравистый. и как я понимаю, заменить рисунок прорисовкой пути по координатам не подойдет.
и мне хотелось бы каких-то практических примеров кода.
В моем алгоритме я не записываю эти координаты в массив, а просто на лету "считываю" их в каждом кадре с движущегося по пути мувика. Но у загвоздка встала в том, как зацикленно каждый кадр добавлять новый экземпляр одного и того же клипа, но с уникальным именем.

[Wolsh]

Почему просто не рисовать маску графиксом по координатам? Линия может быть не только 1 пиксель толщиной)) Все лучше, чем несколько тысяч клипов.

[BGI_HANNA]

Ок. Давайте, пожалуйста здесь поподробнее. Про график и про координаты. Буду благодарна за ссылки на поясняющий материал и на примеры.

P.s. еще как-то на практике столкнулась с проблемой, что линия как таковая не применялась как маска, и пришлось заменить ее на прямоугольник толщиной 1-2 пикселя. Подскажите новичку?

[Wolsh]

Возможно, не ставили маске cacheAsBitmap = true;
Про график и про координаты.Не график. Graphics. Тот самый, который рисует программно линии и заливки))
На каждый кадр (ENTER_FRAME) Вы снимаете координаты ручного мувика на гайде (если я правильно понял). И рисуете в маске линию в эту координату ( Graphics#lineTo() ).
Ну, или добавляете свой кружок в эту координату.. Боюсь только что в таком случае линия будет прерывистой.

[Alex Lexcuk]

BGI_HANNA можно путь сделать в виде набора curveTo линий. Эти линии затем переделать в массив точек, кружек-перо передвигать по массиву точек, одновременно его перерисовывать в bitmapdata. А эту bitmapdat-у уже использовать как маску для основного текста.
Пример с исходником http://swf-flash.blogspot.com/2012/06/curve-text-animation.html

[strangedk]

Может чуть не в тему. Но в своё время очень помогло вот это:
http://en.nicoptere.net/?p=476

[BGI_HANNA]

Возможно, не ставили маске cacheAsBitmap = true;

Нет не ставила. Поместила программно экземпляр своей картинки на сцену, сверху программно нарисовала линию (lineStyle,moveTo,lineTo), сделала линию маской. Результат - при публикации нет ничего (ни маски, ни картинки). Если вместо линии использовать например прямоугольник (с такими же физ размерами) - все работает.

В чем подвох?

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

Добавлено через 10 минут

Пример с исходником http://swf-flash.blogspot.com/2012/06/curve-text-animation.html
Вы не могли бы дать пояснения к своему коду?

[strangedk]

Нет не ставила. Поместила программно экземпляр своей картинки на сцену, сверху программно нарисовала линию (lineStyle,moveTo,lineTo), сделала линию маской. Результат - при публикации нет ничего (ни маски, ни картинки). Если вместо линии использовать например прямоугольник (с такими же физ размерами) - все работает.

В чем подвох?


В таком случае подозреваю что как маска работает только заливка

[BGI_HANNA]

В таком случае подозреваю что как маска работает только заливка

И моя работа по отрисовке линии по массиву координат пути насмарку? В хелпе адоба пишут: В экранном объекте, выбранного в качестве маски, используются только заливки; обводки игнорируются.

Как быть в моей ситуации?

[Alex Lexcuk]

Вы не могли бы дать пояснения к своему коду?
Что конкретно непонятно?

[Wolsh]

Как быть в моей ситуации?Прислушиваться к советам?))
var sp:Sprite = new Sprite();
sp.graphics.beginFill(0x000000);
sp.graphics.drawRect(0, 0, 250, 250);
addChild(sp);
var maskShape:Shape = new Shape();
maskShape.graphics.lineStyle(5, 0xFF0000);
maskShape.graphics.moveTo(10, 10);
maskShape.graphics.lineTo(100, 100);
maskShape.graphics.lineTo(10, 100);
addChild(maskShape);
maskShape.cacheAsBitmap = true;
sp.cacheAsBitmap = true;
sp.mask = maskShape;

[BGI_HANNA]

Всем спасибо за идеи и советы. Свою задачу я решила с помощью матрицы координат и Shape, которые по мере обновления экрана генерировались по этим координатам, постепенно заполняя маску. Желаемый эффект достигнут при минимальном коде.

Добавлено через 50 минут
Отдельное спасибо модератору за его простое решение и пример кода. В данном случае я его уже не применяла, но обязательно учту на будущее.

[dimarik]

Матрица координат [x]. Это сильно. Зная анкоры и безъе шейпа можно накидать красивый алгоритм прорисовки. Шейпы (http://www.m2osw.com/swf_tag_defineshape) легко достаются из swf формата.

[UltravibeSan]

Это пичалько - насчёт того, что shape в качестве маски можно использовать только beginFill, а не lineStyle