Анимация при помощи Bone Tool и Bind Tool

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Описание: 

Добрый день. Как и обещал , пишу урок по иструментам Bone Tool и Bind Tool.

С помощью Bone Tool можно создать реалистичное движение подвижной части тела, а с помощью Bind Tool можно немного отредактировать движение.

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

Но надеюсь расхождений не будет.

И так, накалякайте чего нибудь на сцене:

Теперь надо как-бы соединить эти рисунки с помошью иструмента Bone Tool, но для начала надо их выделить. Это важно. Рисунки, которые вы хотите добавить в цепь должны быть выделены с помошью иструмента Selection Tool ( V ). Если вы нечайно не выделите рисунок и воспользуетесь иструменто BT , то рисунок, который вы не выделили по ошибки ,можно будет добавить в цепь только тогда, когда вы удалите "кости" и опять выделите все нужные рисунки.

Так. Выделили. Теперь выбираем инструмент Bone Tool ( X ) .

(Программа, которой я делаю скриншоты не позволяет показать все, по этому далее просто описание процесса)

Наводим курсор (он должен принять вид кости и плюсика сверху) на одну из выделеных фигур, зажимаем ЛКМ и неотпускаяперетягиваем на следущую фигуру. Мы видим, что что-то появилось...

На фигуре, с которой мы начинали тащить "кость" появился большой кружок, а на которой закончили - маленький. Большой кружок являеться "корнем" кости. Первая фигура в звене являеться как бы фундаментом всего звена . То есть , при последуещем соединении частей звена , первая фигура не будет диформироваться а только врашаться вокруг этого кружка. Маленький круг устанавливает как бы точку изгиба. (Если перый элемент звена соединен с несколькими элементами, то он будет деформироваться.)

Продолжаем. Теперь наведем курсор на маленький круг и протянем от него линию до следушей фигуры, а от нее можно протянуть на свободную территорию.

Должно получиться примерно такое:

Фигуры, которые соеденены с помшью Вone Тool, преврашаються как бы в символ "IK Shape" , но в библиотеке его не будет.

Вот в принципе все.
Выделите этот символ иструментом Selection Tool и подергайте круги. Обратите внимание на гибкость.

Теперь как создать анимацию.

На timeline появился новый слой. При изпользовании иструмента BT появляеться новые слои с названиями по умолчанию "Armature_1", "Armature_2" и т.д и на этих слоях создаеться анимация с помошью иструмента ВТ. Анимация создаеться тоже с помошью ключевых кадров.

Выбираем на Timeline нужный фрейм, нажимаем ПКМ и выбираем Insert Pose. Затем на этом кадре трансформируем объект как нам надо. Вот и все. Анимация готова. (см. пример 1).

Иструмент ВТ можно использовать и только для одного растового рисунка (не для символа).

Начертите простую линию , выделите ее и с помошью ВТ проведите "кость" от одного края, до центра и от центра до другог края.

Теперь подергайте кружки, что бы увидеть результат.

(см. пример 2)

Инструмент Bind Tool.

С ним я еще не очень разобрался. Могу только сказать, что он позволяет зафиксировать сторону или точку. То есть, при анимации, эта сторона останетьса на месте.
Просто выделите кружок "кости" с помошью Bind Tool и протяните красную линию куда нибудь. Вы сразу заметите разницу. Посмотрите на пример 3. Правда он не очень удачно получился.

И наконец, символы не изменяют свою форму. Создайте несколько мувиков на сцене и соедините их с помощью Bone Tool. Теперь подергайте "кости" и заметите, что они сохранили свою форму.

В отличии от растового рисунка, символ нельзя соединить с растом и нельзя добавить больше одной кости. Если вы, переконвертируете линию как в примере 2 мувик, то ее нельзя будет так согнуть.

(см. пример 4).

Ну вот вроде и все с этими инструментами.

Комментарии

Аватар пользователя vitkuz

На нашем диске есть 5 видео уроков по использованию этих двух инструментов

smile

Это для справки тем, кому урок показался не очень понятным.

Аватар пользователя TeT

Пардон. Не знал , что уже есть эти уроки :)

