Переход от flash к html5

В ноябре 2011 года Adobe объявила, что прекратит разработку своего Flash Player для мобильных устройств после выпуска Flash Player 11.1 для устройств Android и BlackBerry Playbook, предпочитая вместо этого сосредоточиться на инструментах для создания приложений HTML5 для мобильных устройств. Несмотря на то, что Adobe подтвердила свою поддержку Flash Player для браузеров персональных компьютеров, многие думают, что это всего лишь вопрос времени, когда Adobe также прекратит поддержку версии для ПК. Это плохая новость для компаний, которые вкладывают значительные средства в приложения Flash, а также для разработчиков, которые потратили время на приобретение навыков программирования, необходимых для создания приложений Flash.

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

Основы Flash-платформы

Flash часто используется как общий термин для обозначения проприетарной платформы Adobe, которая на самом деле состоит из следующих компонентов:

• Flash: инструмент, используемый в основном для разработки и создания анимации
• Flex: среда разработки, используемая для создания приложений, включая пакет разработки программного обеспечения (SDK)
• MXML: язык разметки, используемый в проектах Flash
• ActionScript: язык сценариев

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

Flash использует следующие основные форматы файлов:

• .fla: файл проекта Flash
• .flv: Flash видео файл
• .swf: скомпилированный файл приложения Flash / Flex, который может содержать файлы .flv

Основы платформы HTML5

HTML5 - это открытая стандартная платформа, которая состоит из следующего:

• HTML5: язык разметки, используемый для создания веб-страниц
• Каскадные таблицы стилей 3 (CSS3): язык таблиц стилей, используемый для задания форматирования объектов на веб-странице HTML5
• Интерфейсы прикладного программирования (API): API для поддержки таких функций, как перетаскивание и обмен сообщениями между документами
• JavaScript: язык сценариев, используемый с HTML5 для включения анимации

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

Форматы файлов HTML5 включают следующее:

• .htm / .html: файл веб-страницы HTML5
• .css: файл таблицы стилей CSS3

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

• .mp4: видеофайл MPEG 4 с видеокодеком H.264 и аудиокодеком AAC
• .webm: видеофайл WebM с видеокодеком VP8 и аудиокодеком Vorbis.
• .ogg: видео файл Ogg с видеокодеком Theora и аудиокодеком Vorbis

Преобразование Flash-проектов в HTML5

Преобразование сложного проекта Flash в HTML5 вручную является трудоемким и длительным процессом из-за различий в платформах. Разработчик должен конвертировать анимации, созданные с помощью Flash и ActionScript, в HTML5 и JavaScript. К счастью, есть несколько инструментов, которые помогают автоматизировать преобразование из Flash в HTML5.

Adobe выпустила Wallaby, экспериментальный инструмент, который можно бесплатно загрузить с веб-сайта Adobe Labs. Wallaby принимает файл проекта Flash (.fla) в качестве входных данных и экспортирует HTML5 и поддерживает файлы CSS и JavaScript. Тем не менее, примечания к выпуску Wallaby содержат довольно длинный список функций, которые не были преобразованы, наиболее важными из которых являются ActionScript, фильмы и звук. Wallaby - это ограниченный инструмент, предназначенный главным образом для преобразования анимированного графического содержимого в HTML5, чтобы его можно было интегрировать в веб-страницы с помощью инструмента дизайна веб-страниц.

Google Labs выпустила Swiffy, бесплатный веб-инструмент, который преобразует скомпилированный файл приложения Flash (.swf) в HTML5. Выходные данные затем могут быть встроены в веб-страницу, но разработчику нелегко их редактировать. Как и Wallaby, Swiffy не конвертирует все функции Flash. Swiffy поддерживает преобразование ActionScript, но только версию 2.0 (ActionScript в настоящее время имеет версию 3.0). Вывод Swiffy работает только в браузерах, которые поддерживают Scalable Vector Graphics (SVG).

Edge, новый инструмент разработки для HTML5

Поскольку HTML5 становится предпочтительной платформой, появляются новые инструменты для обеспечения сред проектирования и разработки, которые интегрируют HTML5, CSS3 и JavaScript.

В августе 2011 года Adobe выпустила предварительную версию инструмента разработки Edge. Edge позволяет дизайнеру создавать анимацию HTML5 и добавлять анимацию в существующие проекты HTML5. Flash-дизайнеры распознают некоторые знакомые элементы в пользовательском интерфейсе Edge, включая сцену, окно свойств и временную шкалу анимации. Однако Edge создает файлы CSS и JavaScript, а его анимационное содержимое хранится в структуре данных JavaScript Object Notation (JSON).

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

Преобразование YouTube в HTML5

Одним из признаков перехода на HTML5 является то, что YouTube теперь предлагает возможность использовать видеоплеер HTML5 для просмотра видео.

До предложения опции HTML5 все видео на YouTube доставлялись через проигрыватель Flash. Пользователи могут загружать видеофайлы практически в любом формате, а YouTube затем конвертирует каждое видео в требуемый формат Flash (.flv).

YouTube теперь также кодирует видео с помощью видеокодека H.264 и формата WebM для доставки HTML5. Для просмотра видео в формате HTML5 у вас должен быть браузер, который поддерживает тег видео HTML5 и формат видео, используемый YouTube.

Наследие Вспышки

Как отмечалось ранее, Adobe продолжает разработку версии Flash Player для ПК - пока что. Даже если в будущем Adobe перестанет поддерживать Flash Player, устаревшие приложения Flash будут по-прежнему поддерживаться в Интернете - вероятно, в течение многих лет. Итак, Flash не совсем исчезнет в ближайшее время. Доступны инструменты для преобразования приложений Flash в приложения HTML5, но в настоящее время эти инструменты не поддерживают преобразование всех функций Flash. Поскольку стандарт HTML5 становится доминирующим, вполне вероятно, что инструменты преобразования файлов Flash станут более изощренными, и будут созданы новые инструменты для разработки контента на платформе HTML5.