0. Intro
Хороший программист – ленивый программист.
В этой статье я бы хотел затронуть тему автоматизации и максимального упрощения жизни при разработке интернет баннеров для рекламных площадок на примере Яндекса.
Задача. Имеем согласованный баннер, обычно в размере 240x400. Необходимо сделать ресайзы. На сегодняшний момент это: 160×600, 240×400, 240×600, 300×250, 300×300, 300×500, 300×600, 320×50, 320×100, 320×480, 336×280, 480×320, 728×90, 970×250, 1000×120.
В итоге задача растягивается на несколько часов кропотливой работы, а дедлайн у заказчика как обычно - вчера.
1. Структура проекта.
В директории проекта создаём необходимые каталоги по маске префикс_размер
Для удобства можно создать *.bat файл, чтобы не создавать каталоги вручную.
set /P prefix="Enter prefix?"
MD %prefix%_240x400
MD %prefix%_160x600
MD %prefix%_240x600
MD %prefix%_300x250
MD %prefix%_300x300
MD %prefix%_300x500
MD %prefix%_300x600
MD %prefix%_320x50
MD %prefix%_320x100
MD %prefix%_320x480
MD %prefix%_336x280
MD %prefix%_480x320
MD %prefix%_728x90
MD %prefix%_970x250
MD %prefix%_1000x1202. Настройки публикации проекта.
В настройках публикации проекта (Adobe Animate) указываем output name
./A6_240x400/index
Далее не забываем в каждом файле ресайза изменять размер после префикса.
Файл по умолчанию должен называться index.html
Снимаем Export image assets, таким образом графика будет экспортироваться в корневую папку ресайза. Важный, но не принципиальный момент.
На следующей вкладке важно подготовить и импортировать Шаблон публикации HTML.
Т.к. для каждой площадки свои тех.требования, то имеет смысл создать шаблоны и хранить их в отдельной папке, подключая в зависимости от площадки размещения баннеров (Yandex, Google, auto.ru...)
Первые два пункта помогут сэкономить до 50% времени, которые уйдут на различные операции с каталогами и файлами.
3. Вёрстка ресайзов
Теперь самое главное - подготовить все ресайзы.
К сожалению за годы работы я не нашёл супер простого способа сделать ресайз из 240x400 в 728x90 (из вертикального в горизонтальный). Нет скрипта, кнопки или простого способа. По крайней мере мне он не известен. Всё равно придётся перевёрстывать, редактируя каждый кейфрейм.
Однако, если стоит задача создать всю пачку ресайзов, при определённой последовательности работы, можно также сэкономить приличное количество времени.
Если посмотреть на список файлов и их размеры, то можно увидеть, что 240x400 и 300x500 имеют одинаковые пропорции. Тем самым можно сделать ресайз программно, командой Modify -> Document
не забывая поставить галочку Scale content.
Также есть файлы, которые отличаются незначительно и не потребуют значительных изменений.
Пример 240x400 и 240x600.
Файл 240x600 можно легко получить командой Modify -> Document, без Scale content.
Однако придётся внести изменения и подвигать элементы в каждом кейфрейме.
Ниже таблица, руководствуясь которой можно получить все файлы к публикации максимально быстро.
4. Согласование и отправка макетов
На этапе согласования с заказчиком я использую следующий шаблон страницы, который позволяет посмотреть все баннеры.
<?
//config
$prefix="A6";
$sizes=array(
'240x400','300x500',
'320x480',
'240x600',
'300x600',
'160x600',
'300x300',
'300x250','336x280',
'480x320',
'320x100',
'1000x120',
'728x90',
'970x250',
'320x50',
);
//functions
function printLinks($sizes,$prefix){
//вывод ссылок
for($i=0;$i<count($sizes);$i++){
$code.='<a class="btn btn-secondary" href="'.$prefix.'_'.$sizes[$i].'/index.html?s='.$sizes[$i].'" target="banner" data-size="'.getHeight($sizes[$i]).'">'.$sizes[$i].'</a>';
}
return $code;
}
function loadfirst($sizes,$prefix){
//загрузка первого баннера во фрейм
$code=$prefix.'_'.$sizes[0].'/index.html';
return $code;
}
function getHeight($size){
//определение высоты фрейма
$code=substr(strstr($size,'x'),1);
return $code;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?=$prefix;?></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" style="padding: 20px 0;">
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<?=printLinks($sizes,$prefix);?>
</div>
</div>
<iframe name="banner" src="<?=loadfirst($sizes,$prefix);?>" frameborder="0" style="width:100%;height:400px;border:1px solid black;"></iframe>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$(".btn").on('click',function(event){
$("[name='banner']").height($(this).data('size'));
});
});
</script>
</body>
</html>