Задача – надо анимировать линию, летящую по произвольному пути. )) 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. Пишем на таймлайне с линией и маской нехитрый код.
Сейчас я работаю над одним весьма интересным проектом — это будет всего лишь интерактивная флеш-шапка, но она будет полна анимации с алогичным волшебством: кони-рыбы, люди-фрукты и так далее ))
В процессе работы, я уверен, будет накапливатся масса интересных и полезных мелочей, коими я конечно же поспешу поделиться. Сейчас таких мелочей есть две: программный растеризатор сложного вектора. Вектора будет много, и он как пить дать убъет процессор; пришлось выдумывать хитрые вещи. Но об этом позже, сначала я должен убедиться в эффективности выбранного решения ))
Сегодня же я расскажу о колесах. Будет скрипт )) Несложный, но он даст нам чудное колесо, и оно будет вращаться в точности в соответсвии с тем, как далеко продвигается то, к чему это колесо крепится ))) Итак, под кат, там есть небольшой мультик ))
Оставим пока лошадей ) (Я намерен, кстати выложить видео запись процесса работы над этой анимацией – так сказать серия Animator at work)
Понаблюдайте за каретой. Колеса, как видите вращаются весьма правильно )) Они следуют всем законам земным и божеским. Вы думаете, я сидел с линейкой и мерял кадр за кадром – каково смещение? Нет. Я вспомнил, что в школе я неплохо разбирался в геометрии ))
Итак, каждое колесо запаковано в мувиКлип, сама карета с ее вложенной анимацией также упакавана в мувиклип.
Каждый клип колеса имеет точку регистрации ровно в его центре, чтобы колесо вращалось вокруг своей оси.
Из геометрии мы знаем формулу длины окружности L = 2PI*R, где R – радиус.
В правильном колесе радиус – это половина ширины клипа.
Рассуждаем логически: когда наше колесо повернется на 360 градусов, оно должно сместиться на расстояние L. Супер! Значит, если колесо повернется на один градус, расстояние будет равно L/360! Запомним это число, и повесим на колесо событие onEnterFrame в котором смотрим — на сколько сместилась карета (моушвтины тоже считаются!), и считаем угол поворота – дистанцию делим на L/360. Вуаля.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
init(wheel1); // обучаем первое колесо
init(wheel2); // обучаем второе колесоfunction init(mc:MovieClip):Void{
mc.radius = mc._width/2; // собрали радиус
mc.baseX = mc._parent._x; // запомнили начальную позицию кареты// l = 2PI*R - ах, геометрия...
mc.degreeLength = (2*3.1415926*mc.radius)/360; // смещение при повороте на один градус
mc.onEnterFrame = function():Void{var distance:Number = this.baseX - this._parent._x; // на сколько сместилась карета?this._rotation = -distance/this.degreeLength; // поворачиваем колесо}}
Многие попробовали уже этот продукт, и я в том числе. На одном из форумов по анимации был задан вопрос по впечатлениям от новой версии. Увлекшись ответом, понял, что надо поместить его в блог. Жду и Ваших впечатлений.
1. Кости.
Для проб и восторженных ахов — очень хорошо. Ура.
В реальном проекте показали себя с отвратительной стороны. Потратил полтора часа на создание скелета для персонажа, все в итоге раползлось. Плюнул и, с большим удовольствием, сделал все в AfterEffects с помощью Puppet Tool.
Скептикам: как работают кости, я знаю, я даже сделал серию уроков по этому инструменту. Теперь вынужден признать — сырое.
2. Motion Editor.
Все бы ничего, радует и то, что есть Roving, и то что каждому свойству своя кривая, но в итоге:
– редактирование пути сделано криво. Несмотря на заверения, что путь — это обычная кривая безье, редактируется она умопомрачительно жутко. Вопреки всем ожиданиям.
– Перенос клипа из одного проекта в другой и его скейлинг привел к тому, что моушн твин безобразным образом сбился. Решением был только конвертирование моушнтвинов в покадровку.
В целом конечно экономит время. Но использование AS IS не всегда возможно.
3. 3D – Без коментариев вообще.
Отсутсвие z-ордеринга сводит на нет все возможные плюсы.
4. Новые панели. Местами удобнее. В целом, пока не привычно, но это вопрос наработки. Как мне показалось – шаг в правильном направлении.
5. Поиск по библиотеке – спасибо постарались. Серьезно.
6. Замена отсутсвующих шрифтов через remapping. Чего то намудрили. Понятно, что сделан шаг в сторону правильного использования шрифта, разделяя гарнитуту и начертание. Но в итоге, в некоторых случаях слетает это самое начертание при ремапинге. Приходится ручками переставлять шрифт на корректный, А в случае больших проектов – это геморрой, в цс3 это было проще.
7. Многие клянут разработчиков на чем свет стоит, что они до сих пор не сделали нормальный вывод видео, мол скрипты и мувиклипы не поддерживаются.
– Да, до идеала еще далеко. Но при экспорте в квиктайм все же есть огромные подвижки.
И кажется, это тема для следующего поста. Дайте только время подготовиться.
В целом я впервые нахожусь в некотором недоумении от апдейта Flash. Не смотря на это )) буду оставаться на этой версии, ибо верю, что рациональное, посеянное в этом релизе, когда нибудь найдет свое человеческое воплощение.
Еще один блог о флеш-анимации. Чем больше – тем лучше, вот что я вам скажу. Доброжелательный кот обещает уроки по флеш анимации в общем, а так же о ее применении в геймдеве. Впрочем – пойдите, почитайте. И за ухом почесать не забудьте. Коты, вроде бы, это любят )
