Обзор Motion Editor (редактор движения)

Давненько ничего не писала в блог. Но не потому, что разленилась и разотдыхалась. Как раз наоборот – заработалась и ушла в себя:) За это время скопилось много вопросов, понемножку постараюсь ответить. А этот пост посвящен редактору движения во флеше – Motion Editor.

Motion Editor одно из нововведений во флеше, появилось, кажется, в версии cs4. Адоб решил добавить больше возможностей для анимации и усложнить все на свете.

Motion Editor я не пользуюсь часто. Наверное, потому, что редко использую Motion Tween (а его можно применить лишь  к этому типу анимации), привыкла к Classic Tween, да и не возникало необходимости. Решила протестировать его, заодно и заполнить пробелы, которые имеются в моей голове.

Motion Editor позволяет создавать замедление анимации, ускорение, волнообразные движения, пружинность (не уверена, что есть ли такое слово:) и т.д. В Classic Tween характер движения можно редактировать на вкладке Properties – Tweening – Ease(кликнув по карандашику, открывается окно редактирования).

 

Motion Editor находится рядышком с вкладкой таймлайн (Timeline). Если он там отсутствует – открываем Window – Motion Editor.

Итак,

1.Создаем анимацию. Как уточняла выше, Motion Editor применяется лишь к анимации Motion Tween.

Для примера возьму несложную анимацию, она будет состоять  из 2-х ключевых кадров:

1)создаем объект и конвертируем его в символ (F8);

2)выделив объект, кликаем по нему правой и выбираем Create Motion Tween. Программа автоматические создает дополнительные кадры на таймлайне, и все они окрашиваются с синий цвет;

3)ставим ползунок  в последний кадр и выставляем конечное положение объекта (у меня машинка), сдвигая, например, вправо мышкой.

На таймлайне анимация выглядит так:

 

2.Переходим во вкладку Motion Editor.

Для начала настраиваем саму шкалу. По умолчанию она очень крупная – не видно последнего кадра, что совсем не гуд. С помощью кнопок (см.картинку ниже) меняем масштаб (сужаем по высоте и ширине).

 

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

4.Применяем эффекты к анимации.

Эффекты применяем к анимации во вкладке Basic Motion, выбирая из списка, сформированного ранее (на картинке ниже отмечено оранжевым кружком). Что интересно, эффект можно применять в двух координатах – х и у. И анимация выглядит совершенно по-разному в зависимости от координаты. Можно применить к х и у одновременно.

5.Также в самом редакторе можно добавить к объектам фильтры и эффекты:

 

5.Переходим на таймлайн, где размещается анимация, появляется траектория движения с маленькими точками. По ним можно определить характер движения (посерединке анимация замедлится).

 

Сам путь можно легко отредактировать вручную, просто потянув стрелочкой, что тоже очень удобно.

 

И вот несколько примеров, что  у меня получилось:

При желании можно скачать исходник анимации, чтобы изучить детальней.

Комментарии
Аватар пользователя Сергей

Автор, ваша статья понятна не полностью. Пришлось искать инфу в англоязычных статьях! Я делаю два ключевых кадра и между ними создаю motion tween (как я всегда и делал со старым твином - и все работало). Как вы понимаете, сейчас ничего не работает. Нет объяснений об "особом" создании motion tween.

Аватар пользователя Oksana

Сергей, спасибо за подсказку. Я обязательно дополню этот пункт, написано не совсем точно.

Аватар пользователя Артём

Добрый день, интерисует вопрос, можно-ли применить подобный эффект при изменении масштаба объекта. Я так и не разобрался как это делается. При движении объекта все работает, при масштабировании замедление работает иначе. Буду очень признателен. спасибо. Еще бы хотелось увидеть подробный урок по использованию масштаба в перспективе (при входе во Flash, в образцах файлов есть шаблон - но я честно не до конца разобрался). Спасибо

Аватар пользователя Артём

Сам разобрался с замедлением масштаба. Просто невнимательно смотрел =). Просто напротив строки "преобразование" необходимо выставить нужный тип замедления. Вопрос "Масштаба в перспективе" все еще актуален =)

Аватар пользователя Oksana

