Главная / Список статей / Как подготовить html5 растяжку в Adobe Animate

Adobe Animate. Как подготовить html5 растяжку? От простого к сложному, с примерами кода и исходными материалами.

— Растяжка с одним брейкпоинтом

— Скрипт для растяжки с одним центральным элементом

— Скрипт для растяжки с одним центральным элементом и тянущимся фоном, кнопкой

— Исходник баннера Adobe Animate для растяжки с одним центральным элементом и тянущимся фоном, кнопкой

— Растяжка с двумя брейкпоинтами

— Скрипт для растяжки с одним центральным элементом, двумя брейкпоинтами. Мобильный и десктоп

— Исходник баннера Adobe Animate для растяжки с одним центральным элементом, двумя брейкпоинтами. Мобильный и десктоп

— Размещение контента на процентных позициях

— Скрипт для растяжки с одним центральным элементом и размещением объектов на процентных позициях

— Исходник баннера Adobe Animate для растяжки с одним центральным элементом и размещением объектов на процентных позициях

Данная публикация нацелена на детальное рассмотрение процесса создания масштабируемых баннеров. Весь представленный скриптовый материал совместим с версиями программного обеспечения Adobe Animate 19 и более поздними. Вы можете свободно использовать представленные скрипты, копировать и вставлять их в свой проект.

Что такое «резиновый» (тянущийся) html5 баннер? Это баннер который тянется на всю допустимую ширину сайта, и заполняет собой все доступное пространство. Как правило встречаются растяжки баннеров по «ширине» сайта, но так же можно найти размещения, где растяжка тянется по высоте.

Важно учитывать, что в современном мире значительная часть контента просматривается на мобильных устройствах. Мы знаем, что у мобильных устройств существенно отличается разрешение экрана по сравнению с мониторами компьютеров. Учитывая вышесказанное, внимательный наблюдатель сразу обратит внимание на то, что если баннер масштабируется под всю ширину контента, то, в «теории», можно создавать баннеры, которые будут одинаково эффективны как на десктопных, так и на мобильных устройствах. Однако при такой концепции баннера возникают технические ограничения на веб-платформах. Иногда, даже если удастся создать такой баннер, может быть сложно уместить весь его контент так, чтобы он успешно прошел модерацию на соответствующей площадке.

Давайте начнем с более конкретного подхода.

Рассмотрим задачу создания адаптивного баннера для использования на десктопной версии веб-сайта. В этом случае, общая структура такого баннера будет следующей:

Мы видим границы сайта, которые включает в себя адаптивный баннер, растянутый от края до края, и контент, размещенный по центру данного растянутого баннера.
Важно помнить следующее. Веб-сайты имеют адаптивную ширину, что позволяет нам размещать адаптивные баннеры, однако у десктопной версии сайта есть минимальный размер, в котором контент баннера должен корректно отображаться. Например, при открытии десктопной версии сайта Rambler.ru на мониторе с разрешением 2560 пикселей, мы замечаем, что область растяжки баннера тянется на всю ширину браузера, но контент ограничен размером 1260 пикселей. Если же мы откроем ту же страницу с разрешением 1259 пикселей и меньше, то заметим, что ни баннер, ни контент сайта не уменьшаются меньше размера 970 пикселей.

При рассмотрении технических требований платформы мы видим, что указан минимальный размер в виде 970 пикселей.

Итак, давайте разберемся, как создать подобный баннер.

Для облегчения понимания адаптивных баннеров мы будем считать, что контент всегда расположен по центру баннера.

В дальнейшем мы рассмотрим более сложные варианты реализации и углубимся в изучение аспектов адаптивных баннеров.

За всю историю своей работы над баннерами я сделал более 5000 html5 растяжек. Растяжка с центрированным контентом представляет собой наиболее простую концепцию таких адаптивных баннеров, обеспечивая при этом максимальный комфорт для пользователей при просмотре на больших экранах мониторов.

Давайте откроем программу Adobe Animate версии 19 и выше и попробуем реализовать эту задачу. Я продемонстрирую свой процесс создания таких адаптивных баннеров, поскольку считаю этот процесс наиболее удобным и эффективным.

Начнем проект с указанием минимально допустимых размеров баннера: 970 на 250 пикселей.

Перейдем в панель «Publish Settings» и на вкладке «Basic» и настроим параметры.

