Персонажная анимация

[DerPapst 0]

В статье за прошлый месяц Paul Shih ( Пол Ши ) обучал вас процессу разработки двух персонажей во флеш ( Flash), из его серии работ “Леденящая душу компашка ” , о кроликах , любящих тяжелый рок.

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

 

Мы также рассмотрим некоторые инструменты Flash CS4 :в частности the Bone tool,которая позволяет связать все части персонажа вместе, что является необходимым для анимации рук и ног.

Эта система позиционируется как “Инверсивная кинематика ”(inverse kinematics) , которую ,благодаря исключительному удобству ,широко используют “персонажные аниматоры”. 3D Rotation tool позволяет создавать 3D-эффекты с 2D объектами- мы будем использовать этот инструмент для создания псевдоанимации головы персонажа. Мы так же изучим основы анимации с помощью motion tweens.

Шаг 1 Во-первых, мы должны подготовить свой проект для последующего анимирования , так что для начала откроем character design document. Если вы не изучали статью по теме за прошлый месяц , открываем hbjb_animation1.flv из Download Zone . Необходимо удалить ‘outline’ слой наброска, а также разблокировать все слои, чье имя начинается с 'HB' – знакомьтесь , это наш персонаж мальчег ).

Выберите (Cmd / Ctrl + A) и щелкните правой кнопкой мыши на фрейме , выберите Cut Frames, и превратите его в символ (F8). Далее, жмякаем на Вставка> Новый символ(Insert > New Symbol), называем его HB и выбираем Movie Clip, как идентификатор данного типа. Щелкните правой кнопкой мыши на blank frame и выберите Paste Frames.

Шаг 2 Теперь, когда мы представили наш персонаж в виде особого символа, мы будем делать то же самое для каждой подвижной части тела, начиная с головы. Lock-аем все слои, кроме рта, глаз и головы. Выделяем все элементы , щелкаем правой кнопкой мыши на frame, выбираем Cut Frames, создаем новый символ Movie Clip, и обзываем его ‘HB Head’, жмякаем правой кнопкой мыши на первый blank frame и вставляем фреймы.

Шаг 3 Мы удалили грубые наброски в шаге 1, а теперь, чтобы вдохнуть некоторую “эстетичность” в проект приступим к созданию индивидуальных набросков для каждого элемента. Выбираем Selection Tool (V), дважды щелкаем на контур головы: данная процедура позволяет выделить и выбрать все “общие ” линии в работе .Выберите Правка> Копировать (Cmd / Ctrl + C), создайте новый слой в нижней части стека слоев, Правка> Paste In Place (Cmd / Ctrl + Shift + V) и увеличьте stroke size до 18 точек ( Points / сокр. Pt)

Шаг 4 Чтобы собрать перса , перейдите на ‘HB’ symbol, удалите руки персонажа –в процессе мы заменим их анимированным эквивалентом.Откройте окно библиотеки (L) и перетащите HB rArm1 и HB rArm2 “на платформу”( stage) в том же слое(Layer), а затем ‘HB Guitar’ и ‘HB Head’, каждую в своем отдельном слое. Если вы разрабатываете свой собственный Flash file, откройте hbjb_animation1.fla и копируйте все символы из библиотеки.

Шаг 5 Очень важно , чтоб все элементы были в нужных местах и в правильном порядке. Сверху вниз слои должны быть расположены в порядке: голова, туловище, руки, гитара, ноги. Перетащите элементы, согласно Screengrab-у выше, а затем используйте Free Transform tool (Q), чтобы получить возможность вращать руки. Убедитесь в том ,чтоб HB rArm2 находились спереди , нажмите правой кнопкой мыши на символе, выберите пункт Упорядочить> На передний план (Arrange > Bring to Front), и, наконец, повторите шаг 3 для создания толстых контуров для ног

Шаг 6 Нажмите на вкладку “Сцена 1”( Scene 1 tab )для того чтобы вернуться в рабочую область(stage) и перетащите символ HB из библиотеки на новый слой с именем "HB”. После выбора символа , установите позицию (position) в окне Свойства(Properties window) (Cmd / Ctrl + F3) в положение X: 586, Y : 355.Так же необходимо увеличить частоту кадров для достижения более плавной анимации - кликните на stage, чтобы отменить выбор, а затем в свойствах(Properties) выставьте FPS до 24 .

