Как научиться флэш анимации

woman 1784755 1920 Советы на день

Новичкам: с чего начать изучение флеш?

study flash

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

Нико, у вас есть главное – желание. Если оно не испариться через пару неделек-месяцев, то результат будет. С чего начать – с матчасти.

Если планируете изучение Action script (а для флешера знать хотя бы основы as, я считаю, просто необходимо) – остановитесь на c As3. As2 потихоньку уходит в прошлое, будем шагать в ногу со временем.

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

Не пытайтесь сразу прочитать все книги, не распыляйтесь. Выберите один самоучитель и углубитесь туда. А дальше, освоив азы, расширяйте свою библиотеку и знания.

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

Очень мне нравились книжки How to Cheat in Adobe Flash на английском от флеш-аниматора Chris Georgenes (он пишет уроки по флеш-анимации для Адоба).

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

Скачать How to Cheat in Adobe Flash in Cs5 вместе с диском можно здесь.

9780240522074

Мое изучение флеша началось именно с самоучителя. В изучении флеш мне лично помог не сам учебник, а видеокурс, который прилагался к учебнику. Поэтому переходим к пункту № 2.

Считаю, что видео-уроки самые эффективные, поскольку сама изучала флеш по видео-курсу.

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

Например, основы флеш:

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

Самый большой форум по флеш, который мне известен – flasher.ru. Так что, уважаемые новички – пользуйтесь благами интернета и этого ресурса в частности:)

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

Освоив flash как инструмент, вы станете не совсем аниматором, а скорее «шевелителем», умеющим двигать объекты.

Книжек по классической анимации полно – остановитесь для начала на «Тайминг в анимации», взять можно здесь.

timing1

По поводу графического планшета. Не советую сразу брать очень дорогой планшет, иначе, если вы не рисовали раньше, рискуете приобрести себе дорогую подставку под кофе. Планшеты Wacom – самые лучшие из тех, что мне довелось попробовать. Для пробы можно взять Genius, он похуже будет, но дешевле.

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

«Добрый день! Прошу прощения за наивные и может глупые вопросы =) Но мне очень важны Ваши ответы. Подскажите пожалуйста, я много рисую карандашом, но вот недавно задумался всерьёз заняться этим делом с помощью компьютерной программы, я так понял, что почти все рисуют в Adobe Flash (или нет)? Где я могу её достать? И смогу ли я сам научиться в ней работать? Я не знаю с чего мне начать. Спасибо большое! »

(Алексей)

Adobe Flash – программа для анимации. Для рисования она не самый лучший вариант, намного больше возможностей у Adobe Illustrator. Очень советую, замечательная программа для векторщика. Во флеше тоже можно рисовать, некоторые (как я, например) рисуют в ней и анимируют.

По поводу того, где достать Adobe Flash. Если вы хотите что-то найти или взять – то лучше google ничего нет. Он все знает:)

Можно ли самостоятельно научиться работать во флеше? Это вполне реально, почти все хорошие флеш-аниматоры, которых я знаю, сами изучили флеш, без курсов и экзаменов. Терпение, трудолюбие – и все в ваших руках. Даже так скажу- я не знаю флешеров, которые посещали курсы, все учили самостоятельно.

«Спасибо за блог, очень много полезного нашла для себя.

Я чистый векторщик, и в флеше мне не составило труда рисовать. Проблема началась, когда дошло до анимации.

Не могли бы вы сделать урок для самых самых безмозглых криворуких нубов))Что бы даже я поняла))»

(tara)

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

А где можно скачать бесплатно фотошоп?

http://flash-technologies.ru/p/vlasta61 Хотите научиться флеш-анимации? Очень интересно и в видео-уроках показывается все очень подробно. Качес твенный материал мне очень понравился, советую посмотреть и вам, возможно вам это нужно, делюсь, мне не жалко.

http://flash-technologies.ru/p/vlasta61 Хотите научиться флеш-анимации?
Здесь бесплатные видео- уроки, качественно и интересно рассказывается как делать, куда нажимать, мне очень понравилось. Тема в наше время является актуальной, что очень важно!!

Скажите, пожалуйста.. Я только вчера начал въезжать в эту всю кухню флеша. Но мне интересно, можно ли в адобе создавать 3D анимации. Работает ли он с объемными объектами. К примеру, я создал в Блендере векторную модель какого-то 3-мерного объекта, могу ли я импортировать его в адоб и двигать, крутить там?

picture 63

Нет нельзя. Флеш для такого не предназначен.

