Flash animation

Quest for power 2 – это сиквел первой части этой игры, для которой я делала графику, а точнее рескин.

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

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

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

Вернулась из Крыма с конференции IT Sea, где выступала с докладом о взаимодействии flash программиста и аниматора при создании flash игр.
Пока выкладываю только презентацию, когда появится видео, его выложу тоже.

А конференция прошла просто шикарно! Спасибо всем кто там был!

Листать можно также стрелочками вправо-влево на клаве.

тут на днях серёжа flastar написал песенку про флешеров.
а у роста в блоге началось народное творчество.
меня что-то тоже осенило и родилось вот это

Чем пахнут флэшеры

(по мотивам Джанни Родари «Чем пахнут ремёсла?»)

У каждого флешера запах особый.
Рост, как всегда, пахнет новостью новой.

Антик Андрей пахнет винилом.
Пахнет Шаграт водкой и пивом.

Панин пропахся давно молоком.
Саша Титов пахнет котом

Белая пахнет белым макбуком.
Игорь Рузанов картошкою с луком.

Дима Кочетов пахнет машиной,
Таня же пахнет Кочетовым Димой.

Волков Антон пахнет джемом из клюквы,
Кстати, Карповича надо понюхать.

Юлечка пахнет кашею манной,
А лошадьми пахнет Романна.

Пахнет Денис хитростью новой,
Пахнет Песецкий идеей толковой.

Жлоба недавно пропахся коньками
Пахнет Мигель колбасою салями.

Алфер Илья пахнет задором.
А Крестелёв пахнет ласковым морем.

Логинов пахнет весёлою фермой
Валик Железный – велосипедом.

Пахнет Панас осенним каштаном.
Пахнет Демон шоколадным кальяном.

Шупер Роман пахнет скайп чатом,
А Микитюк гор Карпат ароматом.

Пахнет Бадим чем-то элитным.
Пахнет Фластар наукой гранитной.

Константинёра не знаю я лично,
Рост говорит, что он пахнет клубничкой.

Галабурда пахнет улыбкой,
Анимефиш пахнет вкусною рыбкой.

Много у флешеров запахов есть,
Я их, увы, не смогу перечесть.

Если кого-то забыла сейчас,
Я вас понюхаю в следущий раз

flash технология ярка и многогранна. фраза «я – флешер» не может полностью описать род деятельности человека.
сейчас все привыкли разделять на программистов и анмиматоров. и это правильно. есть конечно личности которые замечательно и рисуют и программируют. но таких единицы.

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

я хочу поговорить о flash аниматорах, которых в общей массе можно разделить на 2 типа:

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

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

а есть ещё аниматоры, которые помимо классической покадровой анимации и mоtion/shape используют программную для всевозможных эффектов (снег, дождь, взрывы, генерация фонов)

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

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

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

плохо когда человек продолжает делать всё подряд, эдакий «и швец и жнец и на дуде игрец».
если я не права – поправьте.

немного личного на закуску.

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

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

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

теперь этот блог будет посвящён не только flash анимации, но и flash играм.

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

далее много букв и поясняющих картинок. Read the rest of this entry »

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

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

теперь на запросы типа «а нарисуйте мне 5-ти минутный мультик за 300 баксов» можно смело кидать ссылку на эту статью

все флэшеры, как зачарованынные ждали 23-го числа, чтобы скачать свеженькую, вкусную триальную версию adobe flash cs4, но adobe порадовал нас только презентацией новых фич и возможностью предварительного заказа программы.

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

итак, что же пригодится нам, аниматорам, в новой вервии adobe flash cs4?
привожу список того, что мне больше всего пришлось по вкусу:

обратная кинематика с помощью инструмента «кости»
«косточки» – то, что с затаившим дыханием ждали все аниматоры. теперь анимация персонажей будет не только простой, но и приносить невероятное удовольствие! *в предвкушении потирает руки*

преобразование трёхмерных объектов
наконец-то есть возможность анимации плоских объектов в трёхмерном пространстве, позволяющая анимировать их по осям x, y и z. вот уж где фантазия аниматоров должна разгуляться. думаю ближайшее время появится огромное количество баннеров с 3-х мерным текстом )) *хихикает*

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

траектория движения
прощай guide layer, теперь мы будем обходиться без твоей помощи, т.к. получили полный контроль над траекторией движения анимации на основе объектов. теперь flash автоматически создаёт траекторию движения, которая легко может быть изменена с помощью уже знакомых вам элементов управления безье. ну не сказка ли? *мечтательно откидывается на спинку стула*

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

редактор движения
вот что пишут на сайте adobe: «воспользуйтесь детализированным контролем над параметрами ключевых кадров, включая поворот, размер, масштаб, расположение, фильтры и многое другое, с помощью нового редактора движения. упростите управление с помощью графических дисплеев, аналогичных тем, что используются в adobe after effects®.»
не совсем представляю о чём идёт речь, ибо не видела этой фичи в презентации, но уже слюнки текут. *сглатывает слюну*

новый инструмент «перо»
да да да! наконец-то во flash будет перо, заимствованное из adobe illustrator!!! теперь работа с точками будет только в кайф! *нервно потирает в руках перо планшета wacom*

блин, столько ещё всего нового и полезного!
новый удобный интерфейс,
улучшенная библиотека с поиском, выборочный экспорт слоёв,
преобразование анимации в as 3.0,
мощные инструменты создания геометрических фигур
импорт psd и ai файлов,
*а-а-а, держите меня семеро!*
…и ещё много-много всяких полезностей и вкусностей, подробнее о которых вы можете почитать здесь.

возможно до того как я установлю себе adobe flash cs4, я уже буду знать как он выглядит внутри и как работают все фичи (благо видео в интернете начинает появляться огромное количество). но я уверенна, что после открытии этой программы я на сутки с головой зароюсь в неё и мне не избежать «профессионального оргазма».
чего в принципе и вам желаю!
получайте удовольствие от своей работы!

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

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

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

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

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

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

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

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

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

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

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

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

горячие клавиши для форматирования кадров

f5 – добавить статический кадр. также можно заполнить выделенный промежуток статическими кадрами.
f6 – добавить ключевой кадр. преобразовать статический кадр или группу в ключевые.
f7 – добавить пустой ключевой кадр. или соответственно преобразовать статический кадр или группу в пустые ключевые.
shift+f5 – удалить кадр или группу выделенных кадров
shift+f6 – преобразовать ключевой кадр в статический (можно также преобразовывать группу ключевых кадров)

это стандартные сочетания клавиш. другие функции нужно назначать самостоятельно.

назначение горячих клавиш

например очень часто нам приходится создавать или удалять motion tween, a сочетания клавиш для этого действия нет. рассмотрим как это делается.

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

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

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

проанализируйте, какими командами вы пользуетесь очень часто и назначте на них горячие клавиши.
я например использую ctrl+shift+y и ctrl+shift+u для flip horisontal и flip vertical соответственно. а ещё клавишу «/» для включения/отключения привязки. :о)
а какие нестандартные сочетания ипользуете вы?

наверное самый часто используемый растровый формат картинок во флеш – это png. его главное достоинство конечно же поддержка прозрачности.
я просто приведу несколько примеров и правил его применения.

— при использовании в анимации png изображений следите за обтравкой картинок. объект должен хорошо смотреться как тёмном, так и на светлом фоне.

— при фокусировке на заднем плане или на переднем не забывайте делать соответствующие размытия. этого можно добиться с помощью фильтра blur.

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

кстати, png обладает ещё одной замечательной способностью. если преобразовать его в movie clip и применить фильтр (например drop shadow), то он применится только к непрозрачным участкам. что очень удобно.

если вы знаете ещё какие-то особенности или правила касательно формата png? поделитесь пожалуйста.

а вам уже доводилось вставлять swf в свой блог? мне да.
я опубликовала свой предыдущий пост, вставив по старинке следующий кусок текста, сгенерируемый публикацией из flash в html.

в опере и эксплорере всё было чудесно, как вдруг я обнаружила, что мозилле всё поплыло и съехало.
я мигом полезла в вордпресс. что же произошло? наш чудесный друг отформатировал код как ему вздумалось, а именно извлёк из тега <object> теги <embed> и <param>, аккуратненько их структурировал и позакравал сразу после открытия.

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

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

вот таким нехитрым образом мне удалось побороть swf и вордпресс жуть! если вы знаете более удобный и надёжный споссоб – поделитесь пожалуйста

всё-таки хочется закончить описание плагинов trickorscript.com
на закуску осталась последняя группа:

powerful plugins

bone parenting
этот плагин симулирует структуру костей. мы можете задать структуру и анимировать персонажа, двигая его кости. этот плагин считается самым мощным на сайте trickorscript.com. хотя лично мне они пару раз повесили систему к тому же вроде как adobe обещали «косточки» в следующей версии флеш.

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

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

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

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

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

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

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

useful plugins

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

organize transformation points
наверное вы часто сталкивались тем, что при изменение точки трансформации в каком либо из ключевых кадров слетает на фиг вся анимация motion! этот плагин позволяет быстро и удобно организовывать ваши точки трансформации.

rename symbols batch
думаю нет такого флешера, которому хоть раз приходилось копировать все символы из одной библиотеки в другою. а так как все мы по своей природе ленивые, давать адекватные имена символам никто не удосуживается. вот и вылетает чудное сообщение «to replace or no the symbols?». в лучшем случае мы отменяем операцию и начинаем всё переименовывать, но зачастую просто ставим галочку «не заменять».
так вот, с помощью этого плагина можно легко переименовывать символы в библиотеке, добавлять порядковый номер или букву группе символов, применить ко всем названиям префикс или постфикс. с этим плагином вы навсегда забудете о выборе заменять символы или нет.

кстати о птичках

цены на каждый плагин колеблются от 9 до 35$, но оптом весь комплект можно приобрести за 180$. кряков на них я не нашла, но вот поюзать в течении 20 дней триальные версии может каждый.

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

именно поэтому мы с александром титовым (santer, когда ты уже заведёшь собственный блог?) собираемся сделать пару самых необходимых плагинов на основе этих и других (обязательно будут ещё обзоры). и кое-то уже работает рабочую версию обязательно выложу в блоге в качестве open sourse.
кстати, если кто-то из программистов имеет желание поучаствовать в разработке плагинов – милости просим