Перейти к содержимому
  • Блок 3.3 - Работа со состояниями

    Вы познакомитесь со состояниями в Adobe Muse. Увидите реальные примеры применения этого инструмента. Изучите проблемы и ошибки в применении.

    2 занятий в этой категории

    1. Состояния объектов на сайте

      28 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567ef975ec1aa_3.4.1.mp4.7d61dc121d5e8df416a4b9792d60962b.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

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

      Для этого выберем прямоугольник, создадим его в единственном экземпляре и посмотрим, какие состояния программа предлагает для этого прямоугольника. Для наглядности сделаем заливку, например, оранжевого цвета и в верхнем меню мы видим, что у нас выделен прямоугольник , и доступны все его параметры и характеристики. Как раз здесь, в самом начале, и расположены параметры, которые отвечают за состояние объектов. По умолчанию стоит "Стандартное состояние". Это состояние определяет внешний вид объекта по умолчанию во время загрузки веб-страницы. Оно позволяет определить состояние объекта, когда не выполняется никакое взаимодействие с курсором мыши. Проще говоря, в обычном состоянии, когда курсор мыши никак не касается нашего объекта, это и есть его стандартное состояние. Для того, чтобы нам увидеть, какие еще бывают состояния у объекта, нажимаем на надпись "Стандартное", и раскрывается небольшой список из 4 пунктов, которые мы сейчас и рассмотрим. 

      Первое состояние - стандартное. О нем мы уже поговрили. Второе состояние - курсор над кнопкой. Оно позволяет изменять состояние объекта, когда наводится курсор мыши. Для получения доступа к этим настройкам, мы кликаем левой кнопкой мыши на объекте, и видим, что надпись поменялась со "Стандартного" на "Курсор над кнопкой". Далее мы можем изменять любые параметры данного прямоугольника, и это будет значить, то мы изменяем параметры именно для состояния "Курсор над кнопкой".

      Далее для того, чтобы зайти в меню "Состояния", мы нажимаем на эту надпись и видим, что автоматически у нас изменилось состояние и нажата кнопка мыши. Это следующее состояние объекта.Оно определяет оформление объекта,когда посетитель нажимает на нем кнопку мыши и не отпускает ее. Мы также можем выбрать здесь это состояние и отредактировать его, например, нажмем красный. Здесь мы видим,что мы редактируем состояние "Нажата кнопка мыши".

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

      Вот так работают состояния в программе Adobe Muse.  Теперь зайдем в режим Дизайн. У нас для каждого объекта есть 4 состояния: "стандартное", "курсор над кнопкой",  "нажата кнопка мыши", "активное состояние". Используя эти состояния, мы можем добиваться некой интерактивности на сайте при взаимодействии сайта с пользователем.

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

      • 3 комментария
      • 502 просмотра
    2. Примеры использования состояний

      29 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567ef9dfde221_3.4.2.mp4.fe053e731ed9bae92e9b0d259f299600.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Первым делом мы всегда редактируем состояние объекта "Стандартное". Редактируя это состояние, автоматически изменятся все сосотояния. То есть если мы задаем заливку синим цветом данному прямоугольнику,то все состояния приобретают эти качества. Следующее, что мы делаем, так это редактируем состояние "Курсор над кнопкой". Давайте изменим его цвет на зеленый и посмотрим, что с ним произошло. При этом сразу изменились 2 состояния: "Курсор над кнопкой" и "Нажата кнопка мыши". Второе состояние зависимо от первого. Но если мы сейчас изменим состояние "Нажата кнопка мыши", например, сделаем его красным, то состояние "Крусор над кнопкой" не изменится. И если мы сейчас изменим состояние "Курсор над кнопкой", например, желтый, то в этом случае состояние "Нажата кнопка мыши" уже не меняется, поскольку мы его редактировали отдельно.

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

      Для изменения состояния объектов, если вы хотите сбросить все настройки, то нажимаем правую кнопку мыши и отменяем все выбранные стили. Таким образом состояния у нас сбросятся до состояния чистого лица. Следующее, что мы можем сделать, так это залить прямоугольник картинкой, например, добавим логотип, поставим его посередине, и это будет "Стандартное состояние". И тут же все состояния стали одинаковыми (с логотипом). Давайте изменим состояние "Курсор над кнопкой" и выберем другое изображение, например, логотип по-меньше. Давайте изменим состояние "Нажата кнопка мыши" и сделаем так, чтобы у нас снова изображение было предыдущих размеров. Теперь, если мы зайдем в окно "Просмотр", то при наведении курсора мыши увидим, как наш логотип изменяет свой размер.

      Давайте снова очистим формат -" Отменить все использованные стили". Теперь просто добавим картинку через "Файл "- "Поместить", выберем логотип digitalmakes.ru .Прямоугольник удалим. Также при изменении состоянии можем использовать и эффекты. Например, можем добавить эффект "Тень." Этот эффект будет в "Стандартном состоянии". Теперь меняем состояние "Курсор над кнопкой". Например, мы хотим, чтобы тень становилась синей при наведении курсора, а при нажатой кнопке становилась желтой. Теперь просмотрим то, что получилось, в браузере. "Файл" - "Предварительный просмотр в браузере". Итак, в "Стандартном состоянии" у нас тень черная, при наведении курсора мыши тень синяя, а при нажатии кнопки мыши тень желтая. Отпускаем кнопку мыши, и тень становится синей, уводим курсор за пределы кнопки, тень снова становится черной. Вот так работают состояния в программе Adobe Muse .

      Мы можем использовать данные состояния для  создания различных кнопок и элементов сайта. Также мы можем изменять для данной кнопки состояния скругления, например, в состоянии "Курсор над кнопкой" выставим для картинки "Скругление"и цветом желтым. То есть при наведении курсора появляется скругление и обводка. Давайте перейдем в браузер, "Файл" - "Предварительный просмотр в браузере". Вот у нас стандартное состояние, а как только мы наводим курсор на данную кнопку, то меняется скругление по краям и появляется желтая обводка. С помощью смены состояний мы можем сделать наш сайт более привлекательным и интерактивным для посетителей.

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

      • 5 комментариев
      • 617 просмотров
×