Виджеты композиции в Adobe Muse

Виджеты Композиции в Adobe Muse

Виджеты Композиции в Adobe Muse

В этом видеоуроке мы рассмотрим раздел библиотеки мини-приложений «Композиции» или просто «Виджеты Композиции«.

Вы увидите, из каких базовых элементов состоят данные виджеты, и что по сути все эти виджеты композиции — есть просто различные настройки одного и того же виджета. Используя различные сочетания настроек, можно из одного виджета получить любой другой из них.

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

Смотрите это видео:

Сегодня в этом видеоуроке мы продолжим и рассмотрим мини-приложение из раздела «Композиции» из стандартной библиотеки мини-приложений Adobe Muse (виджеты композиции).

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

Виджеты Композиции. Пустая композиция.

Давайте сразу возьмем пустую композицию. Разместим ее на сайте. И видите вот такие настройки. Все остальные эти мини-приложения – это вытекающее из вот этой пустой композиции. Более того, если мы сейчас отменим все использованные стили и удалим содержимое мини-приложения, то наша композиция станет совсем пустой.

Состоит она из триггера и целевого объекта. К каждому из таких триггеров привязан один целевой объект. Если мы создаем дополнительно еще один триггер, то к нему будет привязан еще один дополнительный целевой объект. Если мы сейчас настроим цвет данного целевого объекта, выберем, например, оранжевый. Цвет первого целевого объекта сделаем синим, то при переключении вот этих триггеров, у нас будет меняться цвет целевого объекта, т.е. к этому триггеру привязан целевой объекта синего цвета, а к этому триггеру – целевой объект оранжевого цвета.

Виджеты Композиции. Специальные новости.

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

Если мы зайдем сейчас в режим «Просмотр» и посмотрим, как это все работает, то вы увидите, что при наведении курсора мыши, просто меняются данные целевые объекты, в которых расположен текст и картинка – автоматически меняются при наведении курсора мыши.

Виджеты композиции. Делаем «Специальные новости» из «Пустой композиции»

Что нам нужно? Нам нужно сделать тоже самое из нашей пустой композиции. Давайте я сейчас удалю эту пустую композицию. Возьму другую пустую. Размещу ее вот здесь на сайте.  Во-первых, разместим целевой объект немного правее, а наши триггеры я не буду сейчас делать плоскими и длинными, просто размещу их сбоку вот такими квадратиками. Будем делать нечто подобное. Давайте закроем библиотеку мини-приложений, чтобы она не мешала, и сделаю этот целевой объект немножко поменьше размером. Вот таким, к примеру. У нас что-то похожее уже получилось.

Виджеты композиции. Настройка первого триггера и целевого объекта.

Теперь я возьму текст из первого триггера – текстовый фрейм, скопирую и вставлю в этот триггер. Выделяю сам триггер и нажимаю «Ctrl+V». У нас автоматически подстраивается длина этого триггера. Беру теперь второй текстовый фрейм и нажимаю «Ctrl+V». Для того чтобы вы не думали, что я просто беру и вставляю из этого мини-приложения все эти характеристики вот сюда, давайте я создам для третьего блока, растяну его вручную и вставлю сюда текстовый фрейм и напишу здесь: «Привет», чтобы вы не думали, что я копирую все настройки отсюда. Будет работать все точно также.

Теперь я точно также для первого триггера в целевой объект скопирую то, что в целевом объекте для вот этого первого триггера. Нажимаю «Ctrl+C», выделяю целевой объект и нажимаю «Ctrl+V». У нас появляется вот эта информация в целевом объекте нашего первого триггера.

Виджеты композиции. Настройка второго триггера и целевого объекта.

И теперь переходим ко второму триггеру. Здесь выделяем второй триггер. У нас показывается целевой объект, который привязывается ко второму триггеру. Я беру информацию отсюда, нажимаю «Ctrl+C», выделяю второй триггер в первой композиции и нажимаю «Ctrl+V».

Для того чтобы показать, что все работает и без этого, я просто вставлю здесь прямоугольник, залью его каким-нибудь цветом и вставлю точно также какой-нибудь текст рядом. Я не знаю, что написать, поэтому возьму текст вот отсюда – просто текст. Допустим, у нас в этом целевом объекте расположен вот такой вот текст. Чуть-чуть подкорректирую его, так получилось, что у меня увеличился размер по третьему триггеру, но это и не важно. Давайте сделаем текст каким-нибудь видимым цветом, например, белым цветом. И перейдем в режим «Просмотр».

Виджеты композиции. Настройки виджета.

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

Виджеты композиции. Просмотр результата. Вывод.

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

Виджеты Композиции. Особенности и совместная работа.

Сейчас мы удалим все эти мини приложения, которые я насоздавал, выберем «Лайтбокс».«Лайтбокс» — это самый любимый всеми виджет из стандартных виджетов программы. И просто нажмем здесь правой кнопкой мыши  на данном мини-приложении, нажмем «Удалить содержимое мини-приложения». Нажмем еще раз правую кнопку мыши и нажмем «Отменить все использованные стили».

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

Виджеты композиции. Особенности виджетов Композиции.

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

Виджеты композиции. Совмещение виджетов Композиции.

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

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

Виджеты композиции.  Просмотр результата.

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

Если я нажму сейчас на триггер второй (триггер синего цвета), то мы увидим еще одну композицию, которую мы размещали внутри целевого объекта для второго триггера (для синего). И внутри этого второго целевого объекта видим еще одно мини-приложение «Композиции».

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

Виджеты Композиции. Выводы.

Мы рассмотрели сегодня мини-приложение «Композиции» из библиотеки стандартных мини-приложений программы Adobe Muse, как вы поняли вот эти все пять мини-приложений — это настройки одного мини-приложения. Настраиваются они вот здесь. Например, можете выбрать «Каскадно», «Разрозненно», «Лайтбокс» и вы получите различную схему работы данного мини-приложения.

На этом я заканчиваю данный урок. Благодарю за то, что досмотрели его до конца. Ставьте лайки, пишите комментарии внизу. Если вам понравилось, подписывайтесь на мой канал. А я прощаюсь с вами, до встречи в следующих видеоуроках!

Смотрите также:

Виджеты Слайд-шоу для сайтаВиджеты Панели Adobe MuseВиджеты меню для сайта

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

Оставить комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: