Анимация Stroke Line.
апреля 29, 2009
Задача – надо анимировать линию, летящую по произвольному пути. )) Stroke эффект одним словом.
Задача 2 – анимировать процесс рисования некоей произвольной фигуры.
Если кому то много букв — смотрим видео версию.
Если кому то жалко трафика — читаем ниже.
Все может быть решено довольно просто.
1. Рисуем законченный путь нашей линии (кривая)
2. Дублируем кривую на новый слой.
3. Создаем круглый шейп и конвертируем его в графический клип.
4. Слой с дублем кривой превращаем в моушн-гайд для круглого шейпа.
5. Делаем анимацию шейпа по всему пути.
6. Выделяем фреймы с моушнГайдом и шейпом, вырезаем их и создаем новый графический символ в билиотеке, куда и вставляем вырезанные фреймы. Или пользуемся необычайно полезной штукой Layers manager, который можно найти тут: http://flash-animation.ru/category/plugins/ (Лерика, если ты это читаешь поправь линки! Прямая ссылка на пост о плагине не работает!!!)
7. Временно переводим моушнГайд в обычный слой, чтобы видеть путь в клипе маски.
8. Возвращаемся на сцену – совмещаем кривую и клип.
9. Возврашаемся в клип маски, и восстанавливаем моушнГайд для слоя с кривой.
10. Слой с клипом, в котором находится анимация превращаем в маску для слоя с изначальной кривой. Ура.
Задача 2.
1. Переводим клип с анимацией в ранг MovieClip. Дадим ему instance-имя masker.
2. Обернем masker в еще один мувиКлип с instance-name = mask_mc
3. Конвертируем кривую в мувиКлим с instance-name = line_mc
4. Пишем на таймлайне с линией и маской нехитрый код.
var mask_count:Number = 1; mask_mc.masker.stop(); onEnterFrame = function():Void { var mc:MovieClip = mask_mc.masker.duplicateMovieClip("mask"+mask_count,mask_count); mc.gotoAndStop(mask_count); if(mask_count == mask_mc.masker._totalframes) { delete onEnterFrame; } mask_count++; } line_mc.setMask(mask_mc);
5. Готово.
Popularity: 23% [?]
Entry Filed under: AS2.0,ActionScript,анимация
10 комментариев
1. ShuRik | апреля 30, 2009 at 6:14
Я так понял из аидео, что анимированный кружок дублируется и поэтому линия зарисовывается постепенно? А не проще было это нарисовать? Я всегда так делал.
2. murejib | апреля 30, 2009 at 7:21
ShuRik, я тоже всегда так делал, разбивал линию на участки, группируя их, потом раскидывал на слои и выстраивал лесенку покадровую. А этот ход придумал буквально вчера, и думаю он более гибкий — можно регулировать скорось прорисовки, если вдруг это необходимо.
Конечно минус в том, что анимация видна только при публикации, мне лично милее видеть все в процессе работы, чем галюцинировать и представлять как оно тут будет.
Однако рецепт есть, и возможно кому то он придется как раз кстати.
3. Юлия R. | мая 5, 2009 at 12:16
А я не могу сделать вторую задачу… а так надо..
не могу понять что как назвать и куда код написать..
можете поподробнее объяснить или исходник скинуть ? =/
4. murejib | мая 5, 2009 at 13:26
http://murejib.com/sources/stroke_fl8.fla.zip
Исходник.
5. murejib | мая 12, 2009 at 10:26
Блог что-то поттупливает, некоторые комментарии уходят в небытие.
Отвечаю на вопрос, как обратный процесс организовать: чтобы линия стиралась.
Для этого достаточно первым кадром продублировать маску ровно столько раз, сколько в ее анимации кадров, соответственно, смещая каждый дубль на один кадр.
Каждому дублю давать имя с неким порядковым номером N, который естественно инкрементируется с каждым новым дублем.
потом запустить onEnterFrame, в котором каждый кадр стирать дубль N, уже декрементируя порядковый номер.
6. chunya | мая 25, 2009 at 14:04
а если это объяснить популярно? урок можно этот дополнить? ^_^
7. murejib | мая 25, 2009 at 23:26
- видео
- пошаговая инструкция
- исходник
Куда еще популярнее? ))
Я оставляю за читателем священное право дать работ своему мозгу.
8. Юлия R. | мая 26, 2009 at 2:49
Ну что есть то есть)) Надо думать)
Исходник у меня всё ж не открылся. Т.к. флеш у меня доисторический. Но зато я скачала видюху и посмотрела в замедленном) И там всё видно)
9. chunya | мая 26, 2009 at 7:51
Уважаемый murejib, Вы не поняли, я попросил более подробно объяснить про обратный процесс…. этой мой комментарий тогда поттерся, я просил объяснить про обратный процесс… но я попробую угу)
10. Andrew | мая 27, 2009 at 16:04
Поменял имена ( в скрипте тоже) баботаеют только по отдельности, в одном кадре вместе, нет? Почему, возможно это очень очевидно, но я ОЧЕНЬ новенький в этом))) Спасибо. ( вот то что получилось, исправте пожалуйста если не сложно http://ifolder.ru/12328169)