Сегодня урок о шейп-твин анимации на флеш и первая ласточка — обзор Anime Studio Pro в свете возможностей векторного морфинга.
Если возможности АнимеПро заинтересуют Вас, я серьёзно подумаю над серией обзорных видео уроков по этому инструменту, на мой взгляд очень мощному. Кости действительно работают, морфинг действительно полезен, 3Д хоть и не идеален, но работает лучше чем в том же Флеш.
Для тех, кто вообще не в курсе, заявляю, что это не вымогательство и не способ нажиться на милосердии. Имена, стоящие за ссылкой, более чем достойные и авторитетные.
Кросспостов много не бывает. Человеческая жизнь – одна.
Задача – надо анимировать линию, летящую по произвольному пути. )) 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. Не смотря на это )) буду оставаться на этой версии, ибо верю, что рациональное, посеянное в этом релизе, когда нибудь найдет свое человеческое воплощение.
Еще один блог о флеш-анимации. Чем больше – тем лучше, вот что я вам скажу. Доброжелательный кот обещает уроки по флеш анимации в общем, а так же о ее применении в геймдеве. Впрочем – пойдите, почитайте. И за ухом почесать не забудьте. Коты, вроде бы, это любят )
Вернулся из Вологды, где 28-29 марта проходил фестиваль Мультиматограф V, а также, как выяснилось (!) RAFPUG – и всё это в одно время в одном месте )) Кто из аниматоров был не в теме – очень удивлялись, какое отношение к анимации имеет семинар Ивана Дембицкого о плагинной архитектуре )) Шире взгляд, товарищи!
В фетивальной программе мне удалось принять участие с коротким фильмом «Пупыри», выставлявшимся в номинации Мультфильм. О чудо! Работа была отмечена спец призом с формулировкой «За пупырь и хорошую анимацию» )) Теперь я могу повесить диплом на стенку и во дни тягостных сомнений убеждать себя в том, что анимация – это то, чем стоит заниматься )))
Позволю себе немного побрюзжать ))) Поскольку все участники имели возможность посмотреть все работы прошедшие преселект, мне удалось составить представление об общем направлинии и уровне работ.
Скажу сразу – все неоднозначно. Фестиваь всеобъемлющий и наряду с весьма качественной анимацией трехмерной и трех-минус-один-мерной, представлены были работы в худшем смысле слова флешовые )) – слабый сценарий, отдаленное представление об анимации как таковой, ну и слабая реализация в целом. Впрочем, все начинают, и, надеюсь, люди которые хотят всерьех заниматься анимацией, начнут искать материалы для самообразования и совершенствования. Потенциал был фактически в каждой работе. К слову сказать, свою работу я тоже могу покритиковать во многих аспектах и расцениваю ее как учебную ))
Но, возможно, в том и прелесть фестиваля, что он дает возможность показать свои работы зрителю. Когда ты делаешь свой фильм на 13,3 ” мониторе ноутбука, и вдруг видишь его на огромном экране в концертном зале ))) Ощущение просто чудесное )) Понимаешь что не единой работой жив человек, есть еще что то и во спасение души )))
Вашему вниманию видео туториал по костяшкам.
Если размер картинки Вас не устраивает – пройдите по ссылкам на мою страницу на Vimeo и скачайте исходное видео.
В качестве новогодней поздравительной открытки в этом году мне довелось создать чудо-конструктор на радость офисным работникам. Конструируем снежинки, распечатываем выкройку и режем-режем-режем! Ну или не режем, а пишем всяческие позравления и отправляем другу!
