Автор: Акшура
Недавно показывал красивый прототип, делал к нему небольшой опрос и там в комментах получил ряд вопросов типа: как сделано то, как делать вот это...
Вопросы разной степени сложности, но я решил ответить на все - по отдельной инструкции на каждый вопрос, начав создавать таким образом некое подобие "библиотеки знаний", чтобы потом можно было просто давать ссылку на часто повторяющиеся базовые вопросы по проектированию в Axure RP.
---------------------------------------------------------------------
Как сделать прототип на всю ширину экрана?
Вопрос кажется простым лишь на первый взгляд... Когда нужно просто растянуть однотонную заливку или фотку на всю ширину экрана - это пара кликов и готово. А если нужно на всю ширину растягивать видео с автозапуском или контентный блок из двух половинок с фоном разного цвета/содержания? Тут уже понадобятся нетривиальные знания Axure, и в данной статье я расскажу об обоих случаях.
Перед началом инструкции давайте определимся с основным положением вещей: когда мы говорим про "растянуть прототип на всю ширину", то подразумевается растяжка каждого отдельного блока внутри прототипа, который отвечает за визуальный фон, а не самого прототипа как таковой сущности. То есть в Axure нет отдельной секретной кнопки или функции, растягивающей прототип на всю ширину экрана - всё только ручной работой над каждым отдельным элементом.
Итак, переходим к делу...
I. Как сделать прототип на всю ширину с простыми элементами
Под простыми элементами в данном случае мы понимаем:
а) растяжку однотонной заливки
б) растяжку статичной картинки или слайд-шоу
Возьмём пример выше и сделаем прототип, где на всю ширину экрана будут тянутся фотка, однотонная заливка и слайд-шоу
1. выберем для нашей страницы глобальное выравнивание по центру и белый фон:
2. далее создадим 3 динамические панели:
3. у первой дин.панели зададим картинку на фон, выровняем её по центру и выберем режим расположения "Stretch to Cover", чтобы всегда заполнять картинкой всю площадь дин.панели:
4. у второй и третьей дин.панели просто выставим цвет заливки в чёрный:
5. теперь зададим у всех дин.панелей ширину в 1200px, а высоту в 600px. Ширина выбрана исходя из того, что мы, например, работаем с макетом в 1200px, а высота выбрана произвольно.
6. размещаем первую дин.панель в координаты x: 0 y: 0
7. вторую дин.панель размещаем в координаты x: 0 y: 600
8. третью дин.панель размещаем в координаты x: 0 y: 1500
ВНИМАНИЕ! Пункты 5-8 абсолютно не важны для решения озвученной задачи - размещайте как хотите. Тут просто указываю координаты для точности воспроизведения.
Если на данном этапе вы откроете свой прототип в preview (F5 или CMD+P), то увидите белый фон слева и справа от наших дин.панелей - это основной фон прототипа:
9. клик правой кнопкой мыши на первую дин.панель и в контекстном меню выбираем пункт "100% wide":
Повторяем эту операцию для каждой дин.панели и получим вот такой результат:
Разнообразим наш прототип, сделав из третьей дин.панели слайд-шоу, кадры которого будут также тянуться на всю ширину экрана.
10. размещаем третью дин.панель в координаты x: 0 y: 1200
11. создаём внутри дин.панели ещё два "слайда":
12. чтобы увидеть смену созданных слайдов, зададим действие Set Panel state на событие страницы OnPageLoad:
Что ещё? Да ничего больше. На самом деле, эти шаги с 10 по 12 были лишь для того, чтобы вы визуально увидели смену слайдов и их растягивание на всю ширину экрана. Сама же "растяжка" была задана нами ещё в п.9 выше и действует она для всех слайдов этого слайд-шоу.
Ссылка на исходник.
II. Как сделать прототип на всю ширину со сложными элементами
В этой части разберём, как растягивать видео фон на всю ширину экрана.
Проблема тут в том, что если вы просто вставите видео в дин.панель с включённой опцией "100% Wide (browser only)", то ничего не произойдёт - видео так и будет фиксированного размера, хотя сама дин.панель будет растягиваться на всю ширину экрана. Как это обойти?
1. вставляем inline frame во вторую дин.панель файла, с которым работали выше:
2. вставляем ссылку на видео вот так: https://www.youtube.com/embed/03BnwgWNzeo?autoplay=1&rel=0&autohide=1&controls=0&showinfo=0&loop=1&volume=0&mute=1
/embed/ - в ссылке, чтобы видео было именно как встроенное на страницу
autoplay=1 - чтобы видео запускалось автоматически при загрузке страницы
controls=0 - чтобы автоматически скрывать контролы видео
showinfo=0 - чтобы автоматически скрывать инфу
volume=0&mute=1 - чтобы видео запускалось без звука
3. задаём размер inline frame с видео 1200px по ширине и 800px по высоте. У дин.панели #2 также изменим высоту на 800px, т.к. иначе мы не увидим, как видео растягивается на всю ширину, потому что высоты в 600px не достаточно для правильной пропорции 16х9.
4. размещаем inline frame в координаты x: 0 y: 0 (внутри второй дин.панели, конечно)
Теперь возвращаемся на страницу и тут самое главное... Нужно понять в общем, как это работает!
Дин.панель #2 это контейнер, у которого есть свойство "цвет/заливка фона", а внутри этого контейнера могут быть разные объекты со своими свойствами. Поэтому когда мы выбираем у дин.панели опцию "100% Wide (browser only)", то она влияет лишь на свойства контейнера, но не его содержимого.
Поэтому, чтобы растянуть объект, находящийся внутри дин. панели, на всю ширину экрана, нам нужно высчитать: сколько пикселей по ширине объекту не хватает, чтобы заполнить всю ширину экрана, и добавить это кол-во к его текущей ширине.
Для этого нам нужно, конечно же, использовать логические условия, но чтобы написать их правильно, нужно сначала понять, что при ширине видео равной ширине макета (в нашем случае это 1200px), то правило нужно писать только для случаев, когда ширина экрана больше 1200px по ширине, а для всех остальных случаев (когда ширина экрана меньше 1200px по ширине) видео и так будет занимать всю ширину экрана.
В общем, наше главное условие должно звучать так: Если ширина окна браузера больше 1200px, то делай... - и в Axure это выглядит так:
Когда вы воспроизведёте этот сценарий, то в правой панели возле Case 2 вы увидите Else If вместо If на моём скриншоте... Чтобы сделать как у меня, нужно кликнуть правой кнопкой мыши на Case 2 и выбрать пункт Toggle IF/ELSE IF:
Далее прописываем действия, для придания нашему видео контейнеру нужной ширины, в зависимости от фактической ширины окна браузера.
5. задаём ширину inline frame равной ширине окна браузера с помощью параметра "Window.Width":
После этого на preview вы увидите, как видео становится шире и уходит за правую границу экрана, но слева от видео остаётся чёрный отступ. Чтобы избавиться от него нам нужно сместить видео к левой границе окна браузера.
6. используем команду Move, чтобы сместить inline frame к левой границе экрана:
Тут подробнее:
а) команду Move мы ставим над командой Set size, т.к. для перемещения inline frame мы используем в расчётах параметр target.width (ширина перемещаемого объекта) и этот параметр нужен нам в исходном значении, то есть ДО его изменения с помощью команды Set size.
б) команду Move мы используем в режиме By (вместо To), потому что мы указываем на сколько нам нужно сместить inline frame.
в) разберём функцию в поле X: -[[(Window.width-target.width)/2]]
(Window.width-target.width) - высчитываем разницу в пикселях, между шириной экрана и шириной нашего inline frame (тут можно было бы указать и абсолютное значение ширины inline frame в 1200px, но лучше указывать относительное с помощью параметра target.width, т.к. в процессе работы вы можете изменить ширину inline frame и тогда пришлось бы переделывать формулу
/2 - делим на 2, чтобы вычислить часть отступа именно с левой стороны (вы же помните, что у нас весь прототип выравнивается по центру, а значит отступы на больших экранах будут добавляться слева и справа от объектов)
-[[ ]] - квадратные скобки это правило написания функций в Axure RP, а минус перед ними это чтобы задать отрицательное смещение inline frame по оси X
Вроде всё. Проверьте на preview и вы увидите, как видео растягивается на всю ширину экрана.
Ссылка на исходник.
P.S. Маленькая подсказка!
Если вы обратили внимание на скриншот в пункте 5, то увидели там, что высоту inline frame мы оставили равной 800px. Так вот на больших экранах (например, 1920px) может случиться так, что визуально видео не будет растягиваться на всю ширину экрана - это из-за того, что видео youtube у нас всегда сохраняет пропорции и при большой ширине экрана высота видео останется те же видео 800 px, а чтобы сохранить пропорции видео подгонит ширину до нужной, чтобы видео показывалось нормально, при этому сам frame будет также на всю ширину:
Так вот для таких случаев вам нужно будет добавлять ещё Case 3, Case 4 и т.д., везде прописывая отдельные условия расчёта ширины inline frame для ширины экрана 1600px, 1920px, 2560px.