Шаг 7 Теперь HB полностью готов к анимации. Дважды щелкните на символе HB: мы будем использовать Bone tool (X), чтобы оживить его правую руку.Выберите Bone tool для выделения и определения его “костной системы”, зажимаем и передвигаем от плеча до локтя, а затем и от локтя до внешнего ребра ладони ( вершина предполагаемого среднего пальца ) руки персонажа.

Шаг 8 Создавая структуру костного скелета, Flash так же создает новый слой, называемый 'якорь' (‘Armature’ layer ) ;оригинальный слой, который участвовал в создании костной системы будет пустым, так что мы можем смело удалить его. Теперь мы можем оживить кости. Выберите frame №19 на всех слоях. Щелкните правой кнопкой мыши, выберите Insert Frame, и на frame 4 слоя ‘Armature’ используйте инструмент выделения (Selection tool ). Нажмите и перетащите его руку, как показано на рисунке выше

Шаг 9 Вот тут я заметил, что локоть смещен. Чтобы исправить это, используйте Selection tool удерживая нажатой клавишу Cmd / Ctrl и перетащите HB rArm2 в место, где область локтя выглядит корректно. Продолжайте редактирование позиционирования эл-тов для каждого третьего фрейма

 

Шаг 10 Теперь HB научился помахивать гитаркой и теперь мы можем попробовать усилить его рок-расколбас , добавив обрывистые движения головой ( в русском языке ( сленг ) часто называемые ГРИВОТРЯСОМ ) . Правой кнопкой мышки жмякаем на любом фрейме ‘HB head’ слоя,далее выбираем команду Create Motion Tween, переходим к фрейму 4, используя 3D инструмент вращения(3D Rotation tool) (W) указываем голову символа

В окне "Свойства"( Properties window), откройте вкладку Положение и 3D вид (3D Position and View): установить Vanishing Point в значении X =401 и Y= 200 .

Шаг 11 Продолжаем выгибать вперед голову на фрейме 4 : далее будем применять инструмент 3D вращения(3D Rotation tool), перетащив красную ,вертикальную линию вправо примерно на восемь частей от круга так , чтоб голова теперь начала парить в воздухе. Используйте Selection Tool (V) и выберите head symbol, а затем, удерживая Shift и перетащите его вниз до половины тела.

Шаг 12 В фреймах 7, 13 и 19 голова должна быть приподнята, как на фрейме 1 – следуя последнему шагу, отведите перетаскиванием красную линии влево. В фреймах 10 и 16 голова должна быть чуть опущенной и наклоненной вперед ,однако в меньшей степени нежели на фрейме 4.

Шаг 13 Теперь вы изучили некоторые инструменты для анимации персонажей, повторите эти действия для другого персонажа, JB, начав с создания Movie Clip symbol для нее. Для нее необходим только один набор рук в библиотеке, так что можно задать их положение с самого начала, затем скопируйте и вставьте руки и выберите Modify> Transform> Flip Horizontal, чтобы отдублировать руки для противоположной стороны.

Шаг 14 Для JB, слои должны быть в порядке: голова, руки, тело, барабан, и ноги. Обратите внимание, что руки перекрывают тела в области плеча. С помощью Selection tool выберите верхнюю часть тела. Затем выполнитеСкопировать> Правка> Вставить на место (Copy > Edit > Paste in Place ) , чтобы вставить эту часть верхней части тела в новом слое над руками

Шаг 15 Давайте сделаем голову JB движущуюся как метроном. Используйте инструмент Free Transform tool (Q) нажмите на голову, а затем перетащите белые точки вниз головы и разместите их по центру , где она соединяется с шеей. Сделать Motion Tween, на фреймах 1, 17 и 33. Установите значение Rotate value на -15 в Transform window (Cmd / Ctrl + T). В фреймах 9 и 25, установить Rotate в значении 14 .

Шаг 16 Используйте то, что вы узнали в этом руководстве для завершения движения JB –“Барабанный Бой”.Не бойтесь проявлять инициативу в работе и пытаться привнести в нее что то от себя. И наконец, оживите их заранее анимированным фоном, путем перетаскивания "фоновых" символов(‘Background’ symbol) из библиотеки в новый слой в самом низу, привязывая его к центру сцены.

Автор -- Paul Shih ( Пол Ши )

Адаптивный перевод by DerPapst