Известный художник-аниматор Adam Phillips, автор Brackenwood (если вы не видели этих мультфильмов, срочно смотреть), расшарил видео с процессом создания анимации одной из сцен мультфильма «The Last of the Dashkin». Эффект летящей 3D камеры с бегущим персонажем.
Полное видео состоит из 33-х частей. Пока что Адам выложил только 20, но в скором времени обещал выложить остальное. Видео очень интересное и познавательное. Очень правильный пример создания покадровой анимации.
Смотрите на работу мастера и учитесь!
Ниже выкладываю первую часть. Остальное видео можно посмотреть здесь.
Если у вас нет планшета это ещё не повод отчаиваться. Во времена 5-6-го флеша мне тоже приходилось рисовать мышкой. А недавно мне надо было сделать иллюстрацию, в которой я повсеместно использовала методику, принципы которой я вам сейчас расскажу.
Во первых удобнее всего рисовать при наличии скетча. Поэтому если у вас есть сканер – нет ничего проще, чем сделать карандашный рисунок, сканировать его и импортировать во 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 слайды) движения рук, то вот правой руке с веером я уделила достаточно внимания, а на левую немного забила, по сути рукав там должен по другому летать.
Словом совершенству нет предела :о)
В догонку к предыдущему уроку о беге хочу рассмотреть бег животных на 4-х конечностях. Видео и флешка с иллюстрациями как обысно прилагается.
1. Собака и крыса.
Это враги нашего ниндзи :о) Сначала я сделала видео анимации бега собаки, но по каким-то причинам оно сохранилось не правильно и испортилось. Поэтому я записала видео на примере крысы.
Итак, рассмотрим принципы анимации бега животных:
2. Сначала рисуется покадровая анимация передней ноги.
Если вы внимательно посмотрите на видео, то прежде чем прорисовывать фазы движения ноги, я накидала приблизительные движения простыми линиями с помощью кисточки. Это по сути является фазовкой движения, так сказать черновая анимация, которая сразу задаёт темп движения и делается для того, чтобы потом не пришлось переделывать всё с начала.
3. Затем рисуется покадровая анимация задней ноги.
Хочу отметить, что у животных задние и передние ноги всегда отличаются, поэтому лучше не лениться и на примере передней ноги нарисовать фазы движения для задней.
4,5. Пускаем ноги в разнобой.
Передние и задние ноги дублируются и в них смещаются кадры на 2-3 вперёд или назад в зависимости от типа бега. Например в собаке первая нога отстаёт от второй всего на 1 кадр, а в анимации крысы на 3 кадра. Думаю на иллюстрации понятно что имеется ввиду.
6. Общая анимация тела.
Далее мы переходим на уровень выше и делаем уже с помощью анимации motion движение корпуса, головы, шеи хвоста итп. Во-первых это движение вверх-вниз, т.к животное во время бега немного подпрыгивает (собака больше, крыса меньше), во-вторых шея с головой подаётся немного вперёд, когда животное делает очередной выпад.
Естественно анимация должна быть цикличной. В данных примерах у меня в анимации бега используется 6 кадров. Если у вас игрушка совсем простая и надо экономить каждый килобайт, можно ограничится и 4-мя кадрами, а если наоборот нужно более детальная проработка движений, то лучше использовать 8-12 кадров.
И в заключение: самый лучший учитель – это природа и наблюдение за ней. Чтобы правильно нарисовать бег того или иного животного – посмотрите как он двигается в жизни. Ну а если по близости никого подходящего нет – YouTube вам в помощь!
Я сейчас занимаюсь разработкой графики и анимации для сиквела одной игры для компании Wheemplay и подумала, что возможно будет полезно записывать свой рабочий процесс на видео и выкладывать его в блоге. Ведь именно наблюдая за работой других людей мы учимся её делать сами.
Для записи я выбрала программку Camtasia Studio 6. Если кто-то может посоветовать что-нибудь хорошее и бесплатное – буду премного благодарна. Пока что это мой первый блин, надеюсь что ком не сильно уж большой.
Теперь о персонаже. В swf-ке ниже вы можете посмотреть как выглядит персонаж. Кстати на первом кадре по клику он прыгает. На втором кадре получившийся в результате работы бег, и более подробная раскадровка на третьем. К сожалению откомпилированные движения в ускоренном видео выглядят не естественно, поэтому я и выложила их отдельно.
А вот собственно сам рабочий процесс. Ужала до 7 минут, дабы не слишком вас утомлять
Недавно для одной игры мне требовалось нарисовать несколько конфет во flash, при этом одним из условий было, чтобы они выгладили более-менее реалистично.
1. Итак, одной из задач стояло нарисовать шоколадную конфету.
2. Самый лучший способ нарисовать реалистичное изображение – срисовать его с фотографии. Идём на www.istockphoto.com или любой дугой сайт с фотографиями и находим изображение шоколадной конфеты нужной нам формы и ракурса.
3. Дальше с помощью пера очерчиваем основные линии, определяющие форму конфеты. Заметьте, полосочки, идущие по кругу конфеты я выделила другим цветом, они нам ещё пригодятся.
4. Пипеточкой с фотографии берём цвета и делаем сложный градиент. Поверьте, если в градиенте использовать не 2 цвета, а хотя бы 3-4, он смотрится более интересно и выигрышно.
5. Далее, опираясь на ту же фотографию, определяем более светлые места. Тени можно сделать так же отдельно, но в данном случае они и так были хорошо обозначены градиентом.
6. Блики. Т.к конфета у нас имеет округлую форму сверху, то и блики мы сделаем с помощью радиального градиента. Опять же не боимся смешивать цвета, ориентируемся на фотографию и работаем с пипеткой.
7. Помните разделяющие линии, которые мы нарисовали в начале? Перекрашиваем их в коричневый цвет, преобразуем в заливку (это важно, ибо конфету мы будем скейлить) и помещаем поверх наших бликов, т.к в них свет попадать не должен.
8. Вуаля, наша шоколадная конфетка готова!
9. А это вариации на тему шоколадных конфет для другой игры. Они были нарисованы не по фотографии и с меньшей детализацией, но главное остаётся ощущение, что это шоколад.
Ну и на закуску исходник этой конфеты для Flash CS4.
На блоге Flash Enable нашла хороший туториал по работе с косточками во Flash CS4, правда на примере корявенького персонажа, но нам же важна суть, верно?
Часть 1. — Рассказывается о том, как же добавить косточки к нашему персонажу. Часть 2. — Учит как оптимизировать персонажа и косточки перед использованием анимации. Часть 3. — О том, как анимировать персонажа с помощью косточек и ключевых кадров.
А вообще отличные видео туториалы по этой теме есть у Мигеля в блоге: раз и два.
здравствуйте, сегодня я расскажу вам о псевдо-3d анимации персонажей на примере нашей игры.
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 аниматоров.
те, у кого нет планшета, думаю после прочтения этой статьи появится желание его купить, а те у кого есть, надеюсь откроют для себя что-то новенькое
на данный момент вот уже месяц я работаю над графикой и анимацией для flash игрушки. думаю после того как она выйдет мне будут о чём рассказать. сейчас же мы столкнулись с проблемой оптимизации графики и анимации.
когда слишком много объектов зависит от программной части и от процессора, на помощь приходят хитрости аниматора.
в нашем случае изначально дождь планировалось делать программно, но так как ресурсы и так съедались более важными программными модулям, было принято решение делать дождик ручками.
1. в принципе результат который вы видите вполне приемлемый и если сильно не присматриваться, то не особо и заметно. что дождь не программный.
2. по сути всё что нужно сделать – нарисовать очерёдность линий под нужным наклоном. я использую белый цвет с прозрачностью 25%, но всё зависит от фона. если он сильно светлый, возможно основным цветом стоит выбрать серый или голубой.
3. перерисовываем дождик ещё в 3-х разных положениях. можно больше, зависит от вашего желания.
далее преобразовываем каждое из 3-х состояний в отдельные символы и на панели propertis кешируем символы, как битмапы. это делается для того, чтобы flash каждый раз заново не перерисовывал дождик.
этого можно и не делать, но в данной задаче это было необходимо.
вот и всё :о) если вы знаете более удачные способы оптимизации дождя – велкам в камменты )
меня уже несколько раз просили более подробно рассказать о прорисовке/рисовании во flash. в частности просили рассмотреть на примере «карамельного домика», который вы видите на 1-м слайде флешки. обещания я свои выполняю, поэтому присаживайтесь поудобнее и слушайте внимательно.
1. итак, мы имеем на выходе вот такой симпатичный домик. рассмотрим по порядку все шаги, которые привели к этому результату.
2. всё всегда начинается со скетча (наброска) на бумаге. можно конечно и сразу на компьютере, если у вас есть планшет, но как по мне никакой планшет не сможет сравниться с простым карандашом и листком бумаги. этот домик был нарисован гелевой ручкой в блокноте.
3. первое что я делаю это выбираю контрастный цвет для контурных линий (зачастую это синий или красный) и прорисовываю все основные контуры с помощью инструмента pen и редактирую точки и линии инструментом arrow. не используйте при прорисовке pencil, его линии зачастую получаются кривые и содержат много точке, к тому же их сложнее редактировать.
4. когда все линии прорисованы, удаляем слой с наброском, меняем цвет линий на чёрный и корректируем элементы по композиции. я увеличила домик, передвинула окошки, дорисовала облака и велосипед. планировались ещё деревья, но они не вписались )
5. подбираем основные цвета картинке. обычно это процесс у меня занимает больше всего времени. если я не знаю, чего конкретно хочу от цветовой гаммы, на помощь приходит адобовский кулер. здесь я обошлась без него, заранее зная, что хочу картинку в тёплых тонах.
6. вот как выглядит наша картинка без контурных линий. не спешите их удалять, они могут вам ещё пригодится, лучше всего скопируйте их на отдельный слой.
7. далее добавляем градиенты. в идеале нужно использовать корректирующие слои (слой с градиентной заливкой в чётных или белых тонах с прозрачностью), чтобы мы в любой момент могли поменять основной цвет без ущерба градиентным переходам. но в данном случае цвета менять я не собиралась, поэтому работала без корректирующих слоёв – просто добавляла градиент основному цвету (от более всетлого к тёмного). результат вы можете видеть.
8. далее шёл кропотливый процесс добавления бликов и теней, который и привёл домик к «карамельному» виду. и добавлены детали такие как цветочек и кружка в окошке.
9. вот блики и тени без заливки. обратите внимание на контуры окошек и забора – это нично иное как наши контурные линии, просто где-то они чёрные, а где то белые с прозрачностью 15-25%. так же добавлены градиентные блики везде, где что-то может блестеть. даже шёрстка у кошки )
10. чтобы блики смотрелись симпатичнее я использовала градиентную заливку не белого цвета, а светло-жёлтого, в результате чего блики кажутся теплее.
11. что касается теней, то часть из них это просто градиенты чётного с прозрачностью он 0 до 25% (см. тени вокруг окошек и двери), а часть – расблёреные movie clip-ы с обычной заливкой (см тени под велосипедом и забором).
вот собственно и весь секрет. пробуйте, экспериментируйте и у вас всё получится!!!
вот например процесс отрисовки нескольких «сладких» иконок.
думаю, что многие сталкивались с проблемой масштабирования символов. в частности это затрагивает кнопки, когда хочется растянуть или сжать кнопочку, но при этом чтобы она была правильно пропорциональная и не было искажённых углов, как показано на картинке:
на самом деле для этого не нужно никаких специальных плагинов или сложных настроек, всё предельно просто.
вчера мне задали такой вопрос: как можно отредактировать сразу несколько ключевых кадров?
такой вопрос часто задают новички, но и что самое забавное опытные флешеры тоже )
данный метод может быть применён как к последовательности ключевых кадров (например ряд импортированных картинок png), так и к комплексной motion анимации.
1. рассмотрим на примере анимации акулы (да, я знаю акулы плавают по другому! )
2. к примеру нам нужно отрезайзить всю анимацию вместе с рыбкой и положением ключевых кадров в 2 раза. такое случается достаточно часто, например когда нужно делать несколько баннеров с различным разрешением.
на таймлайне есть ряд очень полезных кнопочек. слева-право: onion skin, onion skin outlines, edit multiply frames, modify onion markers
первые 2 зачастую используются аниматорами при покадровой анимации
3. onion skin позволяет одновременно просматривать несколько последовательных кадров сразу. вверху на таймлайне вы можете увидеть маркеры, которые просто регулируются и обозначают количество выделенных кадров до и после текущего. в данном случае я отметила 3 кадра после. результат которые получается вы видите справа.
4. onion skin outlines работает таким же образом, единственное отличие кадры отображаются аутлайнами.
5. modify onion markers позволяет быстро изменить настройки маркеров
6. ну и собственно, то что нас больше всего интересует edit multiply frames — позволяет редактировать сразу несколько ключевых кадров.
замечу сразу, что почему-то у многих возникают трудности при использовании этого режима, поэтому расскажу алгоритм действий, который действует наверняка:
1. выбираем режим edit multiply frames
2. выделяем маркерами нужный промежуток кадров вручную или с помощью команды onion al. картинка будет выглядеть как показано на рисунке: будут отображаться только ключевые кадры анимации.
3.выделяем все кадры промежутка, в нашем случае, т.к мы выбираем все кадры, можно просто кликнуть по слою. все символы при этом должны быть выделены.
4. выбираю инструмент transform нажатием горячей клавиши «Q». всё отображаемые символы должны выделиться группой для трансформации. если выделился только один символ, возможно вы что-то сделали не так, повторите процедуру.
5. скейлим до нужного размера (рис.7)
8. проверяем результат
для shape анимации тоже можно использовать этот метод, но если вы используете shape hints, то с ними будут проблемы, ибо они остаются на прежних местах.
зы: конечно можно конвертировать весь слой в movie clip и отресайзить как хочется, но есть случаи когда этот способ не покатит, тогда вы сможете опробовать данный метод )
сегодня хочу рассказать о таком приёме анимации, как облака пыли.
этот приём применяется в разнообразных случаях:
- резкое перемещение персонажа
- торможение
- падение объектов на землю
- взрывы
- грубо говоря везде, где что-то хоть как-то может поднять пыль )
рассмотрим на примере хомячка из предыдущей статьи:
1. в моём случае пыль поднимается когда он резко срывается с места и тормозит.
2-8. если пронаблюдать за настоящей пылью, можно заметить, что сначала поднимается густой клуб, увеличивается и постепенно рассеивается. рисовать его одним большим пятном с применением прозрачности – нонсенс, хотя можете попробовать. для реализации этого эффекта лучше использовать несколько облачков поменьше и с каждым шагов увеличивать их количество, уменьшать в размерах и изменять прозрачность.
9. вот собственно результат который получился.
10. когда делается пыль для торможения, её лучше делать не в одном месте, а растягивать вдоль траектории движения.
вот собственно основные принципы анимации. пыль может быть разнообразная, в зависимости от стилистике: с контурными линиями или без, с градиентом, прозрачностью или даже разноцветная. так же, чтобы придать ей реалистичности можно использовать фильтр blur. экспериментируйте, дерзайте!
исходник пыли можно скачать здесь.
, line 
, selection 
и subselection 
tools:
и rectangle 
.
не возбраняется, но не приветствуется, потому как он создаёт кучу лишних точек.
