Здравствуйте, уважаемые друзья. Баннеры в формате HTML5 набирают всё больше и больше популярности. В то время как Flesh отходит на второй план.
В Google Chrome с 1 сентября этого года, по умолчанию включена настройка приостанавливать показ flash контента. Пользователь сам решает, будет он просматривать такой контент или нет.
Также AdWords в настоящее время поддерживает только Adobe Flash Player версий 4–10.1. Другие версии не загружаются.
А тут ещё и проблемы отображения flash-контента на мобильных устройствах.
И, выходит, что появилась необходимость конвертировать баннеры flash в html5. Так, например, рекламные сети AdWords и DoubleClick сами конвертируют баннеры SWF (флешь) в HTML5. Директ, кстати, тоже не отстаёт.
Конечно, не все анимированные баннеры флешь поддаются конвертации. Сложная анимация, конвертации, пока, не поддаётся.
Поэтому лучше, конечно, изучать Google Web Designer и сразу создавать красивые баннеры в формате html5.
Но, если вам всё, же нужно переделать баннер flash, то я расскажу, как это сделать.
Где конвертировать FLASH?
Google специально разработал сервис – Swiffy, который поможет определить можно ли ваш баннер конвертировать, а если да, то и скачать готовый баннер html5.
Использовать этот сервис можно либо напрямую в интернете, либо как расширение для Flash Professional.
Пользоваться сервисом довольно просто. Всё делается буквально в три действия.
В качестве альтернативы есть несколько программных продуктов позволяющих решить эту задачу. Но, они все платные и вряд ли оправдают вложения. И зачем они, если есть бесплатный сервис swiffy.
Как с помощью сервиса Swiffy конвертировать flash-баннер.
Первым делом переходите на страницу сервиса и нажимаете по ссылке «UPLOAD NOW».
Далее, выполняете три простых шага.
- Выбор файла flash. Вам нужно выбрать файл в формате SWF и размер его не должен превышать 1Мб (мегабайт).
- Установите чек-бокс, подтверждающий согласие с условиями использования сервиса.
- Жмёте кнопку «UPLOAD».
Если ваш баннер не содержит сложной анимации, то вы увидите предпросмотр готового баннера в формате HTML5. Время жизни такого предпросмотра — 15 минут. После чего ссылка перестаёт работать.
Для просмотра результат в отдельном окне можно нажать на кнопку «VIEW CONVERSION».
А теперь самое интересное. Нужно сохранить полученный результат в виде html страницы.
Для этого нажимаете правую кнопку мышки на кнопке «VIEW CONVERSION» и в контекстном меню выбираете пункт «Сохранить объект как…» или «Сохранить ссылку как…», зависит от браузера.
Вот и всё, баннер сконвертирован из flash в html5 и его можно использовать на любых сайтах.
Памятка: схема размещения баннера html5 на сайте
— загрузите файл на хостинг;
— вставьте код фрейма
<div id="html5"><iframe id="banner728x90" src="http://site.ru/ПАПКА С БАННЕРОМ/ИМЯ ФАЙЛА.html" allowfullscreen="allowfullscreen"></iframe></div>Измените ссылки и имя файла, а также идентификатор в соответствии с размерами баннера.
— В таблицу стилей вставьте стили выравнивания для блока ДИВ и настройки фрейма.
#html5 {text-align: center;} #banner728x90 {width: 728px; height: 90px; border: none;}
А теперь предлагаю посмотреть видеоурок для закрепления материала, где вы увидите процесс конвертирования и размещения баннера html5 на сайте.
На этом сегодня всё. До встречи в новых видеоуроках и статьях. Желаю вам успехов, друзья.
С уважением, Максим Зайцев.
А зачем эти баннеры нужны? Раздражать посетителей? Некоторые придурки даже музыку вставляют))
Здравствуйте, Елена. Баннеры бы не создавали, если бы они не работали. Задача баннера привлечь внимание посетителя. А вот то, как их размещают на сайтах это уже дело сугубо каждого владельца.
Добрый день, Максим! Ну может быть работают и даже привлекают посетителей, а не отталкивают, у меня Адблок везде стоит, я все равно их не вижу)
Можно вопрос не по теме статьи? Вот здесь прикручен фильтр Альфа: http://girls-art.ru/fotograf-andre-brito/, который срабатывает при наведении курсора на эскиз, меняет прозрачность изображения при увеличении с 1 на 0,9. Как его убрать, если в шаблоне Photo Gallery этих Альф целая куча? Никак не могу найти нужный(
Елена, добрый вечер. Каждый сам решает, как размещать баннеры и как просматривать сайты. Суть тут в том, что есть инструменты помогающие решать задачи пользователей.
По поводу прозрачности, то она привязана к классу изображения
bwg_standart_thumb_img_0. Вам нужно запустить поиск файлов, в которых встречается это класс. Так вы найдёте, где прописаны эти стили.Максим, выручай! ) Я тут поменял тему и всё бы ничего — НО.. Ты же знаешЬ, вечно с этими шаблонами проблы! У меня маленькие аватарки в комментариях! Я зашёл в редактор — comment — ‘avatar_size’=> 60 — этот параметр я сменил, но бестолку! Пробовал и в функции залазить, тоже ничего путнего. Может ты скажешь, как решить эту каверзную проблему?
Кстати, оставляй комменты, у меня если чу ссылки открыты!
Ок, зайду в гости
Вань, привет. Посмотри в таблице стилей класс
.comment-author .avatarи убери вот эти стили:height: 18px; position: absolute; top: 0; left: 0; width: 18px;Когда аватарка увеличится, можешь стили подправить, как надо.
Максим у меня дочерняя тема. Посмотрел в style.CSS и в функции заглянул — ничего такого не нашёл. Тема блин понравилась, но столько в ней «неприятных» аспектов, опять на месяц работы. Думаю уже на ней остановится.
Думал делать блог, как одностраничник т.е без сайдбаров, виджетов. Но вот попробовал и у меня посещалка мигом обвалилась, опять поставил один бок и посещалка в верх подорвалась. Вот такой странный вывод, видимо ПС не любят одностраничники или им надо что бы много было внутренних ссылок. Вот, например, КтоНаНовенького — у него заметь, бок полностью забит внутренними ссылками и всё сделано на клики. Так я уже не один раз замечаю, видимо нужно «навязывать» делать внутренние переходы.
у меня сейчас где-то 300 — 400, а вообще рекорд пока 540 в сутки
Молодец, растёшь. Так держать.
А у тебя Максим только этот блог или ещё есть проекты? Просто, я не представляю как можно вести один проект, это жутко надоедает.
Да, в этом то и фишка, чтобы посетитель сделал действие на сайте. Чем больше сделает, тем лучше.
Максим, ну я нажима CTRL+F и так ищу! Не видно нифига, да и ещё эти ссылки в подвале, они похоже тоже зашифрованы. В общем, разработчики явно постарались)
Вань, CTRL+F в таких случаях не поможет. Нужно открыть тему в Total Commander запустить поиск файлов ALT+F7 и указать в качестве содержимого тот класс. Так ты найдёшь нужный файл. А уже в нём исправишь стили.
Запусти поиск файлов с содержимым этого класса
.comment-author .avatarи сразу найдёшь, где править нужно.Я тут недавно рекламную компанию открыл в Гугл, понравилось. Только нуно продающуюся страницу создать, а так если с умом подойти, думаю неплохой навар получиться. Я испытывал игровой сайт и не мог поверить, когда проверил кто переходит «девушки 35 лет». Это ведь, если создать женский ресурс, то его можно монетизировать как игровой. Ниша правда уже давно забитая, надо реально каждый день строчить, чтобы был хоть какой-то навар. С деньгами вообще намного проще, но блин деньги тоже жалко
Многое зависит от тематики и товара, который продвигаешь. Я компании веду в Директе и в Адвордсе. Так вот если товар или услуга востребована, то и результат хороший. Причём всё таки люди ищут халяву. В этом месяце запустил рекламные компании на тренинги Евгения Вергуса (то что реально работает) и на несколько продуктов из Глопарта по быстрому обогащению (сейчас такие каждую неделю появляются). Так вот вторая компания, как горячие пирожки, просто удивляет.
Ладно уже не надо, нашёл подходящий и удобный тему + там можно управлять мобильной версией сайта! Спасибо Максим за помощь! Видимо не моя тема, такое бывает, особенно с заказчиками — если работал на биржах фриланса, то поймёшь меня
Хотел спросить тебя, почему ты не используешь под статьёй ссылки с миниатюрами? Или боишься, что блог будет «грузить»?
Найти тему действительно подходящую под наши запросы очень трудно. Темы в основном универсальные и в них много лишнего. А в последнее время всё ещё и на API ключах сделано. У меня тема тоже очень не простая. Чтобы что-то исправить или добавить, так надо через функции темы писать свои функции.
А материалы миниатюрами не оформляю по причини и так долгой загрузки. Не хочу ещё больше увеличивать время загрузки.
У тебя быстро блог открывается, я бы не сказал что «тормозит». Вообще, сейчас всё таки интернет у многих становится лучше, соответственно, показатель отказов по причине долго загрузки снижается. Вот, например, у меня на планшетике и ноутбуке быстро открываются сайты, а вот стоит зайти в мобильник и тут же начинается сезон ожидания.
В том то и дело, с компа всё хорошо, а со смартфона медленно. Вот и допиливаю, когда есть время. Сейчас всё свободное время (а его у меня мало) я уделяю созданию своего нового курса. А там очень много на всё времени уходит.
В инфобизнес подался?
Меня уже не однократно просили собрать все мои материалы в единый, пошаговый курс или раздел. Вот я и решил записать курс по созданию сайта от А до Я. Бесплатный курс у меня уже есть, опыт я получил. А теперь решил создать платный вариант. А тут, как ты понимаешь работы в разы больше. Нужно уроки записать, меню для курса сделать, одностраничник создать, рассылку настроить, обложку курсу тоже нужно создать, партнёрку подключить тоже нужно, короче дел хватает.
Заметил недавно что в моем хроме перестали отображаться флэш баннеры. Выходит, что флэш в прошлом. Swiffy хорошее решение, спасибо!
Андрей, привет. Да, flash постепенно отходит в прошлое. Так что нужно переходить на HTML5. Успехов!
А вот если есть баннер уже сконвертированный в swiffy. В него можно внести какие-то коррективы? Изменить текст, добавить еще один кадр и т.п.?
Здравствуйте, Алексей. Попробовать изменить текст можно в исходном коде, а вот с кадрами уже ничего не сделать.
Здравствуйте. Конвертировал мой флеш-баннер в виде часов с прозрачным фоном. Всё работает, но вместо прозрачности фон получился чёрным. Раньше в параметрах вставленого объекта флеш я устанавливал и мой флеш становился прозрачным. Подскажите, как установить прозрачность фона. при вставке конвертированного swf в html5.
Здравствуйте, Валерий. За свойство прозрачности в CSS отвечает opacity. Так вы для блока с фоном можете задать свойство opacity: 0.5; — это будет полупрозрачный фон. 1 это полностью прозрачный.
То есть вам нужно открыть файл в реакторе, например Notepad++ найти блок с фоном и для него добавить этот стиль.
Здравствуйте. С 1 июля Swiffy перестанет конвертировать swf в HTML. Где еще это можно сделать, никак не могу найти нормальный конвертер?
Здравствуйте, Лилия. Как вариант можно использовать этот сервис А вообще, тенденция такова, что надо переходить на html5.
Добрый день, Максим, спасибо за статьи.
Вопрос такой. Приходится выпутываться из ситуацией с прекращением работы сервиса Swiffy, к сожалению адекватной замены пока не нашёл. Еще сложность вот в чем — некоторые баннерные сети просят в качестве баннера присылать единый html-файл, где картинки и скрипты были бы внутри файла. Но и Adobe Animate, и Google Web Designer, и программы, в которых можно сделать конвертацию (тот же Sothnik Decompiler) выводят несколько файлов. Swiffy был кстати хорош, в том числе и тем, что он на выходе давал один файл. Как в нынешних условиях получить единый html-файл, где все картинки и скрипты были бы внутри? Есть ли какое-нибудь готовое удобное решение?
Здравствуйте, Дмитрий. Да, к сожалению, аналога Swiffy пока нет и скорее всего не будет. Единый файл можно сделать самостоятельно, но для этого нужно загрузить баннер на свой сайт и в коде баннера изменить все ссылки на картинки и скрипты с относительных на абсолютные. То есть путь должен быть прописан полностью. В таком случае в рекламные сети можно предоставлять один файл html. Другого готового и удобного решения мне неизвестно.