HTML5 vs Flash: Вещи о которых стоит знать. Краткое введение: HTML5 VS FLASH
Многие, кто связан с разработкой баннеров, сталкиваются с тем, что в медиаплане часть материалов требуется в формате 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 картинки можно поджать с помощью сервиса
push 11 мая 2016 в 13:01 Как преобразовать баннер из flash формата в html5 для площадки mail.ru / rambler.ru- 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 картинки можно поджать с помощью сервиса
Как вы наверное уже знаете, самый популярный в мире браузер 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.
На том все. Успехов!
автор: Adobe Recommended Flash to HTML5 SoftwareRecool SWF to HTML5 Converter is equipped with powerful conversion features for flash users converting SWF to HTML5 video or audio. When convert SWF to HTML5, you can view the HTML5 video or audio, and publish HTML5 video or audio to HTML page. After uploading all the created HTML5 files to your website successfully, you can enjoy HTML5 video and audio with all browsers and any devices , such as Internet Explorer 6/7/8/9/10, Firefox, Google Chrome, Apple Safari and Opera, iPhone, iPad, Android, Windows Phone and BlackBerry.
Amazing Flash to HTML5 Converter is a professional Flash converter for SWF file to html5 video conversion. The output supports all major web broswers: IE, Firefox, Apple Safari, Chrome, Opera, and can be viewed in iPad, iPhone.
Problems About Converting Flash to HTML5
"I am very new to gaming and I came to know that flash can also develop using html with js framework. I got one task in which I need to convert SWF format flash game into html 5. Can any one help me out how I can start this." - rizauddinOur Solutions
can easily convert any flash SWF file to HTML5 video for major web browsers. This SWF to HTML5 Converter offers rich editing functions, such as, trim video, crop video, adjust output properties, etc. In addition, you are permitted to add watermark or advertisement to the created HTML5 video.
Amazing Flash to HTML5 Converter offers the ability to download online flash .swf files from any website. Simply click the "Download SWF" image button and input the URL. You can directly import the SWF file to the program or save it to your computer.
Many amazing editing features are offered by SWF to HTML Converter. You can adjust the video brightness, contrast, lightness; trim the SWF file to an ideal size by setting its width and height; or crop the imported SWF to delete any unwanted area.
"Helps me convert my .swf file to HTML5 with no frame loss. A great helper worths your try." - by Cathy
HTML5 is a language for structuring and presenting content for the World Wide Web. It is a core technology of the Internet and was originally proposed by Opera Software. The core aims of HTML5 have been to improve the language with support for the latest multimedia. And keeping it easily readable by humans and consistently understood by computers and devices. HTML 5 was developed with lots of new tags and enhancements. It gives developers flexibility to create more exiting and interactive websites and more powerful and efficient applications. HTML 5 brings HTML up to date including managing data, drawing, video and audio. It enables websites to deliver what the users want better and faster.HTML5 continues to grow and gain adoption across the web. According to TechCrunch, nearly two-thirds of web videos are already encoded for HTML5.