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

Это результат. Исходник можно скачать здесь.

А вот видео процесса создания (подробное, с комментариями).

Fire animation from Lerika on Vimeo.

Ссылка, о которой я говорила в конце видео – урок создания огня от Олега Акимова.

А вот такой результат получился на выходе. Эдакий 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 минут, дабы не слишком вас утомлять

1. Итак, одной из задач стояло нарисовать шоколадную конфету.
2. Самый лучший способ нарисовать реалистичное изображение – срисовать его с фотографии. Идём на www.istockphoto.com или любой дугой сайт с фотографиями и находим изображение шоколадной конфеты нужной нам формы и ракурса.
3. Дальше с помощью пера очерчиваем основные линии, определяющие форму конфеты. Заметьте, полосочки, идущие по кругу конфеты я выделила другим цветом, они нам ещё пригодятся.
4. Пипеточкой с фотографии берём цвета и делаем сложный градиент. Поверьте, если в градиенте использовать не 2 цвета, а хотя бы 3-4, он смотрится более интересно и выигрышно.
5. Далее, опираясь на ту же фотографию, определяем более светлые места. Тени можно сделать так же отдельно, но в данном случае они и так были хорошо обозначены градиентом.
6. Блики. Т.к конфета у нас имеет округлую форму сверху, то и блики мы сделаем с помощью радиального градиента. Опять же не боимся смешивать цвета, ориентируемся на фотографию и работаем с пипеткой.
7. Помните разделяющие линии, которые мы нарисовали в начале? Перекрашиваем их в коричневый цвет, преобразуем в заливку (это важно, ибо конфету мы будем скейлить) и помещаем поверх наших бликов, т.к в них свет попадать не должен.
8. Вуаля, наша шоколадная конфетка готова!
9. А это вариации на тему шоколадных конфет для другой игры. Они были нарисованы не по фотографии и с меньшей детализацией, но главное остаётся ощущение, что это шоколад.

Ну и на закуску исходник этой конфеты для Flash CS4.

Часть 1. — Рассказывается о том, как же добавить косточки к нашему персонажу.
Часть 2. — Учит как оптимизировать персонажа и косточки перед использованием анимации.
Часть 3. — О том, как анимировать персонажа с помощью косточек и ключевых кадров.

А вообще отличные видео туториалы по этой теме есть у Мигеля в блоге: раз и два.

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

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

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

3. тело сразу же я вынесла в отдельный символ, т.к. если бы пришлось его вращать вместе с цыплёнком, блик и тень тоже вращались бы, а нам этого не нужно.

4. далее я сделала анимацию каждой части тела цыплёнка вокруг оси x с добавлением масок.
т.к это не реальная 3д анимация, а псевдо, то мы первым делом определяем ключевые позиции поворота цыплёнка. в нашем случае их 4: основное положение, когда цыплёнок смотрит на нас и ещё 3 с шагом 90 градусов. наброски этих положений вы видите на соответствующем слайде.

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

ниже представлен скриншот таймлайна данного символа (по клику увеличивается)

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

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

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

а для того, чтобы вам легче было во всем разобраться, выкладываю исходник этого дела:

скачать

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

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

итак. рисовать с нуля. от руки подобную анимацию достаточно хлопотно и не каждому под силу.
первая мысль, которая возникает – нужно найти видео танцующих людей и обрисовать его.
лично я предпочитаю искать в стоковых каталогах, например www.istockvideo.com
по запросу dancing находим нужное видео. лучше чтобы фигуры людей были однотонные – легче будет с ними работать.

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

устанавливаем её себе и производим следующую последовательность действий:
1. открываем наш flv файл.
2. открываем вкладку image series
3. выбираем параметр jpg и устанавливаем получше качество изображений.
4. присваиваем это действие нашему файлу с помощью кнопки add action
5. нажимаем кнопку process all task

в результате выполненных действий мы получим последовательность изображений нашего видео в формате jpg.
после чего нужно выбрать небольшую последовательность кадров, чтобы движения были зациклены.
35-45 вполне подойдёт. потом их можно дублировать и сделать reverse frames, что сделает нашу анимацию в 2 раза длиннее.

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

далее много букв и поясняющих картинок.

итак, у нас есть планшет wacom intuos3 со стандартными настройками. наша цель настроить его для себя и исключительно для flash. открываем свойства планшета, которые находятся в панеле управления windows.

выглядит наша панель настроек вот так.

чтобы наши последующие настройки работали исключительно для flash мы делаем следующие действия:
нажимаем на «+» возле параметра «приложение»

и в списке программ выбираем flash или нажимаем кнопку «обзор…» и задаём путь вручную если flash не запущен.

теперь следите чтобы при настройке у вас был выбран flash, а не все программы. причём для функциональных клавиш и для пера flash надо выбирать отдельно.

express keys

итак, начнём с экспресс клавиш.
по умолчанию на них назначены ctrl, alt, shift. как по мне абсолютно бесполезная вещь на планшете.

назначим на одну из клавиш команду shift+f5 (удалить кадр или группу выделенных кадров)
для этого в выпадающем списке выбранной клавиши выбираем команду «нажатие клавиши…»

и в появившемся окне задаём нужное сочетание. только обязательно проверьте чтобы у вас была английская раскладка!

затем даём имя команде, для себя, чтобы не забыть что мы там назначили.

вуаля! теперь мы можем удалять выделенные кадры одним нажатием на клавишу.
а если на другие клавиши левой группы назначить конвертирование ключевых кадров в статические (shift+f6), создание/удаления motion и shape анимации, то форматирование кадров будет вообще очень лёгким процессом!
лично мне работать с кадрами при помощи экспресс клавиш планшета стало гораздо удобнее и в несколько раз быстрее.

попутно может возникнуть вопрос, а какие горячие клавиши у команды create motion tween?
а их нету ) но их можно с лёгкостью создать. алгоритм прост:

• для начала вызываем пункт меню edit -> keyboard shortkuts…
• далее дублируем стандартные установки с помощью кнопки dublicate.
• из списка команд выбираем нужную. в нашем случае это insert -> timeline -> create motion tween
• добавляем новое сочетание с помощью кнопки add shortcut (плюсик)

• далее нажимаем нужное сочетание клавиш. если такое сочетание уже зарезервировано, появится сообщение содержащее описание команды на которую это сочетание зарезервировано. в данном случае я выбрала сочетание ctrl+shift+t (t – tween, легко будет запомнить).
• нажимаем ok. всё готово!

теперь при нажатии на эти клавиши у нас будет создаваться motion tween. и что ещё замечательно – этим же сочетанием движение можно удалить!

touch strip

но вернёмся к нашему планшету. а именно к полосам прокрутки

многие их отключают, но если вам всё же удобно ими пользоваться, то тут то и возникает вопрос: зачем нам 2 увеличения масштаба? что за непозволительная роскошь, когда одну из полосок можно настроить например… на отмену/откат (ctrl+z, ctrl+y)

и снова выбираем нашу любимую команду «нажатие клавиш» возле нужной полосы прокрутки (я выбрала левую)

теперь настраиваем верхнюю и нижнюю часть полоски на сочетания клавиш ctrl+z и ctrl+y таким же способом как и функциональные клавиши – задаём сочетание, пишем имя.

теперь мы можем с лёгкостью переходить от действия к действию!

pop-up menu

теперь о попапе.
8 экспресс клавиш и 2 полосы прокрутки может показаться недостаточным количеством, когда вспоминаешь всё, что хотелось бы на них повесить.
и тат на помощь приходит попап меню. выглядит оно вот так и содержит 2 стандартные настройки: переключение между режимами пера и мыши. если вы не используете вакомовскую мышь, то их можно сразу удалить. кстати, извините мне мой французский, но вакомовские мыши – гавно!

что же такое попап меню? по сути это альтернативное контекстное меню, которое можно вызывать верхней кнопкой пера (по умолчанию там двойное нажатие, которым мало кто пользуется).
итак. первое что надо сделать. это назначить pop-up menu нашему перу.

• переключаемся в инструментах с «функций» на «grid pen»
• выбираем кладку «перо»
• назначаем верхней кнопке пера команду «pop-up menu»

далее назначаем какую-нибудь команду, я например выбрала flash команду optimaze... ибо использую я её достаточно часто, путь к ней длинный (modify->shape->optimaze…), а сочетание клавиш трудно запоминаемое (ctrl+alt+shift+c)

выбираем команду «нажатие клавиш» в списке «добавить» и назначаем нашу команду.

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

а вот так наше попап меню будет выглядеть непосредственно во flash

а ещё при рисовании кисточкой во flash не забываем включать режим пера и учёт наклона пера, а так же регулировать степень сглаженности линий на панели properties. и рисование будет вообще в удовольствие!

вот вроде и всё. кажется ничего не забыла.
кстати таким образом можно настроить любую программу.
приятной вам планшетной работы во flash!

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

1. в принципе результат который вы видите вполне приемлемый и если сильно не присматриваться, то не особо и заметно. что дождь не программный.
2. по сути всё что нужно сделать – нарисовать очерёдность линий под нужным наклоном. я использую белый цвет с прозрачностью 25%, но всё зависит от фона. если он сильно светлый, возможно основным цветом стоит выбрать серый или голубой.
3. перерисовываем дождик ещё в 3-х разных положениях. можно больше, зависит от вашего желания.
далее преобразовываем каждое из 3-х состояний в отдельные символы и на панели propertis кешируем символы, как битмапы. это делается для того, чтобы flash каждый раз заново не перерисовывал дождик.
этого можно и не делать, но в данной задаче это было необходимо.

вот и всё :о) если вы знаете более удачные способы оптимизации дождя – велкам в камменты )