HTML5 vs Flash: Вещи о которых стоит знать. HTML5 vs Flash: Вещи о которых стоит знать Краткое введение: HTML5 VS FLASH

HTML 5 is a powerful technology having web-centric architecture , which help you to run any html5 code in any html 5 compatible device. No need to develop separate software/app for every different devices like mobiles, browsers etc.

HTML 5 is easy to learn and code which help developer to write optimistic code in less time. Resource consumption of HTML 5 is much lesser than ordinary flash animations, which makes html5 mobile device compatible. As HTML 5 consume less resources it help mobile device to save their batteries. Flash eat lots of battery of mobile device than html5.

We know that HTML 5 include variety of advance tags, which will help search engine robot/bot to easily crawl the content and sort it according to tag properties.We can’t do such things with flash 🙁 That’s why google algorithms stop considering flash for SERP.

Though these 2 technologies are combating, you can use both, depending on your objectives. If you are looking to build once with average-to-good functionality that works in every eco-system, then HTML5 is a great option. For more advance requirement go with flash. I’m sharing some list of online tools which help you to convert your Flash into HTML 5 format.

Though these tools have limitation still it will help you for small scale conversion.

Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads). It has limitation of file size, you can convert only up to 1 MB swf into html5

This is another service which also include processing of action script along with swf. It support up to 2MB swf file size for conversion. It have rich UI along with drag and drop facility

Здравствуйте, уважаемые друзья. Баннеры в формате HTML5 набирают всё больше и больше популярности. В то время как Flesh отходит на второй план.

В Google Chrome с 1 сентября этого года, по умолчанию включена настройка приостанавливать показ flash контента. Пользователь сам решает, будет он просматривать такой контент или нет.

Также AdWords в настоящее время поддерживает только Adobe Flash Player версий 4–10.1. Другие версии не загружаются.

А тут ещё и проблемы отображения flash-контента на мобильных устройствах.

И, выходит, что появилась необходимость конвертировать баннеры flash в html5. Так, например, рекламные сети AdWords и DoubleClick сами конвертируют баннеры SWF (флешь) в HTML5. Директ, кстати, тоже не отстаёт.

Конечно, не все анимированные баннеры флешь поддаются конвертации. Сложная анимация, конвертации, пока, не поддаётся.

Поэтому лучше, конечно, и сразу создавать красивые баннеры в формате html5.

Но, если вам всё, же нужно переделать баннер flash, то я расскажу, как это сделать.

Google специально разработал сервис – Swiffy , который поможет определить можно ли ваш баннер конвертировать, а если да, то и скачать готовый баннер html5.

Использовать этот сервис можно либо напрямую в интернете, либо как расширение для Flash Professional.

Пользоваться сервисом довольно просто. Всё делается буквально в три действия.

В качестве альтернативы есть несколько программных продуктов позволяющих решить эту задачу. Но, они все платные и вряд ли оправдают вложения. И зачем они, если есть бесплатный сервис swiffy.

Первым делом переходите на страницу сервиса и нажимаете по ссылке « UPLOAD NOW» .

Если ваш баннер не содержит сложной анимации, то вы увидите предпросмотр готового баннера в формате HTML5. Время жизни такого предпросмотра — 15 минут. После чего ссылка перестаёт работать.

Для просмотра результат в отдельном окне можно нажать на кнопку « VIEW CONVERSION» .

Для этого нажимаете правую кнопку мышки на кнопке « VIEW CONVERSION» и в контекстном меню выбираете пункт «Сохранить объект как…» или «Сохранить ссылку как…», зависит от браузера.

Вот и всё, баннер сконвертирован из flash в html5 и его можно использовать на любых сайтах.

Памятка: схема размещения баннера html5 на сайте

— загрузите файл на хостинг;

— вставьте код фрейма

— В таблицу стилей вставьте стили выравнивания для блока ДИВ и настройки фрейма.

#html5 {text-align: center;} #banner728x90 {width: 728px; height: 90px; border: none;}

А теперь предлагаю посмотреть видеоурок для закрепления материала, где вы увидите процесс конвертирования и размещения баннера html5 на сайте.

На этом сегодня всё. До встречи в новых видеоуроках и статьях. Желаю вам успехов, друзья.

С уважением, Максим Зайцев.

• Adobe Flash ,
• Canvas

Многие, кто связан с разработкой баннеров, сталкиваются с тем, что в медиаплане часть материалов требуется в формате Adobe Flash, а часть из-за новых требований браузеров принимаются только в формате html5. Конечно, сейчас есть любимый всеми конвертор Swiffy, но к сожалению не все площаки принимаю его результат из-за слишком избыточного веса внешних библиотек или с запрещенной подгрузкой их из вне, к чему собственно придираются mail.ru при размещении. И тогда приходиться собирать два мастер-баннера на разных платформах, чтобы пройти по ТТ это ограничение.

В Adobe Flash СС/Animate CC есть способ, когда готовый баннер можно быстро перевести в нужный нам html5 с небольшим количеством лишнего. Причем лучше использовать CС, тк в нем вес дополнительных библиотек на 20кб получается меньше, чем в пакете Animate CC.

Ниже инструкция специально для тех, кто больше связан с анимацией, а не программированием.

1. Берем наш flash исходник в формате.fla, переименовываем его в index.fla и открываем в Adobe Flash CC/Animate СС. В меню команды преобразовываем его в формат HTML5 Canvas.

2. Из библиотеки материалов удаляем неиспользуемые в анимации картинки и объекты. Это нужно сделать обязательно, иначе они попаду в экспорт, что прибавит вес баннеру.

3. Нестандартные шрифты преобразовываем в кривые. Мелкий текст типа дисклеймера можно не трогать, но обязательно после компиляции проверяем все ли с ним впорядке.

4. Баннер на HTML5 Canvas не поддеживает код AS2/AS3, по этому анимацию в баннере нужно собирать линейно без кода. После преобразования весь код будет удален.

5. Заходим в Параметры публикации и отключаем галочки Разрешенные библиотеки:

P. S. Для площадок Рамблера галочку Размещенные библиотеки можно оставить, это даст дополнительные 40кб веса.
Их ТТ разрешает подгрузку доп библиотек.

6. Публикуем проект и получаем следующую структуру файлов:

7. Все файлы из подпапок нужно перенести в корневую папку, где лежит получившийся index.html. Пустые папки удаляем. На выходе получится следующее:

8.1. – открываеем index.js и в разделе // library properties в массиве у manifest правим пути к js библиотекам. Убираем images/.

Должно получиться так:

Lib.properties = { width: 240, height: 400, fps: 24, color: "#FFFFFF", manifest: [ {src:"el1.png", id:"el1"}, {src:"el2.png", id:"el2"}, {src:"fon2.jpg", id:"fon2"}, {src:"/logo.png", id:"logo"} ] };
8.2. – открываем index.html и сверху убираем libs/ у путей к библиотекам:

P.S. Для ТТ Rambler пункт 8.2 пропускаем.

9. В заголовок файла index.html добавляем строки:

В конце корректируем тег body, а canvas оборачиваем кнопкой из ТТ:

11. Все файлы кроме index.fla запаковываем в архив и проверяем вес на соответсвие ТТ.

Если есть перевес, то PNG картинки можно поджать с помощью сервиса

Многие, кто связан с разработкой баннеров, сталкиваются с тем, что в медиаплане часть материалов требуется в формате Adobe Flash, а часть из-за новых требований браузеров принимаются только в формате html5. Конечно, сейчас есть любимый всеми конвертор Swiffy, но к сожалению не все площаки принимаю его результат из-за слишком избыточного веса внешних библиотек или с запрещенной подгрузкой их из вне, к чему собственно придираются mail.ru при размещении. И тогда приходиться собирать два мастер-баннера на разных платформах, чтобы пройти по ТТ это ограничение.

В Adobe Flash СС/Animate CC есть способ, когда готовый баннер можно быстро перевести в нужный нам html5 с небольшим количеством лишнего. Причем лучше использовать CС, тк в нем вес дополнительных библиотек на 20кб получается меньше, чем в пакете Animate CC.

Ниже инструкция специально для тех, кто больше связан с анимацией, а не программированием.

1. Берем наш flash исходник в формате.fla, переименовываем его в index.fla и открываем в Adobe Flash CC/Animate СС. В меню команды преобразовываем его в формат HTML5 Canvas.

2. Из библиотеки материалов удаляем неиспользуемые в анимации картинки и объекты. Это нужно сделать обязательно, иначе они попаду в экспорт, что прибавит вес баннеру.

3. Нестандартные шрифты преобразовываем в кривые. Мелкий текст типа дисклеймера можно не трогать, но обязательно после компиляции проверяем все ли с ним впорядке.

4. Баннер на HTML5 Canvas не поддеживает код AS2/AS3, по этому анимацию в баннере нужно собирать линейно без кода. После преобразования весь код будет удален.

5. Заходим в Параметры публикации и отключаем галочки Разрешенные библиотеки:

P. S. Для площадок Рамблера галочку Размещенные библиотеки можно оставить, это даст дополнительные 40кб веса.
Их ТТ разрешает подгрузку доп библиотек.

6. Публикуем проект и получаем следующую структуру файлов:

7. Все файлы из подпапок нужно перенести в корневую папку, где лежит получившийся index.html. Пустые папки удаляем. На выходе получится следующее:

8.1. – открываеем index.js и в разделе // library properties в массиве у manifest правим пути к js библиотекам. Убираем images/.

Должно получиться так:

Lib.properties = { width: 240, height: 400, fps: 24, color: "#FFFFFF", manifest: [ {src:"el1.png", id:"el1"}, {src:"el2.png", id:"el2"}, {src:"fon2.jpg", id:"fon2"}, {src:"/logo.png", id:"logo"} ] };
8.2. – открываем index.html и сверху убираем libs/ у путей к библиотекам:

P.S. Для ТТ Rambler пункт 8.2 пропускаем.

9. В заголовок файла index.html добавляем строки:

В конце корректируем тег body, а canvas оборачиваем кнопкой из ТТ:

11. Все файлы кроме index.fla запаковываем в архив и проверяем вес на соответсвие ТТ.

Если есть перевес, то PNG картинки можно поджать с помощью сервиса

Как вы наверное уже знаете, самый популярный в мире браузер Google Chrome частично перестал поддерживать работу флешь анимации. Теперь анимация, прописанная в баннере разработчиком, автоматически не стартует, а ожидает клика пользователя. Из этого следует что имея рекламный баннер в формате SWF, у вас теперь оказалось меньше шансов на то, что баннер отработает потраченные на его создание средства и время. Но не все так плохо, как могло показаться с первого взгляда. О нас уже позаботился сам Google ведь в его сервисе Google Lab сейчас во проходит разработка и тестирование онлайн сервиса конвертации флешь баннеров из формата SWF в формат HTML5 и вы можете этим воспользоваться совершенно свободно.

Но сначала немного истории...

Некоторые проекты Google начинались буквально одним человеком и только потом обрастали командой разработчиков и становились частью большой семьи. Так случилось и в этот раз. Летом 2010 года к команде исследователей мобильной рекламы, которая занималась проблемой отображения флешь-анимации на устройствах которые не поддерживают Adobe Flash Player, в качестве стажера инженера присоединился Питер Сенстер.

В итоге Питеру удалось достичь таких поразительных результатов, что руководство Google приняло его на работу на полный рабочий день, и что еще круче, для нужд проекта была организована команда разработчиков.

Учитывая тот факт что технология все еще развивается, не стоит рассчитывать на 100% результат, но простейшие баннеры с анимацией онлайн конвертор щелкает как семечки))

Опробовать сервис по конвертации SWF в HTML5 можно перейдя по ссылке ниже

Swiffy использует компактное представление данных JSON, с использованием SVG, HTM5 и CSS3. Так же в JSON объектах присутствует Action Script 2.0? который в последствии интерпретируется средствами JS в браузере. Такой подход делает результирующую анимацию от Swiffy такой же компактной как и исходный файл SWF.

Swiffy это прекрасный пример того того, как далеко в своем развитии зашла веб-платформа.

Анимация Swiffy на полную использует все результатов развития веб технологий, таких как возросшая скорость выполнения скриптов и аппаратное ускорение 2D графики в современных браузерах.

Еще раз: если у вас есть флешь баннер в формате SWF, то вы с высокой вероятностью сможете его конвертировать в HTML5 и разместить на своем сайте или в популярной системе размещения баннеров AdRiver.

На том все. Успехов!