Уроки: Adobe Photoshop

Анимация растрового персонажа с помощью Adobe flash cs5 и продолжение мини обзора планшета Intuos 5 Medium

Предисловие:
После написания первого урока про создание персонажа для гипотетической игры, думаю, абсолютно логично для тех, кто его читал, будет перейти к анимации нашего героя. В то же время уже прошел довольно хороший временной период моей работы с новым планшетом компании Wacom. И скажу я вам: он стал моей третей рукой. Или продолжение моей руки. Как будет угодно. И я читал комментарии к первому уроку насчет программного обеспечения компании. Хочу встать на защиту. Даже если кому-то не понравится. Могу сказать, что сейчас у меня ничего не вылетает. Все работает как часы. А таблетка от Вэком настолько органичный инструмент, что расставаться с ним не хочется ни в каких ситуациях.

Приступим же к уроку номер два.

P.S. Урок предназначен для начального уровня подготовки. Но я рассчитываю, что вы все же, открывали хоть пару раз flash-редактор от компании Adobe и пробовали что-нибудь там делать. Если нет,то придется прорываться с боем. Я в этом уроке не буду рассматривать рабочую среду этого пакета. Таких уроков много.

Часть первая. Подготовка.
Напомню, у нас был нарисован наш персонаж в первом уроке - См. Рис.1.

Рис.1.

Если все выполнялось, как я писал в первом уроке, то у нас персонаж уже разрезан на части и с мечом, оружие было домашним заданием.  См. Рис.2

Рис. 2

Теперь нужно всю эту расчлененку преобразовать в формат *.png файлов. Это конечно можно делать через copy  past. Но проще использовать сценарий фотошопа, который, если я ничего не путаю, уже с Photoshop CS4 поставляется в начальной сборке. А раньше нужно было устанавливать его со стороннего источника.
Подготовка к сценарию. У вас должна каждая часть тела находиться на отдельном слое.
Затем идем в файл  сценарии  экспортировать слои в кадры. См.Рис. 3. и рис.4.

Рис.3 

Рис.4.

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

 

Комплект солдата:

Идем дальше. Запускаем Adobe flash CS5 т.к. именно он установлен у меня. В вашем случае любой другой. Т.к. мы программировать не будем сильно, забегая вперед, скажу, что будет одна строчка. Но ее писать не обязательно. Просто для удобства ставлю.


Часть.2.
Правила хорошего тона и подготовка к анимации.

Если этот урок читает какой-нибудь более-менее продвинутый CG-художник или дизайнер, то конечно же он знает, что все слои и мувиклипы нужно называть понятными, своими именами. И то же самое должно у вас быть на винчестере. А то не найдете через год ничего. А если найдете, то не поймете, что же такого вы делали. Это я вам точно говорю. Сам так не раз обжигался. Изначально наше рабочее поле выглядит вот так. Рис.5.

Рис.5.

Сохраняем файл. Переименовываем первый слой на таймлайне в mcMain или как будет удобно вам. И кидаем все части в библиотеку. Это шаг показан на рис. 6

Рис.6.

 Создаем мувиклип, с которым будем работать, нажатием ctrl+F8. см.рис. 7

Рис.7.

 

Я назвал наш клип soldier_animation и поставил галочку «экспортировать для ActionScript» Это обычно нужно для программистов. Чтобы управлять клипом и анимацией в нем.

Переходим к составлению нашего героя в одно целое.
Обратите внимания, что я каждую часть тела положил на свой слой см. рис. 8.

Рис.8.

Теперь каждую часть нужно преобразовать в клип. Чтобы им можно было управлять в анимации. Делаем это так. Левой кнопкой мыши кликаем, или просто пером планшета наводим например на голову и правой кнопкой вызываем контекстное меню, если пером вызываем меню, то по умолчанию верхняя кнопочка. Выбираем пункт «преобразовать в символ» см. рис. 9.

Рис.9.

И называем, например – soldier_head. Не допускайте пробелов в названии никогда. Ни в названии файлов, ни в названии клипов. Это убережет вас от того, что программист будет вас ругать, что не может добраться до клипа. Используйте для пробелов нижнее подчеркивание. Это разделяет слова и в тоже время не используется пробел. У меня это уже привычка до автоматизма доведена. Называем таким образом все части тела. См Рис. 10.

Рис. 10.

В рис.10 показано, что все слои названы вменяемо и уложены аккуратно в папочку с названием «Soldier».  Это вдруг если у нас в проекте появятся еще персонажи. Тогда они не будут путаться. И вы не забудете где чьи руки и ноги.

Перед началом анимации очень важно проверить, что все точки вращения у мувиклипов частей тела стоят, где надо.  См. Рис. 11.

Рис. 11.

 Я поставил точки на рис.11. Где разместил точки вращения у моих клипов. Например, рука: у нее точка стоит в основания членения руки и тела. Этот метод я понял сам в течении долгих опытов с анимацией. И подсказываю вам. Такое размещение позволяет легко манипулировать движением рук. А так как кости не позволяется применять к растровым картинкам в CS5, этот метод заменит нам скелет. Плюмаж: тоже делаем точку на основании.

Если вы не знаете, где эти точки находятся в программе, то выберите любой клип левой кнопкой мышки (или кликом пера) и нажмите Q. У вас появится квадрат с точкой посередине. См. рис. 12

Рис.12.

 Смещаем эту точку к основанию, где крепится часть тела. У головы - это основание черепа. См. рис. 13.

Часть 3. Отступление про планшет Wacom Intuos 5 Medium и анимацию.

В этом уроке мы с вами сделаем только анимацию векторных рисунков. И из-за этого на полную мощность я не использую в данном случае планшет – не сильно востребована чувствительость пера к давлению, т.к. весь солдат уже нарисован в первом уроке. Но преимущества, несомненно, есть. Как помните из первого урока, я уже говорил, что можно настроить кнопки планшета так, как вам нужно для любой программы. Я оставил кнопки и кольцо пока по умолчанию настроенными. Т.к. еще не определился нужно ли менять, пока удобно. Если конкретнее, то я пользуюсь увеличением масштаба на кольце Touch ring, на одну из кнопок Express Кeys назначил отмену действие (ctr
+z). Еще мне удобно использовать круговое меню (Radial menu), для сохранения файла. Хотя я наверное сделаю сохранение на одну из кнопок Express Keys, попозже.
И конечно же не надо упускать из виду тот факт, что принцип пера не такой как у мыши. С планшетом работает так называемое «абсолютное позиционирование». Ты попадаешь курсором сразу туда, куда тебе нужно, только ткнув пером на планшете в нужное место. И не нужно как при использовании мышки вести весь этот путь (те кто пользуются планшетами, знают о чем я). Это в разы ускоряет навигацию по интерфейсу программы, если привыкнуть и вовсе можно убрать мышь со стола. И если бы нужно было делать рисунки именно во flash-редакторе (а не брать сделанные предваритьно в Photoshop), то планшет Wacom Intuos с размером рабочей поверхности ~A5 мне бы пригодился гораздо в больше степени. Я не утрирую, я реально до сих пор впечатлен, насколько круче с каждым годом становятся таблетки от Wacom.

Вернемся к анимации. Сначала добавим внутри клипа нашего солдата еще один слой на таймлайне. В нем мы будем размещать метки для программистов. Чтобы было проще управлять всей линейкой анимации. И расставим флаги соответственно тому, какие движения у нас будут. См. рис. 14.

Рис. 14.


Размер кадров пока поставлен произвольно, позже поправим.
Анимация у нас будет такая:
Солдат стоит. (stay)
Солдат идет. (walk)
Солдат бьет. (punch)
Солдат умирает. (death)

Солдат стоит
В анимации стояния, основная анимация - это дыхание. Когда мы дышим, то у нас поднимается грудь и плечи. Создайте ключевые кадры в том состоянии, что уже есть как на рис. 15. Это 10 –й кадр, 20 кадр и 21 кадр.
Устанавливаем наш курсор на 10 кадр. И создаем классическую анимацию движения во флеше.

Рис. 15.


Двигаем руки и туловище чуть вверх, можно немного качнуть руки, голову чуть вверх вместе с телом и отклоняем чуть назад.

Посмотреть анимацию покоя можно здесь: http://penka.su/flash/Soldier/soldier_stay.swf
Солдат сам должен возвращаться в первоначальное состояние. Если вы изначально поставили все кадры.
На двадцатом кадре вы, наверное, заметили, что стоит actionscript. Это я проверяю анимацию. Чтобы не ждать всего таймлайна. Там простой код.
gotoAndPlay("stay") – когда доходит до 20-го кадра. Все начинается сначала. Не переходя дальше по таймлайну. Меняя слово флага «stay», можно так зациклить любой участок. Так в будущем проверять каждый участок.

Солдат идет
Анимация ходьбы, наверное, - самое сложное. Ну по крайней мере, у меня уходит на это довольно много времени.
Поставьте сразу также по два ключевых кадра на основных флажках, чтобы не забыть. См. рис. 16.

Я начинаю анимировать шаг с ближней ко мне ноги. Полностью делая анимацию шага. Пока мне не понравится. Далее делаю анимацию второй дальней ноги. Теперь подробнее. Как же я сделал шаг?

Таймлайн рис.17.

 Кадр окончания анимации шага у меня стоит под номером 37. Сам таймлайн разбит на 25, 29, 33 кадре. Начало анимации шага на 21м кадре. Теперь покажу на скриншотах, как выглядят ключевые кадры. Далее все за нас сделает анимация движения.