Перейдем на вкладку «Image Settings» и настроим экспорт изображений из баннера.

Подтвердим настройки, нажав кнопку «OK».

Также установим частоту кадров (FPS) для баннера на уровне 30 кадров в секунду в разделе «Properties» (если данная вкладка отсутствует, ее можно активировать в верхнем меню «Window»). Из личного опыта могу сказать, что 30 fps - наиболее оптимальная частота кадров с учетом работы с таймлайном и качеством экспортированной анимации.

Сохраним проект в папку и дадим профессиональное название. В моих названиях всегда отражается функционал и размер баннера. Т.к. это у нас растяжка, то назовем баннер 100pr970x250 (где 100pr – это маркер растяжки, 970 – ширина, 250 – высота).

Теперь у нас все готово, что бы приступить к подготовке баннера. Он будет состоять из простых элементов. А именно: задний фон, центральная надпись и кнопка (если вы не знакомы с таймайлом и методами работы с ним, то можно научиться с ним работать тут - https://vk.com/@bannersbox-kak-sozdat-html5-banner-v-adobe-animate-cc)

После создания, вышеуказанных элементов на отдельных слоях, мы получим следующую структуру html баннера.

На текущий момент у нас есть минимальный размер баннера. Но мы должны понимать, что баннер растяжка – тянется по сторонам. А значит за пределами стандартного вида должно быть «что то еще».

В классическом виде, с обоих сторон баннера делают одинаковый цвет, сводя боковые цвета минимального размера баннера одинаковыми градиентами. Для простоты подхода и понимания, пока что мы пойдем именно классическим подходом.

Создадим слой над фоном и разместим там два одинаковых градиента. А под слоем фона мы создадим слой, на котором разместим плашку, с нашим единым цветом. В будущем мы ее растянем, и она будет у нас выполнять роль фона там, где заканчивается область «минимального» размера баннера.

Должен получится примерно такой вид.

Я специально сделал градиент выше макета, что бы было понятно, как я их наложил сверху фона. Так можно сводить фон по бокам баннера.

Так же я добавил самой простейшей анимации, что бы баннер стал немного интереснее.

На текущий момент считаем, что баннер в минимальном размере у нас готов. Переходим к формированию структуры самой растяжки.

По нашей начальной задаче мы должны реализовать тянущийся баннер с всем контентом, расположенным по середине баннера. При любой ширине баннера, но не менее, чем 970 пикселей в ширину.

Давайте рассмотрим структуру такой растяжки:

Нам необходимо разместить весь контент баннера (кроме фона и кликовой кнопки) в некий объект, внутри которого он будет бесконечно проигрываться. Затем нужно написать скрипт, который будет говорить объекту, что он вместе со всей анимацией всегда должен быть на центре экрана. Под нашим объектом с анимацией будет фон, который многократно длиннее баннера. А над объектом с анимацией будет кнопка, которая так же будет намного длиннее объекта, что бы перекрывать его на любой ширине экрана.

Объектом, который будет содержать в себе анимацию будет movie clip. В него мы перенесем всю анимацию. Для этого создадим пустой слой, разместим на нем обычный прямоугольник произвольной величины, и разместим прямоугольник ровно по центру баннера, воспользовавшись для выравнивания панелью «Align». Получим следующий результат:

Далее создадим из прямоугольника movie clip с якорной точкой по центру.

После этого двойным кликом нужно зайти внутрь созданного movie clip и выделить прямоугольник. Сделаем ему прозрачность 0, переименуем слой на символ «_» (всегда так делаю) и создадим один новый пустой слой. После всех манипуляций выходим из movie clip на уровень выше.

После этого нам нужно переместить всю анимацию внутрь созданного movie clip. Напомню, что мы перемещаем только то, что относится к фиксированному баннеру.

Для этого необходимо выделить слои и скопировать их в буфер обмена.

Далее заходим обратно в movie clip и на пустом слое вставляем анимацию.

Если вы делали все верно, то вы должны увидеть, как вместо пустого слоя у вас появились 3 слоя с анимацией, и у слоев у вас те же самые названия, что и были в корневом уровне баннера. Если были соблюдены все выравнивания, то анимация должна визуально встать ровно на тоже самое место.

Далее возвращаемся в корневой уровень и удаляем скопированные слои. Анимация теперь циклична и находится внутри movie clip. Так как вся анимация находится внутри movie clip, то нам необходимо оставить только один кадр на корневом уровне.

Далее нам нужно создать пустой слой, в котором будет располагаться управляющий скрипт. Дадим ему название «__script». Теперь наша структура на корневом уровне баннера выглядит вот так:

Для того, что бы мы могли управлять нашим movie clip с помощью скрипта, мы должны дать ему название. Таким образом скрипт сможет находит данный movie clip и задавать ему какие то параметры.

Это делается следующим образом. Выделаем movie clip и в поле «Properties» указываем ему Label с названием «center».

После всех манипуляций нам осталось сделать кнопку и фон под баннером максимально широкими. Надо понимать, что у пользователей разные экраны по ширине, но при этом они должны корректно видеть фон у баннера, а так же должны иметь возможность нажать на кнопку на любой ширине своего экрана.

Так как мы рассматриваем простейший подход, то и решение для этих двух задач будет простое. Мы должны снять блокировку слоя кнопки, выделить ее, и задать ее ширину в размере 5000 пикселей (это величина выбранная опытным путем, так как обычно, большей ширины для кнопки не требуется). Тоже самое нужно сделать для слоя с фоном.

Далее слой с нашим клипом можно заблокировать. Для дальнейших манипуляций с программным размещением по центру экрана он нам не нужен.

Перейдем к управляющему скрипту.

Выберем слой «__script» кликом мышки и нажмем клавишу F9. Как только вы это сделаете, у вас должна открыться вкладка «Actions».

Начнем внесение кода в баннер.

Пишем следующий код:

var thisStage = this;
window.addEventListener("resize", resize, false);

Первая строка кода говорит о том, что переменной прикрепляется область видения кода из текущей части кода. Не стоит как то пытаться это осознать, мы здесь не занимаемся программированием. Пусть эта строчка просто будет здесь.

Вторая строка говорит о том, что мы будем «слушать» изменения размеров браузера, и при каждом изменении мы будем вызывать функцию resize().

Далее нам нужно описать данную функцию resize(). Именно в ней мы будем управлять нашим Movie clip и будем располагать его по центру. Заведем ее в виде пока что пустой болванки. Выглядит это следующим образом.

function resize() { }

И следующей строкой однократно вызовем выполнение данной функции, т.к. при загрузке браузера, размеры браузера никто не изменяет. Поэтому однократно нам надо заставить отработать данную функцию. Делается это следующим образом:

resize();

Суммируем весь ранее написанный код и опишем его единым блоком:

var thisStage = this;
window.addEventListener("resize", resize, false);
function resize() {
}
resize();

Итак, мы имеем однократный вызов функции, а так же вызов той же функции при любом изменении размера у браузера.

Далее разберемся с тем, как работает функция resize().

Собственно ее задача и есть – разместить наш movie clip по центру баннера со всем содержимым. Далее мы должны добавить следующие строки кода между «function resize() {» и «}».

var w = window.innerWidth * window.devicePixelRatio;

Первой строкой, для удобства, мы должны поместить в некую переменную, значения экрана браузера. Причем, стоит обратить внимание на множитель «window.devicePixelRatio». Для упрощенного понимания этого множителя, стоит понимать только одно. Существует множество разных дисплеев на абсолютно разных устройствах. И у разных устройств – разное отношение пикселей дисплея и фактического пикселя объекта изображения, размещенного на сайте. Проще говоря, какие то устройства используют один пиксель для отображения сайта на своем экране, а другие устройства, используют два пикселя для той же цели.

Возможно вы слышали про Retina экраны у Iphone, это история как раз про них. На их экранах используется вдвое больше пикселей, что бы отобразить один физический пиксель объекта изображения на сайте. Важно помнить то, что в любых вычислениях внутри кода – этот множитель должен быть. И он у нас появится в множестве мест.

Следующей строкой мы задаем размер ширины тега «canvas». Это тег, который отвечает за отображение анимированного баннера в браузере:

stage.canvas.width = w;

Далее нужно определить высоту растяжки. Мы возьмем ранее известный нам код, определяющий ширину окна и заменим в нем ширину на высоту:

stage.canvas.height = window.innerHeight * window.devicePixelRatio;

Но т.к. растяжка фиксирована по высоте, то мы используем фиксированное значение, вместо значения высоты экрана. Исправим строку на:

stage.canvas.height = 250 * window.devicePixelRatio;

Далее нам нужно обозначить растяжке ее пропорциональное отображение. Напомню, что существует разные дисплеи с разной плотностью пикселей, по этому нам так же на зафиксировать пропорции с корректным множителем для разных дисплеев. Делается это следующим кодом:

stage.scaleX = stage.scaleY = window.devicePixelRatio;

Параметр scale – работает в процентах. От 0 до 100. Этой строкой мы говорим. Что объект по ширине всегда трансформируется так же как и по высоте. Эта часть кода ближе к программированию. Поэтому, если ее сложно осознать, то просто ее вставьте и считайте ее обязательной строкой у всех растяжек.

stage.canvas.style.width = window.innerWidth + "px";
stage.canvas.style.height = "250px";

Данные две строки указывают тегу "canvas" растягиваться. Ширину мы тянем на всю допустимую ширину экрана, а высоту оставляем равной 250 пикселей.

Для инициализации параметров ширины баннера – это достаточное количество информации в коде. Но давайте добавим еще и программную «рамку» для баннера. Делается это следующим образом:

stage.canvas.style.border = "1px solid #000000";
stage.canvas.style.boxSizing = "border-box";

В этих строках мы говорим, следующую информацию для баннера:

– Необходимо создать рамку с толщиной линии 1 пиксель, сплошной заливкой и черным цветом в HEX значении
– Создать стиль для учета границ в баннере.

Если в вашем баннере нет рамки, то эти четыре строки можно просто закомментировать символами «//» и рамка пропадет.

На текущий момент мы имеем абсолютно все данные, о размерах баннера, хранимые в переменной «w». Теперь можно ее использовать для того, что бы заставить наш movie clip центроваться по середине.

Для этого напишем следующий код:

thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);

В этой строке написано следующее: для данной области кода «thisStage», movie clip с названием «center», по координате «x» (горизонтальная координата) равны следующим значениям. Сначала рассмотрим то, что в скобочках. Берем известную ширину окна из параметра «w», делим это окно пополам « / 2 », и делим на множитель плотности пикселей « / window.devicePixelRatio ». Получившееся значение в скобочках мы округляем до целых значений встроенной функцией «Math.floor».

Обращу внимание, что округление - это важный параметр для растяжки, т.к. он заставляет movie clip встать на точную координату. Если этого не сделать, то все объекты внутри movie clip получат небольшое смазывание, что внешне будет сильно портить качество баннера.

Давайте финализируем весь код в единый блок, а так же добавим комментарии в код, для удобства работы с ним:

// "this" variable
var thisStage = this;
// Listen of browser change
window.addEventListener("resize", resize, false);

// Function resize()
function resize() {
// Speshial settings
var w = window.innerWidth * window.devicePixelRatio;
stage.canvas.width = w;
stage.canvas.height = 250 * window.devicePixelRatio;
stage.scaleX = stage.scaleY = window.devicePixelRatio;
stage.canvas.style.width = window.innerWidth + "px";
stage.canvas.style.height = "250px";


// Border settings
stage.canvas.style.border = "1px solid #000000";
stage.canvas.style.boxSizing = "border-box";
// Position on stage
thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);
}

// One time calling function
resize();

Должно получиться так:

Нет предела совершенству и код, указанный выше, можно еще немного улучшить.

Теперь, когда мы понимаем, как центрируется movie clip в скрипте анимированного html5 баннера в программе Adobe Animate, мы можем использовать эти знания для того, что бы программно изменять значение ширины нашей кнопки и нашего фона, которые ранее мы просто тянули на 5000 пикселей в ширину.

Начнем с фона. Разблокируем слой фона, выделим его, укажем ему размеры 970*250, как у нашего баннера и поместим в movie clip. Ancor Point по привычной нам схеме разместим по центру.

После этого дадим ему название «Label» во вкладке «Properties» в виде «bg».

Теперь вернемся в скрипт (F9) и добавим две строчки кода для размещения фона по центру экрана, а так же строку для растягивания фона по ширине окна.

thisStage.bg.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.bg.scaleX = w / window.devicePixelRatio;

Те же самые манипуляции нужно совершить с объектом «кнопка». Если вы следовали всем скринам, то кнопка у вас создана уже с ancor point по середине. Осталось только дать название «mainBtn», скопировать две строки кода описанные в предыдущем блоке и заменить в них на название нашей кнопки.

thisStage.mainBtn.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.mainBtn.scaleX = w / window.devicePixelRatio;

Если вы все делали в точной последовательности, то вы, после экспорта баннера и запуска html файла, должны увидеть следующий вид баннера

Баннер тянется на всю ширину, фон тянется на всю ширину, кнопка тянется на всю ширину (наведите на баннер и посмотрите, что бы курсор менялся на «лапку»), а центральный movie clip располагается по центру баннера.

// "this" variable
var thisStage = this;
// Listen of browser change
window.addEventListener("resize", resize, false);

// Function resize()
function resize() {
// Speshial settings
var w = window.innerWidth * window.devicePixelRatio;
stage.canvas.width = w;
stage.canvas.height = 250 * window.devicePixelRatio;
stage.scaleX = stage.scaleY = window.devicePixelRatio;
stage.canvas.style.width = window.innerWidth + "px";
stage.canvas.style.height = "250px";

// Border settings
stage.canvas.style.border = "1px solid #000000";
stage.canvas.style.boxSizing = "border-box";

// Position on stage
thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);

thisStage.bg.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.bg.scaleX = w / window.devicePixelRatio;

thisStage.mainBtn.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.mainBtn.scaleX = w / window.devicePixelRatio;
}

// One time calling function
resize();

Поздравляю! Вы создали простую растяжку.

Исходники с компилированными файлами можно найти здесь – исходник Level 0.

Теперь мы немного усложним задачу. Представим, что наш баннер должен подходить под технические требования как десктоп версии сайта, так и для мобильной. Более того, существуют размещения, где используется три брейкпоинта, где центральный отвечает за размещения на планшетных версиях экрана, и таких размещений достаточно много. Поэтому понимание в управлении брейкпоинтами вам будет полезно.

За основу будет взят исходник из первого блока этой статьи. Если вы пропустили этот блок и не хотите с ним разбираться, то просто скачайте исходник со ссылки.

По задаче у нас два брейкпоинта и при разрешении экрана выше 970 пикселей должна отображаться версия баннера для десктоп размещения, по следующей схеме:

Если же разрешение экрана пользователя будет менее 970 пикселей, то должна отображаться уже мобильная версия баннера по следующей схеме:

Как правило, при анализе любых технических требований для баннера с двумя брейкпоинтами, в описании технических требований вы увидите описание минимальных размеров как для десктоп, так и для мобайла. В большинстве случаев, мобильная версия баннера должна отображаться для разрешения не менее 300 пикселей, и должна иметь возможность тянуться по ширине.

Итак, формализируем наши требования:

– Десктоп версия тянется от ширины 970 пикселей и больше
– Мобильная версия должна быть не менее 300 пикселей и не более 969 пикселей.

Для начала, нам нужно создать ту самую верстку мобильного макета, у которого будет минимальная ширина 300 пикселей.

Первым этапом нужно обозначить границы мобильной версии. Для этого создаем пустой слой, на нем ставим прямоугольник с размерами минимальной ширины мобильного макета, центруем его и по границам расставляем направляющие. Выглядит это вот так:

После установки направляющих линий, созданный слой можно удалить, он нам больше не нужен.

Следующим этапом, создаем дубликат movie clip, с десктопной анимацией. Для этого нужно снять блокировку с со слоя «center», кликнуть правой кнопкой по нему и выбрать пункт «Duplicate Layers». У нас должен появится дубликат слоя с названием «center_copy»:

Следующие манипуляции крайне важны. Сейчас сдублированные слои связаны с друг другом. Все что вы будете делать внутри одного клипа, будет автоматически повторятся в другом. Нам нужно их разъединить, создав в библиотеке уникальный клип для мобильной анимации.

Делается это следующим образом. Для начала заблокируем слой «center», где находится оригинал десктопной анимации. После этого выделим клип «center_copy» и перейдем в панель «Properties». Сверху панели есть кнопка «Swap». Нажмем ее, и попадем в окно управлением замены movie clip. В этой панели нужно нажать на кнопку дублирования клипа. И далее подтвердить создание нового movie clip для выбранного нами «center_copy», нажав два раза «Ok» в двух открытых окнах.

После этих действий movie clip «center_copy» будет уникальным и никак не будет влиять на то, что происходит в клипе «center».

Следующим шагом, нам нужен привести названия слоя и «Label» к аккуратному виду. Назовем нашу мобильную версию «center_mob». Двойным кликом по названию слоя «center_copy» войдем в режим редактирования названия слоя и вставим туда название «center_mob».

После этого, выделим наш слой «center_mob» и в «Label» панели «Properties» укажем название «center_mob».

После этого зайдем в наш скрипт по клавише F9, находясь на слое со скриптами. И найдем строчку: thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);

Скопируем ее и вставим такую же за ней, но только здесь изменим название клипа на center_mob:

thisStage.center_mob.x = Math.floor(w / 2 / window.devicePixelRatio);

Теперь наш мобильный movie clip тоже будет центроваться.

Следующим шагом, мы должны указать десктоп и мобильным movie clip’ам кто и на какой ширине экрана должен быть виден пользователю. Для этого мы воспользуемся параметром alpha в коде баннера. Напишем следующий код с условиями для отображения moviclip’ов:

if((w/window.devicePixelRatio)>969){
thisStage.center_mob.alpha = 0;
thisStage.center.alpha = 1;
}
if((w/window.devicePixelRatio)<970){
thisStage.center_mob.alpha = 1;
thisStage.center.alpha = 0;
}

Что значит это код? Строка «if((w/window.devicePixelRatio)>969)» говорит нам. Если ширина экрана «w» больше 969 пикселей (больше значит, что расчет значений начнется с 970 ширины. К примеру, если бы мы поставили бы символ сравнения «=>», то это значило бы «строго больше», и тогда бы значение 969 то же бы входило в вычисления), то нужно выполнить код, находящийся внутри условия.

Условиями являются – сделать у «thisStage.center_mob.alpha» прозрачность равно ноль, а у «thisStage.center.alpha» сделать прозрачность равной 100%.

Второй условие «if((w/window.devicePixelRatio)<970)» говорит, что если ширина строго меньше 970, те равной 969, то нужно выполнить условия.

Условиями являются – сделать у «thisStage.center_mob.alpha» прозрачность равно 100%, а у «thisStage.center.alpha» сделать прозрачность равной 0. Те наоборот.

Простыми словами, если ширина более 970 пикселей, то мы видим десктопный клип, а если меньше, то мы видим мобильный клип.

Теперь нам нужно разработать мобильную версию анимации и воочию увидеть как же работает наша растяжка.

Для этого закроем редактор кода, нажав клавишу "F9", и двойным кликом перейдем в movie clip с названием «center_mob».

Внутри на первом слое мы видим анимацию текста. ВАЖНО понимать, что анимация текста, так же находится в таком же movie clip, который используется внутри десктопной версии клипа. Поэтому перед заменой текста, нам нужно так же сдублировать клип и получить уникальный объект.

Самый быстрый и удобный способ, используемый мной в работе, это выделение всех точек анимации при помощи инструмента «Edit Multiply Frames». Давайте выберем его, а затем, в соседних настройках укажем, что бы он действовал на всю ширину таймлайна.

После этого, выберем все точки анимации, нажав ctrl+A, перейдем в панель «Properties», нажмем кнопку «Swap», а внутри сдублируем клип с уникальным названием:

Теперь мы имеем уникальный movie clip, который можем менять. Давайте зайдем внутрь клипа с текстом и изменим текст на «MOBILE ADVERTISING TEXT» и при необходимости уменьшим размер шрифта. Сделаем так, что бы текст располагался в пределах наших направляющих. Примерно вот так:

Все готово!

Сейчас у нас все настроено для работы двух брейкпоинов. Есть раздельные анимации внутри клипов под разные разрешения, и есть скрипт, который управляет отображением этих клипов.

Если экспортировать баннер и запустить html файл, то при ширине браузера выше 970 мы будем видеть десктопный клип, а при ширине менее 970 мы будем видеть мобильный клип.

// "this" variable
var thisStage = this;
// Listen of browser change
window.addEventListener("resize", resize, false);

// Function resize()
function resize() {
// Speshial settings
var w = window.innerWidth * window.devicePixelRatio;
stage.canvas.width = w;
stage.canvas.height = 250 * window.devicePixelRatio;
stage.scaleX = stage.scaleY = window.devicePixelRatio;
stage.canvas.style.width = window.innerWidth + "px";
stage.canvas.style.height = "250px";

// Border settings
stage.canvas.style.border = "1px solid #000000";
stage.canvas.style.boxSizing = "border-box";
// Position on stage
thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.center_mob.x = Math.floor(w / 2 / window.devicePixelRatio);

if((w/window.devicePixelRatio)>969){
thisStage.center_mob.alpha = 0;
thisStage.center.alpha = 1;
}
if((w/window.devicePixelRatio)<970){
thisStage.center_mob.alpha = 1;
thisStage.center.alpha = 0;
}

thisStage.bg.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.bg.scaleX = w / window.devicePixelRatio;

thisStage.mainBtn.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.mainBtn.scaleX = w / window.devicePixelRatio;
}

// One time calling function
resize();

Исходники с компилированными файлами можно найти здесь – исходник Level 1.

Мы разобрались как сделать растяжку с двумя и более брейкпоинтами, научились как включать и выключать контент на разных разрешениях. Теперь пришло время поговорить о более сложном позиционировании контента на растяжке.

Если вы сталкивались с разными бренд-буками у разных компаний, то вы могли видеть в них достаточно жесткие требования по отступам у тех или иных элементов. Не редкость увидеть строгое размещение логотипа в правом верхнем углу с отступом в 10-20 пикселей от правого верхнего угла. При этом контент должен свободно располагаться по центру экрана.

В таких ситуациях уже не подойдет делать контент центрально расположенным, т.к. отступы правой стороны будут нарушены. Для подобных ситуаций мы рассмотрим скрипты с точки зрения управления точным расположением элементов.

Для дальнейшего изучения мы возьмем исходник из Уровня 0. Скачайте материалы по ссылке и давайте начинать.

Работая с растяжками стоит понимать, что их контент (как правило) состоит из трех частей. Левая, центральная и правая части контента. Если посмотреть на общую схему, работы растяжки, то она выглядит следующим образом:

На этой схеме мы видим три раздельных блока. Они же по своей сути будут являться отдельными movie clip, положением которых мы будем управлять.

Так же стоит обратить внимание, что задний фон и кликовая кнопка нашей растяжки все так же тянутся на всю ширину окна и заполняют все видимое пространство.

В зависимости от задачи у вас может быть как три независимые movie clip, так и меньше и больше. К примеру, если в вашем баннере есть только логотип в правой части баннера с жестким отступом в 20 пикселей, а весь остальной контент располагается по центру, то movie clip будет два.

Перед тем как мы приступим к разработке растяжки, стоит разобраться с важным вопросом о точке, относительно которой будут работать скрипты, заставляющие элементы растяжки двигаться по мере растяжения баннера.

Итак, все movie clip растяжки имеют определенную ширину, и скрипт, который будет управлять расположением растяжки, будет обращаться к определенной точке данного movie clip. Если мы вспомним, то при создании movie clip мы с вами выбирали ancor point. Этот ancor point говорит нам о том, где именно будут располагаться координаты отсчета внутри данного movie clip. К примеру, если выбран центральный ancor point, то координаты будут строго по центру movie clip, если справа сверху, то и координаты будут считаться от правого верхнего угла.

Посмотрим примеры:

Наша же цель, это каким то образом указать movie clip, что «некая» точка является местом взаимодействия со скриптом. Для этих целей мы выделим movie clip, затем включим инструмент трансформации клавишей «Q», и увидим небольшую белую точку, которую курсором мыши можем передвигать в любое место. Именно данная точка выступает точкой отсчет для данного movie clip при работы со скриптами.

Давайте нарисуем логотип. Для этого удалим синий квадрат, и на его месте создадим дизайн простейшего логотипа прямоугольной формы. Затем поместим его его в movie clip и разместим его с правой и верхней стороны баннера с отступами в 30 пикселей.

Так же поставим этому movie clip точку отсчета для скриптов в правый верхний угол.

Почему мы выставили именно правый верхний угол? Все просто. В скриптах нам известно только расстояние всего открытого окна браузера. Соответственно от всей ширины нам всего лишь нужно будет отнять 30 пикселей и мы получим точное расположение как нам нужно.

Последний штрих – дать название для нашего логотипа. Выделим его, перейдем в панель «Properties» и зададим «Label» с названием «logo_mc».

Все наши подготовительные работы закончены. Можем переходить к работе со скриптами управления.

Перейдем в скрипты. Для этого выберем слой со скриптами и нажмем F9. Давайте найдем строку «thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);» и скопируем ее.

Вставим дубликат этой строки ниже и вместо названия центрального movie clip «center» напишем название нашего movie clip с логотипом «logo_mc». Далее посмотрим, на то, что находиться в скобках «(w / 2 / window.devicePixelRatio)». Здесь сказано, что все видимое пространство нам нужно делить на два. И это у нас будет выходить «центр» видимого пространства. Нам же нужно расположить логотип с отступом в 30 пикселей от правого края. Для этого перепишем код в скобочках на следующий: ((w - 30) / window.devicePixelRatio). Итак, итоговый скрипт у нас для позиционирования логотипа выглядит следующим образом:

thisStage.logo_mc.x = Math.floor((w - 30) / window.devicePixelRatio);

Теперь у нас есть две строки в коде, которые отвечают за позиционирование двух movie clip в баннере.

Поздравляю! Теперь вы можете отдельно управлять двумя объектами раздельно.

Чек-лист для создания нового, отдельно управляемого объекта на сцене:

1. Создать дизайн объекта
2. Поместить дизайн в отдельный movie clip
3. Указать точку позиционирования для movie clip
4. Дать movie clip название Label в панели «Properties»
5. Дописать в скрипте дополнительную строку с позиционированием объекта

В качестве тренировки давайте создадим еще один movie clip на сцене. Это будет некая текстовая информация, которая должна располагаться в левой нижней части сцены и иметь отступ в размере 5% от края баннера.

Здесь поясним только пункт 5. Нам нужно объекту текста дать расположение в виде 5%. Для этого нам нужно все известное расстояние в переменной «w» (а оно фактически равно 100%) умножить на 0,05. Следовательно там мы получаем нужные нам 5%.

Все, можно экспортировать баннер и запускать html файл.

// "this" variable
var thisStage = this;
// Listen of browser change
window.addEventListener("resize", resize, false);

// Function resize()
function resize() {
// Speshial settings
var w = window.innerWidth * window.devicePixelRatio;
stage.canvas.width = w;
stage.canvas.height = 250 * window.devicePixelRatio;
stage.scaleX = stage.scaleY = window.devicePixelRatio;
stage.canvas.style.width = window.innerWidth + "px";
stage.canvas.style.height = "250px";

// Border settings
stage.canvas.style.border = "1px solid #000000";
stage.canvas.style.boxSizing = "border-box";

// Position on stage
thisStage.center.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.logo_mc.x = Math.floor((w - 30) / window.devicePixelRatio);
thisStage.text_mc.x = Math.floor((w * 0.05) / window.devicePixelRatio);

thisStage.bg.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.bg.scaleX = w / window.devicePixelRatio;

thisStage.mainBtn.x = Math.floor(w / 2 / window.devicePixelRatio);
thisStage.mainBtn.scaleX = w / window.devicePixelRatio;
}

// One time calling function
resize();

Исходники можно найти здесь – исходник для Level 2

После создания, вышеуказанных элементов на отдельных слоях, мы получим следующую структуру html баннера.

Нужно понимать, что все movie clip, которые вы двигаете с помощью скрипта – могут иметь внутри анимацию. Поэтому всегда лучше собирать все анимацию в фиксированном размере, что бы точно знать, что вы все корректно распределили по сцене. И только после полной уверенности в этом разделяйте анимацию на разные movie clip.

Не забывайте, что в мире уже есть мониторы 4к и более. Это крайне широкие экраны, поэтому надо быть предельно аккуратным при создании раздельных movie clip с собственным позиционированием по сторонам баннера. Не редкость ситуация, когда у растяжки на сайте – нет ограничений на максимальную ширину и как следствие, на больших мониторах вы будете получать абсолютно нечитаемый рекламный баннер. Если я не могу проверить пример растяжек на площадке, или в ТТ нет ограничения на максимальную ширину, то я всегда делаю растяжку с центральным размещением информации.

Чем больше брейкопинтов вы создадите, то тем больше у вас будет весить экспортный js-файл. Дело в том, что когда вы дублируете анимацию для нового брейкпоинта – вся эта анимация увеличивает вес баннера. Вы можете легко оказаться в ситуации, когда у вы просто не сможете ужать контент баннера. Лично я почти всегда использую два брейкпоинта - мобильный и десктопный.

Надеюсь материал был вам полезен. Пользуйтесь, пробуйте, оставляйте обратную связь. Я всегда готов ответить на вопросы в группе ВК (ссылочка в шапке сайте).

Вернуться к списку статей...