Flash animation

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

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

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

здравствуйте, сегодня я расскажу вам о псевдо-3d анимации персонажей на примере нашей игры.

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

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

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

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

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

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

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

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

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

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

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

скачать

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

зная о моей большой любви к плагинам и расширениям для flash, мне скинули ссылку на очень занятный ресурс jumpeyecomponents.com, на котором представлены все возможные flash компоненты для работы с текстом, ui, flash меню, аудио, видео и визуальными эффектами. естественно всё это поставлено на коммерческую основу и за каждый набор компонентов нужно выложить кругленькую сумму, но на сайте так же представлены триальные версии для ознакомления и урезанные free версии.

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

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

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

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

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

вчера мне задали такой вопрос: как можно отредактировать сразу несколько ключевых кадров?
такой вопрос часто задают новички, но и что самое забавное опытные флешеры тоже )

данный метод может быть применён как к последовательности ключевых кадров (например ряд импортированных картинок 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. экспериментируйте, дерзайте!
исходник пыли можно скачать здесь.

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

но как поступить в случае, если фон неоднородный?

конечно можно сохранить нужный элемент в png и сделать отражение в фотошопе, но есть ещё один простой и интересный способ.

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



• символ должен быть movie clip. если это graphic, можно поменять ему тип на панели свойств.
• задать режим blend: multiply (тоже на панели properties)

единственная проблема в том, что этот способ хорошо работает только на светлых фонах. это особенность режима multiply.

если вы знаете ещё какие-нибудь способы, велкам в камменты
исходник можно скачать тут

cartoon animation by preston blair
это наверное одна из первых книжек по анимации персонажей, которая попалась мне в руки.
очень многие свои знания я почерпнула именно из неё.
в книге подробно описываются принципы создания персонажей, особенности их анимации.
если вы до сих пор не листали её – сделайте это немедленно!
скачать книгу

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

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

зы: кстати, а игрушка кажись до сих пор активна по этому адресу

сегодня хотелось бы рассказать о структурировании символов для анимации.
рассмотрим на примере самого обыкновенного прелоадера. что может быть проще?
к примеру вот такой: (пост содержит swf файлы, если вы читаете через rss ленту возможно они не будут отображаться)

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

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

нужно поменять цвет/оттенок
блин! надо было сделать корректирующий слой с полупрозрачными тенями, а в нижнем менять основной цвет

нужно изменить интенсивность прозрачности
что?! опять перезаливать все тени во всех кадрах?…

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

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

рассмотрим на нашем примере:
1. мы создаём объект (кружок) и преобразовываем его в movie clip «point»
2. далее мы сразу конвертируем movie clip «point» в «point_anim». это делается для того, что на временной шкале этого видеоклипа мы будем анимировать наш «point»
3. затем мы копируем «point_anim» и располагаем по кругу. чтобы равномерно распределить кружочки, нужно нарисовать многогранник с помощью инструмента polystar tool и разместить видеоклипы на угловых точках. только не забудьте включить привязку.

4. после того как все шарики распределены их можно выделить и конвертировать в символ (»loader»). это для того чтобы с лёгкостью перемещать его по сцене или переносить в другие файлы. теперь наша вложенность соответствует картинке.
5. можем начать делать анимацию. для этого заходим внутрь символа «point_anim». конечно можно сделать 8 ключевых кадров и в каждом установить степень прозрачности. но если вдруг понадобится изменить её? поэтому мы воспользуемся самым простым способом. сделаем motion анимацию параметра alpha на 8 кадров.

6. и последнее что осталось сделать – добавить к каждому муви клипу «point_anim» (внутри символа «loader») следующий скрипт, изменяя параметр кадра от 1 до 8 последовательно:

onClipEvent (load) {
this.gotoAndPlay(1);
}

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

теперь в случае чего мы с лёгкостью можем менять прозрачность в ключевых кадрах анимации символа «point_anim», и соответственно цвет кружочков или форму всего в одном символе «point».

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

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

зы: исходник можно скачать тут.

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

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

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

кстати, если в слое-маске текст сдвинуть немного влево и вверх, то когда блик будет пробегать по тексту создастся ощущение рефлёности текста. скачать: text_blik.fla

что касается мерцания, то «звёздочки» лучше рисовать в фотошопе, сохранять с прозрачным фоном в png, а затем анимировать во флеше.
вот собственно быстренько состряпала для вас баннерок а-ля распродажа всё нарисовано во флеше с добавлением нескольких фильтров, отражение и блики делала в фотошопе.
потрошите исходник, разбирайтесь что к чему, задавайте вопросы в камменты.