А вот такой результат получился на выходе. Эдакий Garbage Collector

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

Результат:

Полное видео состоит из 33-х частей. Пока что Адам выложил только 20, но в скором времени обещал выложить остальное. Видео очень интересное и познавательное. Очень правильный пример создания покадровой анимации.
Смотрите на работу мастера и учитесь!

Ниже выкладываю первую часть. Остальное видео можно посмотреть здесь.

Во первых удобнее всего рисовать при наличии скетча. Поэтому если у вас есть сканер – нет ничего проще, чем сделать карандашный рисунок, сканировать его и импортировать во flash.

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

Основные инструменты, которыми вы должны пользоваться – это pen , line , selection и subselection tools:

Для явно круглых и прямоугольных областей разумно использовать oval и rectangle .
Использование pensil не возбраняется, но не приветствуется, потому как он создаёт кучу лишних точек.

Итак, с помощью pen и line необходимо нарисовать все все контуры. Не пытайтесь сразу делать правельные дуги, рисуйте прямые линии, все они потом очень легко редактируются с помощью selection (чёрная стрелочка), а где не получается добиться нужного радиуса или угла, всегда можно прибегнуть к помощи subselection (белая стрелочка.)

Если теневая область тоже заранее известна, лучше её прорисовать сразу. Все остальные мелкие детали можно доробатывать уже после задания основных цветов.

Вот собственно видео процесса прорисовки этой иллюстрации. В сумме заняло 50 минут.

А теперь немного теории для тех, кто не умеет или не понимает как правильно работать с Selection Tool.

Работа с Selection Tool

Итак, с помощью selection tool можно выделять графические объекты, перемещать и редактировать.

1. Выделение
Если возле стрелочки вы видите значок пунктирного прямоугольника. значит инструмент Selection находится в режиме выделения и зажатием левой клавиши мыши (ЛКМ) можно выделить произвольную прямоугольную область.

2. Перемещение.
Если графический объект или символ выделен, то при наведении на него стрелки появляется значок перемещения (крестик со стрелочками на концах) и можно переместить объект в любое произвольное место.

3. Редактирование линий.
Если подвести курсор к краю прямой или кривой линии. то пиктограмма возле него поменяется на дугу. И теперь вы с лёгкостью можете регулировать кривизну линий.

4. Редактирование узловых точек.
Если подвести курсор к узловой точке на объекте, пиктограмма возле него поменяется на прямой угол. Теперь с помощью Selection можно перемещать узловые точки.

5. Добавление узловых точек.
С помощью Selection также можно добавлять точки. Для этого надо подвести курсор к месту где мы хотите добавить точку, чтобы пиктограмма возле него поменялась на дугу, зажать Alt и переместить курсор немного в сторону. в результате добавится новая точка. Поверьте, это намного быстрее, чем добавлять точки с помощью Pen.

6. Слияние точек.
Если вам надо удалить какую-либо точку, её на самом деле намного проще совместить с соседней. Для этого нужно подвести курсор к необходимой точке, чтобы пиктограмма поменялась на уголок и переместить на соседнюю. Внимание! У вас должна быть обязательна включена привязка к объектам, иначе ничего не получится.

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

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

Например для анимации походки мне понадобилось всего 4 кадра (слайды 2,3).
Анимация падения заняла 6 кадров (слайды 4,5) и с юбкой особых проблем не возникло.
А вот с атакой пришлось повозиться.

Атака состоит из выпада ногой вперёд, заноса руки с веером за голову и бросания его вперёд.
И собственно выпад ноги и подкачал. Всё рисовалось исключительно на глаз, но если рассмотреть кадры по отдельности (слайд 10), то складывается впечатление, что у гейши ноги растут не известно от куда, ещё и вывихнуты в трёх местах :о)

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

Конечно, анимировать ноги, а потом ещё и прорисовывать юбку это намного дольше и затратнее по времени. Но лучше учиться на первых этапах делать правильно, чтобы потом меньше совершать ошибок…
Кстати если рассмотреть покадрово (7-9 слайды) движения рук, то вот правой руке с веером я уделила достаточно внимания, а на левую немного забила, по сути рукав там должен по другому летать.
Словом совершенству нет предела :о)

1. Собака и крыса.
Это враги нашего ниндзи :о) Сначала я сделала видео анимации бега собаки, но по каким-то причинам оно сохранилось не правильно и испортилось. Поэтому я записала видео на примере крысы.

Итак, рассмотрим принципы анимации бега животных:

2. Сначала рисуется покадровая анимация передней ноги.
Если вы внимательно посмотрите на видео, то прежде чем прорисовывать фазы движения ноги, я накидала приблизительные движения простыми линиями с помощью кисточки. Это по сути является фазовкой движения, так сказать черновая анимация, которая сразу задаёт темп движения и делается для того, чтобы потом не пришлось переделывать всё с начала.

3. Затем рисуется покадровая анимация задней ноги.
Хочу отметить, что у животных задние и передние ноги всегда отличаются, поэтому лучше не лениться и на примере передней ноги нарисовать фазы движения для задней.

4,5. Пускаем ноги в разнобой.
Передние и задние ноги дублируются и в них смещаются кадры на 2-3 вперёд или назад в зависимости от типа бега. Например в собаке первая нога отстаёт от второй всего на 1 кадр, а в анимации крысы на 3 кадра. Думаю на иллюстрации понятно что имеется ввиду.

6. Общая анимация тела.
Далее мы переходим на уровень выше и делаем уже с помощью анимации motion движение корпуса, головы, шеи хвоста итп. Во-первых это движение вверх-вниз, т.к животное во время бега немного подпрыгивает (собака больше, крыса меньше), во-вторых шея с головой подаётся немного вперёд, когда животное делает очередной выпад.

Естественно анимация должна быть цикличной. В данных примерах у меня в анимации бега используется 6 кадров. Если у вас игрушка совсем простая и надо экономить каждый килобайт, можно ограничится и 4-мя кадрами, а если наоборот нужно более детальная проработка движений, то лучше использовать 8-12 кадров.

И в заключение: самый лучший учитель – это природа и наблюдение за ней. Чтобы правильно нарисовать бег того или иного животного – посмотрите как он двигается в жизни. Ну а если по близости никого подходящего нет – YouTube вам в помощь!

Для записи я выбрала программку Camtasia Studio 6. Если кто-то может посоветовать что-нибудь хорошее и бесплатное – буду премного благодарна. Пока что это мой первый блин, надеюсь что ком не сильно уж большой.

Теперь о персонаже. В swf-ке ниже вы можете посмотреть как выглядит персонаж. Кстати на первом кадре по клику он прыгает. На втором кадре получившийся в результате работы бег, и более подробная раскадровка на третьем. К сожалению откомпилированные движения в ускоренном видео выглядят не естественно, поэтому я и выложила их отдельно.

А вот собственно сам рабочий процесс. Ужала до 7 минут, дабы не слишком вас утомлять