Подготавливаем баннер-растяжку для onliner.by и tam.by (нюансы)

Нюансы при подготовке баннера-растяжки 100%x90px на примере Adobe Animate CC.

Технические требования площадок:

onliner.by

tam.by

  1. Изначально лучше использовать рабочую область 900х90px, чтобы баннер правильно отображался на всех разрешениях + во всех рубриках. 1100px которые указаны в требованиях onliner - это только главная растяжка в шапке сайта; У tam.by минимальный размер 1000px, так что 900px будет оптимально.
  2. После того как подготовили анимацию в 900px, нужно изменить размер рабочей области до 2000px с привязкой по горизонтали в обе стороны;
  3. Верхним слоем создаем кнопку 2000x90px, назовем ее button.

Далее подготовка баннера для двух площадок будет отличаться. 

  • Для tam: На таймлайне жмем правой кнопкой мыши на любом кадре нашей кнопки, выбираем "Действия" и добавляем код кнопки (пример ниже). Не забываем менять ссылку на свою. Публикуем проект. И открываем опубликованный html файл.
  • Для onliner: В коде кнопки ничего прописывать не надо. Ссылка предоставляется отдельно. Публикуем проект. И открываем опубликованный html файл.
  • Для tam: Лучше прописать прямую ссылку на createjs-2015.11.26.min. Скачать createjs-2015.11.26.min
  • Для onliner: В креативе разрешена внешняя ссылка на createjs
  • canvas оборачиваем в div и задаем для него стиль style="height: 90px; position: relative; overflow: hidden;"
  • меняем стиль canvas: width="2000" height="90" style="background-color:#E94A17; position: absolute; top: 0; left: 50%; margin-left: -1000px;"
  • Для onliner:cделаем canvas кликабельным обернув его тегом <a>+ скрипт

Код кнопки tam.by:

1
2
3
4
this.button.addEventListener("click", fl_ClickToGoToWebPage_5);
function fl_ClickToGoToWebPage_5() {
window.open("./ext_click/?redirect_uri="+encodeURIComponent("http://ndesign.by/"), "_blank");
}

Конечный код html для onliner.by:

1
2
3
4
5
6
7
8
9
10
11
12
13
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
	<div style="height: 90px; position: relative; overflow: hidden;"><a id="click1_area" href="#" target="_blank"><canvas id="canvas" width="2000" height="90" style="background-color:#E94A17; position: absolute; top: 0; left: 50%; margin-left: -1000px;"></canvas></a></div>
<script>
	  function getUrlParam(name) {
	  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
	  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
	  results = regex.exec(location.search);
	  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}
 
	document.getElementById("click1_area").href = getUrlParam('link1');
    </script>
</body>

Конечный код html для tam.by:

1
2
3
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
	<div style="height: 90px; position: relative; overflow: hidden;"><canvas id="canvas" width="2000" height="90" style="background-color:#E94A17; position: absolute; top: 0; left: 50%; margin-left: -1000px;"></canvas></div>
</body>

P.S. В версии Adobe Animate CC 2017 Сборка 16.0.0.112, после публикации добавляется ширина проекта 2000px от которой не избавиться даже удалением из body. Рекомендую поставить другую версию программы.

Пример готового баннера

comments powered by HyperComments