25 кадр:

29 кадр:

33 кадр:

21й кадр и 37й кадр - это кадры покоя, в которых у нас просто стоит солдатик.
Смотрите по ссылке анимацию шага. Без участия пока что остальных частей тела

http://penka.su/flash/Soldier/soldier_walk_1.swf

Тело я анимирую после ног. Т.к. у нашего скелета такая последовательность соединений.

Ноги -> тело -> руки -> меч -> голова -> плюмаж

И план анимации строю, основываюсь на этом принципе.

Далее я анимирую руки. Пройдитесь по комнате, посмотрите как двигаются руки. Т.е. обратите внимание на руки и ноги. Чтобы держать равновесие. У нас руки двигаются наоборот. Например, если левая нога идет вперед, значит левая рука назад, правая нога назад, правая рука вперед.

http://penka.su/flash/Soldier/soldier_walk_2.swf

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

У меня таймлайн выглядит так см. рис. 18.

Рис. 18.

Не забудьте код в 20- кадре убрать или закомментировать вот так

//gotoAndPlay("stay")

А то анимация не будет играть дальше состояния покоя. И соответственно сейчас у меня стоит кадр с кодом в конце анимации шага. Чтобы он повторялся. Можно вообще код не использовать. Только сложно оценить какую-то часть анимации.

В итоге попробуйте создать анимацию головы и плюмажа. Представьте, как бы вам хотелось, чтобы двигался ваш персонаж. Голова очень крупная. Она может поменять все ощущение анимации. Сделаю немного «подпрыгивающую голову». Если вы были внимательны, то увидели, что анимация рук у нас сделана всего одним ключевым кадром. А вот голову буду делать так же как и ноги с телом. С тремя ключевыми кадрами посередине. Так можно сделать подпрыгивание головы. Если сделать один кадр, то голова будет двигаться слишком плавно.

Чтобы сделать подпрыгивание головы, в 25м кадре поднимаем голову вместе с телом. В 29 опускаем голову вместе с телом. И в конце в 33м кадре поднимаем голову немного выше тела. И в 73 кадре голова возвращается в исходное положение.

 http://penka.su/flash/Soldier/soldier_walk_3.swf

Удар.
Чтобы сделать удар, нужно понимать тоже, как делается удар мечем. Это нужно опять встать и попробовать ударить воображаемым мечом. Если вы это выполнили, то увидите, что сначала заносится рука с оружием вверх, немного как бы замирает и резко падает, делая рубящий удар вниз. Попробуем это повторить.
Сначала анимируем одну только руку с мечом.

 http://penka.su/flash/Soldier/soldier_punch.swf

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

Рис. 19.



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

Голова с закрытыми глазами.

Я ее поставил в момент удара. Полностью анимацию удара можно посмотреть, ниже, перейдя по ссылке

http://penka.su/flash/Soldier/soldier_punch_2.swf

Вот и все. Не так и сложно, если разобраться.


Послесловие:

Анимацию смерти я не хочу делать. Как-то печально убивать даже в шутку своего персонажа. Если вы поняли суть урока, то с легкостью сделаете анимацию гибели. Скажем так. Это будет домашним заданием для вас.
P.S. Многие люди сделают всю графику и анимацию круче, чем я. Я же поделился тем, что умею делать. Спасибо вам за то, что уделили время и прочитали данный урок.
В следующем уроке, я покажу как перевести растровый рисунок в векторный с помощью CorelDraw и графического планшета Intuos5.

Удачных дней! ;)

20024 Автор:
Актуальность: 599
Качество: 648
Суммарный балл: 1247
Голосов: 8 оценки

Отзывы посетителей:

аватар
 
сергей духанин 11 0
Аналогичную анимацию легко сделать в Adobe After Effect
аватар
 
sundry_joy 22 0
))
аватар
 
Man5ON 2637 0
Куратор комьюнити
Цитирую Dionys:
ссылка на анимацию шага не работает!
soldier_walk_1.swf


Спасибо, поправили.
аватар
 
Dionys 1 0
Классный урок, мне понравился, но думаю поймут его только те, кто знает как это делается.
Вот ссылка на аналогичный видеоурок:
http://www.youtube.com/watch?v=AVcaG4I7NAc

ссылка на анимацию шага не работает!
soldier_walk_1.swf
аватар
 
ProcXel.A 4 0
Цитирую:Анимацию смерти я не хочу делать.

Я хочу.
http://s5.hostingkartinok.com/uploads/images/2013/03/3ca42df14e3279c220074fd1b536a8b9.gif
Зарегистрируйтесь, чтобы добавить комментарий.
Эту страницу просмотрели: 919 уникальных посетителей