Vector Morphing: AdobeFlashCS3 vs AnimeStudioPro6.0 from murejib on Vimeo.

Урок по шейп-твин анимации на Flash и обзор векторного морфинга в Аниме Студио Про.

Флеш анимации созданные в процессе:
FLASH
rabbit.swf

bikeRider.swf

ANIME STUDIO PRO
rabbit_AP.swf

womanRunAP.swf
(Полноценный рендер: http://vimeo.com/8835409)

Кто он такой, спросите Вы?

Не знаю. Но блог обещает быть интересным. Поживём увидим?

Для тех, кто вообще не в курсе, заявляю, что это не вымогательство и не способ нажиться на милосердии. Имена, стоящие за ссылкой, более чем достойные и авторитетные.
Кросспостов много не бывает. Человеческая жизнь – одна.

Все может быть решено довольно просто.

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. Готово.

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

Сегодня же я расскажу о колесах. Будет скрипт )) Несложный, но он даст нам чудное колесо, и оно будет вращаться в точности в соответсвии с тем, как далеко продвигается то, к чему это колесо крепится ))) Итак, под кат, там есть небольшой мультик ))

 

Оставим пока лошадей ) (Я намерен, кстати выложить видео запись процесса работы над этой анимацией – так сказать серия 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; // поворачиваем колесо
	}
}

2. Motion Editor.
Все бы ничего, радует и то, что есть Roving, и то что каждому свойству своя кривая, но в итоге:
– редактирование пути сделано криво. Несмотря на заверения, что путь — это обычная кривая безье, редактируется она умопомрачительно жутко. Вопреки всем ожиданиям.
– Перенос клипа из одного проекта в другой и его скейлинг привел к тому, что моушн твин безобразным образом сбился. Решением был только конвертирование моушнтвинов в покадровку.
В целом конечно экономит время. Но использование AS IS не всегда возможно.

3. 3D – Без коментариев вообще.
Отсутсвие z-ордеринга сводит на нет все возможные плюсы.

4. Новые панели. Местами удобнее. В целом, пока не привычно, но это вопрос наработки. Как мне показалось – шаг в правильном направлении.

5. Поиск по библиотеке – спасибо постарались. Серьезно.

6. Замена отсутсвующих шрифтов через remapping. Чего то намудрили. Понятно, что сделан шаг в сторону правильного использования шрифта, разделяя гарнитуту и начертание. Но в итоге, в некоторых случаях слетает это самое начертание при ремапинге. Приходится ручками переставлять шрифт на корректный, А в случае больших проектов – это геморрой, в цс3 это было проще.

7. Многие клянут разработчиков на чем свет стоит, что они до сих пор не сделали нормальный вывод видео, мол скрипты и мувиклипы не поддерживаются.
– Да, до идеала еще далеко. Но при экспорте в квиктайм все же есть огромные подвижки.
И кажется, это тема для следующего поста. Дайте только время подготовиться.

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

В фетивальной программе мне удалось принять участие с коротким фильмом «Пупыри», выставлявшимся в номинации Мультфильм. О чудо! Работа была отмечена спец призом с формулировкой «За пупырь и хорошую анимацию» )) Теперь я могу повесить диплом на стенку и во дни тягостных сомнений убеждать себя в том, что анимация – это то, чем стоит заниматься )))



Позволю себе немного побрюзжать ))) Поскольку все участники имели возможность посмотреть все работы прошедшие преселект, мне удалось составить представление об общем направлинии и уровне работ.
Скажу сразу – все неоднозначно. Фестиваь всеобъемлющий и наряду с весьма качественной анимацией трехмерной и трех-минус-один-мерной, представлены были работы в худшем смысле слова флешовые )) – слабый сценарий, отдаленное представление об анимации как таковой, ну и слабая реализация в целом. Впрочем, все начинают, и, надеюсь, люди которые хотят всерьех заниматься анимацией, начнут искать материалы для самообразования и совершенствования. Потенциал был фактически в каждой работе. К слову сказать, свою работу я тоже могу покритиковать во многих аспектах и расцениваю ее как учебную ))
Но, возможно, в том и прелесть фестиваля, что он дает возможность показать свои работы зрителю. Когда ты делаешь свой фильм на 13,3 ” мониторе ноутбука, и вдруг видишь его на огромном экране в концертном зале ))) Ощущение просто чудесное )) Понимаешь что не единой работой жив человек, есть еще что то и во спасение души )))

http://2009.dcafe.ru

А для самых непонятливых , сегодня утром, под звуки ремнота у соседей, с 28-го раза я записал аж целый видео-туториал

http://demo.dcafe.ru/decaflake/decaflake09_tutorial.swf

Ну и с грядущим всех праздником!