Больше жизни для электронных публикаций

Веб-технологии понемногу проникают в издательскую область. Уже не только в виде сайтов, но и как основа самого издательского процесса. Постоянные читатели Publish, а также все интересующиеся достижениями в области издательских технологий (в общем, одни и те же люди) знают, что такие форматы, как ePub, Adobe DPS, совместимые с Kindle (KF8), сохраняют контент, дизайн и функционал в формате HTML/XML, CSS и JavaScript. Однако эти технологии изначально не проектировались для автоматической генерации кода, поэтому вплоть до последнего времени почти всё приходилось кодировать вручную. Тот же проект в формате Adobe DPS представляет из себя набор PNG/JPEG/PDF-картинок, в которых сохраняется и содержание, и внешний вид в сочетании с возможностями интерактивного взаимодействия за счёт XML-оболочки и скриптов JavaScript. Этот функционал можно охарактеризовать как базовый. В Adobe, по слухам, уже больше года работают над технологической базой дизайна DPS-проектов, полностью основанной на HTML, но, видимо, время ещё не пришло.

Однако, как восклицал Диоген, завидев в руках чтеца конец длинного свитка,  «крепитесь, други, виден берег»! В виде Adobe Muse (http://www.publish.ru/articles/ 201309_20013100) мы уже получили весьма функциональный инструмент для создания сайтов без малейшего кодирования. В виде Adobe Edge Animate мы получили уже довольно развитый инструмент создания анимированного и интерактивного контента для применения на сайтах, в ePub- и iBooks-книгах и DPS.

Анимация в издательских проектах

Всё гладко только в параллельной вселенной. Наша же, как известно всем, кроме домашних котов, — сплошная полоса препятствий (именно это делает нас выносливыми и хитрыми). Так вот, Edge Animate, создающий анимацию сразу в HTML/CSS/JS — это вам не Flash, Edge Animate намного проще во всех отношениях — и даёт меньше возможностей. И если Flash развивается силами Adobe так, как её разработчики считают верным, то в случае с функционалом HTML надо координировать усилия с ещё парой сотен компаний. Как сказал бы Аристотель: это в природе открытых технологий — развиваться медленно. Тем не менее, Edge Animate уже позволяет не «дружащим» с кодом дизайнерам делать HTML-анимацию. А что с интерактивностью, спросите вы. Она требует (пока) редактирования кода JavaScript. Программа, конечно, помогает, и иногда всё, что нужно, — это вставить готовый шаблон из предложенных программой или из проекта Edge Commons и вписать нужный параметр в нужное место (которые, однако, надо знать). Увы, нередко речь идёт о десятках строчек специально написанного кода. От Edge Animate можно получить пока немного, но это лучше, чем то, чем мы занимались ещё недавно, не имея почти никаких (простых) возможностей обогащать DPS-проекты анимацией.

Давайте сделаем краткий обзор методов вставки анимации, доступных нам сегодня в DPS.

Видео | Можно сделать ролик в профессиональном видео-редакторе. Нетрудно догадаться, что для этого нужно уметь работать с соответствующими инструментами. Это само по себе отдельная профессия, что нас несколько ограничивает. Готовый вариант сохраняется как mp4-файл. Никакой интерактивности. Файл будет тяжеловат и, мало того, на «Андроиде» будет проигрываться только в полный экран. Теперь хорошие новости: начиная с CS6 анимацию можно делать прямо в Photoshop. Это не After Effects, конечно, но и гибче, чем QuickTime. Способ обойти обязательный полноэкранный показ видео на «Андроиде» — сохранять вместо видеофайла раскадровку (image sequence, доступно в Media Encoder, а также в Photoshop и профессиональных видеоредакторах). Также в этом случае будет возможность проигрывать по кругу (чего пока нет в DPS-видео), ставить на страницы для «Андроид»-планшетов. Но и тут пирожки не без гвоздей — папки с раскадровкой будут тяжёлыми.

HTML | Можно нанять специалиста, чтобы тот вручную (вместе с дизайнером) делал HTML-анимацию и интерактивность. Но процесс этот долог и дорог. Хотя доступ к «телу» разработчика пока иметь нелишне в любом случае.

Flash и Edge Animate | Flash отступает c рынка электронных изданий в безнадёжной борьбе, но не сдаётся. В последних версиях есть возможность конвертации сцены в веб-формат, но, подобно большинству конвертаций, это набор компромиссов, искажений и лишений. Экспериментируя с экспортом HTML из Flash, разработчики Adobe озаботились созданием инструмента, который будет генерировать анимированный контент напрямую в формате HTML/CSS/JS. Имеется в виду Edge Animate. Цель этого материала — не обзор этого инструмента, но раскрытие нескольких особенностей его использования с DPS.

Импорт Edge-анимации в DPS-проект | Штатный способ экспорта анимации из Edge — создать командой Publish в Edge Animate файл формата ОАМ (Animate Deployment Package) и импортировать его командой File • Place в InDesign. Но можно это сделать и иначе. Вместо импорта OAM-файла можно сделать в InDesign прямоугольник и в палитре Folio Overlays в разделе Web Content задать путь до HTML-файла проекта (в папке Edge-проекта он только один). Преимущества налицо: экспорта в Edge Animate делать не надо. И следить за тем, чтобы линк в InDesign был актуален (up to date), тоже не требуется. При создании/обновлении материала в Folio Builder HTML-контент будет всегда актуальным.

Настройки экспорта OAM-файлов в Edge Animate

Ещё одно преимущество — при данном подходе мы избавлены от необходимости возиться с постером (картинкой-заменителем HTML-контента). В DPS постер не нужен, поскольку HTML всегда определяется с автостартом (Auto Play) — иначе просто не будет работать. При создании OAM-файла постер обязателен. Даже если пользователь его не делает, программа сделает его сама как Poster.png, создаваемый автоматически в папке images проекта Edge Animate. Причём этот файл, будучи 24-битным PNG, может иметь существенный объём — иногда он один «весит», как весь остальной проект. Если вам по той или иной причине нужно все равно делать ОАМ-файл или если анимация должна работать на прозрачном фоне, можно заранее создать полностью прозрачный файл PNG размером в пиксель на пиксель и указывать его как постер. Кроме того, однажды настроив экспорт проекта в Edge Animate (в окне File • Publish Settings…), далее повторный экспорт OAM-файла можно делать путём File • Publish (у которого есть простые горячие клавиши), пропуская окно настроек.

SVG | Egde Animate и за ним Adobe Content Viewer (программа просмотра DPS-контента на планшетах и айфонах) могут работать с SVG. Это векторный формат для интернета, сохраняющий данные как XML-файл (в отличие от бинарного SWF). Формат открытый и утверждён более десяти лет назад, но только в последнее время началось его действительное применение ввиду отказа от Flash и интеграции прямой (без плагинов) поддержки SVG во все современные браузеры. Метод описания векторов в SVG базируется на принятых в PostScript кривых Безье. Adobe стояла у истоков формата SVG еще в 1999 г. и долгие годы продвигала этот формат на рынок в составе SVG working group (правда, до момента убийства Flash Джобсом дело не шло), посему лучшей, «рекомендуемой ведущими стоматологами» программой создания SVG-графики является Adobe Illustrator.

У SVG есть несколько подстандартов. Опытным путём я установил, что Adobe Content Viewer поддерживает только базовую векторную графику (без SVG-эффектов и теней). Вместе с тем, применяя SVG в Edge Animate, можно существенно снизить объём проектов, а значит — ускорить их подгрузку в память устройства.

Использование символов | В Edge Animate, также как и во Flash, имеется функция символов. Здесь не обязательно всё конвертировать в символы, но все повторяющиеся элементы, будучи сохранены как символы, хранятся только в одном экземпляре, что несомненно облегчает файл. Кроме того, у символа может быть свой собственный «таймлайн».

Проблема ранней подгрузки | Ранее одной из претензий дизайнеров к DPS было появление колёсика подгрузки HTML, когда читатель открывал страницу с HTML-элементом. Причина была в том, что просмотрщик DPS подгружал статичные элементы в страницах справа, слева, снизу и сверху (если есть), чтобы читатель не ждал перелистывания. В одном из последних обновлений DPS это было пересмотрено — стали заранее подгружать в память и интерактивные компоненты. Колёсико пропало, но теперь все HTML с функцией автозапуска «таймлайна» начинают проигрываться заранее — ещё до того, как пользователь открыл соответствующую страницу.

На момент написания этих строк разработчики Adobe по этому поводу сообщают: «Мы исследуем эту проблему». Однако пока мы можем обойти её. Достаточно сделать MSO (Multi State Object), где первое состояние (state) занято неокрашенным объектом без контура, т. е. визуально пустое, а во втором — HTML-объект. Задайте в Folio Overlays этому MSO переход с первого на второе состояние при открытии страницы, а также минимальное время перехода между состояниями. Трюк базируется на том, что DPS-просмотрщик подгружает в память заранее только первое состояние MSO-объекта.

Внешние изображения | Как только дизайнер вставляет первый внешний файл в анимацию Edge Animate, тот копируется во вновь создаваемую папку images внутри Edge-проекта. Вот несколько особенностей этого процесса, которые полезно знать:

1. Все картинки должны быть финального размера, который хочет пользователь. Edge Animate ни на каких этапах не изменяет их размер или формат. Использование больших картинок двойного размера для качественного показа на HD-устройствах может приводить к подтормаживанию анимации. В таком случае можно либо сжать их сильнее, либо использовать версию меньшего размера (в движущейся картинке то, что она размещена в несколько сниженном разрешении, не очень заметно), либо передумать и использовать другой визуальный приём.

2. Edge Animate пока не поддерживает HD. Все вставляемые растровые изображения трактуются как SD (или более традиционный термин — 72 ppi). Если нужна картинка размером в 100×100 px в HD, надо просто сделать 200×200 и уменьшить её в Edge до 50%.

Структура папки проекта Edge Animate

3. Папка images может быть создана пользователем внутри проекта Edge Animate заранее. В этом случае все положенные в неё картинки появятся в соответствующей палитре Edge Animate автоматически. Данный подход делает ненужной команду Place. Важно — вне зависимости от того, использовали ли вы файлы в папке images или нет, все они будут подгружены в OAM-файл, т. е. экспортированы. Таким образом в images должно быть только то, что используется.

Заключение

Несмотря на то, что Adobe Edge Animate сегодня — довольно простой инструмент, он уже применим на практике и весьма многообещающий. Кроме того, поскольку программа проста, её несложно изучить и начать применять HTML-анимацию уже сегодня. Добавьте жизни электронным публикациям!

Об авторе: Алексей Клецель (www.kletsel.com, alexey@kletsel.com, Холон, Израиль), сертифицированный эксперт и инструктор по Adobe DPS, InDesign и Illustrator.