Ниндзя — анимация бега.

Я сейчас занимаюсь разработкой графики и анимации для сиквела одной игры для компании Wheemplay и подумала, что возможно будет полезно записывать свой рабочий процесс на видео и выкладывать его в блоге. Ведь именно наблюдая за работой других людей мы учимся её делать сами.

Для записи я выбрала программку Camtasia Studio 6. Если кто-то может посоветовать что-нибудь хорошее и бесплатное — буду премного благодарна. Пока что это мой первый блин, надеюсь что ком не сильно уж большой.

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

А вот собственно сам рабочий процесс. Ужала до 7 минут, дабы не слишком вас утомлять 🙂

edit multiply frames

вчера мне задали такой вопрос: как можно отредактировать сразу несколько ключевых кадров?
такой вопрос часто задают новички, но и что самое забавное опытные флешеры тоже )

данный метод может быть применён как к последовательности ключевых кадров (например ряд импортированных картинок png), так и к комплексной motion анимации.

1. рассмотрим на примере анимации акулы (да, я знаю акулы плавают по другому! 🙂 )
2. к примеру нам нужно отрезайзить всю анимацию вместе с рыбкой и положением ключевых кадров в 2 раза. такое случается достаточно часто, например когда нужно делать несколько баннеров с различным разрешением.
на таймлайне есть ряд очень полезных кнопочек. слева-право: onion skin, onion skin outlines, edit multiply frames, modify onion markers
первые 2 зачастую используются аниматорами при покадровой анимации
3. onion skin позволяет одновременно просматривать несколько последовательных кадров сразу. вверху на таймлайне вы можете увидеть маркеры, которые просто регулируются и обозначают количество выделенных кадров до и после текущего. в данном случае я отметила 3 кадра после. результат которые получается вы видите справа.
4. onion skin outlines работает таким же образом, единственное отличие кадры отображаются аутлайнами.
5. modify onion markers позволяет быстро изменить настройки маркеров
6. ну и собственно, то что нас больше всего интересует edit multiply frames — позволяет редактировать сразу несколько ключевых кадров.
замечу сразу, что почему-то у многих возникают трудности при использовании этого режима, поэтому расскажу алгоритм действий, который действует наверняка:

1. выбираем режим edit multiply frames
2. выделяем маркерами нужный промежуток кадров вручную или с помощью команды onion al. картинка будет выглядеть как показано на рисунке: будут отображаться только ключевые кадры анимации.
3.выделяем все кадры промежутка, в нашем случае, т.к мы выбираем все кадры, можно просто кликнуть по слою. все символы при этом должны быть выделены.
4. выбираю инструмент transform нажатием горячей клавиши «Q». всё отображаемые символы должны выделиться группой для трансформации. если выделился только один символ, возможно вы что-то сделали не так, повторите процедуру.
5. скейлим до нужного размера (рис.7)

8. проверяем результат 🙂

для shape анимации тоже можно использовать этот метод, но если вы используете shape hints, то с ними будут проблемы, ибо они остаются на прежних местах.

зы: конечно можно конвертировать весь слой в movie clip и отресайзить как хочется, но есть случаи когда этот способ не покатит, тогда вы сможете опробовать данный метод )

ззы: ну и бонусом выкладываю исходник акулы

анимация каскадом

«анимация каскадом». я не нашла такого определения в интернете, поэтому буду думать что его придумала я :о))))))
по сути это когда какие-то объекты повторяют одно и тоже действие, при этом каждый последующий объект начинает действие позже предыдущего.

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

1. создаём наш список. каждое слово отдельно.
2. преобразовываем каждое слово в символ и выравниваем их по левому краю. после чего переносим одно из слом на максимальную высоту вниз и распределяем символы на одинаковое расстояние.
3. получаем аккуратный список. то же самое делаем с маркерами, если таковые имеются.
4. распределяем символы по слоям.
5. создаём ключевые кадры на одинаковом расстоянии и делаем в них какие-то изменения, одинаковые для всех символов.
6. например, я сместила и применила эффекты alpha и blur.
7. создаём анимацию.
8. теперь самое главное. смещаем каждую анимацию на несколько кадров вправо, чтобы получился каскад.
9. ну и наконец выравниваем анимацию, заполняя её статическими кадрами.
10. вот что у меня в результате получилось.
11. также с помощью каскада можно делать шлейф

по сути этого же эффекта можно добиться используя символ graphic, если задать ему параметр loop и менять в каждом из символов начальный кадр анимации (собственно такой способ описан в статье murejib, которая и вдохновила меня на этот пост).
но! если нам нужно изменить параметры анимации, чтобы например следующая анимация начиналась не с каждого второго кадра, а с каждого 3-го? менять стартовые кадры graphic гораздо хлопотнее чем сдвинуть кадры на таймлайне. к тому же каскад более наглядный и сразу можно увидеть ошибку, чего не скажешь о номерах кадров :о)

зы: xitri, ничё что я стырила твою идею с просмотром изображений?… уж больно она удобная ;о)

горячие клавиши

недавно я была поражена, узнав, что один из моих знакомых флешеров добавляет ключевые кадры вызовом контекстного меню и выбором команды insert keyframe! поэтому и решила написать эту статью для начинающих флешеров.

горячие клавиши для форматирования кадров

f5 — добавить статический кадр. также можно заполнить выделенный промежуток статическими кадрами.
f6 — добавить ключевой кадр. преобразовать статический кадр или группу в ключевые.
f7 — добавить пустой ключевой кадр. или соответственно преобразовать статический кадр или группу в пустые ключевые.
shift+f5 — удалить кадр или группу выделенных кадров
shift+f6 — преобразовать ключевой кадр в статический (можно также преобразовывать группу ключевых кадров)

это стандартные сочетания клавиш. другие функции нужно назначать самостоятельно.

назначение горячих клавиш

например очень часто нам приходится создавать или удалять motion tween, a сочетания клавиш для этого действия нет. рассмотрим как это делается.

  • для начала вызываем пункт меню edit -> keyboard shortkuts…
  • далее дублируем стандартные установки с помощью кнопки dublicate. этого можно и не делать, но лучше перестраховываться
  • из списка команд выбираем нужную. в нашем случае это insert -> timeline -> create motion tween
  • добавляем новое сочетание с помощью кнопки add shortcut (плюсик)

  • далее нажимаем нужное сочетание клавиш. если такое сочетание уже зарезервировано, появится сообщение содержащее описание команды на которую это сочетание зарезервировано. в данном случае я выбрала сочетание ctrl+shift+t (t — tween, легко будет запомнить).
  • нажимаем ok. всё готово!

теперь при нажатии на эти клавиши у нас будет создаваться motion tween. и что ещё замечательно — этим же сочетанием движение можно удалить!

проанализируйте, какими командами вы пользуетесь очень часто и назначте на них горячие клавиши.
я например использую ctrl+shift+y и ctrl+shift+u для flip horisontal и flip vertical соответственно. а ещё клавишу «/» для включения/отключения привязки. :о)
а какие нестандартные сочетания ипользуете вы?

об исходниках

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

1. никогда не используйте ключевые кадры без крайней необходимости, особенно если это слой с фоном, который на протяжении всего ролика не меняется. ну зачем, спрашивается, последний кадр делать ключевым? при продлении фона на временной шкале нужно использовать статические кадры (hot key f5).

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

3. никогда не применяйте к графическим объектам и тексту анимацию motion, предварительно не преобразовав их в символы. это раздражает больше всего, т.к в результате образуется большое количество символов graphic (с именами Tween), с которыми жутко неудобно работать!
если вы создали текст, который планируется анимировать. не поленитесь преобразовать его в символ. вам потом будет гораздо удобнее с ним работать.

4. давайте вменяемые имена символам и слоям. ну хотя бы только символам! порой очень много времени уходит на поиск того или иного символа в библиотеке.

5. сортируйте символы, музыку и битмапы по папкам. это же просто напросто удобно! особенно если количество элементов в библиотеке превышает пару сотен.

6. удаляйте все неиспользуемые символы из библиотеки. для этого существует даже специальная команда «select unused items». исключение составляют только элементы, которые планируется использовать в дальнейшей работе.

вот вроде всё что удалось вспомнить на вскидку. подскажите если что забыла.

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

но если вы привыкли работать в хаосе — никто вас осуждать не будет. просто помните, что с вашими исходниками возможно будет работать живые люди. поберегите хотя бы их! 🙂