О том как мы первую сказку делали

1_s_dopilami
Наш небольшой рассказ о том, как мы делали первую из “Живых сказок”.
Все началось с того, что Александр из Image Group предложил сделать детскую сказку для iPad.
Идея интересная, новая, работы намечалось довольно много, да и эксперименты с такими малыми формами всегда хороши.
Решили начать со сказки “Ячменное зернышко”, также известной как “Колосок”.
Процесс оказался интересным и увлекательным, и мы попытаемся рассказать о нем и поделиться самыми интересными моментами.

Как рисовали

1_1Сроки, как это часто бывает, оказались очень сжатыми, и поначалу я был не уверен в своих силах. Но, так как было решено придерживаться достаточно минималистичного стиля, и первый набросок попал в требуемую стилистику, решил, что справлюсь.
Самым сложным в процессе оказалось сохранять стиль иллюстраций от экрана к экрану – каждый подход к рисованию приносил все новые, добываемые методом научного эксперимента, приемы и знания, и хотелось их все тут же применить)
Я использую Easy Paint Tool SAI, которая служит отличным дополнением к Photoshop, умея, к тому же, работать с файлами *.psd, практически любой версии с сохранением послойной структуры и большинства режимов наложения.

sketch_1

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

Как анимировали

Для реализации идеи была выбрана платформа Adobe Digital Publishing Suite. Книжка верстается в InDesign и публикуется в приложение на iPad, в которое можно также в виде обновлений загружать новые книжки.
Поддерживается новомодная CSS3 анимация на webkit, так что решено было сделать именно ее.
Сперва хотели работать в Sencha Animator, но он почему-то отказывался работать на виндовой машине. Тогда решено было использовать Adobe Flash.

Flash to HTML5

cursor

Но флэш не поддерживается iPad’ом напрямую, разве что только через AIR, но и там – большое количество подводных камней, даже несмотря на то что в CS5.5 обещают вообще бесшовный переход (дождались – не бесшовный). Тем не менее в целях снижения веса файлов и облегчения обработки решили оставить webkit.
Для перевода Flash в HTML5 использовалась экспериментальная программа Wallaby от Adobe.
Количество ограничений поражало. Ко всему надо добавить, что даже SVG почему-то не отрисовывался на iPad.
Но это лишь раззадоривало. psd-шки резались на png-шные спрайты, из них во флеше пересобиралась картинка, и добавлялась простая циклическая анимация плюс некоторые анимации, которые должны были работать по клику.
Дальше начиналось самое интересное.
Wallaby конвертирует .fla в .html + .js (jQuery) + .css. Структура довольно понятная, в Chrome с помощью Inspect Element все легко просматривается. Вот в этой связке и надо было дальше работать, при этом большая часть работы приходилась на яваскрипт. Анимации на webkit’e хранятся в CSS файле, и туда нужно было дописывать все переходные анимации вручную. При этом стоит учитывать что если вы что-то поменяли в fla то при конвертировании все имена объектов поменяются и придется переписывать все ваши действия на ЯваСкрипте. Это не очень удобно, приходится иметь отдельный текстовый файл с готовыми шаблонами анимаций и скриптами.
Анимацию я взял с собой на дачу, но из-за каких-то проблем не смог открыть ни одного скачанного описания webkit’a поэтому пришлось тупо разбирать уже сделанный код чтобы понять что к чему. Пара часов и понимание пришло само.
В итоге JavaScript редактировал CSS и можно было нажать, скажем, на домик, у которого загорятся окна. А в окна кот моргает.
Одним важным ограничением является то, что количество яваскрипта все-таки надо было ограничивать, iPad быстрый, но не стоит лишний раз его грузить.
Из мелких фишечек: часы на последней странице показывают текущее время 🙂
Конечно, html5 не позволяет использовать весь потенциал iPad так просто, допустим, доступ к акселерометру можно получить только через доп.библиотеку, и это еще не так просто, но это не значит что мы не будем этого делать.
Превьюхи страниц (можно открыть только в браузерах на движке webkit: Chrome, Safari, что-нибудь еще).

Что теперь

appstore

 

PS. Мы писали эту статью еще в июне 2011 года, сейчас то мы уже все совсем по другому делаем. Adobe забросили Wallaby на релизе 8 марта 2011 года, и обещают интегрировать его во Flash CS6.
Скоро напишем про то как делаем сейчас.