Владимир Лыков, более известный как творческий руководитель анимационной студии ToonGu.ru (одной из лучших в своем жанре, между прочим, начиная с 2003 года) открывает онлайн-курсы мультипликации.

Для тех, кто интересуется с чего начать рисовать анимацию, могу посоветовать группу http://odnoklassniki.ru/galadar, возможно, там скоро начнутся пошаговые уроки для новичков, а так же детей:)

Вопрос 1: 3d-объекты в каком формате можно импортировать в Adobe Flash CS6 версии? Можно ли к ним применять «кости»? Или можно создать анимацию в 3D Max и экспортировать во Flash?

Вопрос 3: Для уменьшения веса баннера пользовалась Фотошопом, и разрешение изменяла, и размывала, что только ни делала. В итоге пришло на ум поменять цветовую систему с RGB на Индексированные цвета. Эта функция еще присутствует при экспорте для web. Но все-таки: сохранила в Индексированные цвета. Открыла во Flash. Но программа «перевела» в RGB. Можно ли использовать индексированные цвета и как?

Вопрос 1: 3d-объекты в каком формате можно импортировать в Adobe Flash CS6 версии? Можно ли к ним применять «кости»? Или можно создать анимацию в 3D Max и экспортировать во Flash?

Вопрос 3: Для уменьшения веса баннера пользовалась Фотошопом, и разрешение изменяла, и размывала, что только ни делала. В итоге пришло на ум поменять цветовую систему с RGB на Индексированные цвета. Эта функция еще присутствует при экспорте для web. Но все-таки: сохранила в Индексированные цвета. Открыла во Flash. Но программа «перевела» в RGB. Можно ли использовать индексированные цвета и как?

picture 63

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

ну ты даешь не реально спс

Здравствуйте, люди добрые!
Подскажите пожалуйста, кто, где скачивал программу Flash Cs4-Cs 6 для работы!?

picture 63

picture 63

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

Голова моя тугая))), плохо получается искать, можно пример торрента с программой Adobe Flash Cs4.

Лучше качай кс6 или сс если 64 разрядный у него широкие возможности при Экспорта видеоролика

Чтобы работать во флеш, обязательно уметь рисовать?

picture 1

picture 63

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

Анимация это творческий аспект? или больше технический?
Я рисовать допустим не умею вообще.

picture 63

А если человек хочет стать аниматором персонажей? ему обязательно уметь рисовать? аниматор-мультипликатор?

Если будешь заниматься 3D анимацией, то хватит немного навыков рисования, если 2D, ты обязан хорошо рисовать!

picture 1

ну хоть немного должен уметь)

picture 63

Если 3Д то не обязательно. Там чистой воды знание анимации.
А если 2Д то обязательно. Накладно держать того кто рисует и того кто анимирует.

picture 63

http://leetovetz.deviantart.com/art/034-Tornado-387902698
или вот. картинки мне художники дали. все остальное работа аниматора.
определись что хочешь делать?

А тут вообще все картинки взяты из инета. Делалось как тестовое задание. Ниодной картинки не рисовал вообще )))
http://leetovetz.deviantart.com/art/032-Casino-385375176

Спасибо, думаю я понял.

Здравствуйте! Я тоже хочу научиться созданию флеш анимаций. Знаю, что без знания Action Script сделать функциональный флеш баннер невозможно.
Не могли бы порекомендовать учебник или какой нибудь ресурс для изучения Action Script.
Недавно создала флеш баннер для своего проекта. Незнание Action Script подвело меня. Получилось не то, что хотелось. Вы можете посмотреть баннер по ссылке http://travelca.ru/wp-content/uploads/2013/03/travelca-vseturisty.swf
А также буду очень рада всем вашим советам и рекомендациям.

picture 63

Мне, когда вообще ничего не знал как и что делать в флэш, очень помог вот этот видео курс:
«Виталий Кузьменко и Андрей Муха | Adobe Flash CS4, CS5 ActionScript 3.0 Полный курс [2010]»
погуглите, должны быть торренты)))

Запиливаю работы сюда:

picture 63

picture 1

сейчас придут товарищи Муха и Кузьменко

picture 63

Так для этого же я и сылку дал. что бы товарищи знали куда им идти ))))

Спешу разочаровать, у меня этих товарищей больше нет, поэтому и написал про возможности гугла)

Запиливаю работы сюда:

picture 63

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

Восьмым пунктом можно добавить онлайн школу от канадского аниматора, все уроки что нужно пройти в офлайн школе, можно выполнять по семестрам у себя дома. Но это уже для тех кто очень очень очень хочет развиваться в классической анимации для мультфильмом.
http://www.brianlemay.com/Pages/animationschool/animationschool.html

Источник

Как создается флеш анимация для сайта?

kak sozdaetsja flesh anim 120927

Технология Flash

Область современного применения Adobe Flash :

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

adobe flash 120927

skriptovih jazikov 120930

Основы и инструментарий для разработки Flash

Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :

vosproizvodit multimedi 120931

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

Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана ( разрешения ).

К недостаткам технологии можно отнести следующие моменты:

Обзор стороннего программного обеспечения для создания Flash

flash redaktor 120934

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

Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно « New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню « File ». Среди предлагаемых вариантов мы выбрали создание баннера:

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

vibrannii shablon 120935

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

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

strelku vverhu 120935

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

bokovoi paneli 120936

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

publish settings 120936

Для ознакомления предоставляется бесплатная версия программы сроком на 30 дней. Полная стоимость Sothink SWF Quicker составляет 85$:

sothink swf quicker 120937

Ближайшие конкуренты приложения:

В заключение хотелось бы отметить, что выбор программы является важным, но не основным аспектом. Для создания Flash вам потребуется не только проверенное и надежное приложение, но и знание основ веб-программирования. Так что для начала нужно « приобрести » нужный багаж знаний, а уже потом заняться выбором специализированного программного обеспечения.

Источник

Flash-анимации в Unity3D своими руками. Часть первая, лирическая

В этой серии статей я расскажу о том, как и почему мы решили создать своё собственное решение для импорта flash-анимаций в Unity, об оптимизациях и внутренней кухне получившегося плагина. А также в программе: рассказ о внутренностях формата swf, особенностях расширения Unity-редактора и вообще об анимациях в целом. Прошу под кат!

image loader

Введение

В начале любого проекта стоят муки выбора технологий для многих его частей. Одна из таких частей — система анимаций. Есть несколько переменных от которых этот выбор зависит. Во-первых, в чём привыкли (могут) работать ваши аниматоры или на какие инструменты этих аниматоров вам проще найти. Понятно, что крайне специфичный продукт выбирать не имеет смысла, так как в случае ухода текущих сотрудников, по тем или иным причинам (внезапный автобус?), заменить их будет крайне сложно, часть проекта просто остановится на неопределённый срок, что, в случае коммерческого продукта, может стоить очень дорого. Вторая переменная более техническая: интеграция в ваш движок. Имеются ли сторонние решения и качество этих решений, есть ли силы и возможность создавать своё, а также производительность и удобство всего вышеперечисленного. Ну и третья переменная — это возможности этого инструмента, так как если вам, кровь из носу, нужна инверсная кинематика, то совершенно странно будет выбирать не скелетную анимацию.

Виды 2d-анимаций

Рассмотрим наиболее популярные варианты реализаций анимации в играх. Буду говорить только о 2d-анимациях, 3d-анимации — это тема совершенно другого разговора, подходов и инструментов. Раздел можно без опаски пропускать, если вы подкованы в этих делах (откровений и никаких срывов покровов не будет), либо если вы прицельно зашли посмотреть особенности только flash-анимаций, они ниже.

Покадровые анимации

Открывает наш мини-обзор самый простой и древнейший тип анимаций: покадровая анимация. Каждый кадр такой анимации представлен отдельной картинкой, при быстрой смене которой, возникает иллюзия движения.

Плюсы:

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

Минусы:

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

Итого:

Подходит только для маленьких по размеру и количеству кадров анимаций, в идеале для пиксель-арта и стилю ретро-игр а-ля NES.

Видео-анимации

Как апофеоз безумия покадровых анимаций выступают видео-анимации. И да, это используется и даже временами к месту. Мы такое реализовывали для игр в жанре «Hidden Object» для больших и сложных анимаций, а также для кат-сцен с налётом реализма. С помощью кодеков вроде theora и vp8 можно реализовать вполне сносные видео-анимации (и даже с альфа-каналом) своими руками.

Плюсы тут, конечно, в том, что показать в таких анимациях можно всё что душа пожелает, от срежиссированных сцен с участием реальных актёров, до отрендеренных 3d-баталий. Минусами же выступают дикая нагрузка на CPU при декодировании этого и, конечно, качество картинки. Найти компромисс между качеством и производительностью можно в сильно ограниченных и специфичных случаях, как в выше обозначенных Hidden Object играх, например.

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

Скелетные анимации

