Как сделать всплывающую подсказку

Как сделать всплывающую подсказку в Adobe Muse?

Не знаете и не представляете как сделать всплывающую подсказку для картинки, которая будет появляться при наведении курсора мыши на нее, или при наведении курсора на любой графический объект, прямоугольник или текст?
В этом видеоуроке, вы узнаете какие инструменты для этого использовать и как их настраивать в программе Adobe Muse. Все инструменты которые мы будем использовать – стандартные, они устанавливаются вместе с программой по-умолчанию. Смотрите это видео.

В этом видео уроке мы рассмотрим, как сделать всплывающую подсказку к картинкам или тексту в программе Adobe Muse.

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

Заходим в нашу любимую программу, поместим здесь какую-нибудь картинку. Например, вот эту видео карту. Картинка немного великовата, я уменьшу её размер через перспективу. Выставлю здесь значение, например, 1000 пикселей, или давайте 500. Для того, чтобы нам создать красивую подсказку, воспользуемся библиотекой мини-приложений, виджетом в разделе «композиции» – «подсказка».

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

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

Выделяю теперь данную картинку с видео картой, нажимаю Ctrl+X, чтобы вырезать её. Выделяю данный триггер и нажимаю Сtrl+V, чтобы вставить картинку в триггер. Всё, данная картинка теперь расположена у меня в триггере данного мини приложения.

Как сделать всплывающую подсказку. Размещение и настройка текста.

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

Перейду в текст, отредактирую его, поставлю 24 шрифт, выберу другой шрифт, например, Regular, отцентрирую его. Теперь я выделю данный целевой объект, добавлю ему заливку, например, серую, и поставлю не прозрачность 30%. Так же добавлю здесь скругления и 1 уголок оставлю. Думаю, можно переместить немного выше. Вплотную к картинке.

Как сделать всплывающую подсказку. Просмотр и корректировка.

Посмотрим, что у нас получилось. Захожу в режим «просмотр», вот наша видео карта, и при наведении курсора мыши на неё у нас появляется такая вот надпись-подсказка. Я бы конечно и этот уголок сделал прямым.

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

Как сделать всплывающую подсказку. Довольствуемся результатом.

Захожу в режим просмотр, вот наша картинка, и при наведении курсора мыши мы видим такое всплывающее сообщение – GTX660. Таким вот нехитрым способом мы можем добавлять всплывающие подсказки в программе Adobe Muse.

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

Пока!

Автор видеоурока
Дмитрий Шаповалов