- 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.svg?1", id:"logo"}
]
};
8.2. – открываем index.html и сверху убираем libs/ у путей к библиотекам:
P.S. Для ТТ Rambler пункт 8.2 пропускаем.
9. В заголовок файла index.html добавляем строки:
В конце корректируем тег body, а canvas оборачиваем кнопкой из ТТ:
11. Все файлы кроме index.fla запаковываем в архив и проверяем вес на соответсвие ТТ.
Если есть перевес, то PNG картинки можно поджать с помощью сервиса
Здравствуйте, уважаемые друзья. Баннеры в формате HTML5 набирают всё больше и больше популярности. В то время как Flesh отходит на второй план.
В Google Chrome с 1 сентября этого года, по умолчанию включена настройка приостанавливать показ flash контента. Пользователь сам решает, будет он просматривать такой контент или нет.
Также AdWords в настоящее время поддерживает только Adobe Flash Player версий 4–10.1. Другие версии не загружаются.
А тут ещё и проблемы отображения flash-контента на мобильных устройствах.
И, выходит, что появилась необходимость конвертировать баннеры flash в html5. Так, например, рекламные сети AdWords и DoubleClick сами конвертируют баннеры SWF (флешь) в HTML5. Директ, кстати, тоже не отстаёт.
Конечно, не все анимированные баннеры флешь поддаются конвертации. Сложная анимация, конвертации, пока, не поддаётся.
Поэтому лучше, конечно, и сразу создавать красивые баннеры в формате html5.
Но, если вам всё, же нужно переделать баннер flash, то я расскажу, как это сделать.
Где конвертировать FLASH?Google специально разработал сервис – Swiffy , который поможет определить можно ли ваш баннер конвертировать, а если да, то и скачать готовый баннер html5.
Использовать этот сервис можно либо напрямую в интернете, либо как расширение для Flash Professional.
Пользоваться сервисом довольно просто. Всё делается буквально в три действия.
В качестве альтернативы есть несколько программных продуктов позволяющих решить эту задачу. Но, они все платные и вряд ли оправдают вложения. И зачем они, если есть бесплатный сервис swiffy.
Как с помощью сервиса Swiffy конвертировать flash-баннер.Первым делом переходите на страницу сервиса и нажимаете по ссылке « UPLOAD NOW» .
Если ваш баннер не содержит сложной анимации, то вы увидите предпросмотр готового баннера в формате HTML5. Время жизни такого предпросмотра — 15 минут. После чего ссылка перестаёт работать.
Для просмотра результат в отдельном окне можно нажать на кнопку « VIEW CONVERSION» .
Для этого нажимаете правую кнопку мышки на кнопке « VIEW CONVERSION» и в контекстном меню выбираете пункт «Сохранить объект как…» или «Сохранить ссылку как…», зависит от браузера.
Вот и всё, баннер сконвертирован из flash в html5 и его можно использовать на любых сайтах.
Памятка: схема размещения баннера html5 на сайте
— загрузите файл на хостинг;
— вставьте код фрейма
— В таблицу стилей вставьте стили выравнивания для блока ДИВ и настройки фрейма.
#html5 {text-align: center;} #banner728x90 {width: 728px; height: 90px; border: none;}
А теперь предлагаю посмотреть видеоурок для закрепления материала, где вы увидите процесс конвертирования и размещения баннера html5 на сайте.
На этом сегодня всё. До встречи в новых видеоуроках и статьях. Желаю вам успехов, друзья.
С уважением, Максим Зайцев.
мистер Олимпия 11 мая 2016 в 13:01 Как преобразовать баннер из flash формата в html5 для площадки mail.ru / rambler.ruМногие, кто связан с разработкой баннеров, сталкиваются с тем, что в медиаплане часть материалов требуется в формате 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.svg?1", 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.
На том все. Успехов!
автор:
