![Сергей Запотылок (Vizor) - Переход от Flash к HTML5 на примере конвертации большого проекта](https://i.ytimg.com/vi/5reOVX7P9zs/hqdefault.jpg)
Зміст
- Основи Flash-платформи
- Основи платформи HTML5
- Перетворення Flash проектів у HTML5
- Edge, новий інструмент розробки для HTML5
- Перетворення YouTube у HTML5
- Спадщина спалаху
Винос:
Flash не скоро вимкнеться, але багато експертів вважають, що з часом його замінить HTML5. Дізнайтеся, що цей перехід буде означати для компаній та розробників, які інвестують значні кошти у Flash.
У листопаді 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 використовує такі основні формати файлів:
- .fla: Файл проекту Flash
- .flv: Flash-файл відео
- .swf: Скомпільований файл програми Flash / Flex, який може містити .flv файли
Основи платформи HTML5
HTML5 - це відкрита стандартна платформа, яка складається з наступного:- HTML5: мова розмітки, що використовується для створення веб-сторінок
- Каскадні таблиці стилів 3 (CSS3): мова аркуша стилів, що використовується для визначення форматування об’єктів на веб-сторінці HTML5
- Інтерфейси програмування додатків (API): API для підтримки таких функцій, як перетягування та перехресне обмінювання документами
- JavaScript: Мова сценаріїв, що використовується з HTML5 для активації анімації
Формати файлів HTML5 включають такі:
- .htm / .html: файл веб-сторінки HTML5
- .css: файл аркуша стилю CSS3
- .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 працює лише в браузерах, які підтримують масштабовану векторну графіку (SVG).
Edge, новий інструмент розробки для HTML5
Оскільки HTML5 стає платформою вибору, з'являються нові інструменти для створення середовищ для розробки та розробки, що інтегрують HTML5, CSS3 та JavaScript.У серпні 2011 року Adobe випустила попередню версію інструменту розробки Edge. Edge дозволяє дизайнеру створювати анімації HTML5 та додавати анімації до існуючих проектів HTML5. Дизайнери Flash розпізнають деякі знайомі елементи в користувальницькому інтерфейсі Edge, включаючи етап, вікно властивостей та часовий рядок анімації. Однак Edge створює файли CSS та JavaScript, а його вміст анімації зберігається у структурі даних JSON (Noct Object Notation).
На момент написання цього повідомлення Edge очікував свого четвертого попереднього випуску. До кожного випуску додаються нові функції.
Перетворення YouTube у HTML5
Однією з ознак переходу до HTML5 є те, що YouTube тепер пропонує можливість використовувати відеоплеєр HTML5 для перегляду відео.До того, як запропонувати опцію HTML5, усі відео YouTube доставлялися через відеоплеєр Flash. Користувачі могли завантажувати відеофайли майже в будь-якому форматі, а YouTube потім перетворив би кожне відео у потрібний формат Flash (.flv).
Тепер YouTube також кодує відео з відеокодеком H.264 та форматом WebM для доставки HTML5. Для перегляду відео у форматі HTML5 необхідно мати веб-переглядач, який підтримує відеотег HTML5 та формат відео, який використовується YouTube.