Каталог статей
Анимация персонажа с инструментом Bone (Кости)
Character animation with the Bone tool in Flash
Adobe Flash CS4 Professional включает в себя новый инструмент Кости (Bone tool), который позволяет вам легко и быстро связывать символы вместе в отношении родитель/потомок , и в основном имеет отношение к инверсной кинематике (ИК). Вся структура костей также рассматривается как каркас. Вы можете применять каркас к серии мувиклипов или к простому векторному шейпу, которым можно затем манипулировать во времени, перетаскивая каркас в новую позу.
В этой статье рассматривается вопрос, как создать основную структуру костей, используя символы и шейпы, и затем применить эти технологии, чтобы создать мультяшного персонажа, передвигающегося по сцене.
Требования
Чтобы создать все то, про что написано в этой статье, вам нужен Flash CS4 Professional и исходные файлы (приложены к уроку).
Необходимо знать
Необходимо основное понимание интерфейса Flash, работа с символами и способность создавать простые анимации на Timeline. Вы должны знать о разных инструментах рисования во Flash и эффективно уметь использовать символы, чтобы создавать во Flash анимированные персонажи.
Инструмент Кости
Вы можете использовать инструмент Кости, чтобы создать каркас (armature), используя символы мувиклипов или каркас внутри векторного шейпа. Давайте начнем с создания каркаса с использованием символов:
Создайте новый Flash документ и убедитесь, что вы выбрали ActionScript 3.0. Инструмент Кости будет работать только с документами AS 3.0 (см. Рисунок 1).
Рисунок 1. Выбор файла ActionScript 3.0 в панели New Document
2 Нарисуйте объект на сцене. В этом примере я сделал его простым и использовал инструмент прямоугольник (Rectangle), чтобы создать основу шейпа.
3 После того, как вы создали ваш шейп, конвертируйте его в Movie Clip или в символ Graphic.
4 Так как вам нужно более одного объекта, чтобы создать цепочку связанных объектов, продублируйте символ, удерживая Alt и перетаскивая символ на новое место. Flash будет дублировать каждый раз экземпляр при вашем клике и его перетаскивании. Повторите эту процедуру несколько раз, чтобы создать множество экземпляров одного и того же символа (см. Рисунок 2).
Рисунок 2. Множество экземпляров символа выровненных по горизонтали
5 Свяжем все эти бъекты вместе, чтобы создать каркас. Выберите инструмент Bone (X) из панели инструментов (см. Рисунок 3).
Рисунок 3. Bone tool в панели инструментов
6 Определите, что будет вашим родителем или корневым символом в каркасе. Это экземпляр символа, к которому вы примените сегмент первой кости. Затем протащите на следующий экземпляр символа, чтобы соединить их вместе. Когда вы отпустите мышь, появится сегмент кости между экземплярами символов (см. Рисунок 4).
Рисунок 4. Сегмент кости свяжет два экземпляра символа
7 Повторите эту процедуру, чтобы связать второй символ с третьим. Продолжайте перетаскивание с одного символа на следующий до тех пор, пока вы не соедините костями все символы (см. Рисунок 5).
Рисунок 5. Весь каркас связанных символов
8 Следующий шаг - забавно! Выберите Selection tool из панели инструментов (V) и потащите за последнюю кость в вашей цепочке. Можно манипулировать всем каркасом в реальном времени, так как вы перетаскиваете последнюю кость по сцене (см. Рисунок 6).
Рисунок 6. Каркас полностью готов для анимации
Теперь легко анимировать ваш каркас, добавив количество кадров в интервале IK, кликнув и перетащив его край в требуемуый кадр (см. Рисунок 7). Там где стоит ваш индикатор фрейма, в новом фрейме перетащите ваш каркас на новую позицию. Flash вставит ключевой кадр в текущий фрейм и интерполирует перемещение внутри IK-интервала.
Рисунок 7. Растяжение IK -интервала и позиционирование индикатора кадра в последнем фрейме
Мои поздравления! Вы только что анимировали простой каркас, используя Bone tool во Flash.
Применение каркаса к шейпу
Вы можете также использовать инструмент Кости, чтобы создать каркас прямо внутри векторного шейпа. Этого способа, чтобы анимировать шейпы, не было ранее во Flash. Я использую эту технологию часто, чтобы создать анимацию движущихся волнообразно хвостов для персонажей животных.
Давайте начнем с прямоугольника, который очень высокий и тонкий. Вы можете даже сузить его верхний кончик, используя Subselection tool (A), чтобы он походил на кончик хвоста (see Рисунок 8).
Рисунок 8. Векторный шейп, созданный с использованием Rectangle и Subselection
1 Выберите Bone tool (X). Начнем снизу (основания) хвоста, кликните и потащите вверх внутри шейпа, чтобы создать опорную кость (см. Рисунок 9). Flash сконвертирует шейп в IK-шейп объект сразу после того, как первая кость нарисуется внутри него.
Рисунок 9. Основной шейп хвоста с добавленной корневой костью
2 Продолжим создание костей двигаясь вверх одну за другой, таким образом, чтобы они соединялись одна за другой от головной части до хвостовой. Я рекомендую, чтобы каждая кость постепенно уменьшалась по длине, чтобы количество соединений увеличивалось постепенно к кончику хвоста. Это придаст анатомически реалистичное движение. Когда мы добавим все кости к хвосту, он будет выглядеть как на Рисунке 10.
Рисунок 10. Весь каркас внутри шейпа
3 Используя Selection tool (V), перетащите последнюю кость вверх цепочки (самый кончик хвоста). Потому что совершенно ровный хвост выглядит очень ненатурально, позиционируйте каркас так, чтобы он походил на шейп вида "S", подобно Рисунку 11.
Рисунок 11. Каркас в начальной позе
4 Вставьте дополнительные кадры в ваш IK -интервал, кликнув по номеру кадра дальше на Timeline и делее нажмите F5 (вставим ключевой кадр), или перетащите правый край IK-интервала направо. Мы хотим добиться бесшовной повторяющейся анимации. Для этого требуется, чтобы первый и последний фреймы были идентичны.
5 Позиционируйте индикатор кадра (головку проигрывателя) в последний фрейм интервала и вставьте ключевой кадр, нажав F6. Этим вы вставите ключевой кадр в конец IK-интервала. который содержит идентичную позу каркаса (см. Рисунок 12).
Рисунок 12. IK -интервал с идентичными ключевыми кадрами, чтобы создать бесшовный цикл
6 Позиционируйте индикатор кадра в фрейм посередите вашего IK-интервала, в точке посередине пути, и перетащите каркас в новую позицию, подобно тому, как на Рисунке 13.
Рисунок 13. IK - каркас в новой позиции посередине интервала
7 Чтобы добавить реалистичности к волне хвоста, добавьте второе движение хвосту. Поскольку движение хвоста настраивается корневой костью, конец хвоста будет иметь замедленную реакцию по отношению к движениям корневой кости. Чтобы анимировать его, позиционируйте индикатор кадра на несколько фреймов после начальной позы в кадре 1 и перетащите каркас так, чтобы кончик хвоста изгибался по направлению, противоположному корневой кости (см. Рисунок 14).
Рисунок 14. IK -каркас во второй позе
8 Не забудьте добавить еще второе движение после позы в средней точке в IK-интервале (см. Рисунок 15).
Рисунок 15. IK -каркас во второй позе после средней точки в IK-интервале
Проиграйте анимацию и вы увидите, что хвост стал более подвижным и выглядит более натуральным после того, как мы добавили вторичные позы. Теперь перейдем к следующему шагу - добавим некоторое замедление. Без замедления анимация может выглядеть очень механически.
1 Позиционируйте индикатор кадра между первыми двумя ключевыми кадрами в IK-интервале. В панели Properties выберите тип замедления (Easing), используя меню Ease.
2 После того, как вы выбрали желаемое замедление, настройте величину замедления, используя текстовый слайдер Интенсивность (Strength). Замедление будет действовать на движение меду этими двумя ключевыми кадрами.
Вы можете применить различные стили и интенсивности замедления для каждого движения, позиционируя индикатор кадра между каждым набором ключевых кадров и выбрав разную установку замедения и настроив величину интенсивности для каждого (см.Рисунок 16).
Рисунок 16. Выбор установки замедления и настройка его интенсивности в панели Properties
Источник: http://demiart.ru/forum/index.php?showtopic=129513 |
| Категория: flash | Добавил: mikel (10.10.2010)
| Автор: mikel922 E W
|
| Просмотров: 4708
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
Статистика
В сети всего: 1 Гостей: 1 Пользователей: 0
|
