Добавление и настройка виджетов «Слайд-шоу» в Adobe Muse

Добавление и настройка виджетов «Слайд-шоу» в Adobe Muse

Из этой статьи вы узнаете, как добавлять, настраивать и проверять виджеты слайд-шоу «Полноэкранный режим» и «Миниатюры» в Adobe Muse.

Виджеты «Слайд-шоу» в Adobe Muse — это интерактивные виджеты, которые работают только с изображениями. Аналогично виджету «Панель с вкладками», при нажатии контейнера миниатюр, отображается соответствующее главное изображение в другом, более крупном, контейнере на странице.

Adobe Muse поддерживает следующие типы виджетов «Слайд-шоу»:

  • Основной: этот виджет состоит из большого контейнера, в который можно добавить изображения, а под контейнером добавить подпись. В области подписи также доступны кнопки перехода вперед и назад, а также поле для номера текущего слайда.
  • Пустая: этот виджет похож на «Основной», но с пустыми контейнерами.
  • Полноэкранный режим: если перетащить этот виджет и разместить его на холсте «Дизайн», он отобразится во весь экран. По умолчанию кнопки перехода вперед и назад, а также поле для номера текущего слайда представлены в маленьком контейнере в левом верхнем углу страницы.
  • Лайтбокс: этот виджет затемняет все области страницы, кроме слайд-шоу или элемента галереи, которые в настоящий момент активны на странице. «Лайтбокс» — один из самых часто используемых виджетов «Слайд-шоу», поскольку он позволяет мгновенно сфокусироваться на активном элементе галереи.
  • Миниатюры: этот виджет похож на виджет «Композиция», однако он содержит миниатюры, отображающиеся слева от области галереи. При нажатии миниатюры отображается соответствующее изображение в области галереи.

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

Danielle Beaumont

Добавление виджетов слайд-шоу «Миниатюры» на страницу

Слайд-шоу можно добавлять непосредственно на страницы, однако в этом примере мы рассмотрим процесс вставки виджета слайд-шоу «Миниатюры» в область содержимого виджета «Панель с вкладками». Чтобы добавить непосредственно слайд-шоу, выполните следующие действия:

Откройте Adobe Muse. На экране приветствия выполните одно из следующих действий

  • Нажмите «Создать новый», чтобы добавить виджет «Слайд-шоу» на новый создаваемый сайт.
  • Нажмите «Открыть», затем откройте существующий файл MUSE в месте, где требуется добавить виджет. Дважды нажмите и откройте страницу, на которую требуется добавить виджет «Слайд-шоу».

Откройте библиотеку виджетов, выбрав «Окно» > «Библиотека виджетов» и разверните раздел «Слайд-шоу». Выберите нужный виджет в этом списке. Например, из списка выберите виджет слайд-шоу «Миниатюры» и перетащите его на страницу «Дизайн».

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

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

Для удаления миниатюр выделите содержимое заполнителя (фрейм изображения и текстовый фрейм в области содержимого) и удалите его.

Настройка виджета слайд-шоу «Миниатюры» на панели параметров

Можно настроить параметры виджета «Слайд-шоу», используя панель параметров для конкретного виджета. Далее представлена информация о том, как включить автоматическое воспроизведение, эффекты перехода, перелистывание (для устройств с сенсорным экраном) и др.

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

Отключите параметры «Подписи» и «Счетчик», чтобы остались только триггер-кнопки миниатюр и большой целевой контейнер. Просмотрите параметры и измените их следующим образом:

  • Новое главное изображение: заполнить фрейм с сохранением пропорций
  • Новая миниатюра: заполнить фрейм с сохранением пропорций
  • Переход: выцветание
  • Скорость перехода: 0,5 секунды
  • Автоматическое воспроизведение: не включено
  • Возобновить через: включено
  • Воспроизвести однократно: не включено
  • Перемешать: не включено
  • Разрешить перелистывание: включено
  • Лайтбокс: включено
  • Во весь экран: включено
  • Автолайтбокс: не включено
  • Миниатюры произвольной формы: включено
  • Первый: не включено
  • Назад: включено
  • Далее: включено
  • Последний: не включено
  • Подписи: включено
  • Счетчик: включено
  • Кнопка «Закрыть»: не включено
  • Миниатюры: включено
  • Показать элементы лайтбокса при редактировании: включено
  • Редактировать вместе: включено

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

Добавить изображения: нажмите на значок папки для поиска и выбора изображений для отображения.

Новое главное изображение: определяет способ отображения большой фотографии в целевом контейнере.

  • Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
  • Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.

Новая миниатюра: определяет способ отображения миниатюры фотографии в контейнере триггера.

  • Уместить содержимое с сохранением пропорций: файл фотографии сохраняет исходный размер, даже если он не соответствует размеру целевого контейнера; часть контейнера может оставаться пустой, если изображение не умещается в нем.
  • Заполнить фрейм с сохранением пропорций: размер файла изображения изменяется в соответствии с пропорциями целевого контейнера; часть фотографии может быть обрезана.

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

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

Скорость перехода: продолжительность воспроизведения анимации в секундах.

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

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

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

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

Раздел «Составные элементы»:

  • Первый: когда этот параметр включен, отображается кнопка «Первый».
  • Назад: когда этот параметр включен, отображается кнопка «Назад».
  • Далее: когда этот параметр включен, отображается кнопка «Далее».
  • Последний: когда этот параметр включен, отображается кнопка «Последний».
  • Подписи: когда этот параметр включен, отображаются подписи фотогалереи.
  • Счетчик: когда этот параметр включен, отображается счетчик фотогалереи.
  • Кнопка «Закрыть»: когда этот параметр включен, отображается кнопка «Закрыть».

Миниатюры: когда этот параметр включен, отображаются триггер-кнопки миниатюр.

Раздел «Редактирование»:

  • Показать элементы лайтбокса при редактировании: при включенном параметре «Лайтбокс» области целевых объектов отображаются по умолчанию, когда на странице выбран соответствующий триггер. Вы можете включить этот параметр при создании макета, чтобы видеть все целевые объекты. Этот параметр не влияет на отображение слайд-шоу при предварительном просмотре страницы или ее просмотре в браузере. Если параметр «Лайтбокс» не включен, этот параметр недоступен.

Обратите внимание, что параметр «Показать элементы лайтбокса при редактировании» включен, только если выбран виджет слайд-шоу «Лайтбокс».

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

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

Параметры «Лайтбокс» и «Полноэкранный режим» отключены для слайд-шоу «Полноэкранный режим».

Параметр «Полноэкранный режим» можно включить только для виджета слайд-шоу «Полноэкранный режим».

📎📎📎📎📎📎📎📎📎📎