Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
«Дикая Орхидея»
tn_gallery_974_3_176648.jpg
Фотодуэль «Шоколад»
© jokerom
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Циклическая походка, урок по непрограммной флеш-анимации
V
Viva
сообщение 18.01.2012 - 12:31
Сообщение #1


Злая и пушистая. Белая и колючая.
******

1 место1 местоМеткий стрелок2 место2 местоМеткий стрелокЗвезда писателя I степени2 местоЗа вклад в развитие ArtTower.ruЗа вклад в развитие ArtTower.ru

Группа: Старшие советники
Сообщений: 4613
Регистрация: 10.05.2006
Из: Россия, Черноземье, Липецк
Пользователь №: 45
Вне группировок:)
Галерея Блог


Симпатии:  217  


В этом уроке мы научим бодро шагать анимационного персонажа, создав всего 5 ключевых кадров и столько же их копий. Такие ключевые кадры всегда будут основополагающими в походках любого другого характера, таких, как: походка на цыпочках, крадучись, пьяная… Пять ключевых кадров составляют половину цикла или один шаг. Соответственно, полным циклом считаются два шага: шаг правой ноги и шаг левой ноги.
Прежде всего, нам понадобится персонаж "болванчик" гуманоидного типа. Для быстрой подготовки можно, конечно, изобразить что-то наподобие – палка, палка, огуречик… Но я предлагаю Вам воспользоваться эскизом ниже и создать по нему точно такие же объекты-формы и преобразовать их в символы с точками регистраций в тех местах, где они обозначены на эскизе. Вы можете привнести свои черты во внешность своего персонажа, идеальной копии можно и не добиваться, но важно соблюсти заданную конструкцию. Такая его конструкция, пожалуй, самая оптимальная для выполнения поставленной задачи, но возможна и более сложная (подробная) конструкция для более сложной работы персонажа в кадре, и более простая. Эти характеристики полностью зависят от стилистики и сюжета анимационного фильма, в котором предстоит работать персонажу…

Шаг 1. Создайте новый документ шириной 500 px. и высотой 400 px.. Частоту смены кадров, как обычно, установите 25 fps., документ сохраните в удобной для Вас директории на локальном диске под названием "Циклическая походка". Импортируйте в документ эскиз с деталями будущего персонажа и поместите его в отдельный слой. Создайте над этим слоем еще один слой и обрисуйте векторные копии всех форм эскиза с контурной обводкой hairline (волосяная линия). В тех местах, где на эскизе контур отсутствует, желательно его удалить и в векторных объектах. Полученные векторные объекты конвертируйте в графические символы с соответствующими названиями и с точками регистрации в тех же местах, что указаны на эскизе. После всех этих операций в библиотеке Вашего документа, помимо растрового эскиза, должны появиться восемь графических символов:
"Бедро", "Голень", "Голова", "Кисть лев.", "Кисть пр.", "Рука", "Ступня" и "Туловище".



Шаг 2. Эскиз с деталями персонажа можно удалить из рабочего пространства сцены, а опустевший слой можно назвать "Фон", и создать на нем с помощью инструмента Rectangle Tool ® прямоугольник в размер рабочего пространства сцены. Прямоугольник залейте линейным градиентом от темно-коричневого через светло-голубой к ярко-голубому, как показано в примере ниже.



Шаг 3. Теперь можно приступить к сборке нашего персонажа в рабочем пространстве сцены. Перенесите все графические символы из библиотеки в сцену, помещая каждый символ на отдельный слой в той же последовательности, как показано в примере ниже. Соответственно, в сцене должно быть две копии графических символов: Бедро, Голень, Рука, Ступня – левые и правые. Копии графических символов относящихся к "левой" стороне персонажа я немного затенил, понизив их яркость на -10% (Панель Properties=>Color:=>Brightness). Придайте персонажу такую же позу и установите горизонтальные направляющие линии, как показано на эскизе ниже.

(Вертикальная направляющая в моем примере обозначает центр кадра, ее устанавливать необязательно).




Шаг 4. При таком характере походки в данной фазе движения ноги персонажа расставлены максимально широко друг от друга. Примем расстояние между пятками за некую постоянную величину, чтобы рассчитать смещение ступней вдоль горизонтальной оси в последующих ключевых кадрах. Также, подобные расчеты можно использовать для "протаскивания" панорамы, вдоль которой может проходить персонаж, оставаясь в центре кадра. Добавьте еще один слой над слоем "Фон" и в нем отметьте положение ступней на уровне края пяток двумя вертикальными полосками и объедините их в группу (Ctrl + G).



Шаг 5. Из полученной группы меток надо создать графический символ "Шкала", который мы подвергнем анимации в первую очередь, чтобы потом ориентируясь на получившееся движение, выстраивать остальные ключевые кадры походки персонажа. Добавьте еще один слой над слоем с группой желтых меток и назовите его "Шкала". Скопируйте группу меток на вновь созданный слой и уже отсюда преобразуйте эту группу в символ "Шкала". Внутри самого символа, разбейте группу на составные части (Ctrl + Shift + G), перекрасьте полоски в ярко-зеленый цвет и добавьте вправо еще две такие же вертикальные метки. Графический символ "Шкала" должен располагаться в сцене так, чтобы две левые зеленые метки перекрывали группу желтых меток на нижнем слое.

(Расстояние между всеми метками должны быть такими же, как в исходной группе).



Шаг 6. Выделите 23 кадр временной диаграммы одновременно во всех слоях и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). Именно в этот момент цикл начнет повторяться. В сцене переместите влево графический символ "Шкала" так, чтобы теперь уже две правые зеленые метки оказались над группой желтых меток. Затем, выделите первый ключевой кадр в слое "Шкала" и выполните по отношению к нему команду контекстного меню Create Motion Tween (Создать промежуточное движение). Нажмите Ctrl + Enter, чтобы просмотреть тестовую анимацию и сравните свой результат с моим.





Шаг 7. Теперь давайте определим середину полного цикла, т.е. то положение персонажа в кадре, когда его левая часть конечностей займет положение правой и наоборот. А голова и туловище останутся на том же месте. Как определить эту середину цикла? Да очень просто. Если двигать селектор кадров вдоль хронометрической линейки, то в 12-ом кадре Вы заметите, что вторая и третья зеленые метки графического символа "Шкала" перекроют группу желтых меток в нижнем слое. Это и будет середина цикла или пройденное расстояние в один шаг. Выделите одновременно во всех слоях, кроме двух нижних слоев, двенадцатые кадры и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). Положение копий графических символов "Бедро", "Голень", "Кисть лев.", "Кисть пр.", "Рука" и "Ступня" поменяйте на противоположное. Два нижних слоя заблокируйте, с ними никаких действий мы уже производить не будем.



Шаг 8. Вернемся в начало цикла и продолжим работу над его первой половиной. В первом ключевом кадре у нас изображен момент, когда персонаж касается условной поверхности пяткой правой ноги. Соответственно, следующим моментом, который мы не должны упускать из вида, будет момент амортизации. Персонаж всей плоскостью ставит ступню правой ноги на условную поверхность, туловище и голова проседают немного вниз, а ступня левой ноги уже начала отрываться от поверхности. Кисти рук, поворачиваются в суставах, смягчая остановку движения рук перед тем, как они начнут двигаться в противоположном направлении. Для такой походки максимальная амортизация (проседание персонажа) произойдет в третьем кадре. Выделите одновременно третий кадр всех незаблокированных слоев и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). Ступни ног расположите в сцене, ориентируясь на сместившиеся зеленые метки шкалы, а персонажу придайте соответствующую позу аналогично изображенной на эскизе ниже. Также не забывайте ориентироваться на горизонтальные направляющие линии.



Шаг 9. Далее последует момент отрыва левой ноги персонажа от поверхности с последующим ее переносом вперед. Руки уже будут двигаться в обратном направлении относительно предыдущих кадров. Выделите одновременно шестой кадр всех незаблокированных слоев и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). В рабочем окне сцены ступню правой опорной ноги переместите влево, вслед за зеленой меткой шкалы, а персонажу придайте позу аналогично эскизу ниже. Положение скрывшейся левой руки и кисти персонажа может быть точно таким же, как и положение правой кисти и руки в этом кадре. Обратите внимание, что персонаж поднялся относительно горизонтальных направляющих линий и приобрел небольшой наклон вперед.



Шаг 10. В промежутке между 6-ым и 12-ым ключевыми кадрами левая нога персонажа должна переместиться из заднего положения (момент отрыва) в переднее положение (момент касания условной поверхности) по некой дуге. Девятый кадр как раз является серединой между этими ключевыми кадрами, и левая нога в этот момент будет максимально согнута в коленке, а ступня достигнет наивысшей точки подъема. Правая нога, напротив, полностью распрямится, а голова немного опустится вперед. Левая рука вновь покажется из-за туловища и продолжит свое движение назад. Выделите одновременно девятый кадр всех незаблокированных слоев и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). В рабочем окне сцены, ориентируясь на метки шкалы и направляющие линии, придайте персонажу позу аналогично эскизу ниже.



Шаг 11. Вот мы и получили заветные пять ключевых кадров первой половины цикла. Если сейчас ко всем имеющимся уже ключевым кадрам применить команду Create Motion Tween (Создать промежуточное движение) и посмотреть тестовую анимацию, то Вы увидите довольно забавную лунную походку с "хромотой и иканием". И это следствие того, что вторая половина цикла имеет пока прямолинейное движение всех деталей персонажа к исходным точкам начала цикла. Но давайте пока вернемся к состоянию "без промежуточного движения" (Remove Tween) и восполним недостающими ключевыми кадрами вторую половину цикла. И тут главное не запутаться! Надо поочередно 3, 6, и 9 ключевые кадры правых конечностей скопировать и вставить на места 14, 17 и 20 кадров парных левых конечностей и, соответственно, левые 3,6 и 9 на правые 14,17 и 20. Голова и туловище просто повторяют движение первой половины цикла.
Для кого это будет немного затруднительно, посмотрите ниже, чтобы в качестве подсказки воспользоваться схемой. В этой интерактивной схеме при наведении курсора на любой ключевой кадр, Вы увидите на каком слое и в какой момент тот или иной символьный объект должен находиться в аналогичном положении.



Шаг 12. Итак, все ключевые кадры отлажены, каждый графический символ расположен на своем слое… Пришло время воссоздать движение и отправить нашего героя в бесконечное путешествие. Выделите одновременно на всех слоях, кроме нижних трех, с 1 по 20 все ключевые кадры, вызовите контекстное меню и выполните команду Create Motion Tween (Создать промежуточное движение). Все треки с деталями персонажа окрасятся в светло-фиолетовый цвет. Положение персонажа в конечном ключевом кадре 23 является копией его положения в 1-ом ключевом кадре. При непрерывном воспроизведении результирующего видеоклипа из-за двух одинаковых кадров идущих подряд будет возникать ощущение небольшого "залипания". Чтобы исправить этот недостаток, выделите одновременно во всех слоях, кроме двух нижних, 22 кадр и нажмите F6 или выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). И в завершение выделите во всех без исключения слоях 23 конечный кадр, вызовите контекстное меню и выполните команду Remove Frames (Удалить кадры). Нажмите Ctrl + Enter и убедитесь, что бодрый характер походки Вашего персонажа ничем не уступает результату, получившемуся у меня.






Подведение итогов:
В данном уроке мы изучили пять основных положений циклической походки на месте для персонажа простой конструкции. Узнали, как рассчитать расстояние, на которое смещается не только ступня персонажа, но и панорама поверхности, на которую он наступает. В данном случае роль такой панорамы выполняет движущаяся шкала из вертикальных зеленых меток.


________________________________________________________________________________


!


Урок размещен с разрешения его автора Flashcinema.ru. Оригинал доступен здесь.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The original Flashcinema.ru tutorial is written by Flashcinema.ru.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.

 


--------------------
Самая главная трудность как всегда не в технике, а в людях...

Нельзя дать всем все, ибо всех много, а всего мало.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 18.12.2017 - 17:38