Вот и добрались до популярных и современных видов 2d-анимаций. Скелетные анимации всё больше и больше захватывает сердца и умы разработчиков в сфере 2d, становясь уже стандартом анимации для игр. Забавно, что так широко они пришли в 2d относительно недавно, в отличии от 3d, где они появились во времена Царя Гороха, когда отцы писали Half-Life. Суть скелетных анимаций, как ни странно, в скелете, который создаёт аниматор из костей, связанных друг с другом древовидной структурой. К костям этим привязываются фрагменты в виде отдельных картинок. В движение вся конструкция приводится смещениями и поворотами костей относительно друг друга. Смещения и повороты костей в скелете следуют общему таймлайну анимации.

Плюсы очевидны: нам не нужно хранить каждый кадр анимации в виде отдельных картинок, только фрагменты (ручки и ножки персонажа, например), которые мы и будем двигать костями скелета. Есть прекрасные реализации данного типа анимаций с рантаймами под нужные платформы и движки, с умеренной ценой использования или вовсе бесплатные: Spine, Spriter, Anima2D, DragonBones и другие. Благодаря скелету и его особенностям можно достигать колоссальной плавности анимаций с помощью интерполяции положений его костей, а также смешивать переходы из анимации в анимацию и даже смешивать две разные анимации: стрельба на бегу, стрельба крадясь и так далее. Не буду перечислять все возможности скелетной анимации, их действительно много и они очень крутые. Приведу лучше ссылочку где они наглядно показаны с картинками и описаниями на сайте Spine’а.

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

Вернёмся к минусам. Дополнительный этап создания анимации — риг (или риггинг, как и многие термины в нашей индустрии, русифицировали как умели). То самое создание скелета и привязка костей к фрагментам. Если у объекта одна анимация, а не несколько, как, например, у персонажа игры в жанре «Platformer», то этап совершенно лишний. Не все анимации удобно анимировать костями. Существует множество анимаций, где кости мешают и без них удобнее, а также быстрее, как в плане создания, так и в плане производительности игры. Отдельным пунктом вынесу специалистов на рынке. Их количество с ростом популярности скелетной анимации растёт, но всё ещё не самое простое занятие найти их себе в команду. Сказывается также разброс средств и инструментов, кто-то привык и использует одно, кто-то другое, необходимо переучиваться на ходу, что создаёт дополнительные трудности в поиске и обучении сотрудников.

Таймлайн-анимации

Этот тип анимаций я вынес в самый конец, не потому, что он лучше всех остальных, а потому, что это как раз те самые flash-анимации о внутренностях которых и пойдёт речь в технической части статьи. Flash — не единственный представитель данного типа анимаций, но безусловно их лидер, так что всё будет описано относительно него. Таймлайн-анимации состоят из фрагментов, которые анимируются отдельными слоями на таймлайне. Почти тоже самое, что мы видели в скелетной анимации, но без скелета. По ключевым кадрам на таймлайне мы можем двигать, поворачивать, заменять, дорисовывать новые фрагменты в эти кадры и, конечно, интерполировать переносы, масштабирования и повороты между ними. То есть, двигаем не кости с привязанными фрагментами, а сами фрагменты. Конечно, мы лишаемся многих возможностей, которые дают нам скелетные анимации, но не всем они и нужны. Взамен же приобретаем другие, такие как:

Flash мёртв? Как плеер в браузерах — безусловно, как инструмент для анимаций — жив и здравствует, альтернатив пока нет и не предвидится. Минусы? Конечно. Главный минус в том, что это не скелетная анимация, хах. Мы лишаемся возможности смешивать анимации друг с другом, у нас нет инверсной кинематики и тому подобных возможностей, присущих только скелетке. Зато у нас есть вложенные друг в друга таймлайны, а также растровые и векторные маски! Все аниматоры обожают маски! Тут стоит оговориться, что в Spine тоже недавно появились возможности отсечения, но пока только геометрические и сильно ограниченные по сравнению с масками flash’а.

Итоги по типам анимаций

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

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

Муки выбора и решение писать своё

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

С плагином этим мы прожили почти год разработки, в течение которого были выяснены детали, по которым использовать его дальше мы не смогли. А именно — качество его интеграции в Unity. Выливалось это всё в откровенно серьёзные баги, которые не сказать, чтобы легко, быстро и без боя чинились на стороне разработчиков, и в ужасной производительности на целевых устройствах, а у нас это до сих пор уровень iPad 2. Происходило это из-за неграмотной интеграции в конкретный движок, незнания его специфики и подводных камней, по возможностям нас всё более чем устраивало, но исходники, даже в личном порядке, открывать отказались, так и решено было писать своё решение.

Я имел некоторый, вполне успешный, опыт написания расширений для Unity и имел небольшой опыт конвертации flash-анимаций в свои форматы. Последнее было достаточно давно, но что-то вспоминалось. В этом же месте было решено писать это всё как домашний проект, чтобы не зависеть ни от проекта, ни от компании где я работаю, да и что греха таить, иметь такой свой продукт тоже хотелось. Так что, вооружившись 250-и страничной спецификацией swf-формата, я отправился в бой.

Варианты экспорта

Для начала стоит обсудить варианты экспорта анимаций из flash-редактора. Их несколько, естественно со своими плюсами и минусами. Пройдёмся по основным.

.xfl-формат

static_clip.xml

movie_clip.xml

Это не все трудности данного подхода, но и их достаточно для того, чтобы понять, что для общего решения оно подходит только с сильными оговорками. Давным-давно я пошёл по этому пути для одного из проектов в котором участвовал. Там были flash кат-сцены, с классическими твинами (без пользовательских правил интерполяции и особых функций этой интерполяции), только растровой графикой и без других продвинутых возможностей, которые предоставляет flash-редактор. Частное решение было написано довольно быстро и эффективно, но приходилось сильно ограничивать аниматоров, чтобы они не использовали ничего мало-мальски сложного. Подход имеет право на жизнь и есть несколько библиотек, разной степени запущенности, основанных на нём, но, как я и говорил, с большим количеством оговорок и ограничений.

.jsfl-скрипты

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

AIR-приложение

А вот этот подход уже совсем рабочий и может использоваться как надо. Я выбрал не его, но для справки приведу и этот вариант. Суть подхода в том, что мы создаём AIR-приложение на самом flash или, для эстетов, на Haxe, например, которое будет доставать всю информацию из уже скомпилированной в swf-формат анимации. Мы покадрово проигрываем анимацию внутри нашего приложения, достаём всю информацию о кадрах и сохраняем в нужный нам формат для своего рантайма. Тут решаются все обозначенные выше проблемы:

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

Свой flash-плеер

Это, наверное, самый честный, очевидный и прямолинейный вариант из всех, но и самый сложный. В конце концов так и поступает настоящий flash-плеер, который стоял у большинства из нас в любимом браузере как дополнение к оному. Популярные представители этого жанра: gameswf и, выросший из предыдущего, scaleform. Оба ныне мертвы. Интересно, что использовались они в основном для реализации GUI в различных, в том числе и AAA, проектах. Но нас интересует внутреннее устройство, а не конкретные применения мертвых библиотек.

Любой уважающий себя flash-плеер имеет на борту как минимум следующие вещи:

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

Да, в сети полно попыток реализаций каждой из этих частей, разной степени запущенности и забагованности. Но даже взять за основу эти наработки не представляется возможным, только баги вылавливать оттуда придётся годами, да ненаписанные юнит-тесты писать, перед тем как понять, что в полной мере реализовать всё не получится. Те, кто пытался дополнять gameswf нужными возможностями, понимает о чём я говорю. Честный flash-плеер ещё и векторную графику должен растрировать не заранее, а в рантайме, что скажется таким ударом в производительность, что не каждый проект сможет пережить. Пользуясь случаем, передаю привет выжившим, использовавшим scaleform на мобильных устройствах. В общем самый мрачный и беспросветный путь, не наш выбор.

Комбинируем подходы

Вот и дошли наконец до моего варианта. Изучив возможные пути, у меня прорисовалась одна интересная комбинация. Относительно простая для реализации, посильная одному человеку в объёмах и в то же время достаточно функциональная, чтобы покрыть потребности большинства 2d таймлайн-анимаций.

В-третьих, избавляемся от написания собственного растеризатора векторной графики, за невозможностью написать оный для общего случая, чтобы покрыть все варианты и возможности вектора во flash. Вместо него будем растрировать графику до(!) компиляции, с помощью jsfl-скрипта. Заодно, с помощью этого скрипта, будем оптимизировать нашу векторную графику, сливая статические клипы в одну картинку, уменьшать или увеличивать получаемые растровые изображения для наших нужд: качества и/или производительности. Тут также стоит вспомнить о различных вариантах качества/разрешения арта для устройств с разной плотностью пикселей на экране (например, HD и SD арт).

Заключение лирической части

На этом я заканчиваю первую часть статьи. Во второй части будут технические детали реализации, куски кода, картинки(!), оптимизации, трюки и хитрости. Скоро на ваших экранах, не пропустите! Напоследок приведу пару интересных ссылок с информацией по использованию flash-анимаций от коллег по счастью из ZeptoLab и Playrix.

Источник

Оцените статью
Добавить комментарий

Adblock
detector