Артем, шаблон масштаб в перспективе (Perspective Zoom) - это обычное приближение-отдаление объекта (увеличение). Есть, конечно , некоторые ньюансы , чтобы создать псевдоэффект перспективы в 2д (например куст , приближаясь к нам, в то же время уезжает немного в сторону (это пример из заготовки в коровой). Спасибо, что обратили внимание на эти заготовки, я сама ими никогда не пользовалась, будет время - разберусь более подробно.

Аватар пользователя Стёпа

>>А нафига этот MotionEditor нужен?Smile

Если речь идёт только об анимации, к различным частям которой в последствии не будет доступа из экшнсрикпта, и кроме того если вы привыкли пользоваться классик-твином, то действительно не нужен.

Однако когда нужен программный доступ к различным частям анимации, классик твин вообще не рекомендуется. Приведу пример что такое программный доступ к частям анимации. К примеру вы делаете анимированного персонажа, и хотите создать систему его скинования. Анимацию вы создадите всего один раз (например бег), а из кода потом будет доступатся, скажем, к руке, и прикреплять к ней рукав из нового скина. Лайфсайкл анимированных объектов внутри классик твина - это с точки зрения кода вещь невероятно непредсказуемая и чреватая ошибками. Поверьте моему горькому опыту, который в итоге закончился переделкой всех классиков на моушны. Зато вот ментальная модель моушнтвинов - это очень чёткая, ясная и невероятно простая концепция. Есть объект, свойства которого интерполируются сквозь время по определённой кривой, которая задаётся ключевыми значениями этих свойств и так нахываемым изом (ease). Такая концепция предсказуема с точки зрения жизненного цикла объектов, к которым применен моушнтвин.

>>Ведь все то же самое можно сделать с помощью классик твина.

Далеко не всё.

Во первых в классик-твине каждый ключевой кадр - ключевой сразу для вех свойств объекта. В то время как в моушн-твине могут быть ключевые кадры только для позиции, или только для вращения, или только для альфы. Иным словами в моушн-твине можно создать совершенно независимые анимации разных свойств одного и того же объекта. В то время как в классике вам придётся анимировать все свойства сразу. И если вы хотите, чтобы вращение объекта анимировалось независмо от его положения, вам придётся посидеть с бумажкой, ручкой и полиномами N-ой степени, чтобы обеспечить плавность, присущую моушн-твину в таком же случае. Даже после такой манипуляции это всё равно будет лишь хрупкая иммитация независимости анимации разных свойств, которую нужно будет пересчитывать опять же на бумажке, если анимация слишком медленная/быстрая/просто не нравится.

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

Стоит однако отметить, что довольно часто потребности в такой свободе анимационных действий нет, и обычный классик с указанием изов на участках между клюбчевыми кадрами - вполне себе решение.

Кроме того надо признать, что моушн-эдитор пока довольно сыр, и пользоваться им без матерков в промышленных масштабах - большого терпения стоит.

Классик-твин - трамвай, а моушн-твин - космический корабль. Съездить к бабушке можно и на трамвае. А вот достичь луны в ваших анимациях...

Аватар пользователя Сергей

Во флеше стиль такой - все сырое. Ни библиотека, ни редактор кода - сколько времени и версий прошло, не стали удобнее.

Аватар пользователя multik

Спасибо за такой подробный комментарий. Надо Motion Tween изучить получше.

Скажите а есть ли разница в весе (в КБ) от того сделаем мы всю анимацию на Classic Tween или на Motion Tween? Если есть, то на сколько % больше?

Аватар пользователя Стёпа

Если честно такими деталями не интересовался. Во всех проектах, что я занимался, бóльшую часть места занимала графика, а не анимации. Тут наверное нужно ради эксперимента взять и сделать две идентичные анимации, одну моушн, а одну классик. И поглядеть на размер SWF. Не FLA, а именно SWF.

Аватар пользователя Oksana

честно - не знаю:) но это легко проверить - создать идентичную анимацию Classic и Motion Tween

Аватар пользователя Oksana

Степан, последним абзацом вы меня заинтриговали:) Попробую все-таки более детально изучить этот редактор

Аватар пользователя djz

>>Лайфсайкл анимированных объектов
Чиво это такое?

Да, моушен твин -крутая штука, иногда юзаю для ситуаций из второй цитаты Степы (отдельная друг от друга анимация параметров), но, всякий раз матерясь, перехожу на классик )

Аватар пользователя Стёпа

Lifecycle - время жизни объекта. С точки зрения кода жизненный цикл объекта внутри классик-твина - вещь весьма капризная и не предсказуемая. У моушнов всё хорошо и предсказуемо.

Аватар пользователя Renderdoll

Оксана, спасибо за обзор, а то до вашей статьи никак с ним не могла разобраться. Использовала как-то наугад, результат, естественно, тоже далеко не всегда радовал, теперь вот со знанием дела попробую его поюзать. Smile

Аватар пользователя Oksana

Это общее знакомство с редактором, изучение методом тыка - самое эффективное:)

Аватар пользователя Максим

Все! Я уже баннера начал делать с Motion Editor. На самом деле очень удобно. Удобно менять объекты и они автоматом становятся на место прежнего. И еще куча фишек связанных с этим инструментом. Удобно. Еще раз спасибо!

Аватар пользователя Oksana

на здоровье)

Аватар пользователя RoSJT

Анимацию Motion Tween можно сохранять и потом применять к другим объектам (через окошко Motion Presets). Удобно для создания библиотеки эффектов.

Аватар пользователя Максим

Спасибо большое! А то что-то тоже все calssic использую ))))))

Аватар пользователя Oksana

да уж, привычка)

Аватар пользователя Андрей

Урра новая статья!)) И снова спасибо. Это хорошо, что много работы, но и отдыхать не забывайте))

Аватар пользователя Oksana

да, Андрей, спасибо) следующий пост будет об отдыхе)

Аватар пользователя orbit

У меня вопрос!
А нафига этот MotionEditor нужен?Smile
Ведь все то же самое можно сделать с помощью классик твина.

Аватар пользователя Oksana

мне кажется, что не все)

Аватар пользователя orbit

Но имхо инструмент бестолковый. Вот для чего его можно реально использовать?

Это как deco tool которым можно сделать беспонтовые дым/огонь/поток частиц. Абсалютно непродуманый инструмент, а могли бы сделать крутой редактор частиц Sad

Аватар пользователя Oksana

при желании его можно применить, например, всяко-разные текстовые эффекты для баннеров. Другое дело, что те, кто пользовался classic tween и привык к нему (как я, например:), вряд-ли активно будут его использовать.
А deco tool я часто использую, когда делаю паттерны (создавать деревья, молнии - это все мусор, согласна). Так что кому бесполезно,а кому очень даже)

Аватар пользователя Александр-HIMиk

Ой, вот новый «Flash» уровня CS4 с такими сложными редакторами как в Adobe After Effects я не смог освоить. Шаблон порвался Smile

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки