Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Улучшенные функции Adobe Muse CC 2015.1 | Февраль 2016 г.

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

При переходе между состояниями поддерживается изменение скоса и свечения.

Общие сведения о состояниях объектов

Состояние объекта определяет его внешний вид при взаимодействии пользователя с этим объектом. К таким взаимодействиям относятся наведение курсора на объект (также называемое «курсор над кнопкой»), нажатие и т. д. Во время взаимодействия объект переходит из состояния по умолчанию (стандартного), в другое состояние. Adobe Muse позволяет сделать такие переходы плавными.

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

Какие состояния объектов существуют в Adobe Muse?

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

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

Назначение состояний объектам

По умолчанию каждому объекту назначаются все четыре состояния. Однако в Adobe Muse каждое состояние можно настроить по отдельности на панели Состояния.

Примечание.

Работая с состояниями, важно контролировать выбранные объекты с помощью индикатора выделения. Это необходимо, поскольку Adobe Muse позволяет редактировать стандартное состояние объекта по умолчанию. То есть если вы редактируете активное состояние объекта A, выбираете объект B, а затем снова выбираете объект A, он открывается в стандартном состоянии. Таким образом, прежде чем приступить к работе с объектом, необходимо каждый раз выбирать нужное состояние на панели «Состояния».

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

Чтобы настроить или отредактировать состояние объекта, выполните следующие действия:

  1. Откройте панель Состояния, нажав Окно > Состояния.
  2. Выберите объект, состояние которого необходимо изменить.
  3. Выберите состояние, которое требуется изменить, и продолжите оформление объекта.
  4. На панели «Состояния» нажмите «Переход» и выберите параметр «Выцветание». Задайте следующие параметры для перехода: «Задержка», «Длительность» и «Скорость». При нажатии кнопки «Переход» объект перейдет из одного состояния в другое согласно установленным настройкам.
При оформлении объекта состояния также можно выбирать с помощью раскрывающегося меню в индикаторе выделения.

Назначение состояний виджетам и их контейнерам

  1. Закройте браузер и вернитесь в приложение Adobe Muse.

  2. Нажмите виджет один раз, чтобы выделить меню целиком. Нажмите кнопку «food» еще раз для выбора пункта меню «food». Если вы случайно щелкнули меню третий раз и в индикаторе выделения отображается слово «Подпись», нажмите клавишу ESC, чтобы перейти на один уровень вверх по иерархии (в индикаторе выделения должно быть указано «Пункт меню»).

    Поскольку на панели «Параметры» включена настройка «Редактировать вместе», любые изменения внешнего вида этого пункта меню «food» будут автоматически будут применяться ко всем остальным кнопкам виджета «Горизонтальное меню». Это позволяет значительно ускорить процесс редактирования. Меняйте значение по умолчанию для параметра «Редактировать вместе» («Включено») только в том случае, если в соответствии с дизайном сайта кнопки не должны быть разными.

    Установка элемента меню для индикатора выделения
  3. Откройте панель «Состояния», выбрав соответствующую вкладку или пункт меню Окно > Состояния.

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

    Во время предварительного просмотра сайта можно увидеть, что состояние «Стандартное» соответствует внешнему виду кнопки меню при первой загрузке страницы, когда пользователь еще не работал с меню. Если посетитель сайта наведет указатель мыши на кнопку, ее внешний вид изменится на тот, который задан для состояния «Курсор над кнопкой». Если посетитель нажмет кнопку, к ней будут применены стили, заданные для состояния «Нажата кнопка мыши». Наконец, если посетитель находится на текущей странице сайта (например, если был выбран пункт меню «about» (О сайте) и посетитель по-прежнему просматривает соответствующую страницу), внешний вид кнопки будет соответствовать стилю, который задан для состояния «Активное». Это последнее состояние не является обязательным, однако в некоторых случаях его рекомендуется использовать. Например, чтобы посетители сразу могли определить, на какой странице сайта они находятся.

    Состояния кнопки
  4. На панели Состояния последовательно нажимайте на каждый элемент списка: «Стандартное», «Курсор над кнопкой», «Нажата кнопка мыши» и «Активное». Обратите внимание, что при выборе каждого состояния внешний вид виджета «Меню» на странице обновляется в соответствии с настройками по умолчанию, заданными для каждого из состояний.

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

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

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

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

    Задержка: время задержки при переходе от одного состояния к другому (в секундах).

    Длительность: длительность перехода.

    Скорость: в данном параметре можно установить линейный переход или задать переход к следующему состоянию с переменной скоростью. Можно также выбрать параметры Замедление, Ускорение или Замедление/ускорение. Переход объекта в другое состояние будет происходить с замедлением или ускорением, согласно установленным вами настройкам.

  7. Снова выберите пункт Файл > Предварительный просмотр сайта в браузере, чтобы просмотреть изменения стандартного состояния кнопки (ее внешний вид при первой загрузке меню). Все кнопки, за исключением той, которая соответствует текущей странице, теперь стали красного цвета. При наведении указателя мыши на каждую из кнопок их цвет меняется на серый (цвет по умолчанию для состояния «Курсор над кнопкой»), благодаря чему достигается эффект наведения указателя мыши на кнопку.

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

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет