Меню курса в модальном режиме своими руками в CourseLab
23.11.2021
Андрей Матюков
Делаем на мастер-слайде кастомную карту курса, всплывающую поверх всех объектов на кадрах
Всплывающее поверх всего меню легко сделать в Articulate Storyline. Для этого надо просто разместить нужные объекты на дополнительном слое мастер-слайда. Но не так очевидно это реализовывается в редакторе CourseLab. Ведь нет слоёв. И чтобы не городить на каждом кадре/слайде дубликаты всех объектов кастомного меню с кнопкой его вызова, смотрим порядок действий, который позволяет сделать единственное меню на мастере с одной кнопкой вызова.
Подготавливаем само меню на мастер-слайде
В данном случае я использую карту курса, состоящую из нескольких объектов, включая полупрозрачную подложку из стандартной автофигуры, которая обеспечит меню «модальность». Роль кнопок перехода между слайдами будут играть маркеры на пути от старта до финиша.
Объединяем все эти объекты в группу
Кроме того, указываем всем этим объектам невидимость и скрываем их в режиме редактирования, чтобы не мешали при вёрстке кадров.
Размещаем кнопку вызова меню
Это просто картинка с действием по клику — показ группы.
До этого момента всё привычно, но как же заставить это сборное меню появляться поверх всех объектов на рабочих кадрах? Вот тут самое интересное!
На события слайдов «вешаем» z-индексы объектов меню
Как видите, дублировать сами объекты меню на кадры не придётся. Единственное — нужно скопировать набор строк на событие «Начало показа» каждого слайда — не кадра.
Объекты обычных кадров имеют z-индекс (приближенность к нам «от экрана»), начиная с 1000, поэтому можно смело указывать данные индексы для объектов самодельного меню, начиная с 5000.
Спасибо за консультацию по этим тонкостям Вячеславу Щинову из WebSoft.
Подобным образом можно вынести «на самый верх» и кнопку вызова меню.
Скрываем меню при переходе на другой слайд
Не забываем в событиях кнопок перехода на слайды указывать действия скрытия созданного меню, чтобы не перейти на слайд с уже раскрытым меню.
Проверяем
Этот тестовый курс состоит из 6 слайдов, каждый из которых включает по 2 кадра. В заголовке подписаны номера слайдов и кадров, чтобы было понятно, что переходы осуществляются.
На каждом кадре размещена уникальная картинка, поверх которой будет открываться самодельное меню. Как видно, на скрине ниже, никаких лишних объектов или действий на «рабочих» кадрах нет.