Keyboard not found. Press any key to continue

Аватар пользователя Aloran

TeT,

Большое спасибо!!! Наконец то я понял что тут к чему)))

Аватар пользователя TeT

Незачто )))

Keyboard not found. Press any key to continue

Аватар пользователя kostya84

Да классный Урок Спасибо!!!!

ok

Аватар пользователя Nbvrf

а где этот Bone Tool ??
Может у меня версия не та??

Аватар пользователя Fly

Adobe Flash SC4 - иконка с косточкой

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя switcher

Спасибо! Но не воткнул момент: упоминается растовая графика. Может растРовая графика?
однако, тогда непонятно какое отношение она имеет к вполне векторному содержанию урока.

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

Аватар пользователя TeT

Возможно я перепутал. Когда я читал книгу по макромедии флэш 8 то часто видел слово растовая (или растровая) графика. Точно не помню. Ну вот и решил, что растовая графика это то что нарисовано во флэше ,а векторная его импортированое изображение )))

Keyboard not found. Press any key to continue

Аватар пользователя switcher

оке, разобрался что имелось ввиду.

good

И думаю не лишним будет напомнить, что:
- растровая графика - это пиксельная графика, т.е. в изображение в растровой графике состоит из точек. Это основная графика для того же Фотошопа. Растровую графику легко распознать, если увеличивать изображение - оно скоро покроется квадратиками (точками или пикселями).
- векторная графика, это рисунок нарисованный с помощью примитивов вроде точек, линий, многоугольников... Этот рисунок можно увеличивать сколько угодно долго и крутить как угодно и качества своего отображения он не изменит. Но сделать с помощью векторной графики шедевральный рисунок ООООООчень тяжело, в отличие от растровой графики (и Фотошопа, само собой

xaxa

)

Флэш представлен в основном векторами.
Не уверен точно, но по моему редактировать растр он не может вообще. Только импортирует в виде "как есть". Воткнул, например, на бэкграунд и пусть торчит там.

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

Аватар пользователя TeT

Чет я вообще запутался

scratch

Если растр это импортируемая картинка, то ее можно редактировать Modify- Bitmap-Trace bitmap)))

Keyboard not found. Press any key to continue

Аватар пользователя switcher

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

Насчет "Modify- Bitmap-Trace bitmap", понятия не имею. Я этим инструментом еще не пользовался. Но из перевода, по логике - получается, что это операция трассирования. Насколько я о ней слышал, она позволяет примитивные растровые рисунки переводить в векторные. Так что... по логике должно сработать. Но попробуй. Потому что без знания сути - логика может оказаться неверной.

<i>Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете</i><br /><b>Стив Макконнел. &quot;Совершенный код&quot;</b>

Аватар пользователя Exploder

Спасибо за урок!

Аватар пользователя click

я начал во Flash с версии МХ, а в CS4 даже не обратил внимание на какую то косточку. теперь все стало ясно. Абтору Спасибо

Аватар пользователя Yagami

урок считаю крайне не полноценным и не информативным

Аватар пользователя Лев

нормальный урок.
выужен весь нужный минимум из справки.
Спасибо!

Аватар пользователя peoplee

Все хорошо, спасибо конечно за урок.. А вот пробовал применить на импортированной картинке.. как-то не применяется этот БОНЕ, можно еще с растром такой-же урок или внести сюда коррекцию с добавкой растра.

Аватар пользователя Fly

странно, а должно всё работать...

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум

Аватар пользователя fifa_sibir

А у меня даже простая анимация не работает motion tween(((( не знаю почему... делаю все как обычно, а в версиях cs4 b cs5 не работает.

Аватар пользователя Fly
Цитата: fifa_sibir

А у меня даже простая анимация не работает motion tween(((( не знаю почему... делаю все как обычно, а в версиях cs4 b cs5 не работает.

значит вы что-то не так делаете

1) Админ всегда прав
2) Если админ не прав, смотри пункт 1

Мы в контакте - http://vkontakte.ru/club9573247
Не отвечаю на вопросы в личку касаемо Flash, у нас для этого есть форум