HTML5 <- портирование Flash анимации

Posted on by

This post is also available in: Английский

В данной статье, будет неоднократно упомянут язык разметки HTML при рассмотрении перехода с Flash приложений и анимации на встроенные возможности современных браузеров. Хотя речь идет о технологиях последних месяцев, должен бы подразумеваться диалект HTML5, но это не так. В сущности большинство описываемых технологий применимы к большинству диалектов HTML, и HTML5 в данном случае не более чем известный (благодаря Apple) бренд. Тем не менее, создавать такие приложения имеет смысл при помощи HTML5, так как данный диалект имеет свои преимущества, улучшает семантику, и предоставляет удобства вроде валидации форм, позволяя выкинуть из вашего проекта десятки строк JS-кода. Но сам по себе HTML5 картинку не делает.

В те дни, когда технология Flash наконец стала неотъемлемой частью Web, она предоставляла возможности которых тогда просто небыло в браузерах. Сейчас ситуация принципиально не изменилась — Flash все так-же предоставляет те возможности которые не предоставляют сами браузеры. Тем не менее, это уже немного другие возможности. А те функциональные возможности, что некогда сделали Flash популярной технологией постепенно приходят в браузеры.

Большинство из описанных ниже возможностей доступны на большинстве браузеров и мы рассмотрим практическую сторону — портирование Flash – приложений на платформу, где Flash не доступен. На этой платформе нас ждет браузер на основе WebKit.

В первозданном своем виде Flash – это векторная анимация, мультимедиа, и собственно логика в виде ActionScript. На платформе WebKit доступна векторная анимация в виде SVG. Солидную часть задач анимации можно, и нужно, решать посредством анимации CSS3. Крайне нежелательно применять для анимации JavaScript. Имеется ввиду анимация путем манипулирования значениями CSS свойств элементов. Такой подход обладает очень низкой производительностью и анимация выглядит неприятно, что заметно на персональных компьютерах и тем более в мобильных устройствах, таких как iPad. Другое дело, использование CSS Animations. Эти свойства CSS дают практически исчерпывающие возможности анимации в XML (SVG) и HTML документах.

Наиболее разумным, было бы ручное портирование приложения. Однако это не всегда целесообразно при наличии большего объема мультимидийного материала — в таком случае, имеет смысл воспользоваться Wallaby или Swiffy.

Wallaby Technology preview

Wallaby – эксперементальная технология от Adobe, предназначенная для конвертации художественной и анимационной составляющей из fla в html, css, и svg. Уровень поддержки — примерно соответствует SWF 8 и ActionScript 2. На выходе имеется базовый HTML, SVG спрайт, CSS с анимацией и управлющий JavaScript.

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

Инструмент представлен ввиде AIR приложения (доступен в Windows и Mac).

Преимущества:

  • Чистый и лаконичный SVG и HTML код

Недостатки:

  • Необходима библиотека JQuery, хотя используется минимально (впрочем, это не является проблемой, если в вашем проекте уже используется JQuery)
  • Трудность доработки функционала

Swiffy

Онлайн сервис от Google. Ограничения те же SWF 8 и ActionScript 2. Код создается на основе скомпилированного SWF – файла. Результат представляет из себя своего рода унифицированный псевдоформат. Графика представленна инлайновыми SVG-элементами, а поведение описывается в json-массиве, который исполняется одельным js-рантаймом. К сожалению, такой подход не позволяет эффективно дорабатывать получившийся результат. Однако Swiffy позволяет быстро перенести Flash баннеры на WebKit.

Преимущества:

  • Создание кода из SWF – удобно если исходники утеряны
  • Более адекватный результат

Недостатки:

  • Платформа в платформе: рантайм, и отдельный сценарий. Не оптимально, низкая производительность.
  • Трудность доработки функционала.

Третий путь

Однако самый оптимальный путь — портирование Flash приложений в HTML5 / CSS3 / SVG вручную. Особенно если вы и являетсь автором Flash-приложения и вам известна его специфика. Наиболее оптимальным представляется экспорт векторых элементов при помощи Adobe Illustrator в формат SVG (AI выдает наиболее чистый XML). Анимация SVG может осуществлятся двумя способами — SMIL и JavaScript. Кроме того, на движке WebKit для SVG частично приминима и CSS3 анимация. Применение JavaScript в SVG аналогично применению в HTML.

Не всегда оптимально экспортировать в SVG всю графику. Сами по себе CSS-возможности WebKit’а позволяют воспроизвести многие возможности оформления Flash, которые не доступны при SVG-анимации, так что простые геометрические фигуры со сплошной или или градиентной заливкой имеет смысл выполнить в HTML и CSS.

Преимущества:

  • Максимальные возможности качественного портирования.
  • Выбор оптимальных вариантов анимации и логики.

Недостатки:

  • Длительный и трудоемкий процесс портрования.

Тем не менее, не стоит полностью расчитывать на 100% перенос функционала готового Flash приложения на WebKit.

Преимущества и недостатки (HTML5 + CSS3 + SVG) против (Flash) в целом:

  • Доступны там, где нет Flash: это прежде всего портативные устройства Apple — на этих устройствах, кстати наиболее полно раскрывается потециал этих стандартов.
  • Там где есть Flash, не всегда требуется забивать гвозди микроскопом. Например на устройствах под управлением Android возможно создание полноценных анимированных элементов интерфейса, имея приемущество в производительности перед Flash и традиционном применением JavaScript. Однако поддержка SVG присутствует не во всех устройствах.

Недостатки:

  • Это не одна технология, а несколько, что иногда затрудняет полноценную реализацию идей. В рамках подготовки этой статьи была предпринята попытка создания игрового приложения, однако она не удалась, по причине крайней сложности связи анамации CSS с событиями JavaScript. Хотя создание игрового приложения и возможно.
  • Когда сложность приложения достигает аналогичной сложности проекта на Flash, вполне может оказаться, что выигрыш в производительности уже утерян.

Напоследок, интересный А4 листок со сравнением возможностей Flash и HTML5 — это может быть полезно для выбора технологии. Как нам видится нынешний уровень развития технологий, HTML5 стоит использовать когда результат надо получить быстро и с максимальным покрытием мобильных устройств, а Flash стоит использовать когда нужно максимальное качество результата (плавные, красивые, сложные анимации и интерактивные видео приложения).